{"maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"keywords":["material components","material design","typography","font"],"dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"description":"Typography classes, mixins, and variables for Material Components for the web","readme":"","repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"license":"MIT","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"versions":{"0.1.0":{"name":"@material/typography","version":"0.1.0","license":"Apache-2.0","_id":"@material/typography@0.1.0","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb6a77a3ec8747e3ff887dd24cfdf9b40788e5f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.1.0.tgz","integrity":"sha512-fbP150f4uWnt9MkvGlIFCulx0u0g8eASLZK4rOoW7IkvTM14omjSLHbTkGyI6s94CaPmSFzqGAw3RGkuiWtIww==","signatures":[{"sig":"MEUCIAj4kv+FXDeXwowU9C+8NhWgEOPzrzGgHYRbvFqqqUrAAiEA8gJryQbUCqD9gRfZJu4yhB/xMn5Iu1kdFLhed1XnW4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"bb6a77a3ec8747e3ff887dd24cfdf9b40788e5f3","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.1.0","_npmOperationalInternal":{"tmp":"tmp/typography-0.1.0.tgz_1481824441031_0.08193619013763964","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"@material/typography","version":"0.1.1","license":"Apache-2.0","_id":"@material/typography@0.1.1","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb2e3437bd3284d39e9fb91485767ade6b2bd0c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.1.1.tgz","integrity":"sha512-JTmCMXZ+T31E5DjRPozfk9ybcax6Kgn3HrxhNUkc15T3LEGrVtaU4nXgLlcTHHmkqgcZ1xNo1irhQkGCN37dUg==","signatures":[{"sig":"MEUCIQCsATlfT0tstAkIQ8cZ3fgm3aTadSzqpkVYJiNOTKMFhwIgTJyfF4DMroejilhpFMI87TrJ/yiYYHnYMfgGHIQqHPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"fb2e3437bd3284d39e9fb91485767ade6b2bd0c1","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/typography-0.1.1.tgz_1485190186715_0.018828655825927854","host":"packages-18-east.internal.npmjs.com"}},"0.2.0":{"name":"@material/typography","version":"0.2.0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.2.0","maintainers":[{"name":"anonymous","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cbf75df671ba2412b70e269d5efbb9a8d1431db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.2.0.tgz","integrity":"sha512-bpxAi1mtLvvTOkw8kORN/0AH+ocq40N4h2NfBOVKEL8urN8GDjT0pA2EZEuvPefjsRI8N2BvOWbYun1Hed1iXA==","signatures":[{"sig":"MEQCIA7bGuLZk26sR13saGM3nbJ/Zz3zsU0id/b+/OnQW8Q/AiB++QtXo7ShKLAm28LhFQvn+iyZxeYUxlzYoXeDaYZTOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"6cbf75df671ba2412b70e269d5efbb9a8d1431db","scripts":{},"_npmUser":{"name":"anonymous","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/typography-0.2.0.tgz_1487698064867_0.7981862276792526","host":"packages-12-west.internal.npmjs.com"}},"0.2.1":{"name":"@material/typography","version":"0.2.1","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.2.1","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c5ad4868d52f394746e58abc6788caeb2101fc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.2.1.tgz","integrity":"sha512-ynu/oPSm6ke+6razOPckCwrw31AACtCFAxRT+mV4RFWbLVSGW6CWgS38MryZZ5iZ1JG1Ojs6tgU2SIM4LlQVdQ==","signatures":[{"sig":"MEQCIGrnZLWX0Bt/FAH5elt/4gT7gKa1C6XRexH+kCL+uHorAiBlBeHAI4xX2FTLbONPrxsPfNe8MWqs5gvn5P6jgFBlDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"3c5ad4868d52f394746e58abc6788caeb2101fc7","scripts":{},"_npmUser":{"name":"anonymous","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.6.0","_npmOperationalInternal":{"tmp":"tmp/typography-0.2.1.tgz_1492527092308_0.18714861804619431","host":"packages-12-west.internal.npmjs.com"}},"0.2.2":{"name":"@material/typography","version":"0.2.2","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.2.2","maintainers":[{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"ljepsen3541@gmail.com"},{"name":"anonymous","email":"traviskaufman+npm@google.com"},{"name":"anonymous","email":"mail@sgomes.io"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc5f0763ad7d6e5ad5c86c394b360f2b4cf30bb2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.2.2.tgz","integrity":"sha512-QbGML7nD/Hipg4Zpl2b3/NT7A0NqmcCbdd5qqWxVtUnO2lZ0fa7C0sGhDeTjreJEuP59hWvY4xKttk9xTutxlQ==","signatures":[{"sig":"MEQCIH4W51IF1AGawRTW8AytxPCLUKTjw+8L1djJLwrAfjngAiABADnDY47uaNYa2o1lqVbcO7rkSnWeKgQmksxEGjoefQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"dc5f0763ad7d6e5ad5c86c394b360f2b4cf30bb2","scripts":{},"_npmUser":{"name":"anonymous","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/typography-0.2.2.tgz_1494865576668_0.4166434151120484","host":"packages-18-east.internal.npmjs.com"}},"0.2.3":{"name":"@material/typography","version":"0.2.3","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.2.3","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cddf4178098c9c7b4c2e78a33049376b4d6aeb53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.2.3.tgz","integrity":"sha512-mJDcXcNtZY4XAF/idUfT1ULAk6eklWp8kooKXBfk4/s3TqHAcDdCj8iEKW7pvtpKjnHPgfGGh3/ZoTVsp16rhQ==","signatures":[{"sig":"MEUCIQCTYlYZmjCuNdKJYkYp1M8Kg9tTNpvdePTbPD1SEdkhFAIgKBY8C0GDG4QkPxKRNDd0UtNvQHBTIPEgiy3973gbbY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"cddf4178098c9c7b4c2e78a33049376b4d6aeb53","scripts":{},"_npmUser":{"name":"anonymous","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.2.1","_npmOperationalInternal":{"tmp":"tmp/typography-0.2.3.tgz_1500911373216_0.6006243387237191","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@material/typography","version":"0.3.0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.3.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"yiranmao@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"cchao87@gmail.com"},{"name":"anonymous","email":"travis.kaufman@gmail.com"},{"name":"anonymous","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f828c2d3215bfd66c58072709b4260c64125390a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.3.0.tgz","integrity":"sha512-H7YjYKoCJPd6MGWSlhauki+HpS7dQfJ1RQ2hm6Lu6tAu/xi/UqDxfRRYNHhIq79LTILBqqDm+e+LsQVydaFDqg==","signatures":[{"sig":"MEUCIEM5BPkKGI3i5j7kyoBpxvtlxnbSnEKBP2UNcJqj/qYfAiEAiYtAULfUo/xnVGCQAxJoY0SSuoYzsPlx5DXLECm4ARc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"f828c2d3215bfd66c58072709b4260c64125390a","scripts":{},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"7.10.1","_npmOperationalInternal":{"tmp":"tmp/typography-0.3.0.tgz_1502138916543_0.8085971537511796","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/typography","version":"0.28.0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.28.0","maintainers":[{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ae96a852fcd324d61b649adc995326c431fcaea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.28.0.tgz","integrity":"sha512-Cz8XxO/bocChQAM87xTAN9CM31Q04FgW0N4lSQWyha2PAK/LdtfjjWFPZWNZKyQbZJBNjINbE3/PqMnWDTd4cQ==","signatures":[{"sig":"MEQCIDP8MxdkHD27YaydKJGeb9f6wqCZ6TeDDxczpLAwlWdfAiAaWtplpWZbZvLK3etZuYL1etjC20kzo/UmAqqJZrh1pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.1.4","_npmOperationalInternal":{"tmp":"tmp/typography-0.28.0.tgz_1515437719921_0.5456076732371002","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/typography","version":"0.34.0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.34.0","maintainers":[{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"alex.m.sheehan@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb365ecd2eb0d785410c743ec3426a107a687e3d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.34.0.tgz","fileCount":7,"integrity":"sha512-NMFBSdwvUzhRVQQxK6m1dMHB4R1eGKsbkIOiBvsiclUF7bailSXJh8p+ki4YolTOy/jvNTdGlUMqF0W+/ebdtw==","signatures":[{"sig":"MEUCIBQMlpWG8AF4jiZQEc23DIouDmMTuwax0QloztX57TP3AiEAz4JKjDDI4PKMaWt3gBIMuZvk1ZyRTGSiz36zBO/OHqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16445},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"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":{},"_nodeVersion":"8.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.34.0_1522705930464_0.5156201549272406","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/typography","version":"0.35.0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23ad7eb7c9789e69c7c3fa54df8fc311cd7fc4b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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"},"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","_npmUser":{"name":"anonymous","email":"bonniez@google.com"},"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":{},"_nodeVersion":"8.7.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_0.35.0_1524523260794_0.360335562517214","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/typography","version":"0.37.1","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.37.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e14e3ee5418a5170d793cdf7b6a671c8896292c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.37.1.tgz","fileCount":8,"integrity":"sha512-njbRrUwSte+Ag2ZsQxYCZVXqYphm7Wbe1iFCzljRAZEcZJUuKkz30rx3IK5CrmwoIpLxcE2Y/2WoAj8a2Ear0A==","signatures":[{"sig":"MEYCIQDErjQKvQtKaoauwMaINxVLBzM73kojUK/e9dcJi36BvQIhAMWGkRvow4Qa8jg4FClgQUkQe88piiDTdii/o5UlnP1i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQvCCRA9TVsSAnZWagAAV0QP/2xXFGV23zjE/PmU2T94\nN3j/n7Fs5sQ7uioJJKzgbBMVpVfh0wajzas8AgZqDzjEBpx7H/je4GpNNjEw\n5ldta0ZfdGVIlcr4NjRbPe3gpI46qeXouuVyUS/X1ZB655r9ahy1zLgYaDkO\nGNwxUrpuGZayi3XDKX6zOdjfL7jsBJ32t+fvGCtG99zqVjdLN/XbzeD3YLxp\n621u0rqXobJs29We+/hqsE1H9XGqCy1J+xiumwPth5zxKcvJi763xcJojGN9\nD4ZimuRzzl4KMEGXb2Ra6F9MYQQcl+TepREhdUrLZxt1Klw4CALHky5lMGXd\nO6QJjIPkGjPPXoqLAi5ABn3hIJhhO4oQKw/se3inGs+D86csoS2yiZpqFRsO\nUQan9g0pQuo7dniBQbSGwWxvynAl5FKSpEYukkazWZJ8/NyX8iicuDn/oiXd\nsLUVUwgUj8A+DJGEO/hLa2UnR/9PKbuwV0jE//m2iE6UTGr2KgWaz/UkEqPa\nS4dgVQ4HNhrET9NHywaH9lM0pnSbkrskMkTBgqFweKZCQ1T9cmFTxnajaPFb\nC8hzm7FV6POfRQeV+JzQyD8a/ZkCN2pENUlvixBR1hY232cvGlF968OKzAlw\nibzrmk+kgjOpsR6pI60LoPeI2LBv+MEuMcjbMI92YWPwUff5juapmhXo5JFR\nx+f7\r\n=rWlX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.3.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.37.1_1531775938813_0.13362270402930432","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/typography","version":"0.38.0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fff8e4f25c5ef7b0afb5ed414bc700981e431703","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.38.0.tgz","fileCount":8,"integrity":"sha512-g2wigBZXSXwrZtibt6sbPO1eM2IROdo9Jk7ffGIb7GuYGLD92hWWzxusaOg4W/rcsBkWMdfquydRL3Q4HFnS2g==","signatures":[{"sig":"MEYCIQDcE36LDgnaw+bCqprQPm60nBlM3wtwTf045IfV3uUIawIhAN79GK3hb/LKxskkfNp/w/KNFVjKW0XTatOlg1xHcaqa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0V9CRA9TVsSAnZWagAAObkQAItIouShXA0VWrGrt1PS\nt+kKU7mzFlthlIdftodRyqazOZhvDbKwlLewx+gluknIZcMVsZQyKMWMfEOc\nXbWdr0ADhDATPRvofpwL19xGImPnTUcmawH7L9VtQo2F05h46ml1Rr+1kN7J\n/N/FiAF0f/QKgzcjEwQ3YyskO0wqh+k9i8NAhKXz4lhhbNF/bSOIEmLzeV7K\n/S5POTQ4MSl1C1S/4petl1EVeGjbAR8xnBbuuFRERXiJmIBgpHCxOoo9noV0\ndm5wyMJ3GJkTM58fVaju2mBFsMbxYLxDwrwAl/V3poL7vVewLkjcJ9OUfgXI\nRmurx3TSQj0VlktyiKgemlRT05V6P2zsWM65jPDBJg55hpFb9UPJ47icDL2C\nCnTnWFEDNIZwQOVa4oOE2kDz7cYd0XsjoE1k1gqW9INclMl6ACXP02tBMAiJ\nJZ/iVb3hW+bY6Bmx2Fn+MA+C1HelKWUZBFCQNy96d+ohmhQb6AEJsShmz6lL\niaQQAkjd6NKUcaNIN3Q4eZlagW34sf8TX3Iv7NoSvyD4MBZP7Ndy6aq7eSA4\nhQ4QZw/B56GRydlabFvWuxGvZkeTjVfnh0pLYhPLaU2V64lBPVZW51/BEtOY\n/hFG0c0ZLM6i3S7TmT5fODi1QnJKLI/lcTo3FgYng66TJGRPCIYxnxi+aQ0g\nlGjA\r\n=aiaE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"9.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.38.0_1532970365164_0.0660264410472069","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/typography","version":"0.39.0-0","keywords":["material components","material design","typography","font"],"license":"Apache-2.0","_id":"@material/typography@0.39.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea4f050cdc0f2a3da1e7c825e33f0e34575d783","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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"},"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","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"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":{},"_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"}},"0.39.0":{"name":"@material/typography","version":"0.39.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7468673e104609d926528ffe5571cfd44d8c3c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.39.0.tgz","fileCount":8,"integrity":"sha512-S7YTR2mXuAaPvsgX6jyT1YvWQhH2xHWi+SKJvlunoF/Dw6vq6Ud+APmqigHVRPNCcFt4zkbM7C64IxYjjkIApQ==","signatures":[{"sig":"MEUCIQCja37a1uEYc0cLuOUaA1g+eV8eA+GzTPQQiYTcn+/sbAIgWFIRjE9dITKwRI+uAa6X/3+pOB29/P2PmDfq+xkgKm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDd1CRA9TVsSAnZWagAAv4kQAJepiXT0i2dRwYilIXc1\nOsaqGDdTpALE1Sf5CyIPf6fsL+42ZtBMQmfyJsBWTIdH+DzUBiDGWZ/9Fa56\nM57DGTjs/79DVk9780/7QisSSmrire9iteytYYoRsEqAi7P9wRNjfao5AVkq\nAxefXtElGl07DqV4mjX+NNH/Jr0e7R9OnBBNOXxR9lnGIrRktdfEIu4lfdPs\nDf0wOVphXWj/l1/aviqChCVhTM21n/onh/L7iYlW7wQzfe5Wmz9ErS5/JHUm\n5y0PnypopOYXFC73W7cRQcf1VUjT3X6rDvnOdufr3oPiauNqrFyU7HDqBh+t\ngvLWQ0rJQ9j6A91u2cT//Hg5WnR0osa42saYmbwunXI3ssh6rbkxScY9VgV9\n7ilOorMa6oIY3lFMrsi6CxWJmHdmaORTl6x2d+abnPqo+H75ZF7hraUkdsWt\nvYZ5JjuzLsNk5SGexPmJUxf1zB6sTD0/mQRn1S/xK2ujAGDt0x90MIvXtEqW\nsosfHYjj9VjldZmbHZftdZbYqCGZShxPaBEPsJSyhTIX4AwqG7VImCfzPEbc\nDi9ago5QGJznytB5O6BBAH8xOiz1EdQEDv0DXuQxhRXaosB4gAyjhxrfXtqj\nXMERoZHI4ZycVgW/3EeImrYfILb2JKmjssSswrF2hbzTjY0kyEnQMABFXp9R\nODyk\r\n=f+/1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"9.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.39.0_1535391605330_0.05924520637396946","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/typography","version":"0.40.1","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.40.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68ecb767f7c54ca2f4053cccdd1c4a0198e60f9b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.40.1.tgz","fileCount":8,"integrity":"sha512-LkW2tAsId8zGKxGA5VIFXV/D1h4vCHQIuALRMaDpHbNGffgr2ubtJNvCh2EQkm19MTv4igVLEjn1Svh0dXcTpA==","signatures":[{"sig":"MEUCIQCuTskis20MBwvrVIkifdVslFjq+joQn0xbateUaOLmtAIgI1JL4AQolnw6q64D338R0O0RL+LCDcqg1WbiQnSqLhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8PmCRA9TVsSAnZWagAAqXwQAJHHjWBfFcSyKcEZwOFK\n74lqvPNawtevMrnKq5fhWRbGerDVq/zF5+RiQcy2JB0tJkfPlyrlSc2Gb/JM\nOP3oB/gYM8UNFjQuQfvocGT55qnXHkMytZ9rOLq34NMIzY+cVckW2Ql6qdJ0\ni9pWxq8k1iafpiZht6tEifDept935p893cxFvr2DpryxT9AS+xCstmO+yUVJ\nQfZvrGueALqysaB+NY8i6Z1UsTXBNmwId17bLHQNNM/FL8R0xSpLuqtQftEi\njXQv4n+em0oJyhOuekKmwzJ5oZr2SEYUThqO9VMEzqVJ0cE+sDc3ELpTXH0g\ntFzTyLcJpEOwmjPFlAFpiXCgYyY6q0svYXtPjYO6bARPdzpSxuzwgqgZmhoY\nXgYj1mKvyoYuzHTGcn/wV+txY8LbAdEF9UF10EwHA/kCsML7g5uogRKMo/O/\npaZihVM64UjHYP3CLUiEzr8hbd7dc+IDwlhT1GyfcAKYWhAlgxEy7S3lYHXi\nTObOZgYhwHri/eUL8vthE+Inao5OsWfZjWhDEBW3a0L59a71neUdh9ewvlJu\n6iB/DWiFTxPSbpPFucMz940TxnQgH/k9Za6ZFkjWgRmy11wdLzOyRYqI8/d9\nPOhmRdVy7OKlxsIAnnWSLIUJTe2I22E2azl+XZf2GvnnckOokYazaT1jwQcr\nP6zv\r\n=rjrR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"9.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.40.1_1539032037557_0.560793714403192","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/typography","version":"0.41.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.41.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"645e0199bdba6b09d935352ab2095d07c33ec395","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.41.0.tgz","fileCount":8,"integrity":"sha512-15dlqSU+9uGcWdg4KXXcmDzTKJPb7/5Z9kmooONb2Laot1uiuntDXQS0yL+U2FYLW5Ros+WVMosDBKFruWx68A==","signatures":[{"sig":"MEYCIQCPr1KJgmGUeuXGeXIlJvzZ1Q301yh2hMcdIduq3gBG6wIhAIL967Ac9vibbKOBehVVXdjgByPEI1XQAHaw+mVEfZNz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vSCRA9TVsSAnZWagAAaTEQAIhUUds2jgkUMQzF7CmL\np0nkQdaIqAQiOVHIpGogxtLZriws2LWssmcVaBWYwdxJ8gDRYOHAhbWljoD7\nDfb2PNC3yiMNj09IS3IhkEE0D2WFxy1fAytiBvi9RKQ8AvWoNWUPODFhK97L\ns0cBrx4N4F0E4r5G3lt89MSuAc1+4NWrO9keDQnHoQR8MrUKFeED3pCU2el+\nu6q4Tsdssvxud/IKAfC5cPvVPVz4BjH86P5MvtA14WLhBUr7zF7oYDuKFpxP\nwQSQbsKv1W0pLtc5vFcppYjv3uJTYvlsX8be855Qb793UnGeL4COvublNVtV\n70FfsYk2FXxu8Vrr83a0f+cH5jyqS0iHP1gz63htjUXXfr1pS/ONZ11w8Q/j\nJtyCO2WewoPM7RQNUGtpEAI7/QCJNwypnXLSB1XblEYHrpnUxvXy0KmnOvcL\nJ7MBuVvmCAwccGuabnAAaiZ8eWFkdvQqsPfC3VAtPEGGioghKPus44T4Qgyw\n1ZktGkwLRK+SFoulWGMB+btXtMal3woCzzgWBEO8wZRaUFTqEtVv5J57GkLt\nUAi08GLv2Jj0N74kS2lJ/l1xOIUMs3lG7Vx4hSge39+Id2jKTSLJ3iLzj6VL\n8gv6UXiWAHHzKTUsDgdWMj1RLrumzD6qdh5hBYm5pq0QFgL1e7GZKssZVMrJ\ns3vD\r\n=NPgm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"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":{},"_nodeVersion":"8.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.41.0_1540844497845_0.46382177447490025","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/typography","version":"0.42.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccb36c18bd1c8911c207872e575fafc845309162","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.42.0.tgz","fileCount":8,"integrity":"sha512-HgjRfmunrW8qqB0xC6AQNAQVIq19WUeRoimUf8ytf12Rq1oNG///6bnr86OI9+Q1EpeF822efZP4XPLUPb8kJw==","signatures":[{"sig":"MEYCIQCUoTRdlgyLZyP6sXLYQZE5+LjEIVUwuEgqGDM2388KlQIhAJtB2k5rur95qH6ksb10QXGRsIMC2HfNdf+sbyduWons","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwWtCRA9TVsSAnZWagAALi0P/jJkeVJXEwqGiJ7UNvnp\n6WvRlWi5lKZG5/gWNX82VBg6j4yWVTcYV+xfz2dZc8fGer/5L4f/rbmdfTtB\nV8Y9hz43cHwrqG4tQJVi0GErdH76Pz82v9OP4eTbAHBw3irjDNupl3mmmshc\ni/Sk+VgXHc+RRIxnWoL3AmsWddQInRVSa2HZbQEI7JM6bSO1eDeWvS5ZHAV+\nf5f/Wbe5Z/uXS8mMRkKu/fOIhZktK2eL4f3ZnHm5WhTVWe5GfhwRwHYnxH14\nCSXNAN/7os5g62N27thVZeW0PXiEIMgHC6Sh2mlrKaaoIxUFsmuBFHydVeSs\n7Zi/JK+4Yz2Rs+jSrFkgQy04orKAEobxzRddWZtojhMW9w/OWiRBXosfh/2C\nzD55MfESHjdq+THNdcYYYN5yC4NH1Tlf/+rEDzRkPnO2s0XeXR7Ga2k0Fvkv\nwHTt8Ir4CV4b2+S+ZJziZ6Wt7koD1wtB975glQqdXmpTQ4ArlxlqMPJeNQtU\nhvbwCKqqxyRxvmdV2bOFZleB8K18GeUbdJdmRt91lKwVhqUep+ufPy6Pmllu\nJjVCSB+On6p72QZa+ADw5gl7Q7OIeo6YvuZ8RPZP/ZSdctBm6h9B7DaYi4yq\nImzNMgRElM7JA3oHFmdfBcWpEnj3wFGK9UfqihGQw6scwL/eNvIgdjnNu18g\n5vDR\r\n=PX2j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.13.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.42.0_1543964076590_0.589221666534187","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/typography","version":"0.43.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"808abf66c65e11ef8e6c690995803f6825d7d8f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.43.0.tgz","fileCount":10,"integrity":"sha512-WSg8vDoC2rnmOWbhNdDmSoT1jV0QQSw7CFps1DFbnIe57UaUxgWuGdhc+9XlEPctXUFto4FU4DfnRcdW4ydAig==","signatures":[{"sig":"MEQCIEf7icKxtS/75yzQ88d2yq9PPh2Z7u3I1cF9W0Ns7TLdAiAxTUZJoJ8v0PWUaN4OvPCAtdyonEvWKZhLlv4eA/P+eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60fCRA9TVsSAnZWagAAB68P+QGV0l90ntg0dzKywC1a\nk4ybL8UwTf90uWPJPYnksisuslFpCTrzK/80rGXnGBOruvxbqIuu/F1ukZqX\nOT8S+l9EOE0BbIOlRrts45RP9VQsEiviBWtAOScgB1O8ahUr9Js7JNLUeShX\nX+tmbyuzChwCPPeD1Ormul22+FJWUL+uuA/ugVrv4dSqrLi+s2FJtlARldqX\n2d4enwhNbl3wZwee4HpSqWGzoXI7KrmjqnWvkqztnJW9jy1GTOJxbfVxNtRy\nubY3rW7C8g6yJQkH3b4LD3+Lk9oTzLQdCL/+4ZWKQ8MvxHYCLAN/MXae57UZ\nhdskX1J86fX6n6cIPe9pplqtAG3fe7aFszgJWEVYjKlmtJlidZIgl/k9v3tD\nUNtQr+ar43jVL0My9npOo9bDxNmRqT0S7mITc6QSxptpryFh2lDE1mhZ3CAZ\nFXMaX3ZKt4tyc+Ux2AVjVcPdtwo1Bttwccc35OVoFccsYiQOjM2K++1z3dju\nm/p9vh9S0VMXsNbS3tYYDfgUKqZ9mUlKfppfJWwdB/7JmmO+1zWFE9CC097O\nSk7OVZa11RZBWoKGt/IhZ2+FArbVvAjGnTFrLDdXNaOarCVO018XMqLVMIId\nMpSfM47D+IxrNmrKV9l+PEMFHhM1FS86NRlNh9q6GDPMT6ZUJ4/ZUa8o4Q19\nWK/P\r\n=ZUQi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.14.2","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.43.0_1546890526399_0.021851399141731287","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/typography","version":"0.44.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf61dce2ee89bfa084d86e1b0f270a585bf9dfaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.44.0.tgz","fileCount":10,"integrity":"sha512-m4SjA9OjZRDKowN3cPzEa8e2GlTlEn3ZmW/Fy9eRNSp83iY+8a0xl6kCaF80v5qAVwVcpfEFyEHWxMJtkBw2uA==","signatures":[{"sig":"MEQCIGD6Ea+qgAA5yY6RGiVVjiO1IqL5F1zyxceu671OMLnjAiBV0Uk9CKueM8qVsUP2GQHlJGILtnC5wHqY0lp69l6bGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48919,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIMdCRA9TVsSAnZWagAAHLUQAKJx384hQwM4b0LQIsSV\nspiPB/Zaj1pHpYeddQDJJRl9HSYyT4zeub7GjrItWk/Lr/XEaav6PGEQJmSP\ne2CNT+HYMOVvSECEyMFT2Xd/TvrovkT95ik2VwXVrgH7/Bw84P2MdfaH01MK\n1J3ioMcT7TALDvb36SvY6cSCH5HheElF52tYXv/RjwKRdVpAajmvOJF93wcA\n9YyOPoZ9r8IKMCp9sSwKAqEddyw+z+JfhuT3jGrifYpDc7apxX4zTKhA9QhL\n8k7/Q+PQiMeGXZOk/PUGJUMSmlq6hwAXTdpY5xeGbIXB7H2wX/Z4P4YrLgM8\n7jaCasTZzo26ockuJYb3JDgiaCrra5+jclrinOjAk8JR2p27jyVjJ32DZ9ln\n6lLKtkdRqRagMFBZLB24kyAend0Pa0ttCV0hVn3/ySMKLJjQTOZ8JvDqljCX\n6AAI5jPwUu0fbH96H+i1zEwWiWUD2+lliU7XPzwE3gWZ8/K9fn69fNkxLXUw\naTOqy1VbNCgKeNBi6wMViImRXf5UfQAtFfKcSGcVHiUGVu5O72qYjxy0a1Qu\nrBS9I98nLpWgcEcqY3OGL3ddvnCAFc8A8Vogiuv9JtUEx6fKW+qJ7mXwdfDZ\nyAgr4p+yV8EXNzMmiF87bWMmRif4tQTrqsx3OKWr7AKvQYkWZHmyYn6zykHG\nGQ/L\r\n=1txz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.12.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.44.0_1549304604680_0.5658295453081443","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/typography","version":"0.44.1","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@0.44.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a94f01172f9122180bc2ce0aa55658183a35590d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-0.44.1.tgz","fileCount":10,"integrity":"sha512-wMXHusg+Lp5Fdgoj3m0c+Lt6GCeGSh3EPRtQ1TQ2bwdBa0et2FqBaQRgXoq3tVmr0O/7unTfa0DoXlh4nVp1wA==","signatures":[{"sig":"MEQCIG7IgRIurNOwsOlie89gtQOgbDqA3uuT1pk/KWVLqQB7AiAw/gIjlKaUi5MYow9L1Y8Xz2L/1IDKMtXBPkBrwpm2lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsRCRA9TVsSAnZWagAAFd8P/R3WURiMB9hw7rSOa7sB\nro9Rn/hkA80hTsu4JUkU/WIdaDZI0fSW8yvxM7zJctPR/ps5Lbor4EwPQsip\nmKjbyPJlF0Iq11TwIbb3Co4eA06kQtmi6cfRJyQRQJS6A/f76BVSQLgJzfTL\neRw6CkfRafCTRp9XHp6ogeZHaP+E6zPId5a3CQwy619Qw8C48W6oZBx31M+N\nnw7wTHilmq5mFj0XaHG/7abh3aIqdY5VSXyz1ucfcx9YKiDXH+aGaLRhOr7l\nLA2Dphp5c2Jnqu3SbYfevA2p99mgAxEmbS6iJBkFZOLXgsU/zom3YmiLLL6y\nTGecqww0jpWROY7E2tGrn+KjQT/lBxeJKGr/Hr6/recjh8qoiHBqYuL/mKtN\nBRVPduXhci+HqBXwDEl+ycRK0iTF9KHOsPS//BXAYb8heSn75d7jamu3INOS\nUdW3TkBeq3msor9xp0056qx6g4yme2TS4g87Fb0n+mLvaGbI6SkDDUhXjuNx\nJQTYlz8yhbcHE6jCn1676gKpGPvMwjcRfuFeJwvJS15IfKRN1/4sRJ3wn70r\n0W0+2t4dIFx8vBBncPnCXzHN1/KJGXxIRsFjRySta4Pk+1Ul8kXQDz+NvlLk\nxSR83g6KNUZPVqFMR8CCDG6z8iZxe/mvjF51KHiaL7c4swNma32tuwVl96p4\nVuB2\r\n=I0+/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_0.44.1_1550617361280_0.32633932526679144","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/typography","version":"1.0.0-0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@1.0.0-0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"553dc250d90bcd12c265673997ee84ca9b6a6745","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-1.0.0-0.tgz","fileCount":10,"integrity":"sha512-eN0qLFZg8LqlFu/rtKrYZFAaYWgdu+pHNA4OvYoNdxgYoAPw6LBm1Rc2xnyNhAfv/UDnodj4WeE97rQfz6nwCQ==","signatures":[{"sig":"MEUCIQDNC8xmCd5XaNdusTWGVg2/oWtQGRy7VktSqJsfhMTD4AIgEsfN81vvbscQm2Pl/a1SjYS+rxSyFQIRk7EQnnCziT0=","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\nwsFcBAEBCAAQBQJcdyROCRA9TVsSAnZWagAAF4MQAInmg9xZlGzHCQAyM0Xz\nN3+UBUn+n7Nb0e3L/BTwssND68t9D5nRisVPBl+ioRTpaoLrc616mFRavpPR\nBYRdUSj+wcdjc1KqR5gLRTFD0CxAhrm+4Xt3lOJUTxon88IjtRkMy/UyyLrM\nPtwW8gfKIF3p88V4ORIY+UT7qxNxOzdHITzyWasJ7VrXKAdCuKRZxGuqKt6P\nB7KGfETaDEORw8zRzs4NCRBX5jC8gdXDf4CKdLG90DuPSG4fEZGpl3gg6Slf\nkai1RHFTbX7T410FrLMgqeoMlikR4SYYdPRMz8svimhSSOWTuQQKpCunfh4k\n3joge3hswfV80JglnyZeUMsnA7pHX+T6k+u/LSuiNS/68HlBEulNAK8gtpIr\nlCIcta6zAXpTJCzmBZj+JKZrUI3Frc0ZoifeZytGorK1LHlrYPWuV22NAIqy\nHD+LIjvPudFDDx8yrGhu3+0b1DeuMkE2XlQxrJyXk764PCmRB6FTwirRKIJk\nJN3mhkdA7FIaPdM9fMTTU6YLVKBNICB7HhgbNwIn2L4cCDaBFkkxJvTaBuwq\nDuLZPh78orezzXwXSbs0mRTbKQIgeKK06eLzOonyV7a4b7zTaXIhbmYD0J2B\nxyg3hm9cGi5I21QbTi3sC2zUdG3jKAfRWscglNciIHhTYw7sMt9kB+abBmRD\nJ7Ga\r\n=3CKl\r\n-----END PGP SIGNATURE-----\r\n"},"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","_npmUser":{"name":"anonymous","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_1.0.0-0_1551311950123_0.6016203445723296","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/typography","version":"1.0.0-1","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@1.0.0-1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfc10b0829d2109f3cab753ee7927fe4851659f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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"},"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","_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"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":{},"_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"}},"1.0.0":{"name":"@material/typography","version":"1.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@1.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"327ecfcac5ee3af8a3a102f3f125a761202f4189","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-1.0.0.tgz","fileCount":10,"integrity":"sha512-Oeqbjci1cC7jTE8/n3dwnkqKe9ZeWiaE+rgMtRYtRFw1HvAw14SpGA5EEAS/Li2Hu2KZ50FYCe3HYqShfxtChA==","signatures":[{"sig":"MEUCIAJEAp+l0xz5zwi6qLvRaO34gYuFhKZHcxeV85boKPriAiEA5G/kR1CpW9TGIHDvMyL3u5WO88myY9uUUfkC3Ddjbc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDajCRA9TVsSAnZWagAA8+4P/2FV9aXlfkR4NJ6qHcM6\nm/VfaByZtE3ht4DV5draIYvTwjrHkks20bAxnsdRLb/9KaVfJIX4QaEF7e0u\nz1KdSOop9xftDosp2P3KndU/685oKtS8zQwzh/26JJ7uU8LHdOuuDPdgjylT\nFXy/vHGnyE+/L/xwGnomWag/qERGN87YzCIyznAi7z8/ieqr82qsdxRtORK2\n+lSJ1pZCrWgqmTFgnZzsjtmMEFjdOIwF6188cBiq+7pNnCqFsxzcorDMGSiP\nn4fjhD3CG2ImYi96Tk38dMCtTA87760AlIiI7POWflz4NXQaNas+SY8473C1\nVaidvIqiRZ7H8mE1BKq7bigckh6VwtR4ezbe4/05D9hFylj/VRFvfpbo+nzK\n3xSt6UP76e/pjbzUYvL9flPePTlurKsZ/v3/RjzkV7EOYzd89z+saoOTaRcI\n/zw/Uk2hB+626OCfkLdm2rb2qYEJ0Qlq+35+akJU92k1/BTDkHMb0jJG+ZES\nXRDGJKC7kp6ft3pX2yqejbxrIzj6bVk5lhXMl0xPmjWh+M3DIwt7UqJbgTR7\nV9x8tT6EbQ1r1jLILQzVZ4wEcit/Czdn2V5h1h7K9CWRKkdsWhWEwsN69tj6\nF451sQipm4hBRKf+eFzyz9bOMijfVybI71y9ZdPtK6cZxhj/PlUhyjwHGI6E\nv+9+\r\n=7M3m\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},"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":{},"_nodeVersion":"10.9.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_1.0.0_1551906466168_0.557336463224382","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/typography","version":"2.3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@2.3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe2180c697172227f0745cda684ecafdaba3f8dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-2.3.0.tgz","fileCount":10,"integrity":"sha512-NtWVVvwG9Te6/kuIl4fEwDcXGCS7mfPgo5CKPyxcK6y0hJHv6yRHpipJT9D4ZlXw0sQx9B33doOK7iYJtwBBZw==","signatures":[{"sig":"MEUCIQDdxE683ULGMW9wAbckZyMF8bNskJxwKxg+Cie/bI5pxQIgbXstqBoLPbbOxaBKbNYzhHYqBPL7RTzwmZMU8erj5wQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abeCRA9TVsSAnZWagAA9UIP/jVENwpoz/MDOMkydAm7\nctrr0vneQe/4t+/p9iuT/MZNzlFglq3BMYtrDK2/OW+qf8hDQk2A/UGILWq8\nmaUwnDSUGe4fKYZb2ttDC8a+aVqS0i2gvf5Ub70AnM1W/CSnKVl//suGYp4B\n/qrWAldav488OHVtksOI6AUfABX8PnNfaOu4O7L1mUDLBpnG77lV11ZDNhok\nBFx92r3/3WOXD+NFwgA2MDhcTEvzCIqowjLbWGzMCt1+5TsugcSIf9NQDgMx\nPlEdmLJyXg8nshF5NjQwFWFh/VwgrfwyGWJ8IkeG21IDJs84EKoVV19f+jdL\nw7CIBx53snAJ9+3oO23JsX3T5p6NpIA/NQQRaSQkOQcubIoNkg+iCIhv9lVi\nI8q1RMEHlUN+ssE+m5jDdclOCbzpEM1f7e72+JuCir2mGNib2r5Eh7b7FKP5\nzQSefRozdZ5EIIVbLeNPkxJNja6WlvdCsXLDqGnYpJOKY6JsmIcB7xA8ZYLy\nH/jimBvHKVd9s0He2DdPnBhB5nO/qg11pNKLX6BfcCxu0MD3Ucl4dB+WX5+B\n0Mdnehz06HIxsHsk64A5gx6eh75tc4yDTHalRuP1q3T2331Ef+dXmbAdZcFa\ngH46bwCJ1+Q13EoxdhJPW6KP12YzPi+bsZ/JqWI+U+d9ufJy8UnuvoimFXsC\n0T8E\r\n=gTI9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_2.3.0_1559078621960_0.6510684679201864","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/typography","version":"3.0.0-alpha.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@3.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd153798da5a7ecfb97ae3e7b5a26e6e3be7c928","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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"},"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","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"_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"}},"3.0.0-alpha.1":{"name":"@material/typography","version":"3.0.0-alpha.1","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@3.0.0-alpha.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53f6516b847e1a972c6b13cef6c4f8a6ba169fae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@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"},"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","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"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":{},"_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"}},"3.0.0":{"name":"@material/typography","version":"3.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@3.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6481dd3020bbf61b4701a95b74053f0cba932635","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-3.0.0.tgz","fileCount":12,"integrity":"sha512-+9DpkPSqaEPOyZnvUiBlngFJ4WfQD3npKVr6A63/V7S8gjk/XNxuwprHCmzPSLVQHlK/Dgpq6Ul8Hypk7YfITw==","signatures":[{"sig":"MEUCIQD5ys5CJA5FBQpaYYi9oyVNfbOp1uCgFtVCbVe4O7qu2AIgXNNeo+WLKIJl+2NMeBUK4U++tj9tZ7GIMWvitH6tces=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/kCRA9TVsSAnZWagAAgoAP/RuZmLTu7brwnF1olguH\nYzOTnBJD2neUydiFEJqfDUNmcN1ow/8iQss/Ussn9FibLuBDcRw2tsHEmWWm\nXQGrZj+kxPKm/IdVgYevoAoF8SuMwxAXtHtffjzTfu4+arl7nkjD3cjBXpBJ\nzEmzbI8l3j2i7x0wchEYO6MsP5fDW+lzjmgrRHIgvDfPh/aAxw+2xneY+azI\nUKpb3zYM8Ez1bQVfeH4TkclHCM2wQgZkWiu5a06WO5uigvEi4G3Bcc3Rg3tC\nUNqTlVayYi+ufadp0qxyFFWCzm682MbAW0o3Ta7/6n528yYBhmrVpm9fjw8s\n67mPHUuzh2GiHvXsv4cE3oCHFVh8Ix/jVDJ9eqaOWftoZBWnruVWCY1pzQpd\nTx60eh/1sH0/N05OgX7/OQOANWcIoRXdAYK3gJl/ftQpXRHQTeSZsXez0L5j\nymOoOwTD0OqhqARN7bzBtXPKgQonLE2byG7PO6ZDy2lT7P8b538yBSWcisDq\nr2EYeAzezn8n16ebd/eyRj7kSmuADeLqX2D/BkFPUfTirl+QpIq9kNN7x4zg\nubZgKYY/j6D7SXkgctyZTY2OAgPAYsKiWSjoqDh5OTDAIkp82BDnTmxo9FDH\ncFujB5bfawVASvGxAyk713wZEFpPgMmZBJFw+75xGDCPhWbeNFfJJbkBSqSz\n0e9W\r\n=EotV\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"anonymous","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_3.0.0_1561501667686_0.5838402900767632","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/typography","version":"3.1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@3.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a3aee31f49f6b8c87ebc91b77c5b896b280c492","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-3.1.0.tgz","fileCount":12,"integrity":"sha512-aSNBQvVxIH1kORSYdLGuSTivx6oJ1MSOSTUAsUwhXPQLQlvbdFeZaqUp7xgn+EvRsHGRFhWk5YGuiBds9+7zQg==","signatures":[{"sig":"MEUCIE+ehT08ybNLRZFIZEOi/MUQY1a+fZbnOchRS0Jl+Ew1AiEAmi/E0Pa4xi6M4wKOgWELVMPTC+15+Ga2mq6IUkiezEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJxCRA9TVsSAnZWagAAJ+0P/1m5AEUIZZhs/LSNP9t/\n6wIia6VPljLpqGOyffG9ZVvzw/4N0P3wSyCBebGE3N3RXiAvhEVceKItAAsq\n+188pinyH5oY/aXBE+2aCItjBMX5n2j1MGOFLI18uWMLjZRIzpB4IX504SGv\nbF6SQBC2YqOEG7g6RVuL3pQZCNyXjHDN91pV/kWeOQYqg0kCc/47dvxjEG/j\nkc+gW8vCj0tUlAp1zSeti9xwi6ZVZNw8JHMN1jcCnepU6D4vT7jBUKuMo07B\n4Ww9RanaonM7F3aOCYIwKKKnLkSjwxC/PvcJfzb3usK7se4PTSe++es2EUMQ\nS/4pHaLzKeHj/gjgtLiki2BERGoCrWAePiQWfISJsfjojTBD6G4duhYf3l86\nMhQj3EFzM1RiKwVaIpAAZkdq2saOSlXo4jxT+BoQX8HQrjJkqR414vCAl4Tp\nim76h1LTzqehNeXGjRIMT5gYi+3mjLkXth3KublrJCd0R1faFMBor82vNsyk\nbRDT8rv1Eupi4IOqtJrtnNsGs7HG8S1YqTRiOXGg9gJo1bzPTEc93Aav9Vuc\n/hNyqP6piFB9yxIAR8uDombw8tuN3SzDuVnb5Qa2z0obfEAlZqHUKoaVJr42\nswSBdGPVIwHGNCAVu8a8n3VlhVgR2Vq0Y1w11Tl8VCoThCODbunP+Xy43lYZ\nJfrp\r\n=pAdX\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_3.1.0_1563832945072_0.43255803466084797","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/typography","version":"4.0.0-alpha.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-alpha.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"lynnjepsen+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44bf3cf46ee1fcb3a8a232bd9eec29f0b76b7e27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-alpha.0.tgz","fileCount":12,"integrity":"sha512-kD3f6bqE86QxLw2uwGwuA+9UWyjEe4DLG/jQl6H0F4uAjGkaoyDqfBkUsrjwKJ30jTOHKiC+ot1MDoEi8689bA==","signatures":[{"sig":"MEQCIBhTuZTmlcNk5xF6dI4NSWAmNHXJ/6DlQG490rlhT3BZAiATjSPNlobYa2cT19JejN08kAyBqiwR/8JECcpvarc+Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz31CRA9TVsSAnZWagAA/D4P/RMbyr8gSJRWTWBEqCAk\nIb3Ja0lFzC+WzGnPrNHoeZEguCLfgrWp7RE3RlFBZjZ+vtio5i1nOoUR/IxN\nWLyjKOGFWaoTvXTUlLA2GaYwwPNXfflzFHiLn2Mw+9dHJD3+2npmNnptULM/\no1NFqaPho2SPRE2ye65XPUThml3x60rluQu/DN6IITps7FpgyO482CwmEtZF\nXUX4w9zRpyEcsbh00ojN4pqLB94CLbq6Rl46NbSVabGJXxDN9t+NRxQ86Jpx\nNiLhlOK7ygK+dDlJFdksm16V+5mf4wjoDlYo/oe5mBgeDzG11YJZhVuJbZ9k\n1dlToig75wlA2L4az5uzDNHTE+YV46eMpzo4m94wMpDf5ayU9QtX9Q5p0jpo\nfm8XGm+BeDXIfmyJ8+eLuwOpRYDnCSOrSMtEl70A3MSIKeHBdgWkNkjGouJh\njoEAHGxYzqwCd1g/mWg6jTT+MKPngud/gco9blvr/7pG3buw98Awc5dYZOFJ\nJRjp8Slsws6nO0R8n/VCdsnO5DjdbAy75MstZUzp2iTUkz4Eqk2PRkjYJ5Lz\nNwGKdN5e0KStLZdrH1EP0aMpag9WPtbb/5mLnV3g1Q5+Ge2Z/mki+nPUdXTR\nmURDKtUYYaU53TRfPBVloSi9BrqRvGJEq/b9vvB24vk/du0pzrniAXMUxIlb\n9zQy\r\n=cFAp\r\n-----END PGP SIGNATURE-----\r\n"},"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":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-alpha.0_1565212148913_0.32040850050013026","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/typography","version":"4.0.0-canary.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7738df15e7d065115b0d9735b7cd8d25330cd5a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.0.tgz","fileCount":12,"integrity":"sha512-f5IDZvpBTBaCcPTufyBVZbpCE7UzAbD5ZShefmSCrIWoqYuK0OqbjQHYIJTSMi+aHl53C8qGYJ8R4f8L7N4V4A==","signatures":[{"sig":"MEUCIGnL6wBpW7V+fxcrjA8UaQ7o7LDUFFxGGRn+R8h7XZ4bAiEAzHQ+CFBvFgDRWhJKs6Q1Z/phwAoF7iA1gCOcLO4Ozz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEWCRA9TVsSAnZWagAAlmEP/3qpkAKwRHitmwHF9AMa\n0ZCwS/58R27hr8XomGLOV0Sld5Dj9pTjnac096d6Em6IOAM/7Jrbt04BM2pY\n3h5U2RCR70mr194b5tCekGlFuusEJupP1MBYcqwSHi5+FqBvMw4IVYTOOfL/\n7aw8NfNL+MWEX28XXG6fvgOKeAbNXGw3L8opkGmEfT/uV1lVCNKKCkUgizQ9\nFKF4sBv5vb7cvwvAEh55ehqbo/mCtTunlpy+Xad+O2NdD+7o6wTKrMAK6ly8\n75VvbLCFKcH7Eq2CS8n5AL0NedpMPHIvt8b5uZydsiN7ZP7IjZiQYinko7yu\nHqYGrJiKBanUexNHbZ35iztiaxnspuoMtdUkoZaFZPdGRB04znx8LkajkoRi\nxLKrWFfXaCjd3wGwJPKR5plA6pQiSBKcQdZntaVUC2mJ+edkF/wLuCEfp6fV\ni+YB2HHQufHtKFnyoTVlO0T2ltgZNPkLmzmPvg/PjZ+9ISkKkQt9VnA6mHy3\nRd7iWqSRH5ccuknzv6qvhqGxoAhtkvUJyvEtUoc+Urn/i1hM+M0iLKJYDTGx\nS/o9OOEWbaiBfJahMZ4gRrzgtKxs5eic9Mpb9II8H/zw3jAoFBx3qGCQ6VaI\n+bkaPJxxiYf+Hk1pJBd0sWWDdlAG++NsCiFHeHQdzmJRZKy0BMCYbCepIy7/\nS5vP\r\n=yqZS\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.0_1567658262374_0.8176698884277631","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/typography","version":"4.0.0-canary.1","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.1","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb1b968c66440e4e60d409394f2d14c99c1d30e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.1.tgz","fileCount":12,"integrity":"sha512-45S3U554nlvTzy4CjkGSSpusGyKMAOrFB84ZQbJGO/5uSKeEFwzi2PX1l3NhBGTbN6ynMlzcT9SyrM80uCtWbg==","signatures":[{"sig":"MEYCIQDtoTbP3p7NeQbxmWFBGxxKcoI0mJ83rTaFllGauZYHigIhAKecT7ejVlZA4JkLloHXrOwE+7imJT3rcgSOsAWqJH6r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":52485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQRCRA9TVsSAnZWagAA29cQAKQOTbAw6kQKW5ym60od\n7onNjhBj7ZbotWiDcOGwkkV98VKxj7vl+xymnSoLHb8jOW9R9AcqMZPiGVLc\n495Gt873dNaPndGuiLSs3VbH0hq73dbo5bMxBiG0+t+z2oJpMAL5f09JslLB\nfvU09bRmTAw8Loq2FOG62sDlBXnAOlq3+OibK0PRUtHC+N3tsJsdTyrS8gbo\neMq/uItt5CPKfLGi663UjrlniOP1/AcjXVEJVgcPe83HCEmDjZkFLPtQZmMU\ndq6Uh6R3SA3f5kexz9OqVwHw9LiHWCEDaoWl9WA+obQJvuDcupuGc0K1S43X\nrELoyQiRU5SB3vMIWQjGY4fGoGDu6qrLLmQREUzWMQhGUKq46PWbOQkelJmf\naQAHjenK0UUFLLnbV0s38ldcD2u8vNyEfAcUchybjR3YYSiFMj5tnbWXXOHX\nB/9cVNUuYTcvPynsxsYBPqNyNMXvZKLYvY2E4gdHt6BRZ4Egt2m0kZCHKkkj\nkvvOHrmdjYhtLMS6mEKobxbCtWez69TPMliXp0fsfQcokON0AmKHLEIZZazB\nmdBuLlFP2nMwDeTDwqmxthVY6zdq/lyk/UM55jpdpr7GV0cOH5Ul9m2vDk1f\nZKy9a8eEiWk0JNPR1vaYyReP9GSoM8PNpKPMrxa6qhRYZpg6LFtyuXG+uiw8\n1wmT\r\n=bHSu\r\n-----END PGP SIGNATURE-----\r\n"},"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":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"8.16.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.1_1568060433191_0.22544514663230641","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/typography","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.79d881baf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2323b3abce94ad98171d28a0667684cf7c35e5d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.79d881baf.0.tgz","fileCount":12,"integrity":"sha512-z2SvwL3aIwP5TPjUTZP4UthYWh2KSXqA4a9Bjqhcm+HA/yLPI2VOV9sBi1+8rkzgEU7lQAX5FUHl+fzIB/Bo9g==","signatures":[{"sig":"MEUCIQD9xcfU5UJIxef5GSnLs7uVKH9fvkXD13lsELRZHgMZiQIgIAu+j1l8fkINwZbFZxdTDmw39NboGL3XDRlriRVxr9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":55737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0kCRA9TVsSAnZWagAABhEP/0e5UtAKF64Hgh5Pd5U1\nHNs7yOAh+BGsbDxj0SrKI+vpHlWGCOQpA4cGZ3E0I+LS6E4qIh1VNOfck8ma\nyTRnbhpnZRiOqi/uTwY2mlsjyD4CNwkkrX1bFcZ0HQBY9UpZKHvzkX6c0NZv\nde3qVkpVk9xvB7puAmO6hJfbizwFAMI8LPQsqS2Wq6fPmK1az/JVuFk4ImNY\nnor48JCNUgiN5ZTwYb9SPmxUeN7XTlZXwD0hOdKfiiPxzj0uUj0h9Kr9S2sW\nWu1NZgDGTFUDUbLsIIBa3/EmKLnD5D+guOai/bmqMr6RpJQlGPHpwf4/3ASk\n5rBQytwXmk3De2vl+3FKpAx3qXsvc6z+H9E95y/ImJq8X1wKUpf60s1FSBwt\nmcieVpEHe3rdMH6LU1hlUe4PtlDRxEiSLKIr7T/FaZAK01D5CDwS53Ps7DtI\nvLUhnQUTko/o7TIMcrp+rCkFug++qf10fKqZOC8NiVwV/mKW7r5yE12xc8Gy\nML5XHQdc57M3jLyXpPHa+UOt8ywLlauKcqpy+N4eTGYl3ZIR4pjxaS3TqYGK\nWCo8Blc8ZXEBGGzzT8junhS5ONtVUkmzRUMUjXduuHlFtN4SzYtEmQi+Zb76\ng1n96CAahX4ugw/0dk0Zc6hvHSeW02z218iJVW05ZTfiWJad2askE/dnL1S4\n59aE\r\n=Y6Xl\r\n-----END PGP SIGNATURE-----\r\n"},"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":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.79d881baf.0_1568341284181_0.2662738458783762","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/typography","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ba0fb9c32638bc51864f218952ea1a87e51443","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.e851d4f40.0.tgz","fileCount":12,"integrity":"sha512-8AeMJovgY5e4jOmnnsAfSAsZgxEo/HmHKkwpaZnxDuY2zGkRZnqQ+F147RpslkDWMJos235KFyAUuMuJ3okL6Q==","signatures":[{"sig":"MEQCIH0xuf2b8Hkwn8AbpHunBz+kcuGAzugut8AI0GZIxcMQAiB3KMzpdP8Qcl5/64Z8kG/D00i9lFb8DZ8Vp7CJ2rVu4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexXsCRA9TVsSAnZWagAAbLcP/33PvnyWLUFTmDzmzY2J\n5mRTYZtEITAO2EAynehkdAieOIDGLT2qsAxKCp4tWIhlZiTu2d5K8SFlM3C/\n7HG2OQcQQwJPFeoQEb9YhxGLyijMZy3FCquktQB/0WIi4fNWesZFRQ7epV5A\n38rXSvs62qMGoK6xYha88Z1AB1sZnDSCSDCmpDdIaXShBTgaR1EaLkkMLr/y\nrXav7r7CxyxTHjnXmdYOkI/bNKmgvD5pf5ggT3c5Xq7mkMh/a2UQMaKLd7yl\nxeMNQL9TshLfrfiio+E1CVJxfSR7sl0lrOYHrSoiy1UBr5E3uJLoBtojKjWM\nGZqxsaCdKHrZC7hP2legTOZ4rFIALAV1tqzEZ0fZz2x6b2PWPnxpZOv6+sJn\nbPuEvtGwGJv/Gf/zmIYrk2w7i3hw66mBdfxHIS6HkK7WoQ94mDz9F9BbM0dR\nhqfa+bHdsgKMWlfAcs8wpWS1JgMSUraPxughg/25rAY911eh3aRETqNdNgOE\nW0mNXaANU0aa2iX0RfSZbJT/mnfLExSEIiLjdNftdc10a9TKG6dQzLtjcBO4\nuOLT4T8QcW5kTyj3Q1/hFghVoVf3K4+ZERamZXNj3QaiFEMns3jPxynjeDM+\nvyK5DUySmiFdU4E8Nv4+5XD84RyP9pjDYBtXJaC0wMKwvXxfssOxlv3YT0Fw\nJHVk\r\n=x2a1\r\n-----END PGP SIGNATURE-----\r\n"},"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":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"12.10.0","dependencies":{"@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.e851d4f40.0_1568347628066_0.3713804692853362","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/typography","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.905884690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e10f3ca2daac2d0f3726fa58f4acbb2d236261a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.905884690.0.tgz","fileCount":12,"integrity":"sha512-KWBG1+3qQUShAwS1zRGKZ+7GQA96RUjjitMO7M0w8Q6zBUgn3tPuuNf1XB5SQPn2C3GE/arLnEDQ515+BKvuAw==","signatures":[{"sig":"MEQCIFu7DtbxlJXoR6UMwWTetkS2q58Cqvuqp1t/cROy3x3JAiAJinoOSQaZAV0aAj1hQUZ6+LRk0tNPzdPpkZjPDE0YKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8wCRA9TVsSAnZWagAAOh4QAJ+RZHywLAdWgj6WI8fo\noc0tMi4wCwZ4Rm7FGQPAY7P/hTIqXf6rBb2PwhCSJ76yNvLZTCSJRnfSiBIn\ny+u3zACwa0hlpqlVlnYNB+R133/rMdQCTkKMQSbe2lSIbUmi0baPqnMhEml5\nEHvKBJHnrKNv+n9iu8DnaEPaA+lKWre+lEpimE9+xBU4L7AjIebIVwPRDonE\n95NzXlE7jLF6BLapzrZ41HQ0ZxzF++gFim8Yh+z4avK90h3U0IpED1SWFbjR\nXVL0gukCz0nE7IMPWLZMiVzql6zI3o5Lvz44LiTc6bH+bK0vAlgQyFAMQVKB\nZ7W6FN6Gia8Ru3wVTs9OxmQSGH+utwMAoPoN1ncSRU7bDwKgeC6WfS9l9T8k\ndYWPdgjKF1wVLsp+QcnWE1m/3Cz51fv1loTXCDWPB0Y687WqC1yC6/EthJfy\nZBTBXDZ+qsg/KqA1f4qjlBfkPV9x4mjGMhJs3WrSypw4AU5B2KJdPYjeE61l\nHNj7DULy1oqGDfDYO9q2jRleHxvV211UtDL6k+Sf1rzCSDxyH5+cYxvAj0M1\n4YtJPIi+Vu4N2OFqRRCtECxV/kch8aEVM9tEaeEN0UFotrf3KhwwEWnXnI8x\nB1JeAoAdkbHS82AO3SoXbhUEnx+w8ITaOUQOhqLnFW/cDN/I0ibUua4dzd2L\nBWRa\r\n=0cbp\r\n-----END PGP SIGNATURE-----\r\n"},"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":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.905884690.0_1568677680396_0.2390065858807957","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/typography","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.199534d61.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14d36e58b111a84c145e86a0d82618c7d85b38ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.199534d61.0.tgz","fileCount":12,"integrity":"sha512-Z+Bi+qGJwh5xDYww5FkLxgwmZ1DIiz80OkdzPhwwr4DLs9EiSTR99AKS7dYo7bXajuVrg5WWz3SnbYl6w78u2Q==","signatures":[{"sig":"MEQCIGKglv75mdpVVONJV1trIfwqw4JzD1+NadBvaS1NK5uVAiBOMCnY39PiSpxpOMSF9QIXGB7LdPpI7UZZH+ULxbkKcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjluhCRA9TVsSAnZWagAATa8QAJNdRKxfu1D/kpTcCV2j\nDwSXzeB6TRGEryn29muo7oVmelwzHIl/VwKy/IVGXObLc2iKZVzdfwWFN9ZC\nunbYClXEgSzwCHrYyhjbljDcbvMju78A/eaMR46PzQKI9fllG+Xmf3HSH1Te\nM4r+pum6wK2KpN47DSrxpggna18+y3e4SvdJHPn8BvrREdimA20Sl8Vs0dhG\n4ExWDba2Kn15AEMt0cgh3s2CLJ0gBU4Oi3j92WPa9kkspZXEGcYRwOBWnb3a\nngJe3GHdyMxcBugytCtwMRduBOHoPyL/W54NbSCR/ngpBKa/yans6BNyUGNI\nfgpa5NW3sRthEQT7W7qfJHo2U5W+n6YALyauhmARt3sFjynKjJDAsZMDF9cT\nxFNfXlju+sHHMj6KnASCZtAQOjQ4ZlU1jCuq/Rl9S8y/b+wV3F0pyV9MJBBE\nntRDC/0G3xdOmqeQ2RFAdYKqYK26DnREpXSrGbn/w8Hzy4Xn6vVUujG6vvtB\nAlO/P3ip2oJxxZPzbXUkJ/ROUK8s9xEM0XFSJiLM1l3dUd/JGBKGfmeQn0HU\n3tEtzChlX4FWFTzrROj9qfyva3oOvD4cUjof1jCJEOJqysNnp13oKFMkG3JK\nvohYZ0gAp7/vR2F2JohSZf4m27E5MriubJZrsfXsMvi5Pmax4apiswHSb3eO\n5KYe\r\n=dZq6\r\n-----END PGP SIGNATURE-----\r\n"},"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":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.199534d61.0_1569610657321_0.14332876556186602","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/typography","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7290ffd52a61a0b74c7aacf1c37e9e0dd678651","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":12,"integrity":"sha512-BwAt/tVsm+KQpmZfShuZvMILLS+2VrXmYs7e4ajTLDH8WcanmrZCJylnm8aUlRfzQYot/2YN1qtoe2+XWg6VLg==","signatures":[{"sig":"MEQCICe1Z/OgH1pFSjKzp9nPs9NF1KrgW096l5Ydt6dK5I0mAiAwaWn3ysfPhnX/cgv4DUQPoAulayH+/WFtvu5ELtQ2Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaCCRA9TVsSAnZWagAAqhYQAI4pPTzxtlb4DrESzaq3\nywcP6SYu9BkbpIc9r7yxa6eiUL9a2xA581E4lgZCkUwJ8fa8+cNKgCOsfQZ0\nj+/4yAZm3FlUmGJAGCmnnxyJO68N1Q4gbMQvJ+/CYlgnJdWeV7OQx8X1eKBN\ng6gJqhuwCV+64bcYnbFIBwMnSqnDEuaXtaWhlOh4y739dUt3mybG9vxFcv9F\nD6I6mu0pOmMLxgutKTt1eVg0qFU6FsUHSfin666en6Ilp4dxqDFNVJU6BA8M\nEuXZPwTVi7nmSkeXaAJM88g6in1dmmSUNWcvyIZvOC2SnRBp+hJcSrk0OcPe\naHt4dGMt7c2qjSgnmnh0Vu51Hc7sOIu9NR+gr7wisk+K1H7u5g9EoU3xKaeO\nPLnaQGWCeG7y52pXJ7aIDtMxVR1lUN61JbFU9Q6k1fyY56hl5feo8edRBt8L\nGVUfpySvi26oXPF8Hgs42wO1pjXf8yH2ibUGypK1hEdtPqu4D5PA5HKYWabq\ntx30zAEQdDImN72fSDFef5YRfbq4JHvZb+rIMeNUwltD/U0UdpZlf2uueLdZ\nlC62T7tc1OHXiID9IVL+qaIr0+zi67FNs3iKYU7EaTlr6sUVQy7+EUvuQAL/\nJnzGYwly1RCpo/ietIcIVA2sNM03g6mFRpE2xpac5PRncWF/BiYvq4MMv/F7\noI+k\r\n=2LcA\r\n-----END PGP SIGNATURE-----\r\n"},"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":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.22d7ad2fb.0_1571165826073_0.3485610179510239","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/typography","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.735147131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1696309b59ed45f55368c451c6473fe0f009675","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.735147131.0.tgz","fileCount":12,"integrity":"sha512-aX8Ew3p/XncHAFGi7mAH6jUmFQCXwGX7i7DubP+J9wkbdoJN+y3e+tWzdpbH6PU8Sg3HHVcYVbsQxRIsaQ0l8Q==","signatures":[{"sig":"MEUCIQDkvcOTCSDQ2Ge1m1dwJ/ovxhkLCq3XIeA9vPTkdqAxHQIgdOxOBE0lXnrYzdH8RxrIap+qeYoq4Tg4MdbeqAmTewE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnELCRA9TVsSAnZWagAAaKEQAIF1Vk6uqEZKZsfS3ga+\n7FmDGga1D9Ko333dqWofAHeKiinWTNXFSrFXtC7pZJ3GiLKGV+CI19jbD6Gq\nzkCS68AN9dSiRfESm13QePDztNQUn50yT+RvsgPSfocIlqI/2kESKJDC14a3\nxu+TTSUKhDcZLGEg7lX7BZsZChM3ULi38ao4B/qZ8Kc8XHTmOSgGsMhqR7NM\nvj60s41RPMC5UmT55wHhtTo/glByBvSGFVTBmPAoMozH4bzhc9MaeLprRYlA\neutBo6lDAxHAcC9+wgaOOtQpL/1bjrcOUaTM6iLx05T3n2WUtJSgX55V2B67\nXp4w1ziPGrPGjxDW5PtE7iv4CSFMH/wdNWGtEuJNMJEVT7sUt9pQfpwTHrcF\ndF9rMrYMexHD88uA8fg3WJYDQtvZwMMG/3ojty2CSu6k7NYuk95jTaJpNd9x\nKJ0IoVZBFxPHKwA86nDZ4TM/3ydZItMfUuf2jAODC38NEJm45Lp2bnw4XWBn\nOVpUP+annlVD+24nE6xJvDVvkl5c4SpNu17dnalISae2p1wYHgh7Phf7ILE2\nkCEnJKM09XsKY6VuU4DcYWZUqXawN58gY3ngcz9UB1uL7M7zUZqyPvLbSoKk\nJIYPVUjdJF3vxRgC0DgNHUCj8fULv25s9mCU9rEsGSVy9QNM32XKq0e5b605\nh87R\r\n=hbjy\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.735147131.0_1571189002526_0.7393806822030353","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/typography","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10faa9af1e7d5e0ee3945a478970adcd11f93091","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.062ade5c0.0.tgz","fileCount":12,"integrity":"sha512-ETswlx2MxGSsJNY+1LBNTMMFGxqkjooK6CFCk9YIbIqJdWwk6n4ybq/nq/wHSeQcvi/xi3uC6Wb5N3cwGTJ/LQ==","signatures":[{"sig":"MEUCIQCwytmUAIsROqpAivkKyVPxT7hjKkdA3l3G71VGM1gS4wIgXFUBaXJcrxCMAr2w3duebi/jGU09I2VeggXvyJiatZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71lCRA9TVsSAnZWagAAyOkP/3aMdrfOSPr+jOfxblig\nB0sSfbOMZ86Q+O1VqJoSEzryDRQN4Lmx3hvwdZPG5j9L1JA59icUxJTzRsEY\nG+GN/OoWZpyOccvEXGr9d2huyG/MtUmkRMx2vCX9acutolaCoHn/jkIeSsrE\nNbHXmndfavikAkZWcGP9b3/qpeyMBmSyY2uIMKVDSWcfUDCU8fY6iweKvl+y\nM39dbkSQSuM7UqE6XRZ2fEIlkUoZL8fEwmv7hk9ABxM48UNfcBeUefGvAsBj\nhBE5/mbaLJZ9fBmS+py6J3BjA4lCXbiSmkXJOo+kGS1avxcuf7hKr0kzF58S\nPQfLRegqXpdjMUe2ukB+upT9lFKfkN6KnAU70adg2pF57n/lkXZ3Opstkjuk\nFKfE3wq2nPXW6iE806cohaHqTI2AX40iTAKnk+0UPD8NTQi9C/ogVFCTrgN4\nIzy14HnryRltZV+67C3HAcIMwL37nYBpwimcnq5yLrSTfusz/FAneWcnwRLh\ngUB6CVbp0pne2HnWUXGTjVXe8Nb5S6hnFu2LrT7chSKrJQWH8qqW7ReRhd3M\nQeS3XaRbH/3wkXA6GZ64Ley6ZzLSUMRJ1cnOAQkCQXrhKXoqQKjIQjxVR3Ii\n58MLcUw9bLH9p6QL0WI65y+oI4SdGAEOT3C5G2r2uYbf0g2ab7uN789UkvXy\nfgu5\r\n=iAV8\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.062ade5c0.0_1571274084846_0.11466184128168688","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/typography","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72d5445f31fb18f7f7af62b18c3f5a788ed4f695","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.774ad4f8.0.tgz","fileCount":12,"integrity":"sha512-ZWRA5LNSY2/6qp960oL0jNBm9s5TP9/BuHRLq2GB/DfL+Ws7lMUj5TGhqKThwCmtdzUomaQrvI2OyqzXM/YpVA==","signatures":[{"sig":"MEUCIAo5j+veECBJx74i//YF6RE81/HhyyClXq+bFj7mT5H5AiEAtjH4c1OhmOn7H0IoW4zVQP10XGMCAuWksrR0EL5NRP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hBCRA9TVsSAnZWagAAGN0P+QEGc2aPsEFwy5k0T5Oq\nsXDg0pI6g7VMQm+QgrB8E6c3vsB32ExeLlm/bwMp2M+F2V9HDN0uUWnENjjV\nBxVlbNg86h5/pUbmja9Zrcv6pudJT2pBixLS8g0zY+kO+odBrIOgPXgmnUmN\nykIT5GQZ9cDFHLhjtrHpSBD7msFyvS+OJGGfr8UJnQW2Nd8O9OL1jd5YADqv\ntG4Pdvw0zGdkRQUI1OwCCoZ7ML4Qdn6v+dLQVKZWUQmVjCA5dRi21pdxm65s\nNSxNPCzeRrIWx5k+hClToOnLEMN5ZeW28OOfnnOrAb4moHf/LmzZ4gnngCgK\nmgQRMCwWR3b4C1lFVDO6GGv2I46AfflS1IwXexrNVHMJ1jKzltG3XKmsG3IL\ntVzOyAx+/Nutbbeggcnp5M0GFjJUQkJfDPKDK945DqvIvx7Xb88YGXEaBmeb\nDELVY09apn9eBgUZDO20fCVIMOCu9Q6YwVsXzz5NqsReah+6NKE3B4h4Qkhc\nvKEAPjM0tXurgJV+2eu3u1oh3k1ZeKvwCCCBAUKmqRiJRXe/9ShAQWxWVhxP\nkbwW3vv1I3tXoIU8VultFMiVTylqN0I8Vg1Ts29bGXcRGUfnACoIEqVC7gxO\nsSYG5TcwQL+7YrgycGmcMMeJeEnBVsCzFglGahoOa3kZthEugrS+gRrAutqD\nP8Ee\r\n=q8zO\r\n-----END PGP SIGNATURE-----\r\n"},"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":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.774ad4f8.0_1571285056846_0.48571943136077356","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/typography","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.5916d18c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21569a94490d976be7fe640721b0e5e5c6230b1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.5916d18c.0.tgz","fileCount":12,"integrity":"sha512-aq+E4imYBcb7D+KJ5yz49SoTidPRV1KyKfDo0lStZzfIzwGJNKVgQMNA5wi7aspSwAQLaRz/5Vqk+G9SqhGc+A==","signatures":[{"sig":"MEUCIHSh2tk/d7xR1JePTcGCe9CsFdq6wrEradrOb1OkS6ivAiEA7D8D9c7unzQYNKWrhaLy0VfnEC2sMQgGKXZYmP7xbEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhu5CRA9TVsSAnZWagAAZLUP/0Tg2Y60Av3Q7WFVa1YF\nQ0CyxB+FhfBIqKiM5JQhje+ubB7Od7D6kqashu6ZkSWzJB9OupptzW8FEu/V\nWDh/nt4J6PcHGMLbYj/9Y+Tr137cPBSHs8I4q1sEmevIpWN+PtGBj/F61x+N\nvS1yZ2sJas8r21wRYgaJHWKhhgv1inR1TxghWAiJYV4iH/h+lpvN6W4yqMRi\nk/11s3Y6YVS6yaGS0rSB+kft0W9Lg5WbWkTeeflZhpFK3yh/+TzYnyEWqr2i\nQAMC3+g1UXBrY8L+MYKqhXDt+azRghOkLCTPVMwzlWzVKEkfH189gqtaHEJt\nEyQHugEU1qrpf9zzHJAjDqnCwShIkn6HIXJgihGv9zmkMIPOPAVhnO7qS3XZ\nY8sQJ/lvEzZesv9IismHS6ZLv0nF9LRJ1gQp0CnooQHGHdng9Am8lUvgDS0z\nSB3uZwsiQ3qatWbIG9A6Ay/R94zxrqDI/VkaPAw+xvE3wIumtwS7HdyFCvf9\niVOPd0v8nvq/Vsq3EBDwqok3c7gCy8DqxyBZseMp42++rK5LOwknZSkPn7+4\nll9NPZwJB18n20DC3dyDpZuz6w6l2dbYR4a5vBmwTlHhPhrZOTQtOtVTPI7h\nmxi4SSAFwi6vTCMpAmC7oM5dK45xqDbDe11/1F3cVFv1qHQ41V3FwtpZ3y++\nPM52\r\n=Mf2S\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.5916d18c.0_1571429304661_0.16953735410567528","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/typography","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.d4141c95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e1d7eed52a63e2ed65bc768b5f96f1879894f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.d4141c95.0.tgz","fileCount":12,"integrity":"sha512-CCJrNPZkRY9EbkXORuy/Mg5osq1JkVlKB0P257KMKM5+jA8FL26rfoka/PM4yyQlyQn5LfyfoltgwCGrUmJisw==","signatures":[{"sig":"MEUCIQD60cFXhlu0bEwYA+rD3EQFn1K9p4ftwG8dK9pOVuGxaAIgO2Wl/ZLScP7YufM3UJM2t6IvY7TXPSHZdwo3UOK2r2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48761,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQB8CRA9TVsSAnZWagAA9U0QAI3UwcKLnJmqdOn71/Sl\nQFAJx+Wc56/+8R/MQtys1tTkHM546aRiYEoH5JImtkOL9OdKSy/9Xz0LQeY0\nIX5Xdec7/PBUCrM/iBea4uRzSH5Q3DYGYmHGsfy3nczklIVHOTzyHYjtSp9X\nv/gk8AAmFa3ZHq1oajE1z42T6a0Yb7b6ltFEarkprT+b46Sqpd2ymYBzggwN\nJBbbK65TYas0y9S275vP1gjJKQwG9+IS0cVCw7k1Mps98DwBrj4JES505Maq\nszlGCCM6N9L2xrtH3n370llno56CCDtKXQ8Jdy8UPktJsUhIAi+OyRIoqzOr\nIk/N0Sm30VMXebt1XAcf3189AZEFOoua8W5CWTG0Zp5Wqrobr+GLrTr3UurW\nLG1NRDG/5x0KtJZ9dZ97qRJ9pi1doMOWmS3laYJZa+PklSamF4HVFn8Iirhn\nKwiOBZDrLC3YauXFculQnTIe2MCULoM8GcNiH6BqnrLM2p18BqL6r7JJq/Vs\nyje2e5xBL26b+s5/JFpynC/qPp1VPhwo6RFPL4a4itWZJ+NNRIQUrJTIJ0+5\njvQcmd9eTycfdhpUqh+JHWtEwkpX3t0RiL3eWrlJ+koqBXUNIVA0tt2q18A/\nL96cQRPeiKg1tw3SaRIiD2bd+9R0WTM4j+iE/KmnOrGTweXlDekJb63/Dxc3\n/qvm\r\n=zhuV\r\n-----END PGP SIGNATURE-----\r\n"},"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":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.d4141c95.0_1571881084311_0.4713890191707788","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/typography","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60949c45d5422f5acd394666350081d7f1fcbd8a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.2b878b3e.0.tgz","fileCount":12,"integrity":"sha512-9pKOeJLS1cGHm5ls/f5LTSGWuWV7b7Cn37Ta5zgVtMQrhd0nsZyxKjhLcI71VJKm4E6C2lQu6Jy4BpZzPM96sg==","signatures":[{"sig":"MEUCIBVFD9CGvAodr17MVCS45JGVptvyNzpG1VmdIJJ63SOuAiEArMyI0gyABfw6xScgX6l4PyE1qCcgTzLGZPwzV8N8ZRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmXCRA9TVsSAnZWagAAS58P+QBM5m+USXJnCEopnQQE\nDkj8sGgiSpYkCM83w2KZXNIOMQD+9bMJ0iFxpq8PnhscugTYHgEM/lPT8ugI\nxHakH4lRJcmyZ2pnCye2m04aEmFf3DjF1TcBd32S5jPhwoMQbaAW6Hl8Bsjv\nZGDAKxUtFFrz68tipQVrltEWPP+R7sb24DCiuIabI6YGvaDW7cuej0XftJ5S\nx+q317ymPuk9t8Fp+OytKB2O2u3TvDdf3foBqvr61Z4raBBpMFpOJfZ6+qHK\n9rTxC5OZh/GS0Os8YFoTpuL8aEiNpxHZ3D7F3/FbxFS2to3q/Z6xnSmZOuZJ\n0RLKqGcY93ns7THuaKn8uFZWxbtgacnOuZPTARr2AJ8utATGeGkZMS+BJpvI\n6Ux/0dCRPsaKHzXMZ41vQiPnRI76Katkw3pH9C/RpDNp0yCslvFvXP89N7mJ\nUy29mWj3KuGRm1ijQFS8/tOSlEON721tyCHG5tks24xlrRCkZXAvlqWvs+xc\npBNG/VZK9EQLgPQbyWYLE+DlWXWuer7tYk5Sw/HD5EGVtZGZAp/Y1jDGPaLN\nIOYsxCtAfIB2cHGm1o/w2jhFgrrNI/18h04qitymouto+Wl7txd6nyCRTSYj\n2fGuYufFwEdn5y1KdBtrl11zfwmkv959QshsHI/Ek40kGBw+ZojgfkrEHPom\n+C39\r\n=/z7g\r\n-----END PGP SIGNATURE-----\r\n"},"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":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.2b878b3e.0_1571969430598_0.601624548802121","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/typography","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb4386d8859335fd827c9bdd4150cd21ae190cf0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.b06c0efe.0.tgz","fileCount":12,"integrity":"sha512-ggLguRl4PVcumxKctmkDGnIwdBcdW8RYJodnS0NvqlIiyi6/Xa9Fg0P6hKkLwTR3HQZNxnD/r6BBwEH/cb9JHQ==","signatures":[{"sig":"MEUCIQC01HQZY/0Y8pCUaZhATfoLAeH11VXcIK9gpf/+dHH3sAIgRb4xW2OUfQqIZmbQeTOA0ll97zsmoIYd6C5t6tVwb8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LBCRA9TVsSAnZWagAArX4P/07pUGTBA5en/BLgn9ri\n73bPxHzxHn4OsOUGtNqBtKtg6Perji7M+Z1Nnl7TQL5X1xVy0c6VUpcgzJll\nXh1bCumlF90PaScDgR4jKYutwZ+iSckScP2QweYCBF3NH2VJSi8wxPFYPyYN\nlyRGktVc+yfR5sD5vppNuIVbp9nYviPmRazZ7ogDnnhcLAjLtzVCW8NVKh1w\n2Jda+iuqfxhfnBqrKviXpRjHPhwhVxFawBpbLnvYHaMf1DOyqnGvq71cuATl\n/41gDiy/yKK/3fNY1rjHf50onvZfUrkhn/cmMgXPLgxFfF34gR4s/IY6HJbr\n3+UmdWQ4dGG5bDr8xNFKBb9FYhJkPpt5I5z+ZGt5hx92aEus73E3X2Dn0oNi\nx3oi73LCDaUniyZ0se7nIAEPJDZW6q6ZWAIccEWPULNXQ714QxT1mmiFpdqX\npQq7iUV0fhM0d9XkUyfR8pn2P60G9t4JRWo8cVdTuzaxhW1S1xosAjhtBMHa\nKtIZh/dpnzFFmryGezxHbI6O+tRqjFhhctDxK6x9AFAsNpTkr8Aq95k1iHSd\n6QPkGWyULi/dOd5ExqgHXRRB5zpgVab2CwsL2ubVtIe2Sg2Htit0rr0Ny9Kl\n8dua2zYpIjGswLVlnFUCSiKgbUNSkAud4WQcrfR4ocBBSj7ow1K5udZAoxYd\nKffz\r\n=Km3r\r\n-----END PGP SIGNATURE-----\r\n"},"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":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.b06c0efe.0_1572053697256_0.8264064473240844","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/typography","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.01628efa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78aad18853ae08fbba5ec6cf1947abbac7ccd5e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.01628efa.0.tgz","fileCount":12,"integrity":"sha512-3/JaC5iqIU4xI9p4u8Wu/dUgYV/wxdAAsBknMU8UUn4XtH/NgjNg+uihJG0I9a6A9ov/SMjkeTZgvO9Ghhznzg==","signatures":[{"sig":"MEUCIQCqhibVE+vRYNoi838uUbNddumo5We+/7L2WnjCJu7yPwIgbWyrhSH+XT3viX8zPlVy0yewVWw6McNFf5dHKW/5YYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4GoCRA9TVsSAnZWagAAdNQP/ROvipBYkU3rMoun+GDd\nPWmFpCZvsv8zgMBmyQgf1R+xUuh1jpMt6qFwFzdwzBFb6aeOcgmfE9ZEwPEh\nokkSpzsX7GIzbATh9OgoKt0OVQuHE/g6QgG8AEC9iVw8pdkhLqmOs/VChP6H\nQnw/75w/X+WyRaI0v143kLxAg4P1YZCKi+sKlf2K2c2jRcm2q2XEWP1FpNVg\ntkLCHzszQHWe7XepUEd8lL2olBq3hsVx4MZOAJDbLRKf1vEpRACAQ0m05Adh\n7tozufNp6CmyOQfH7oiAjpv5nfToYSq8OE9DnlgApRLHQL8kuyh/Q22kH9mr\nqeyRSJR/PBhZQQJKIP1DWyJXifRTk0MAIdInhcq8ONlWbxIaBoSQypU/IKKc\nviOUY02qyA3CcZry88oWz5jHH8vCKHnaW9ozKoRQ2rsUEYbqrt1+IlumOjV/\npNHsViVy/NAaA7ehUiKHTVvsdHnQ67J8QWjgw8jdxbZ3saFAXzHl7kLS+FiD\nQTmplVTi3LbD29tgju+JTAhrr6JZdY6Y3ZzdxYWmwlyaEDd54adpMXYk9fRk\nDQiPPklzP0kQqJyh1LJbXabGdv+iSZmB84N6D+6fty8HnNFa+77CinGC2xF9\nWAm0K3JHbXFw4586ypp24DK374kzrv3186yacEEdBJRY7aNNuQ3BLMya9jY7\nXhNu\r\n=c+E2\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.01628efa.0_1572307368549_0.23577027404354256","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/typography","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a67cd55d53cb63cd2e0221cb8e05f647b6e699ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.b5c6d66b.0.tgz","fileCount":12,"integrity":"sha512-vEJIwCiUAb1jgHSoNIAiRn7kYO/8GIfgbYyqaphGLetR1jlxDgy7tM+PiDpyQN3ckZD7QmEUYBd9gjGAyvJM7Q==","signatures":[{"sig":"MEYCIQCnht3FYuYbqXzkl2jT+O3o1qfI7lSak7OCOYzMDtHYYgIhAMI2EPHe/sQG6Y0jY2RB/k7h3TXHktWEEShTQ47Lib/8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1QCRA9TVsSAnZWagAAYuIQAIFXlsXCeGz2skVERNrk\nP+lXPkYjqlm/yVE7Z6hXv8oh7UkSperM2nAYYjseQElkapECkvjOk1j4l6TZ\niBuYag1dt93+db13XFl9uL9Qyfe6iBq3WsLRRc01WDNfF44MPxu8uaAmkjO8\n3bluHkveh062RcKFVBZYOAL13/+6hnFq/jBw6mP29Tu9inDhYBurjEe3RIGa\nSE5oYOTqWlBu9Z2IzHiJnapz7NO+y5hXka3Mw/UtXHpi9c9vXcqGJOollZVL\n0rya96AB/C11i+eafBwFKV8bdVSc5Xc6fixC4eNBR859K2nXJ62v+iluZhyE\n8vBNuojPgNx7Xm+vjVtbbLGCYbsccXl7rhZRZZSwqzJABCwiaB8y9eBHVuZ4\nUlW+9utsp0tqr8TGCjHlQycohIJIEAl+rtA6WJTm8Quv/NEiy8zBCpZIK92M\n6fbmQ/AmBTMairqiJmbY3LHOhKPEW8wLWTFoNEXmJt6fNFa6CwneFZyBovDT\nIpTABaZCirG/x2jYvr6yv4Vw4OMFHOsScF02NsnKqA3Pi+asGqLO358uCkgO\nHpvfOHnyrFjaLmpZrfWEFMp5MIcE9soSzGsvlppJ00M2Qo469dQHWGSv9CEi\nzUZaOjC2nv2MtmlIDgWDjZWvZWkGabn6tRabur7cdBvvTA8lKmxYzpRg1CL9\nNdue\r\n=bnB7\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.b5c6d66b.0_1572371791815_0.19475545414327278","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/typography","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9decb2fa658e4fbe3cdc14b79160bd189a5bcd46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.cdf858ea.0.tgz","fileCount":12,"integrity":"sha512-IqZyf8TllECTzOcax4nKB4xcPnhUUOTYsy7YW/UhcuG05mEmQUlzJcnogNW9ARH5yxCuMAGvOIA5ypXv2wH+sw==","signatures":[{"sig":"MEQCIDMq+aRswU2xhcS6SK1c/frcWG3ycz4LcX0F9Ks5Ej5PAiBlmgddGKCpleb+YrBh8VV1q2s3Q69MwxQcGHkMHsBx3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJQCRA9TVsSAnZWagAAnx0P/RhivAGQbIXSprMwHtIY\nXZToBbavIYNZLQ27fZ6f9/Av2/YczdqosR8/NR60xou80yTMNy4vHEwAYcrm\nl7jLSw28LmwlW3Zx4OiL3jMeWdR3vWF5T+TN/CXf20lOGIv1ux4uv3R/seNh\ntXo2nBMJvCOgdE1cO+7U5NB5odBhB1ESSXHt8CBRTvR+OBVldqWeCkun8Rd9\n/j0bm0/UI/ShVPOj/dCyK+5TWkxOrOf/P4RLOL1vzLiY6lRQGt1HGXOWm1Dx\nRnA6xP0nqlcd/GX57ztPEjTBScFN8RnLEpXyo7AvhQglLnApORGimd0Zqtvs\nBboTLnL1iz6RsxlPfCpjmTeKsVnh6tWQfU8qKwekoScWIuL25XVU3BObqETc\nw5Mu4A7R2jYUttWlIpe1/9tc/OBfMNoqHIwVr6m0j0kIfgHI+aaBoRGwFA/U\nFRentxM8vpUn3q7lA4EK/K8QkYJKYcIfAZ/C5VClr57d5qNOH42A9YmO6HIp\nZccJWFpdCGl0O3P9vS2L2J7OOmSrJszUW0iq9tGr5ntfy5qdNNsSvwOAtyzc\nWB0pIFK580yO8C1D0KuPf+kaeukSLp1RxSUGvzq0ExKflSc4TQqS4x/7hryw\nYITTd/Zz0RdKAyX8ME2N7zfq0aSg+bgBKNKEJtJ9rs7ACCkpaQ7S/EqEpu71\npwNT\r\n=z3Du\r\n-----END PGP SIGNATURE-----\r\n"},"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":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.cdf858ea.0_1572631120137_0.4517352928049385","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/typography","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.719b57e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35568ac4da3d0ffdd56f157a2593d632103ffc33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.719b57e1.0.tgz","fileCount":12,"integrity":"sha512-1r9r4Tln1IlLYNx0h+QOXzyGjIi3051aOdiQEQf7mGBTyFMEqGT6aoSDxsscSTT9kP6rf3Pda2CsnKgUEl20zA==","signatures":[{"sig":"MEYCIQCb01Uc2IXGn2yc54HE/EWyrd8rX8xIspKnKQEynVgnnwIhAKUgO0rsDCLhNIemdvAFcVOo+7coGhKJxsHndHPamWCF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8RCRA9TVsSAnZWagAAWxQQAI1D3SeAz47M43CQiV+K\n9XNb4lgG7H31q77wx8hUJoFHSK/N6Rig7i/A5VgkioBjswyiPUSCPdBxEZpv\nDUvTExKU757Pmc3/8zr3tSgT3/gh/2PAlXdFkuuEvsQ/x0t0oi/G1qRTkaqH\nHYILQafLq9fxWn/+dIuNfK1cuDkasRj9nlB/MQva83jlvTp153uxEIrn9TWq\nhl5SryIXyHgR+wNSF2EWwhwDX5YyCop7IH3YFwtc1WyCeOjMBwEcZx4QGvE+\nJr/Ub/JgCVRcAKtLFGUDp9m5NLlAouqml+n68qVnPYQvigWHCfoxrSyNtNKD\nqYao6Hn8OmGZIi2GLaVp5zD8/T4kKSp5OKFNAe4P4VQnnwcFG9XfwhGc7gHC\ngKgFsdYQtORGoADk6eI114sv6pjZsgSf2lCT6fKjMPQya0YIHfD4NyfS+ceq\n8jjYZTSWnS/oC47F4WrcPUyhqzRI5/Hyirc/7PaQwcIcIsvtuObPBwhFCaRh\n46BaxE4DZspHcEKJ59EIrfFKLDE7Rh+HmtyV+12XjV2G97krNLd3krEuJ8HW\nQ+X6QwwlCpPxNDNiibqaxXz/uz4q2VeTdykalH3c1yFCbSQARCkM4iX4TXs/\nXji/2kNH8x7bCSjGZUcojDHXBqTKK1LjICsikmnkuxjNo1Qm9R3/JN+2yDEq\nkHch\r\n=UTvt\r\n-----END PGP SIGNATURE-----\r\n"},"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":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.719b57e1.0_1572638480612_0.0676845793146914","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/typography","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc8dd0fe80eb097875ec5adb0938a1f462c91ff4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.97cbbdc2.0.tgz","fileCount":12,"integrity":"sha512-cN0dC2Vvwwx+ry7deEivDsgFr23ovjkrd0jwmt/1pBHasKL7PvkVkX/cpqgB71U6RBooe5s3XcvRHUINwg4ZuA==","signatures":[{"sig":"MEQCICE4eCKt6hUVa2f7rtDkJa70a8ghX+9u3gxLfO16wZ3tAiA3GwAtFJ0KA7rEqQRZNpwuT7pU8n/NDbpa5dCv4dD11g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWLCRA9TVsSAnZWagAACTQP/3/QePLWx1FBE/lbN+ZF\nFDZdgatwwclmUvnQD2NE0CsQbrJbvgCdHujp+/ZdGrBCHpiOn/TEuahxcnRT\nYFMEeUR2hV1eKBNNyj7jkdD049CHZ2lfCPBqqmz1bte6zR+gSMYO6t+R2xRb\noOR9DP1iTbRR8iU4MRVXsL6I45gcVVaV4DBnHRKhpH9M+m5wxf33Ddpyn7Kr\n6KsJLvZvHRkj+IY+Rxe9pwo74dK450zUcmO5/dFFazo1hX1hGwh8kObu+y9F\nDb4sUIwaa2cI3uPAlRu5D3yyoH3oOkpvPWn1HzamgVByM85aQcdVBjKy2LGz\nEqljhQVlH2C+sbJajTBA+kU7ZnzgARPO0vsddRM637cPtEQYVq6eyWhdU+HR\nJMOxymSVY+a3AlZWXEFtui2hS3YaC/YrvuMs74hV6Mv6jLoME8U0ZK2PcL70\n0Hul8RaJ7JMM7sYpexXfjpjiLndDjj2Txw+K8fQbGLOzF1icF7059HlcaK+H\nf70sO6JIzjfx1AmtOAisJSK8II9gHykwj3ejhBoaLT0RW7mQcxDulTYqwnVF\nBPJSdVraOeEIj0ae1HgxpRk2M8XzuAq1Akf+8NCl2gaDhUZ9MggEiYFm6gh8\nRjE0rg1G1z/l3gxB5N3PTgt/pTQB/iVrqfU9EiW9elxSJjL+61rVY6h0p1Qx\n1Akr\r\n=MSoP\r\n-----END PGP SIGNATURE-----\r\n"},"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":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.97cbbdc2.0_1572640139498_0.20108893059849864","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/typography","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242f513821368d30264177af82888dcd45a07906","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.8e36b3b7.0.tgz","fileCount":12,"integrity":"sha512-xVsSDwCVqxo5r0pq7oTvVeOrntQ6Z+XMd675ZhHnkGfCTcDS7qLTmM50GYBWSOy9VbiBoVPNQkTwV0/IItg44Q==","signatures":[{"sig":"MEYCIQD9VJvqJRDloRQLyT2yamqzPP18FeJe3T7b2jzyFzrMAgIhAMgPBkcD2UgKxl+9F2LgIquRxF1Ie7aspSBrmbeIQkox","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0NCRA9TVsSAnZWagAAE6UP/RDHGnrbrAwHFAyRXj8W\nnQEvC4ZiQ6tDgKr+rtVu5498uNI5+ueSWrNiokqBNIcHS8rzZrGcSpcwtlVn\nTdSMcIOHQb5C5wzNXy99ZGhdCHnHXHYp4dP+fKSKNM7pypD91W/uw9K0uekU\nYCacFK0+o3/jAG8Y4HAbU/RyTlP5n0nDnFa5Z24pGogOSghLWdH/XvHRVnA2\nTPrdVyBW4axIC3k2tSuPX9KJb2hPpiPSwtzklUBWQJ/NyenijKR0bY+EGYQI\n5VYT6hbFYdKGanEx0FW2ixC7oqfaUbkE1+MnVYhDajjdlMoWomjAP94jkuh0\nHZEupu9/3f4sJrQuypR3JB2ojyMyES05CB52TtEcAzfcs8BGVCRLD21OteQU\nOcmcxyr4z5Ip40W0P0NrKiINJGlN/vccxxAorNi4WVM8BuKpIthnOzjGWVWK\nHHfOLwiVRy2WvPxWKx+gmxm5NpqooYCXlTRfHILTH2+LeNq0iY8tFcrMr+V/\n5RzEiuWVpdTP0zfoNwYcboWHhIUapX3DqdWyznie7Lc6tnAxb2SYKLOXQViU\njqMYjtGKtXh0DyBirv0ViCZcc/qaVELpsBfwM9ShBkwG21aGPvwzQNHSEMb+\n0v7YnDOqjuLLFcxFDrJeAjXHMUEX8QGgcSVvnMvUxBb3DhfooD9U5VR7DJXk\nP7aB\r\n=FWC4\r\n-----END PGP SIGNATURE-----\r\n"},"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":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.8e36b3b7.0_1572642060908_0.03948492309700846","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/typography","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79d3ec22b8fa796a018b7e3dad9fe623905d128c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0-canary.62d3a09b.0.tgz","fileCount":12,"integrity":"sha512-USeFB/syXQMbXuwVdtg/CaHp2gB9xjCWQ/OclKEJuGNjCpynTn/i15qxqI57ANtFdyUxy6DGzVUVfMsEv/5yEA==","signatures":[{"sig":"MEQCICkW7HPbWBZU5PUrPpBgO5RzkfYzQwJSE92dmMcf1MhyAiAlXrlyYpZCSy6CKbvPrP3TuIsS8RdM2Vx1HcpphtKrzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9LCRA9TVsSAnZWagAAn0sP/j+i50t7lYpGEqZDFmXq\nCG1J0tUR1NaViSEKJj7MT1fO17gLskUvu3PV88E8eQPSqe4UIcr53kntdST8\n0hJSqHKsPyjSdx0xGu3HLDjy1qHajK4hwy36BzE8np+zJzLEn0NM9WXLNVJl\nEd73NEmSFq50uTKMZ6IzRcHbpAQHLRKeGIFmkRB4bNph/lA9zULktMcTfkco\nXa0bzevg/2/J2/qq7Zf7udfmAMorFMyryCM7xJ2Z9/rWNgBxKSNTwOAw9pBN\n7DsAoROqCbKfinCbvucUPSIxXR6ad75YYvMqSQhGkjHyqO0DR11TpBihqkuk\nOuDbNJaLpKawV4UVFJII7LHldP6XuxsyhCu8EOuJRD+gsww6yspVXddfYKBf\nLJqvNNKLg3phrQ0WHbEFeAbEi066hrOYx4IpDX12LBSvMeZEheF0c3ZEm3Fj\nT8kzPE+vg9qa96GnnxScaJKpiaY60YNioW7l5k8Wj9yDBpf2rOrvm9BIDo37\nhC1EumRQngipKqp9NYsph1zgqv78TdbP5/8yb/yO0t6EgE0UJ+FIHy3zisX3\nq4nSBqXSfdggBBwue7JIC2xAVN/+qysmZShZq9u4/KVCi2Yi3CWjN8WExkUH\nN/THc4BGhyBtYHH/jhURdZThmVcEBuvvOBgw/d/iYnbVU7+n/625lS4ZeCdT\nKnMO\r\n=YkcU\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0-canary.62d3a09b.0_1572642634836_0.2737441672311762","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/typography","version":"4.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@4.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57be7ac8b819f2ae29d48c9443b113d2f5585ecc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-4.0.0.tgz","fileCount":12,"integrity":"sha512-lUG4yjG9fl1ryNX4OVnOmi+EjhiV4WsWcYt4yzffHrFg1RfKuCAV59j7TtmlMfZIkNDwqK5jvk3oOpTRDFpL8Q==","signatures":[{"sig":"MEUCIHjiskDzY2cL8ZoW21sotqwGAlweDCzcU2lkBKMWHDK8AiEA/duGeQqkw63DYFl/BoAbQK6+IvxcoE3hzAdEfhdzRmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":63776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbXCRA9TVsSAnZWagAArwAP/RSbmKSpakLILXdRFFou\nKC4Xlo/2US1EyUxN2xj8qY7wdyocV+8tllHD1kqN49H5//U0g3VEWesUKImd\njbMMJE2mJFomEz77eIdGDLRKPd+woIWiizplBgziiTwQgLcgXHZx3iR+UfSU\n1wbRzsP4xSCCokM6YMBiF6tmyI37wwQ+ICUo9g/E4SoJFFmjzzKKFfu11WHH\nhvuURYZEcRTigpEeFvVmRbgQVmwMf0oFbsZueAQFK0hou18UDIEdJWqOf1BR\ntHrabqorG1lgMF3pzmdQrRZ2FoSrdv306CjQBvAv5zt18TU8Q9w4rXLk9kKS\nqaSqqHJyBSaIzCiFlBhFXGFpq8JE9BiWaO34uFgAgB9htU7+YJbsgGyhPyxY\n3PxZAsVek5dpvLXzvJkGVss5PBXL94pYZrJ9R9WgzrJQYLWNABC2ze2CCm+j\noU7cDVul65Mnt4mazphdpnJBrtYldkVmg696DTjrLwgH2+MATTlXKMqcjGiL\nfcgEKDqI3Vhv7Su6WJAtf5OF0EHxQIPVHGWs6lU43Ge8Cy6X6gUaBMKGnooq\nKIJqPxhZx5/aaluQEoNlFOFrTmGJ3p/jKEnvH3rzs8ugtSjtvgDuHs8CH1DU\nz+8456YtdF+RDfzCHdLAm9sSQAIrdJUA2H5CHJ0DqG+0u7F7gWeVmXJvCm3Z\nzGQ0\r\n=nhp1\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_4.0.0_1572718294908_0.8928203295304333","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/typography","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"938841c0713c134c214e837896980bdc36db757e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b5eb51e94.0.tgz","fileCount":12,"integrity":"sha512-HR2lXgruH6Qe9I6E0UST6ZWtAOYv6qrUzDOWAgaGWnZJym/Y9KvcR5uC1P7E2hxfvU1j8wCdaqF8m+eZ1vVcRQ==","signatures":[{"sig":"MEQCIHGYzVPBKkGYaHCzGbEjkFdG0geGGIejS3S/3teDL/gYAiBiEg1+vaL8kM5xc+gvkp//hWjj+/B3Z/UTiLyTNoNktQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGN6CRA9TVsSAnZWagAAvAoP/RXalRYKX3BJSKno3gD0\nYw02H+EIfmCdQ46SwMu7t1gKGrWKyyiuWXQVjVq858kgdUhzrcBhAMchKkop\nhpRp564N0T8LLmM6eputfoc8tK0+nRiN7/c+yOcorKrus7AWndtOx2K8ZoJv\nnxdvnvszvEzMA3632XxhAwUt1QF0qRfFNeUkGWlfTTv1AFdwkwxIEJTAdai3\nb11/vuI5GoCOxNE/tsr6FGNFZM873NXA9cWs1ULeUCQ43+w+UVKZDusKwBIA\nOgxxxo2lklvulXOCY4yH7C3nOiwb1yCEDw4b9vtjKBYbPYu275WxivooinEf\nfPP2WiFKjT66TAyr+5uor8mv3v2xZeRdcbKldGFUHRu7p4dR3SMlEnsAii8d\nOslVwv+006+kppIfKW/mrKHPb5/d+BjISyEhAtPDgHpMLkaLk9rdfCLbw0EB\naPu6hdOwJ+5PB13Z01H0q7TRaLS6znsDRD0cjtHHr1WXnZmHTa0bRtK91xmf\nh+IiuA5JNAGtba6ZA6c5OeqrSNIaVm/AVRBeSO9yL14yFszu+yzc7b+QM0sd\nEtoPtQxuFy4QLfZDj7Vg52Q3GxFdPOi7z6NAn+r0MvR1BJYYwINd+lscJP5r\nL9ZBPuo55s1AitjFO7S7Wza2hbC0likXk9VCc+NTXWrSMny7/Fpd6yjZc7nl\n59Xa\r\n=Gk+f\r\n-----END PGP SIGNATURE-----\r\n"},"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":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b5eb51e94.0_1573151609728_0.5337317392876029","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/typography","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.58500806e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7912d379f11a2e600e07d9e7563b048d6c3fea36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.58500806e.0.tgz","fileCount":12,"integrity":"sha512-88RgBLv6bJVXpI+GW/QI3L9P+RISSMRdKubXNOkDYjY0Et/iq99cFXuLDEU6UZGuzflUYXXq9cjZ13f1jz1zhw==","signatures":[{"sig":"MEUCIQDYSVCpjFAtMcOaA8/BbRdW+FmhqAL3oZi8g/heqTFtPwIgFZ9lU+SaIGCVpSVNuy4A5jzeRXiaTzusSB6O9KSVUB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtECRA9TVsSAnZWagAAuBkP/j1dnux5rBtJLYLcTlEZ\n4Aw8i1yXOAI8HmxHCc9kG6iJ+2FcV4fKsdqn4hgH35RVnl0OnohUGj+6KhNP\nSr3yvZRQXGq2yOxdVdseVc756u9M1eW1iigg6pWtw0C6CKCUNQY04Gh6guqN\nzB7YutB7TtWN8ExIXFIvQ4wBDLnLIHRyylgC5uJtqH1p6NGq5yS1NkhuYc+h\nDWwv6yrhanFn1NL5eyWHRTD0kxVi3BbqG4d3G8cFejjLghut7aieYHAiFuh0\n6KmijT6UEccOOvjvQjH3bNOxu/W8DqH7cJoCKPNI8tTCTrQ43T1E0OpXsd2I\n7HZwjXWGaCgLyH9duIkWFj+ZHu2MzZnSk+02Q17JPdYBLtMps+49XqAokA9Z\neGJR2sCz87pDsHnWAOKtf48wV7fMVfhTdcam2wkAz2BXayIyRU1c1MPNhp/4\nKCVQeNBCcWNQleJm/K3xObcNFPv6mHDYhMcHF9mEFRL0OBUt3VCNkK+T1HCm\nlG4uGTUnAzWTwokbH9YDRB5wiUAAzzH3cPw5RdNMATHNVr6rP2bSjG7fGju+\ntXlJEwpe2545OHCm2qDU+1BdrsoPXHJspWLhegvVUmJs57o6FsQoSRjwVu90\nhT2oBQ9A5NsPoqZtvJafQa+1wQ/gsHD2T3YJskREbeXM/flv3UkE/GXWmeqW\n6Dug\r\n=6br+\r\n-----END PGP SIGNATURE-----\r\n"},"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":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.58500806e.0_1573227332211_0.22626940991316236","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/typography","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.66299b646.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87e898e94cd89107186ce068670d133a838a8cac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.66299b646.0.tgz","fileCount":12,"integrity":"sha512-u7pBrLE1SPHvDcyqiiMB4AOPNlxNuFgDnL2NpeBpCaabouJISJeTW/eEjASHybopkhVZuHkcvyTtajhuBKB2XA==","signatures":[{"sig":"MEQCIFXZxMXZeFREO3u8DN2G1XxU5Fg9htatFQ0e3b2YJMalAiB/YQZXgnbxVeRR5RDc2tOavCk7byHySfGmMA8KHmuoEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEbCRA9TVsSAnZWagAAmBoP/R9H/kWm+JAh+zPsiZ+0\nELS7iXvXpudhYDvPUcmtuZ2wDplhZc2vvsLxDPz1rCuwqii4jL5+ECb/Pzl3\nkaACdzc4fl9lGb6psK/g9H9p7aA/lRlB9TY43Qn6OPytCOmSOLDmVgh1JwuL\nGoblhs1/oabHHiRjozSpQYpN+px/PlTXLmNxPXfNpHiepByzVk2pqK7xiTfC\nnoPMoS5qr6eXyg+XIrdmSMNNYjpg8CST89FLB6i3cyzUlF+uvumf2LCDCE/9\nmKhDqGf7OHtYnDE02W1iEuPMHW+KDhk1sd9rGHCV/308++JkIRVDHgfbzmjF\nRf/qdmpiHH2s277D5mU2aG0bDmAgLyUiQyCWRc9oLosLZOhsbHUDMs5Bd5Mh\nYmezoZWyccpVoDQnvIpQcxEk4BedGA3qapELLXBlAp0M4GOZ49ska0r3AtFN\nXMxdjVC9znmsL/UbaoC68+x65roHgo3Z4/Ca5RxD5OG2UNue1PpDz738a8wX\nV47Fy0BUNwMh73U1wR1U5lMbfOaM4Y4ouRSsZHIOSVi9Q/V+dkKC36GsUKCm\nM2o9VvGiQVpN0bUDEF8SXMZILc/q04S46Ke2lVMgWwnyieCOc1P8zi9WH2Xb\nwt5QPcduOkbZrecCa/rgjq6DnIbqR6nuBFt1Sfnejn62vLKyHRCynyDmNywx\nzfwM\r\n=JQnn\r\n-----END PGP SIGNATURE-----\r\n"},"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":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.66299b646.0_1573245211161_0.9939296518389973","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/typography","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.821871e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9601082726f8a04d9c84ab623ffdab5ac117b5ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.821871e04.0.tgz","fileCount":12,"integrity":"sha512-SevKYUFgFrrM0vTL7Zjv79cm71n4+8dhXk7nhikhh+qWz+v6D0CBAJixuoPdgGKmK/t4P2LIr6p6bmBUJepqYQ==","signatures":[{"sig":"MEUCIQCNt3azUPx0pUMDxLSDdMauPrfPZ3U6RCqSzCGMhnrLRAIgW4Fg9HlxNLB5uTqbCgMo1LIfK/aRPQhsbJ/hnQsIDJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3iCRA9TVsSAnZWagAAsWIP/iMJaBkwh87+QThxMcyo\nFFaXOcRQlnggMJ7ecRb46pQM+t9/RPu1Eg/8k5zVGlQnbHgqA5x+fxr8RQTu\nHSO9EI8k2YwEU8AXOUt/l9grEh1QJszMEPNb2chYKbFBVki+3KhdizgCZPZK\nf0A/issbfVQOKD/Pei/iixwjA814sB74X1xWVLkTABfnBYvxBQa6VGzj5u4j\n46HxBL74b696i+UqtgRrYXvq/b6XDjQdzZtyOFjKD/dzJ2yVqb3lGmsSjJTk\nZ3bQoUg7Ink4DDxB1VUIzL5PquO96gC6t4aNBFvTQ0Wubx/CnWl+fB95QknS\nEIYKizxyXDVOEnx3i7nAfSKNSkdyACPVQQlusSVJpDkc6S27yFJEgATSijpp\nxYNT5T8972f7ABJjQY3dN5Xyk7gt4JvvS0uqSqt8F+mqbLaxcdcc4SUnEfMf\ntWaYcdLW42/qJKNgys8aCj8sZ0iFWHf4VNg1XX5MT84WTrLUaJDzIzMMGkom\nDzxc0N4rRPeJFtiGL6I1UGWdYEMF/ZXKQK+WWPBIxwntui/x/WYIJ5bF2dU3\nqKSlFm2jH1LvCyAce0j7n7/HbRs3kpLRKPhsbFdiUSmKx+jHUKozQtrZDMGv\nwwShrYSZOJ1i83H77ya3UMQYOs9e+9SS6zk+L1BUneveifxexEwYCKVgD0KY\nDyRV\r\n=Y7lb\r\n-----END PGP SIGNATURE-----\r\n"},"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":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.821871e04.0_1573248481551_0.4144832032926282","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/typography","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.491fddc31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a06345f89ae5c124a6d0ca8bd81c2ee89f779318","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.491fddc31.0.tgz","fileCount":12,"integrity":"sha512-uu/s89QbEslvQa+rd/VZf++8gjoDy9uB2oONBlPeUQty4okJDBHtMwcqtrHjkupL6cCYDSd9sCIW/6LPk3sAQA==","signatures":[{"sig":"MEYCIQDPI4cR1b1TftV0E9lyBIljqTpWaxr6YMUkq6kWVh9sQgIhAJ+bpc23dFygPLWqDrp3jZUKoP3jH3B1kkkIjVKoxIZE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecHCRA9TVsSAnZWagAARDoP/i8mDTv2+xOM34BYr9u6\n/LLX7QL2cdjdk1FDVIqWfA0bwEMrXNRlYsbhdEdxLvZlAWJsV47uoHRUN+up\naeDUpDt54jlBTjxzW1e7182NjS9tLX4f+iJla0EEA7Fe+GHLpwehNr23kHYK\nwli+ssLaeRlc7VTdajwltJVkkA7kraLRat/PWCuGsZsNR/2K+qlsUcYoyOv4\nymBZoPxdK+1oBwNNdbRH52tzp2C//plBQzFSP0FvlOYvu4adrwnqio/go8Vl\nqk0tL8lK/LekTnN1OC+7zuz91ba31t0XictwcNQ86POeMAJwRsz1dfmk2xQ0\nz0suzMlXD8VAquxk1LK/6xHKQlKMUrSnavCR1K2MyhxMKLM5SAkik86Cljff\n+qCwW2yn/NCx4G5tK/Q/0MFTkmf9DCNfUOSENQoHABkNWMhzNP6mtbtwQgZQ\ncl+MLAwqzK9LFusn82H2sXPM4hmCnAWRFIkrj04z8In+wJ5mSVYjmmOmPOHa\nBVwdsU2N3ZSfFgyb8umcFlDkePz9o3Vm1sdy1QtGEEZeKFJ0Uh1vFlgzE1Vl\nfQwO9XKN6mc1wkqqIUS6eLAwwhTNI+n6p/lq8YZ8lzkEx3oYHTqM7eKRzlyY\nRIaaFeiFSw3zJMjRpjwFceGtxxoxpambZiRWWUFic8pSTFvPj2YVThGM/IFv\nACZ3\r\n=fEWg\r\n-----END PGP SIGNATURE-----\r\n"},"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":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.491fddc31.0_1573250822944_0.6829282914156249","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/typography","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e17ff827764e430223582c8f7f4a3c3d659f48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b0cecf145.0.tgz","fileCount":12,"integrity":"sha512-e8P5PNbosa36wuSAVWq+I4Jfl28HZQBJYMlZZsZr/yfZYpsSyXHgMN3MVLEnf3EoBJu0cBrENM5nhtTpdaHt9Q==","signatures":[{"sig":"MEUCIQDosTylJdK3Mk/XzxYIoKf3zZzlI2nytFFNblYBxSvVJwIgARMbkfZXGhmza05pOwi3ugYJphPnr97bvlZW8Ig8mvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiGCRA9TVsSAnZWagAAUmwP/jwUGDQPnUAls7kOrxnV\n0byBtBVQxa+AlfTufBujC/nIp0vvgqBrpqMilwb4Grn4F8RVjMW+c+2E2w9+\nSMDcCuHq7U98up5ZJMsjwMrPuzgI/YxLYy6YwXuiq80EwZh+Hjl0vapc1GJm\nyVqzU0RT/FYtBFbUfV3KVEP65QfT9g9UxdMr5v7ScTCEjjqedsXdXjVX5968\noTtFGRX6MkKLbO2SVl446jCylYQQIOUzXbGEJN7vsh7tDtuvCmUipIgaMII6\nXJulXKag9D2DCkSF5nKmg2/tCKxUFn8boe0nlF6XcxY9gpig4xUgQypBPtV7\n5BoqrGpBf8yrLfwAHXkmHBdLHdmm75tCk0KlT4HbY1WMbdXMpD5PvNsE/0xk\no3xWMihPaM1qMKz8ipfsK0h4yUIL8PGPSypy0wWtv7mUIIygshvkXN5c7SmX\n9T+PnCrulPAUlxqAoNkvZf2WrvKZ+e7eLZThVy1TWIRu+asi5J+ePQs6MRPd\nz9Z5IRyLXv2bDZVYrvk2U84KwpxKKAj+FRO7Z7sRs+skmoiiL4MEweVdZxjq\nebliJMz+a5DYJ0A98SVTOMSC4DBWp1l7zpiCz0TQc8T4dVR2aO43uTny9jD/\nDc6SzFajyL2ffRFFAudMJxBJB9gglbIjFTwQrfDqIFAHaxrCGGXE6pvlsK6e\nIUH9\r\n=b5lt\r\n-----END PGP SIGNATURE-----\r\n"},"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":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b0cecf145.0_1573324933820_0.23993064950019982","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/typography","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e56b94db862281a645393719293d14805eac89e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":12,"integrity":"sha512-8MRqqIHwjKUdITQ9OzCn/3IQ7I20MDG8tnYbgKgjWJhGuAmxB7x80pglmHEz/r1I/Rgo+jopQc8R1eNq+vUbew==","signatures":[{"sig":"MEYCIQDkVZJ5SA8FZ5ikkG7xFqs6XpU8yh1aAQraXX5E/Mr81wIhAPa5W78xzXAblsUkuGXvilsyCc8r/lCEuycv2/RVBC+j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYA8CRA9TVsSAnZWagAASq0P/RWD7aLwLa8b1WobUkQt\nDn1tsIg5tdTQUxmhc45DZ0ww8kWmUbNild9FgTtULZdYYkKp1VezKsUPHTRb\nx31cHD9C/sizxV79+UwwcJ3c1iKnur+fUlHgxqQw4auCypL5A8PsxT8DjQRe\n2BYbA7fdow+n5/7WrZ06BD935ipPAw9+IJIJDoFMm+9iJ8k+891Y6ThC5tFg\nFDfwbpMEyYlyAgDIixkXns+MVedTJzrRbyUfCzzlhRIts3pC3mQY9L0XCB5r\n7JVvIAEXqmnQfg4hYEU75+QL9BNeZN5nqA/w9mnh8Aphc/ryrVKvj2dC6AXm\nu+pI9R1pLzg3nPQ/M/lqRyrro5jqu1LFHDKXjybZRW9X7+qqOw0ZZOMuA2QM\n5Y8vrrgQmA2Ftbm4Y04OKJibeDL8xwt30VFqL5A3TGCaFtIO6Ar59ai7d6zB\nCKAXDKT0QZed1KrUlYvpOzWYKIerh+Kr35o9gkH8+J6gV5buiXXnAa/FtQgk\nxfgO3IK3yMrCjrzvvDz0dVmCyrioPzztFCWFkxfN0EOc6xGb9jHfEbJpSZQV\n9uKmN8tw6AhBpoCyr93gKYhbn54tbOkX6Ff9GLZAz3a0aqW1u8mda3KkHHKG\nvsdsA++o8BokF1La74dtHGVU5XkKuGwEjrllg/fzFzQpHmPxc4VGh8DDjPsE\npcK2\r\n=qkEB\r\n-----END PGP SIGNATURE-----\r\n"},"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":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.afe0dd1bc.0_1573486652387_0.3154838730388563","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/typography","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74c045f03f8be81f130256858704f70443082a07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":12,"integrity":"sha512-A6j+s1aqRUtxiFKqF0a6I/VWK427yVElWTVnx3qEH6/jx5zKr+sxtjMFPyu7fBRVwmJDdVI7k2492P4zHw1ggA==","signatures":[{"sig":"MEUCIQDCDksjOsfWoXLNjvaNUwnh1hasvFV3eGfceolrqIIXXAIgcGpwOmZGOYkI/DtVrleIeVqfYdZJt9YlGb5fSr5okL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmbCRA9TVsSAnZWagAAyL4P/2kGl0dqBR3oxlMKJKQn\nLecM81fw41UJav8kZR/S1y47wIwB72kOhAChTOjCnFIKzEFYzEq1TV84suOn\nGJdPNB49AWBDKpy6SFkzUD8ygBIW8XmelVbI8s6Rj+snCXe9OXFFcN1NwhJK\nfmSQYz/CXWT1vv+1g/2C7GFpYZRJdiH9XSguTpNVXjZ8q+pxTgLZdjH9WzU/\nnvabcftQWYEmQDa0gdoR0KU7Tu73ugQLEWdIZbbVzRTuadJ0sxF0HLQXcrbQ\ntB9HVCRO+7YVitsRP+mvxjt4fu4+SrV5JNXctBJielMSa33fdaccYvHWtqAj\noX8xHtJw2x7wjjnkfWMdhifS68qRx0AUM4Knsxz8qO8MxnBXi6zk1zjz/Y0f\nTGjo17G+c1Fs3tuvvYJIP3FPwh3OC1ZcwwGfZwKSzwrYqHiginGICpRqdk8L\nOhbH2IWcBJcTS1RL4yueFqzs2+gh0ZiFfozHsP92l4vn78tUgtvdQAbXvZGP\nvXGshc0qn5PFBqE6Pz/KLR6nn0RiQ4UzizAlhxLhfwGNo8J1Otaf4Rf5UPWO\nmN0XxmbbPdJ6QZitlIhjHC5gL7mKX7aSYROdkxjsF0kT3OnTmAmW1+6Ov9vt\nAKPM2gG5jZCUvxpHDp2AeHzoYXXFavJREFq+DNC/tXmfcZuB8F2g81J8Xl1Y\nFJ+Y\r\n=tA4T\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b4cfdc40b.0_1573747098838_0.34955776527568516","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/typography","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.525989b5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99d0497d73ad8665115c7694e770478c57b39405","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.525989b5d.0.tgz","fileCount":12,"integrity":"sha512-ohbeyoH0WZNVWusjDz5RL0Du8oPDAzfFCsJgapXDksCX0gbnIaQ/QQycRzs0v/5QHtYVUNnq6aBnsmOuwkrcFQ==","signatures":[{"sig":"MEUCIAXJ/dk/wTMBlz/IKJI2a74EhBmczHNNFpJ5mgKxIc6vAiEAj9MPlhAataiyrjwmdxQ1InuknFAoOTPz5cDhLKxk7YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOeCRA9TVsSAnZWagAA9zsP/2XNAMsZQcX9V8XS/uP+\nfbyqxqQwz/67gnP19IdSn+YIPln8TnJEkdOp8CXUzVgYg9RGqr6BgzVu1Reu\nxXU2dfVU4kXYP7iBdUp/TeLLLIrwth7NM47zAp3mghPc6TY2dbtZi8+5gkhL\njqVRreZ9SwSEiXOAu3abRz7Atwgrsagen32B8xhLpwVb4xCTkw2DH3CDUump\ngGuuBNhtq/C19Xy3qZN+IehUjrmYLCPVdD2aAkJi+I9nnVhAGEgsZM2YfQm5\nlBWJNdkLl+0s+2EgBX7I4pdduEw7d2CGloYakpT+MgQUP7+YcX4h8L1vu2QD\nDHsl9kxi+fjtnzfNkSlJAp88KHWwo+ZntsKBUUrZIOY9Wt4gs0t1DgO8D0Xp\nIDk7sgogpRK0psdihq+32wToCOWscXSbOvwve1WuUwq5+42iLFzGGFdpOKGK\nFdURhaHTbC06ns6wKyYRZfeikB3/1ug75jQRqhSkLW2TCpcEAAwfH+VxBRPe\nHYcLomKONh0LRs8vgCFCgQ9PO9Ggrhj69n37c5RBhDz9fI0tpDFiOhtXvrgt\nWZWi+7FXpqx+5cqb+e9FSt8lPeuI9zoWyZxyUg0+ztqyNczXNus1upXOA2Jm\nnVgorWFexBNfsKbx1W2dwz3xzCjTkYWuWO35GsiadEAxzKbqqVAdfFWdEJY3\n6uLk\r\n=iE3B\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.525989b5d.0_1573774238474_0.6657544613249873","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/typography","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7084b403a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e04ee5a6c66be449d420206727cf69a23104537","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7084b403a.0.tgz","fileCount":12,"integrity":"sha512-8DJLxXdfAe9NcVbUXm2eWnA0svNn6dxBXITHFjItoYdXA4D4yf7HG8WPeHLnaX6IXax4rftDGuojzYrvivPczw==","signatures":[{"sig":"MEQCIA+i2Df6uMcSw4N2Tl0gvoc0XEHA3Z0Xar+D1ZZLctElAiAkWnbLj5VW6lg/qxHvKatw5LYTSk19NuwvvX9n/QZwmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfnoCRA9TVsSAnZWagAAqNEQAJFXV50KPlW8gyxm1sYg\nYN6984XSJCmz2YADHUuN2jhAx8efmYtkPtas//qZcAqnspf7KzyUPGJMveZr\n9R0Qad6Wg3moNluxlEvlzWEdCcmywre0aXzXDFWP+yLSL6JlkR0h+wlfS6Ts\nNJ8Ew+l73nuTuLwGAiFPElmPJIpZfWMsxaOEXZ+Dgh5Tb62xBS3iI5CU6pe9\nEslTPnWA5wcFVCxieRUvJOZMZXwPAcnQ8hXwb3tVMBXmkT1xIrxDi6THFPU2\nEZtrswx8e1z6urbT1XGx87JzSkFafd4bhC19Qvl+sFk2Jzj+1UAa3r9S5bTu\nXnxffxVduPv+JBYgqvE5kNwxfiE5DdTLuKbasrCRVdFwFuD61YTUKFh7yUv6\nTGUL3pwwL3GkDvitYCyw5N5fKltKe1QbE54PPsCPKH6kLCzaXJ8RXitnd6P6\nOPxUPnM908zXO0Ahatklrw8C1MAoM9Zj8YQEkFIgLAgYfJ3mpKchPuAfayDo\nqtRgtt7zFiSOrdoSjKD9XPgiCXgahppQDBCyS7K+Lr0ufdf2o+NNzzytPkji\nmf+R3kFjBIYo6FWxeUSiyTlICVf9lzdlhZ8x/ji4R4PLt8WpgiFfhOeoH3Xv\n3a3CjFgg2roUsVKz4S0fzlgU3HX9M1RJjFDE7iHlHj0IUf+VQn9ksn3kKZjO\nVMhb\r\n=jiWr\r\n-----END PGP SIGNATURE-----\r\n"},"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":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7084b403a.0_1573779944245_0.49263385462504083","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/typography","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2c003b69e76c7f58b02a8951ebd309180415552","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.3cbee6dac.0.tgz","fileCount":12,"integrity":"sha512-wiU7Yb4VjX+OL/eX1Jcua77gfLnBVf/Do1zZyqmHRcfw+dBIXuMpK850ICp1R7Y0rla+47KnaYqJy7kzSLsnAQ==","signatures":[{"sig":"MEYCIQC+pCzc335Cnj4LWZFz/5NFCDhn+VHurQpzf+V5XFaJsgIhAJQryKKdv5rqitqltvuIstvwh7kavcK7OtWTOmiYkg83","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeGCRA9TVsSAnZWagAAA/YP/1MU8anwRK50XUKBhdb7\npdT1L6ZkMlwJYtCoDxFiktp2ZahFSpY6t8q66sYL9IUM5dEzdwhGFFqzDTkn\nERDd5jT9j2jcn37EVnrwQGokqy089g2RW5sYZkxUqDVFEId5auOvSPDVycLr\nW7Me734AVfrr7HWugfOjdblDtGThncDMT8wvf799M94M8koYNohrP+q5F5fa\n9vjXgMBmkzKEGf+VMb9JAg6cXiX8X10UsehjRsqOZFuXHCbUor8RKuWcRDGb\ni81D2Umslv3ajZBksmQNiv2ueTxuP97wT+EkvIL5EHJTf/JPHE0/GTBgMwEP\nvdrhvCSoIu813Vj7qWLUb5flQlhJugf2ndOTOOUYOEo/IdMH9SC1KCqlDpXg\nhnHvXh8ookgPcsGwF/yS2gkArMQ7Dr17DpiEAQvdynClnvc2mpkg7X8Z12N+\nYdwp+qeutd9GVoj6WPtgbBcOOWbq7UNFJ6VGBFzRdXWmnYb5ZTNm7dxyYqxg\nzKX5p47DLVb777l+BVnlE9x/Aw8nRTzlUJL9N7pDHLC0w/fgs8Y5ybT7UbhW\nJ7ZTJMZNe3tp1P7UGnMN4QPOlDlZUqfg5obXdtoyNJSqRpKh5C+dv5P7bV0+\nUfbSS6zBAJTEO+AmGxN47Qp0/bcjclPQuOVpI6zLMaLbcpXiGn9HR+jfowus\n/BUw\r\n=zHcj\r\n-----END PGP SIGNATURE-----\r\n"},"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":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.3cbee6dac.0_1573857157827_0.5807471698835878","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/typography","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f981623b073e1a1bf2461a8b960b9bd13dc139","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.591a6ad44.0.tgz","fileCount":12,"integrity":"sha512-StDK7IgBLY2BlNwjmhWTjFIAhtjctl9mz96HUhWeJWNHpN/uz1RWccy4DZM62fe1PGciGepLTRYt6lqKEkgrPQ==","signatures":[{"sig":"MEYCIQCRTXvXxBfbIxvuS/p9wVLQpvUFd+gzAUx/SzreoL/K4wIhAJ+Kd0MiJ/qBUYh8wdhezsMMZCGLDgn2LDNWy7lRTzSo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3ECRA9TVsSAnZWagAAC28P/0ZUD6bTg0CmZ5HvCuqm\nNGFknuo4WK3ZLbeSebw0aLU0bht6xi5geAM7vk+4mAX8li0YxqwrOt49+m9S\nAOE3z/qsW5E0oA5YyVsABejlpBlzIiArllhRSnJXDb+XYaJ0RNDox04zSK17\ntVfpEkLbXMNfov+hxgYwIyAZBMBLStFqylblWEVIzjuFIglZJ+q3fsDQuvoI\n473bQqfFjSimDCqgZ3g6ZPMBiIiLzFj8yTy8TQrMyWb3cXCxoEyzedliH2im\nqK019MSIpjRikNUyyr5GMvmtIrWGE+rZR11I0ZTObKDbwWYohvpYAQz7Tt3w\nEP841GElotxWsILlsxRssojgXRFdMcaIOym9CyxpI8efW0A6DCHcjpBGa+De\n3n47wa9JwyNPF6bbumbBKXIW1FFgdt+Lmf1cvyGGtGWFblCQc12Pixi1q+Da\n6RjNNpPGmUY6mKyj9bO96GUP1iUfInsoJw8fOSLJRr74tuLKHNyBEH4H9qw4\nOkhN/vI9MtuFRLdfKz5eJyZFEBGbKu7icEpDjSTWVtPMYwY6ozQL501sT/II\ngcGwXN4N2/uunEYFuO1aCN+tHMlvnS4es/7w7DWvrokcNlex2qJ8cgl3iTd9\nxtrkSRTYYITedd205krPilrenSWnKVLgH0wORBGV5s9zZJZv5YxFXodW6C/y\nga/x\r\n=QCb1\r\n-----END PGP SIGNATURE-----\r\n"},"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":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.591a6ad44.0_1574120899831_0.2203459345918577","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/typography","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5729943ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe38866887e648e59928253f8ae1c4ffac583aed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5729943ba.0.tgz","fileCount":12,"integrity":"sha512-FxQzURmUVuVtN2A0cx27+Jun17vmxTMRBS69adBiQmQHoRJGuZXw0zTLW6Wjgv8AU264bZZmf0uO/Ip7p+9sUg==","signatures":[{"sig":"MEUCIA0z6CJ8tieMeks0CEjJ76d0/9+LvRgI8WyFUE30lMC4AiEAidT9Mxh6+NhhLztU9pJc1yZJEsqIWK2hZ8mx/L6hWw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzOCRA9TVsSAnZWagAAXxcP/RQmQLxZNxm5DW8H0vUV\nJXWyNwpLIoSLiFKVPeZOP56vUAMXVKdV/qIQjwM6vjv8QIW6u5r+W4WvXViq\nFy87tmE7CMtqoHn82RW8+dbgVMByLoizCn1XVkpPbNzYZVf2vlHt/i0Yd7nP\nq5JiRlrL/AbVC6IcDj+4tnAgSBVB8jYOWmLny9cRKtqCl81Vee7kWrROVi5f\nkflXx5zATqDYXABOSsvP1Tsj4dgf5eB9Tslkh8/sXly6xzFQ96FjG0fkjTi7\niK5RrvaUoREWxg0oIyLJhH+PbndEG0NhMe1dAxQNWxaAM/z8tV6fFUEw3JPv\nwJJcRvbvoZtidnYiisMYQcOkvO5V/h9hMBIO4n9c0a2m+D4ohQVrBBZQRcp/\nN3ABTqvE1LRnvOk2jcMVR1TVzrEq06nz7pQ2g88/CCLA8/0mxe9wkU94Mt98\nh9e+vkkI4TFUEHi6yI7bJSu/bwjOzC0hOHGFLBhY0mEmQR86kBDY6yCnZQrd\nV7a7yfdN6PziX65DEQJo6qUrUXCZMkVaxmphU8RLAHivDk8LBn+dBrlO1v+e\nGa2+RMMPDh28zNf3dgMMz6J0vX5MigolW3osPFpEaKTAqKBUXAOsIb64jVOL\nS9QFlmqVbbLojbYpjs64eTJ0GwGdVbKO4Ko1vChdY/Cr0KPICtrBSEc55y4c\nVV1i\r\n=f04b\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5729943ba.0_1574227149651_0.11153923023289791","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/typography","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aabc71390d8810bc7daa15a32ca2c67f3d9ce50e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.e89750dc7.0.tgz","fileCount":12,"integrity":"sha512-pnhHf/h3Cm6nF3zQqeZd/os1UauDawVF9VBwWBbXlRS92UKprWkAvqmRazDrzlTbVoPL9cpVer27CF98NK6xNA==","signatures":[{"sig":"MEQCICnSr09a9CJyTbqsxhb6Q+pr0RFIw5f6ZTpDSHbmEHBtAiAeuKR1rsi1GseiqoaAuGwzMXzPCBVkdN0P9i/8u4lmbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dreCRA9TVsSAnZWagAA+LoP/R2Ic7VfAJUIx/XQTivR\nTa88/Ya0Nk3tFe0ldu+Ib3waKC9D9+0vWwNy0H6weJdFxf1emUm/1o6SbFQY\nqdv6hoHVeYAC5hlmjVIAmOajvfnpfsBAhkCo3HQcn6lz3AEIn3YXSuuIru74\nKA/pktdGKn6ODBnxeDuOTvZsU8y2d2+M04RVritLrwgj7iFZ/3BjEDoc/o9d\naaCLAgDg6E4GZYIKnUIMQuA/0plbihwspk6o484790NhiGbQ0RIzen0/3lYc\nkDGjK55kzhxCuCbCmlQCR+gIG7k6oyqDRMyVZOQNg5RAPkOpHTrZLLFOiohz\nt9fB+v5wOjVLp40yzqkslYBXiQ/uIZ0BUZIbQ+WtmDz840Gb5hkggntpvVR7\nkoI3NRKUkUUUBARVhurOmMqWicNoL5XsWoaPMAWVMyfOzZhh5wGdwJhI8dUw\nCXEYwLbzJ/ba3nyQk1wIN+Rrke9JktFbKZfmLksN9b42l84fuAbqzvSj5v6S\n+vgsgHHI60qDBcH7XntyZMTQs51N2XWFL7lCCdTUMpLEW+nJkrl+Usp8M4Id\n4qwCN6q2X3aq4aGrWYlU0O6YuvA+eWQd37D7u8JFCjvP+xIIWKveCvtJ0hOD\nwkB7764aojnNJEPEU342xJ0OxDryZpsLxQHlKCCJxZ+f6aNxcHt/MU6PZ9AL\nh+br\r\n=OJ7A\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.e89750dc7.0_1574820574061_0.6778905218228031","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/typography","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55cde729929ed75ea3a972a383b27beaae70b62f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.3e560b33a.0.tgz","fileCount":12,"integrity":"sha512-Urnek0I1p36OOjHPBTei9kuSFj1GZla3VPLGoEvRlsXBcIOcjoC1SqeinXOmV2C3FjsviqJg3G5b9Kvb68o2lg==","signatures":[{"sig":"MEUCIQDshE3M/JerTUY+gjHUoi2QFuXraWUXyRcnvlKw4P2oxQIgQOKP+yhF0M+78mOSQ12QQe2/NPtOrQA3Vqc4Wd8QW5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsOCRA9TVsSAnZWagAAr+EP/1AjwhoVF6gDQbO1XyYW\n+SL6m6A0x3Pw2jLwmROaV7cohS650PkC5utr5oFK5MFgigyeBOYGo6CBrxKb\nnQzdYRC81kO+WGDimm3eMXMk82ZPrTQv3CvdBFPGyAAx41+E7JLRIjzNwImb\n1rHVC+MfuPObvkU05/a7OkLoymyUWIe9rMrGri6Ej7VXcYYDcWBRXr6j5o4V\nV2yEHFTIC6BQy8GHwhbYGkq3L4KGywfxSQXsX45DkCRkQCE5Ehfp+PBXFLuB\nz0J+scddstbiVuZGcd4l4DUkIjS9ydohWA1VbiMMiugJZ6tAA7IKHSsFnh2w\nwGGE9gpo8rGn6EyxQffxV3KsY0UrGb2PlnPZrzKoYd6ng/D2l9pK55FZMqzi\nDmqkO50uIBvWw5UnWUFyNSw3dnvtkNJaO1NtIgUbVkCP/OkLO2lfJzWcJXgQ\nQol5//V4WbgdqQjb22yW7qZIU9ZPrqSu9wojSUOS0b9WxDZOVB5q/qFs5t/F\nvvZV3fmq+1MRo+N+T/Uhg12cAB7xcyFI6tbHmHGLTXiuSxqnfG13O4DbMR/+\ngWhWTvUfWi1o4VkXKEh4Qjx/Feua5Tl9NACKpah3meRanP0ceNt+9aH62paO\ni3NTpchm1MtuA6+SppxWKINlTkU1NWxrFpJ0TL02cm/7Eib6pgoirSCjCSB1\nb1Bp\r\n=DDc4\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.3e560b33a.0_1574820621980_0.32710004524481273","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/typography","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd7b50d54c2c7374503140f33411673865c09ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":12,"integrity":"sha512-4QbEWSwdq3zzs+we352VCTaqeUrJNSNYzNTxEYwF2FJOXjWN7vNAAt/DQe8TGt3xc2mBxiozHneGY/6MucEZww==","signatures":[{"sig":"MEUCIFf9tNhOB/3nENYo4YoQaWXc0xCz9zuAZoGO/ZH7BdLhAiEAncGrcamZXbimckUBm2g4s6JBdg5OH3BMIXiQgk/RlBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsbCRA9TVsSAnZWagAAeLAP/1fkhIL9rW1dVoCa2lWa\n+ELO64uXACiwLz9VkQ12frubVv2zVoaBfuTeK67ubmiqUA1ynvGXAmVV3nBq\n2aHggXCMkTL9GJdKpIXZR9KEQp3meYxuj3s/RnYPCiVshO9awVzxNg2uGZUl\nBXjtRQWPx2nf4q449nIJZEt4R9ploTErrFkhlwz8Gbayvw1QeGRHcxzNtBV8\nSyF6aKGF76CCbZfvO8nJFqesdO/mCtDgjeZjNOxR/ujrBlUBe+fWhERvEVUi\nCoAN3qj4NVSpCF9mUwejBPvx9lZkdh7wjEVP3SrfHMemHsATrU0mkb0gHKuv\nUtQzFdCCUFTZVrFVQ8li5mY/QTZTQyM0iK858E70mdeaWc5sASLi/yIfj5pc\nQXRXzDuTi3drhzv9q2sPXKZ/h1PJqrLkJi98UT8Ku2Wp0xmqn/7bZ0CxRoUS\nWeMWKCxJ6j0OEC+vaa4UnVnPJxKEie8lGYvBabjq248waFdPlQfi+SkdpGPw\nrk33rUhdKIjVNZ2/bwUm3BRbi/1tIrrZGI3OC54glY0k4x3YkVtWNdTEn7eP\nMNicYqpH9lInHp5upXWOKdIKYmTLU2p0hGTXRlSRJBLXOcbxFXNDQa3xMFRi\nkqJELcHvARYl6mdONCTv3lqHBOmLGSzmeHOSBzAMCgD1hTDzNk3R7xi5mlYB\nySNd\r\n=SBVH\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7fd17ce5e.0_1574820635447_0.8263241820056708","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/typography","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ec729683b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d75e610eda7f121179c34ce3186bcc9aa8c4664a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ec729683b.0.tgz","fileCount":12,"integrity":"sha512-oaM4VE1VEkm5ikVTdz3LBhpaRQsBJeD2hMROS8FSQL6P5ByMm+8Zd8Occ/NkMYKAByC8v4K0WXsQpN0VcjzxBg==","signatures":[{"sig":"MEQCIBiU+dUyqGyvCMf0D1pqepFiz85JRudjva/dXSEpt24JAiBp/TfZf8jnebuiBKaQZ3FVX94FY7nPnOYghzqHVI5oHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pw/CRA9TVsSAnZWagAA680P/izGAKtskL5G6zX4rxoH\nquXc08lBwA6iQFke5gtIqXvaZtTa5zu9fLneVrlKoMLbQ8azSd7xyWYvm8BG\n0EomEFnxSuBpbHrIgg30BYHa86ct89GFk7fN5obKsWjuMaWy4hTh7kS0A07V\nKh0eQTtJUSsVbACKy3A6iXaOGNusOZ3TqFasA09Xkyy3d9XOKoeIrcpLRVFR\nCVkBwbmHMqODk5iQ4nYTTrIvch3z2EUkG35yeR2Sv6KS4rK6GElhQ0o+sLEL\npVbDi3LZiBBVH4un/aYkK2d+OzW4SPMIn3sdH3Zi3dbp2iK6pU4S1R6MCNhL\ntXssORucFc+rSfSqXlG01hMXQHOo2gb2Lld9UlUhJ3o0eKoZl+3qL1r4GOuK\nNxuwfe+/vTHjmKqXRGOmI3TqTiM7lnS4+H6w9vGHEOyi5SoRP2tvO4nBNwog\nhT/G4ajVozokw3Z5ak6GxIenERz1F4ehQ23/cXthNyU12aCVoKdZbneitjYM\nZit+qqvt8OXnlYp56VHLPTO/h5uOtWLSO/UAAUFad0hVbL07YzPA4yfHWoaC\nPkUWkWYeDxDN8FVY6prGoWAavzRWSMMtcuqlIJtvHk7GhdEnvGa/8FVG9bao\nxQ44A9tGsVWpVKov5Gz/fix4+34DEM+Xg7tSt/w5Kaw68gEwUNJMlopnML4a\n26HD\r\n=cMPo\r\n-----END PGP SIGNATURE-----\r\n"},"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":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ec729683b.0_1574870079350_0.2127066699614264","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/typography","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"322153a1733b96cfd3f837316bc590574aa393cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":12,"integrity":"sha512-r7ROwytdyU5pZWWFtC2wl8Wb1wMfUo5Q9FPMilpmmmYeYWDoJFo9Zvq1kRsTb2ci9CRl1EcCURVaEhJOXlnRng==","signatures":[{"sig":"MEUCIQCypooGwYkoUVSYSdUqUYw7gOAJrhLirAc18zxFsgQu8AIgPEsqBcCZMpoW2YoCh669QnlD3hOLM+D71BEPX9Xoucg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suTCRA9TVsSAnZWagAATa4P/0DIV0g3xLknsMCzYZjO\nQGoxDrvpbNScG2glZHa46TZNnNeuFCgyAgfEEp6JlaVFb0KSEMwTCRpc8o3+\nFk0wedYzVllyAcQ/aV/VCdNrXYZpBUJFR4RksCBvMBLIWxIxC87UepOXhGaq\nxP5LPC66T9oOuLi3JBxP59EGBNDEU9ui+2QaSfVUvF2sGRr5JvS+keqGwhzy\nFagFyxVOpfARPA6/+YJHkFpkE6oZvdF/Rc1HLT4afXC9nxMjk/xLN+S3RFNJ\ncY3NLtm801phlV6yC3PW4chibhR/nQFwuQexkunj+jAphiWRahGXDdL6ehET\nNGvnM/nrFORm2cQgYTjT4LVAX0M8PYWbaw+3yk8Cx1TuIWZMCzmhJrZAa8i0\nWpaL7LF5XBBEXrkdF8aXjwndWkElfvMU/Y1tsIO0y82tIzFKuLqApEIHjwVq\num+VbUBmjjkSxQ3ohBUAo0gWfLo6JrFTw+AROKkcF2Ya/qU4U5mOlB0gTR5j\neI8fzgc4wtFB8/DvpUK8JLhnyUyYNXmBmFXZFwtH87L8FQGWSJIqa03y4dWY\np+te8tYZ95gcfnBnRZ4NziYThjfNSTUKcV/sgPEH6ZGeJPkEbTW5VS6fFK7W\ni3OOaVKKR1aOt1ABqdiGnxpPDI6YPdgb4dzEaH4HdaywxIq6Oc4fFcqemlUC\nyeSM\r\n=W4Um\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b8bc4a26e.0_1574882195055_0.5783976440456979","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/typography","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.f978109c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0526fa421bb34a7919b97411bc39bfa0ab91f6d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.f978109c3.0.tgz","fileCount":12,"integrity":"sha512-IaGjSKdP42JroLQ3ZDknAgbzs1AVA1lK8bQKO/esMAfhCbdRG9cHBTNn9XpaC9EE2zC5ssszy9f6E5YYlLEbww==","signatures":[{"sig":"MEQCICAyzrnYt1uTkvBhoM2j7a2fPWdAr9ZuwDOCuwbZxhGtAiB4tOsPdmd7ksdt1tH0gJO5ZwFdBhMpEYrT//c64z1F5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5US/CRA9TVsSAnZWagAAKWwP/3bJrJkEoTYFZsNUGh9d\nDtdK0JElyCba9vft6jY19q6wcGDFisCqxQqFqKr5XSFuVRVTUlU8Ea9dsCdH\nL/b1vpXPNLbz0hxVsel+9b8Ho2UKrpCrZ/E08vnaJ8owj18hVHVbUHPzKx4t\nc44NvlONQqLEeSgiD2Y6urJvfR5BB6MN2dB7Pjv3OJ7iZ9FHZWZcD49CIxKN\nZO/JGez66lLYifzomVvnji3hObnWLEdwdrGbP4TWdNJPwO63CEhq9PTiiDMm\nwL8LUEVTtwQNFyCpzZjVw9J2fAYpOGAkWDU/YiN1G6/D5422fheRO0tnEzN+\nebipqWeMU0ali6tbiQMxB2uu5oqwDp8mKg4/GnyYJyWkKbgK0MqmSguVqMSj\nemqjBd1n2ZunOiYfifrdPMO41vrJ7iEcCSgkXGbu0VPwy1Kcvkpf5bqJO5IJ\nVJbp1L8pEsTAdBX9u5DIVd3hJ9FhWAkOzEzU2Qak9H23gs1mHBAWze0A8hfC\n5WjPdQmmcRVWYvVis1PiXfdKAoxrVbN8fssDYYqkCqVDyzJKFYRpRpEXmmjj\nq71W8mAohkKjvHtqIOd3bksCtZxWgX/PVaqpaLtalvUhMliZMeIaDNRbLA9y\nuuCPpSvBDnnXj1r96WQn5eWgtbv7R59qIsugPGT+8NFU8431mS8Tgra46RMW\nITiV\r\n=rKwg\r\n-----END PGP SIGNATURE-----\r\n"},"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":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.f978109c3.0_1575306430538_0.9093683987817223","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/typography","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"702088bfe921592a679400e53b1b09d7065807cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ad9dfe706.0.tgz","fileCount":12,"integrity":"sha512-F5C6ZNqe1bDTZZqinIdW3CXW/Xm1HaWqmOzSNvuHm8AiCVj90WyPl2jGGeWJYiGbeGRf/Z5sKQ5/OXBVOZCCeQ==","signatures":[{"sig":"MEUCIDiRtQAYdci5aq+vZJWcL1OqrWGppXm7tLVTxALNDbQ5AiEAq23yp3tNmBYGmjZTf73UTEbhKNGIp1UxYeAUr0sSP6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0eCRA9TVsSAnZWagAA1doP/1O1nxzN36iVzHPap3dK\niuiiet1+F0aYfwyRofAQgNByzQIEDs/kfC270FqFnSaf9vreXofEKDIlBSzz\nJO3xPyws5OEVpduCYFwuTzrYOF9poA1KYCmJSBQ5ErZclKea1tL23KtZBOPz\n5RmJ4Q38hIcLCPYxfy2eKRueq++Zjt0Temnp5pBXe96HR2m04LLO18diUu0r\nNpjzJ7Zr6pp5CJzBQYZlZav1d/bHzkR4mVpxvBWtS8+mmPEtcgXJiQuDm9AA\nIylyJjTANS5eb9LHAahqTS0pPZQ1NxOffulCKL4lqRcRtRwqUChpjqtrO6no\n0TL4SeUwW6PVuU8sduLA8yvDtbplfwVbeoGCAKsYVVHEaygYyxUEEU8r3JxS\nolKERIRKm3/1+9TD7r6oEM/cX5Y5CXA9N5YdjDJDxLP820CX3ZiZ53rvGPUW\ngMR0FSL0uBmZnxaZM7vCifxNJnY33Cy4pwDeRnx+sYCMLUCM/tjeW2rIqMJX\nUdv1/8YnG94HJ0P0F2zo6za4xyzLNpJDIr10BCzjr8kGLUI++f+8kB5zpPg5\nS0oN8g21CefpGTTgYhGbNJDHFC4ew0b0vmIqNYXysi66C142dadz/KSSsk3T\nT4Y+OIQYRefYBUj5zKLRizcXC1sNHFfulVFCA/SkLEPf+Wnu0xW1E2viLJvR\nBv6l\r\n=+Mc3\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ad9dfe706.0_1575415070067_0.566959305117982","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/typography","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"491ffb0c6baaaed6dc465407362cec2b0ce2d18c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5e45d77f3.0.tgz","fileCount":12,"integrity":"sha512-WghJS5higqPoeDgTzQoMNY14/K64RgyQuyEkKeT9VbvKza0Abl/ux/m8GG+nRQFMAvVzks48PRnZN1TkGkmQKQ==","signatures":[{"sig":"MEUCIQCkQgQV8H13k+CjAnL+GIEFPFChmQdANGyGc8qt5nTlAwIgTdCUU4PmsFyWaDYObJS0kwnAIjr+jT11HZTBpp9qR70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1lCRA9TVsSAnZWagAAiGkP/1Sq6AlWzfpkNUSPEJxH\n8U53AC/Ztq1TKP1uYNXb5I3XAfCUdmxJPWrlsq5Dp6KQ/MUmcUMIJ+CuXwqu\nxOTkT6Uvp1UW5/bxp9eJxV0Ndldk0Q5NLO4yy56OEyAZ9UYb5kSzqQmHCptI\nrrMswibTZx8z1GfU7kzpLJvo5q9O1YZySnZ0wRQLtjJbmubHfss01HPHeeDg\nd1WZkuvg3dIHcwAJg3DNyK8bEAyXzXu2xIkRpsGltHfQiOPzJie9BZNxhf5E\nPhsFaXeVBdJ3EC7isUxS3eH2zd/CvadRXcCMIeM4LTJsoPF9ZckMvvCfSSRi\nzIYB/0kwtaOMa9v68m1c7UNRuCgzKRh8XA7Ja5+XaT7uOfqPxzxJQlyyDRhh\n95cJ73Ryg9cR+BdUczXJ83chnvTo1FmgS8OxoCTm9RNebExANdLCI10bWAHl\nfhaA9q58ZZKkwXVK88CLKE9NjhOjJI7tq1g5vR9+B5Z1A4ucrpr61xKz0Q+0\nnvDV4PNjIuPdWqbR9+djdUsX+xbOjqQmlkSkU6Lv6JTy8HGJnOOM5bw0xwEA\n5rlXyYzyv9DUEVP6TAz086BpLynUxdI0LfwkxqVeRDlT32euC+aZsUp9Tn3f\ngQquM67VXG1PzdTd8hJJYHKqYvgbh0ZXg5ONs218wi6bp+V/AXb1cvk0+ptc\ng0nY\r\n=B/QA\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5e45d77f3.0_1575415140816_0.2915699824995128","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/typography","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcfa74f411873b297209ac39d8bc9de2a5d45678","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":12,"integrity":"sha512-ppDZPa/FUMQBPvKvpuGfwHhqPlTDh5EeYWQHLWKjEyXVJfwXdXjVMCRxhqDDM4woPJYrFkMrRLsI4vbBBSgzkA==","signatures":[{"sig":"MEUCIA7hT/Z/BIzJQM1MsNB/Mru6Cg+1hTZjhFmiWPYcINd2AiEAgmEJ3UOYaHuDiEKYUv0pQS8brrzVyzQLaLSh6pt/xhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2fCRA9TVsSAnZWagAApnwP+wRikTYrVr5eKLQDNoU7\nWM+Do2+GYW3nDvQWjnF3QI9jku6Lt61j3cXwbsrnVi3h/m7anXyrr9oygHAA\nWvBpEh4F9fVZulgIEglgOUhxbKa1cKQcMXFTaF8s3cv73a2Rb+mKxiKrDBM5\nfx/+MLPioBWw6XRzfWAV0GsbZFpJYwMFBT0AOJb2ELugy1JGx7rf1Js1TU31\nQMrR8qmIN2TPXym+4Ju46jBJc4SB+PpkzWFaGUNfFetGAw1anxoatcKK0rhK\nB/sAcqPMFXxms9W2oxbXlD4kzRIicF8qOiyvspMPsZ0pxWUZP7On5+dxGVKV\n8zuTtc2lJtIhCHnN0hZeFopwfbiJtSqwCb6FBQKgnaM65ZWs/NCJmxACru/+\nAbErMDB6y4MW41TkYY/k0kCw5SJUYb5KJlVSQvaRcuqxeuBjhUDY/ctI87nH\ntNc3MDjYtTJFr3Ae9kuQK5sGU9E1tOntgPNXHwRpMZ6HnULo/cYp1eOeuXFW\n+w53WQ51fNv65gpE0j1dFEYqycnl6i7KaEtCYQcSQk8Ha8CXXiazT31wS5br\n8UfCkadYKF+SzkTS/t6E+lC3kZGZzFkC/ZOZjmRFOsZ6KfR4hvf4HaFoh2X3\nmL5z2tI+Pzh3r+RLCWnPwWyKAxEQUo5Slvd0hju2Q4E2dS31UpqBLEAZ+WJD\npgUF\r\n=4C6S\r\n-----END PGP SIGNATURE-----\r\n"},"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":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d10e8cdf3.0_1575415199226_0.29402029249519357","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/typography","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08825f08467090a0f9eafe07e9b9c57f8b897cfa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":12,"integrity":"sha512-FXG1ZdlmBs7U4VmM6nxTgMLyxZCO9nYe5ka1arrcE7XGF06KqQumYNJN3jtzNpxa7PtghOGmtMPNDJzPLvHSOA==","signatures":[{"sig":"MEQCIAPD3ge9KUF4uDlQhj571o7QoEjzsxvl90a7ypicHXhEAiAmYsQqVEzoJkxCH0jd6yaC+DXtA5dkUVecg8nWoSLWgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXJCRA9TVsSAnZWagAAKqIQAI0OK8/Cg3e89DC1Ec7b\nHEXvrH+Z4J3L4UdS9XEkPHSNgjt2O+6MpACmjRRs485isPmWPlcJ9TGF3bQF\nEiQ13yvmf597rRguvyfwezY1TP5NOps4HSS/I8Li1ZfEqLuPHXWoav0lFEA2\ncqfVuAMIJH49DJ5zYRmOwVmArDl/19pd//B9PkOAs3kNn881WkUVEyJl5I+3\nYMxf1AkV8omdXbFCRKSdbUpykKrdY86Vu6VuzJyJEuMx1yRLQPipC9YRt2Cf\nQKKTCyBueCOv4FD9WXN8bQOuLhQW9cTdGHOeUUniLmgvG80iP6sP7K4pj9yI\n6mlrf6ip7+6epWyNgda6JFmSWRFjlDcSVuwkXeyje2D08fBTrilOQuk+9F6U\nQI0YgE5lTi28Whbt2TrHjazCoteiYwTtLq6oG+UaKv/n9X1KcmOIbiptbE1G\nYmOWu6/HA29cemygATf68ScMQ+8Ni2NdyHVnWXevCh+uPu43frxQiXCBXWDB\nYdyNJujwa6MuylJgaD//wYvGMyJOZlqFo3DUGW6r1MthHtwTsfoNU0U3Wr2V\n47xQACXhB35oanrP5TJSeasphtMv7KJ4QexTlQ94dNIsA5+oLGNpSLHyJbQ7\nFdeN06Lzp1eURquGa6dOXCaPSuflTb/JE93LzxK0dj9x0jNBdrCG4wd+RaAQ\na0zr\r\n=rAou\r\n-----END PGP SIGNATURE-----\r\n"},"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":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a5dbd8a2a.0_1575417288601_0.720138909001141","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/typography","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1803ddcdb9106fcc038a852748bdf7f583557e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ba879b68b.0.tgz","fileCount":12,"integrity":"sha512-xP+kfy0s6OHA6Jp1FVAJzTiWEzmM51DwKOlbHz+2YpJdWJtuu88JyTCXvzjCBCxsm/+l7xLR9n+IXS798DvtWQ==","signatures":[{"sig":"MEYCIQCxNT454j49Gz9PUefUxGaXrJEm4pn2FwpBvZov62xnJAIhALO22Yywwvd0REY93FcpqAuXt33yAgy7xedbXN62FXno","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWICRA9TVsSAnZWagAAe8gP/1yvr7AVcLeI7cyzgeni\nkA0XbuQgM7PWIbBsd6/Bp52b8n2mYLkNlc2BduX6BimFIPDagvXvg/PTJiz5\nlbcsvK3Hh3M9YK8nvdBhJ2EBySAY4sQzs8K+sLrAApnSskaGPy8glqmgjc3c\n3g2z6Pv6zAGCAw4t8AJCPct6GPhYLLUhHicttmukwhXZkWrYOKtY6nZtSLpF\nT8yWlA9WsSCfx9DuOgvCrARPn78gJ/IxZWNxZKs6NuKQbjy+t7m4m7FeVNOs\nAmEGtk5ctc8FKTyzgk8LFPyEaqQe89yuiTg/0wqZNrKaxSsmN5hBiZlNF5uJ\nFzRi+EqXJAXB13zyRPG0gCqOZSibhaG4ghdC/SUU97AOyvpCksY1kFJXWDJw\nD629qNM1EBUKqn2IhnLOFafEu/uOWGVA/Tg2BZBiF5WqHadoABTMMjbTBw7Q\nFG+9hbskM0T3XHVRpqdf5SEna+7mOBL289TBqYIikOgQne9dFvOasjUDzYPz\n9jbZ6oDxr49HrvmoCc77kYlcwwqjxgj3yu8zWVXm50tqt7cV1Y8DfJL/eb1o\nCjRQSV3ZQOr2lxSJBtCru3jLPXtnKR5tZ1JzRp2AMiQ5CnsyHMcVbzGgYMTF\nHwJ4146AHoedmTgBREr5pToxoYt48OL30dfMhBgmpOjhYyRO2SxPSieZ+Zj5\nhRN0\r\n=NAgo\r\n-----END PGP SIGNATURE-----\r\n"},"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":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ba879b68b.0_1575490951817_0.794901370410293","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/typography","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0a8b2b923e54ab80b6148458d76ec4ed87a3401","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.aa0eba489.0.tgz","fileCount":12,"integrity":"sha512-SOC8bRfgNQ6fVW3FGHp2jWlOyAhhp97Bw+U/2gMI7umjoLr+bdRnu4WzI+msLRW6B3yV7Fzr/2mKqyH2DvLMDQ==","signatures":[{"sig":"MEUCIQCWjyvaNqGxXahPe0udrnaF/cc3sBHeoYSeUyhNo+LEbwIgfEIb+Sf7LPi9fsORT+8mvW9Zdui/8HZFoCWrsBtej9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXhCRA9TVsSAnZWagAAy3gP/3WCNaUUPrHW0D4sFHPt\nEUBVJmwefbykCABK56MKo7ef1bocFwXPozRbtxrrumpHvnCS0Kr9RCuJtbxi\nmxHfm8w2ZXrPaYO53rZYe2W1sICobER1nm7EQfZ5zYvs+UpJFf9t08rPCllW\n3l6WyvdMYW5u0ziqBQ7LC7xRLormeva1MsT4960ZXByfqPxeKEsoDEXAn4Hd\nKuRE9xSiDC7KGkI9I5EA2BXG9qHrSNCV4XQ57Q5tf7xZE0J3BrKLD7stNWxQ\nmWA0G+ZT+smIuXleGdwifd4l/SWabBwOM3ms+0Mvrq7V8kYlMWDv5wwfIHNa\nW2+AQowU2VYEEMC38aCSQpiHrNl+pSa/8Jii22RjeNtcSNRTcfbyuhq/C2xB\nMdVx4WtlaZnJ43SlUnmDPTXV4zsMyQm/DQDGdUjXTFQY1pPsd3BTilWw7HLX\nE/9RlXLNtksH9w4QhkM3i9dFE2cg75x+E/r//aA00WRUXeP134D5iFplo4v2\nVHVUwX/UKKK6t0iAnmU9QU2lqheBxi3z60llEOqiKfRJH7Xyg0kcexHMjrBA\nq8l2/+UPjcfs+h/qq7azoKSWgfFmaroDOBzfrkplFZi9avepCVy1eUkzugtc\nbNHV04rJ0YmvLHPYiLjEKxEPBgoEdHlRM9JoMknK2MT2vdJXP3FgoVx6Cz64\nps78\r\n=3Q8/\r\n-----END PGP SIGNATURE-----\r\n"},"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":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.aa0eba489.0_1575597536955_0.6377221196034633","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/typography","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f43c8d643ad1447c7ca7d8cbaedc3e3c59c3a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.cb7b71a86.0.tgz","fileCount":12,"integrity":"sha512-oiSQggcQOqvqRfJLScNvqO5Iw6lQYoxbZBGkTuIXFe3UKIR9RCm83Fqu9UxiKbRvyZ8+NecTCQHm2juutE9JpA==","signatures":[{"sig":"MEUCIBztLe7MBr/XbUEoIxaPwOC4KoPXTWJ4cBGa86jGtz1AAiEAo1tQh3XebGQVvhjkdM3NOXWVrfwqGRqp+zyOCZSg12U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqACRA9TVsSAnZWagAAXYwP+QHllXBcGTvRlfZ8AViz\nrTIQg8F0AOPJt3Zc5J5a6MlZrQcV5Vy6VZO4LZMklvsTtz1qmv/caUvfbc5N\n4TSxs/68zo0q3SAxVemGwPq3lIqmTpYSlYdRBDiX/TwoopiHSbzlRtWxc3ue\nFjHRZqL+6VBsSEAMK1XxhSbzXgR9NGhe4cUxUv8+gkfACqVf57EElhWo8Qy0\nX93My0NGf5rv0/YUy3ZdbG0aOKfs6Ey2c/Js3eoxnYzEGc+LJFBkXfMQxAx+\nf0mwYJ+ZRwD8GTyvcSZrfX9fzdAkri2VlPzW4NqTck+Vn1UomtfqihVBY9RH\ndqjc8TpyMRvi6oAVvM3ENkOiyXADPhQKPSNg9I7jC2lq1bQ8KIG38MvDS3jJ\ng1GjOoURwKNbuEQRDszZF5xqdg5MDV0CVmPqbCcO1yyjW4rilphb5qe0bU+o\nxgEPU9gNO0uKb8DBV1Ns14aPZcIOV7Hk5+ntNHqq2BFLAzSYzALzyZHd9AgG\noXj+a1RjUSq8/xP/3O34eckfg4yMEknqW/jLjj53s61EtVv/FkK6SWkmNydK\nOkPf3eP/F4B5X2I54tPyd5aF8lYaQHbCmgsbI7uO7xnnP14FvGfTswpfHdGz\npU8Y26pjuL7T9PwPG/ynWFEx9geFzq4I0Sigvt9ix4XsSmobhezAofLbSXNF\nwTqw\r\n=XQp7\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.cb7b71a86.0_1575676543728_0.905947375728843","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/typography","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03a79af49cbdfc83f182c7a348d5c2b104fc0f29","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.50f110a6c.0.tgz","fileCount":12,"integrity":"sha512-VzA3eFpX1RD8w3jSPiZ15K+GXqnu7gbIv95n6Y8wJV1ykBV4aQ/1ElpPUpbfvWXlScfP0u3PLyLYkCSB+v90DA==","signatures":[{"sig":"MEUCIQDOTuTADFAvM06uQ+ltgL9oSU+5/iPP0+PF0Ipji75VigIgNadIwCMAX3VyJeNBQVmSYfF+Ag7dBBNywE/K+n+zYhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd787tCRA9TVsSAnZWagAArSUQAI8EiYlNlFYejq/2YU6t\nIOqm7knCTHyQGC53Nt6BmrsnMmwyifMjBaZ9s4sR4B8NIsLmqm0oaEDCzkmM\ncorX140XSJ5w88KmkIIwHrZKJssWRWyvxYPL7kpsgSJbces7cBW0RVqoAC0F\nkoqIOmg6fq6iFjrvcVWUbm2u/8tE77+Mk6bWsnGhKnooTLD4l4uQIEQEFU/l\nvBnQENZv+2eiNSvmfUkbobpAnvODRcRhCjl9Zp+aihNU1R8EFAC47qqzkgPl\nb2ag70KmQCtetXk55ckxMb8KR5rj6t0jg4/x8zE7IeCx/BbyPlroZjjBG8Dv\nAZF4RgTBWgoG4Yg3wofrMlWIPQLzL9Z/q6/Evx+3ieXHy2uPhdI/n0rjowOt\nlsRT219RCIsSI8rJGiXyAaBiMUYwKpdkrVu3ayECixiYjKXvqrmkmzAeYz0o\ngwIUwOFCY9EplYHyoXriLtxG8ib4jotBj+4zfuVIOrrbSvdkGrmxJFKO/QZR\no66fBRslXLZayUgo4ZIqMptc819sRL5YaJTgrNhqlSYH7Xt2Ix368dVBAuWP\nWca3T5F18NuPKWAQpCW5Jqvh3g56WFCaaQvBK3/T+s8lGEjDMw4dMBSGiTk9\nOEBsjFsIsKvjBicfsxGIHdAbZYPECiKkTxuWetMcWlMa8Jq5RBtXC2EOGlCD\nGJMB\r\n=mcrE\r\n-----END PGP SIGNATURE-----\r\n"},"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":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.50f110a6c.0_1575997164569_0.7045166457498531","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/typography","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6524817726cb3d6cc5be9aa63a74cb7dd772fa0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.878a08b7c.0.tgz","fileCount":12,"integrity":"sha512-rldslAT9IL/fUF2HZr7eEuaKL3hw08W+dBQZiKNFW+WRWKn2hjg6SqAYrOR5d81iHsL9x0z4PJCBxa1qIWcEpg==","signatures":[{"sig":"MEQCIHVL7qyh39fHLXBG4R9IXTdddXcX8KFDMg8Ippp292+7AiAi8pQPGcXsJnH0/skmhW/R6ME8Uda5eeRDdFVi2W/4pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6JCRA9TVsSAnZWagAAQtcP/Rr3shQA0n8+mx5Co95F\ngdWjuErai6Rdsz7i8W/RCcxoUiYcU1YA6KO3lyP1xUA3RGxiqajj9fIcE8wf\nN8Byr1GjNq4S7HDtONQbLXg9kpCT/qPgNBUwRZTdft/lOCnGkO3QAYi6Npy+\nMAB9YbL/B+KpY2/aTctI0E15JNr4hzqqTjbOw6yGEdP1+Ld5CWkEUEnI5m+o\nfu5p8PY79su6R0C4c/+5WHWHoPlUQDmaOe3aFPGAGqph5MC1PWQF92+sLjUn\nUXaZIaDUIWj7cMpmIJ5hQH/1GnPLVoq1BreOAdqBcAIeCV4iWe1149KL2iCh\nYr6vw2FbEuX0ZzMNXVSfXdhf02s1V1bPwSIwxdnAf2xpDBOAxdIagd0Yw2S+\ntsPsMmAQo3FnoWGBMukO/FtQkGj0jh5XmB3q1u9hM5BHaotODceAE/LfG2Wh\nEhC3a6XvltUHFMGpYn0/w1plheTuKtXpXOEXABpQ+Eh5km00uc+UuqqyH2si\nG4kpYNXBD6bQecqX7jsYxyvIyKVuiuwV10Qhr0kEjV6iBLQDK5bjWfl5utjy\nee1pQJ3Ltkzzr/Vyzc9ExR+ijRLfGLsxIDo+il+NSx39M8C5WmCVcGfKtVqI\nWlYSUjcShyG82dXjrNtJ7TpUMAGVGjRBuK52siP0K8MAfMnVaBbtd/LPR+qs\nTCZN\r\n=WXxO\r\n-----END PGP SIGNATURE-----\r\n"},"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":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.878a08b7c.0_1576095368713_0.23280663435261095","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/typography","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.397905b4e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ae85e9361c54e2ab6ab4da6d2c06082dd20cb29","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.397905b4e.0.tgz","fileCount":12,"integrity":"sha512-WsVfuwIGT/VKCNdcIoiqQw8w/7+RJNa2Z/UeUDeOmmPDtPuowDUkE7n+0wbppuErqK/C4Yyr50/F0t4Ikm020g==","signatures":[{"sig":"MEQCIFFMi1qbE8II6cWiqhTvccpXjquivbgrHfjVqRBGKc2xAiBahIUKjrmwBfb6HfcN7Hmu2YSb3GBJJQiUKiwU05Q2hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8aoqCRA9TVsSAnZWagAA9z8P/3/XCetzk1zAEpQBxJtC\nmZo3dD0+NGjntZuUuG5j2LMCIumjhaSMqiJ24ieZ04ruzK08gdECzAd2MsV5\nBRB421klQAHAhNRs0F7aNspgQAda1cklstJPuD3097GePxtfHFbkaLuXIU3y\n7c5lSJdHETvAJ1DppkpjZgk9SJL6DDaD7cZuwFX3ncbvZx/siaiIb5gOQKUc\n9KdZuFwGPSut3h9/GaWG5VLrCYX9N29pxlEJBNWvTzUTdnYDHHDTRjmTEiyH\nNNCEKOy/Lu1cheU5rrYr4Umu0OjFLzY0eH+AVpxZnSaQsI7KmQ+gZ8HzadVz\np51gvouRSd4e4Q/sQfi5DU3wD8jhftF0/Ng5xKUtxcvNPOfnqXNTydnyTa/g\n2LalskvFMInBDx6p5UdQ+zfAWi08oxffSoJIbEnPeSly8zx19HPdiaCbko45\n30HKSFYLYDirfDhWx+zXhqN6sUHIkz5jtYY17rSjcaByj15biHI4TkfwVmsL\namF9qLOhBfCzPPeawNLmaxdcbCIIbmNSd1Z+Wp1PvWeITjW/B1R9/c+CNJqk\nB7M0BeDkZEpBHTY8Nvg/7GvBcpIR//COHfAcQPEvnohkefyeCpPmq/SUivd5\n1kMyHk9SQNHwpaUR1/2nCcbR6azcBdnfvwhm22D3BOUWPqYL86f60BOwDsBQ\nWEzk\r\n=cIEG\r\n-----END PGP SIGNATURE-----\r\n"},"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":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.397905b4e.0_1576118825707_0.7271531092219026","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/typography","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7857fa34341512baaedfcbfa98c678bab1459f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":12,"integrity":"sha512-Tedr3BGjjd08bMdjj0KbKSJuTTvfbctAKx9Q672C6kUvbbpnwE645dT5AkJ66ogBa1bHgGCXSV0bIUqwiS49lA==","signatures":[{"sig":"MEUCIQDrhoeesrgy4cU8gOSyidb9dWVzvC3lD1YHeT9hqRwB8wIgX5Ceg1cYXPhlxd+V+ThbBx/O53OxMqeGk1wvjJqOqrE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o35CRA9TVsSAnZWagAAyIcP/28Oiz/O7r6MDYEG6Of5\n7WPMPCUjCOnHM5ma/sQ/Aygfo5xGveuElBXPgM7IjReTDZYAJdUbWNj4t/pe\nmgt63xNuyeLw4k3bITIXCOZvmGXLHvX8ac0R7pwFSU0mqQGnP6yiyaK91QAv\n+/CT0lEUbcRHH6YccAKdO4fSGew5VsCJdOjvliyM6fzmVGyz5GAZXJdBg/aq\nAF6wj3sURv1xHCHzV93yh4Cz+yNNO28ImzkRHnfsEKIy/DW5+/Np4rHSPmKi\n5SbZ3nsEFtud8w0nam5xqChd1BPZXOUb1rbdUp60QokaVCqQxADhS6e2efih\nmOaYVdY9dfXAXb8b6dOnkT6jp1I2Z6nVtSNA8Ov41+GhyxPH4x0zqiC5vFRF\nl+kuuoGKbmZZO0RRruetJ5kHKT2LSALOOvmfDqsNhzq8uMoD0dbIPttLoe8M\nTeAz2nDXlg0r9hxM4uOyXfy8/S0akJOMOL0/U/b+WHmTtAXIT9kGV85UycSX\nQ/noDm181kiHRKVka2O+TQxyFl+9Y6F5tZ3jhHPo3KXI5BUHhNAsAE2qTLXk\nM1U4knDhWvwfI8tqKhK2lcHqwrQJJL0aCOh0eDaHbqYtINg8L3qL97cD2m8N\ncjMTVSrVidzYtmfuuMY+4E0qkKCFd/yEi5ndSV3jZh3CmOJFcw1087WURKbz\ncTHk\r\n=hgpa\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.1fbf5bd1d.0_1576177145050_0.34128738005060555","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/typography","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1331e50f0043f6625a8484a6b1da5938681ce14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b723dfa78.0.tgz","fileCount":12,"integrity":"sha512-jBKjxKS486iIa+vr7I1iEPCIih5aIXGYe+bww9e4qY6p21sSAU2mPLktuiUzg4GotvBT6SLF2A/c27ef+wVGUg==","signatures":[{"sig":"MEYCIQCFSNctvuEKrcrba/Fo1hBRG1jex9/gk+5PYvzdwRg6DgIhAO0wo9n8ajR/+3JRrc1sprfXSz64E0lGve+gn5FVAeQk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p57CRA9TVsSAnZWagAArggP+wanp2wOHeach85H9Sr+\ngHRRnByy/da+XWny4FZjUiDkyYTWHRDTPmsxBkM1d5xf8gvxcwmJ6kILW/YT\njEajrTlzZqETGkOqKUBJd7WmONWiODS8NyQA5bec6ZbuUJeY8XqsvDHD8ua+\nN68QKQol6kYprCxQRZKIVsWtv2j6KCv4YSCFOhob7UTfComVqAyx6En4p9ng\nTAQ2r6w5RD6fuAr7H+dqK37qoyMZbqvEdRsrlS0dLXPNgPxxgg86gauWr5JX\n2eHn6ovIS1iY5cBGWrJYhnpbvV1GpJHJoaGDsmcvhI92UOaVIN9QpRUoX7Cf\nGJTaSVa86T3xzbtFj/o+A+LZt+dOElcBYnKgIao23fGvVAeu4MuGofDu1CPL\nOY1ifYSVefoVolJOxxZikzqkIYnoBbi7HYmdZWYtiXDvPkkSlVOuag9oE7Ua\nQJUxalm04wNpxTXZxrDIoIBAIBavNLrlY3EOt945H3TcvdlCndRKbKSbh914\noHOHXqcWMmw8JPLqLspGKz7v+WO2i2+7fkM320gCr4ooX/h7qSShCuAijSin\nQCScMgqAvsqE71EsI+Zwa79+YQLP9K5x2fFMnbcZfq9qalAfgs+R97PZNceg\nCVeeA06/NNXnLIAhLDz84LAiJmJyjRYQpWUnxtK7A/f8qqstRX1t7xcA9S/j\nOisA\r\n=/rG2\r\n-----END PGP SIGNATURE-----\r\n"},"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":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b723dfa78.0_1576181371382_0.6406925308981799","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/typography","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.1c494e567.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df6f17c7e09887f6bdc05d5f492b18ab318a0697","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.1c494e567.0.tgz","fileCount":12,"integrity":"sha512-Mg2nTMokH9Y+5/Omd/jUKV5CHUO6zCVmDKqAOxeFpjsYVMRi2NwrAhplMmKNwipmQFoguP84zN8jhpl3gK6gbw==","signatures":[{"sig":"MEUCIGhmhA16FqB7qKZddT/Kk1NNN2LyYW7DUNa9xy6j9BI+AiEA+beFD2MZtP56qPK3+ALodUKVfgBIGF8GOG6nscYAHGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8BCRA9TVsSAnZWagAArbEP/19IY8O8g40IkWinaucu\nW79BPqu1cfo4KbYFm5fhJPeH2JbXwZEfR9dfaj6gZ9gfgm9NROozkyEyoCFc\nNZTRQKzBFU5rAh916eg9xO1lzlRGWwWF58Sd1l+BwTqRqP3Ya8sAkONEz1vi\n4FDUsH1uhLJ4KXdfRVMHirUfl/eglDFcv/WxCVlKANS0dPKTO2lP01x0+5FE\ntPQqb3Y5yk/PgqU3384yS4EfV/SEedKQM2RvGKgSm0EHzPU3kIwgqwsAUEWr\nnuMvWn9NYvVe53J2BPpgCtvgdacIsZ32hLYxdwmhOZ0Ph0GTCZ3I/2avsYlm\nMgMHvWZP7IkDRio6NRZx6Ae/P5UDXSjd55FKoJAqbonHKlAvKHiLu4rvJesN\nH6aw3GsnD6Sfxff9uArp5kGYDb7RvoCjZduOFdPMUjhMAZaiyRcNO+wg0HB1\nNhyKs51804WJgVqNRVkOqNQmiOMMra6qfbXsBwfthKVl+J/TFcvNYFgpg0BJ\nL3gtzDUqTQvx4AJgACfuLmALNblgEIDQCzO15XzuhSMQeWNV/Wy5OS9vacyo\n+ZcMyGQ4Hn6nQ7QiJTUpiHysxy390VVxQKtLw9s3ZkJo3Ju3CySG52xQD8mG\n1yIGqcU27G+zFJADCLe6K/ONbwWJ9T4Tic0uJ8ebzbUGOCXWf1VQA403/gEd\n0qXu\r\n=UPcV\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.1c494e567.0_1576193793327_0.5938266744121312","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/typography","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"417795b4c4b7ae620f4070e98de96393217012e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c9e98a125.0.tgz","fileCount":12,"integrity":"sha512-if0XuCjtGqyszMl8gbFt2jWDz/qIiQv/PUoMTpt4GNJe+L7X3taxW1G5x8K4q/lC1EnP+CDrFHLv05dGdhtL/g==","signatures":[{"sig":"MEYCIQDe3dQgxyuUAIIuygMspaV7Kg7xppukBadFsIgkTE2sPAIhANsqmnjKyMNGSxQ7XB518bskb98vdgpic+lz7DYy6XVY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RncCRA9TVsSAnZWagAAuAwP+wWRDU/nKhzM0qBjKWJY\nxNhoR6lFKhfY0JIaUfMv380AOVBQxEfHy3iIjaGIgKbe59Js/ueU1WPEcQk1\n0r2qFqEbhthVT/9ZUZUEr3aMSQzAonCR2kL7rCrBYuc4/gujuq4Ucqqjoqyq\n89MAWXZqDfUJOuDxo52zO/b2Su8OxeJtm3dQ3MtBQpIBow4SCc8f17wparq0\nHkBhwAF1CkJCQQwHg/9i6sLQatjTwfgvDShPUVwZ2Kv55r2XIE/BabDu5y3w\nI2z2M4gUhSeB8dLDYfdK5SmTHN16apRfjN1Fjlsc8LXlSUj+iBpnMi4z3jkR\n4T+rTCaYlc83kAsqBcCCEsNz6VCKZvW8wvkDpL7m+vr0jQPe/uruDywF5Oa3\n4gtduVwsQuafzAAqYZ9C4U/G0T7dv+lj6mRvsi1geQEB6tG+b4ycVqCdFovE\nSMDECkSKFkHJOW7NiygmTRff6U0D7mxdaeQRe/S5JrxJsI8XIBC3yisrhZt7\nTm87fuKeo/5oBWyc/rn90IMZoXLxzZztdD+76iEeNkf9Iu42crE8s92UUMR2\nn1/O9oZYG68HjkGs0MPKGDQjxLTiXDjloUw8Kel51zf4LmQDAACMDbSGtrIy\nZc/UXTTtQNbZgd/c5EmtLJcFaPMd31xrxf79PF9gzdyQQHRAGMEt9sMlJLVe\ndyQH\r\n=DMRA\r\n-----END PGP SIGNATURE-----\r\n"},"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":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.17.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c9e98a125.0_1576606172192_0.4866730800804666","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/typography","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b3463ea80686cd0499e34f425de5a611c91a038","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":12,"integrity":"sha512-FvOfC+xkBW+blmYPZRGqGlVuTFmwaqIkz/PWJbkdHmRLC5yjHS5h1LV6EdischUNivo9k11Vk0BSsgzV1tt8sg==","signatures":[{"sig":"MEYCIQCrVhgxQ5YV8vqJcDGdpoZpzEBb57FAamHFMNh5lxkiyQIhANMyS6XH39VUuILYTiGi5n78PcrhuMJoqFhra2bi2hjd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VejCRA9TVsSAnZWagAAvEAP/2Si50kfOvWtE7XNqVx9\nrP/FJy/hjnch9kw0LXAcwWUikNhYcVLKdERRK52Hg3AauB0mJ1AbXE370qbz\nWqUwmiDfDjMh1xkUZ5tDiPtDOkrWxNnMfxmnb6HVDECCCaN0ctQsIUBepGR/\nFk5DJ+J0n+TsYB0UIqy55TILCuENot76mwThNVbtAYiQIKZ89H12VxUJSLC+\nae1osAi7UfwS57gd4GSM1G+mrQuWSSRVTq7xvKZ1BEhLs9oSBVvWIFygS4Vr\nacZHscchlQUPIMCTOysZNKv0jUjwMWxQxayD+ICOo4q2yw3mLYY7Ufq9lrl6\nPOei6rQqmpm1NDJDsyGLW7oF8x/0NqPmjLhJF1ZuSW0d0G4mRpIlSDuN8WQp\nENTZ3eLwmfLa9gTIl3AtoA7glzTIFbGbnNLqhac3ZiwaEF9Q0sZUiq00izg5\nCRoU6frLd0oCw2pG3FQpoUwLbB76MDsMW2ucsPTj0jxebZfYf3/VD8u+RWOG\nC7GJxNso5Hwnf/sFYPUwooiaAlCcIL+vcJCa1WTErG8b2sTS2GR4yCxZuIIJ\nqCQopnTIHB7Dv9pHn6Zv4Mz+ilGrDnTPJsux0sDZDRYDIKxWceD5WlwYlqLs\n36mHjyHpVlBIZd5Poj4jqDuxEFadqGtVdtcxSaCel5/rqILfKVRkgsynaPOd\nuTiF\r\n=4lDZ\r\n-----END PGP SIGNATURE-----\r\n"},"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":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5ffe8f7e3.0_1576621987531_0.16717076016341825","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/typography","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.47949b08e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6558cbae74cdcfc1a298028fb2583954927f70a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.47949b08e.0.tgz","fileCount":12,"integrity":"sha512-6yBoCffk9hRmzNmFE19M35FJBcK4xm803UnTyX+V1t6Kq8g9cvZRIyNIQXefCunKLvyNutxwxWyeCit3m2ReoQ==","signatures":[{"sig":"MEYCIQCk3T6nfLqDnk5eMVPNIh3O8VqlBiWb7AeOz/iF9+TbSwIhAJRqL1trCcDN/6y1C01tNs/VIHPVpDE6fFM4VDYOnMPH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSICRA9TVsSAnZWagAAvXYP/0/ZDhV6joSFFz5C86uw\nY7be1yXs8iVAzZjaHja1tjz7DRa790NE28cmAcjYKs5t+5LDskry9neiJHea\nuKFKz1NQP+cFrFKzA1gnbc2vSio/KiRGFE7p2J0c4OjSvjW5Q/oOr8hBjqnc\n/bMNFkkuLa+Ke/uAcFqfoVgbe5Kk5bXt9tw3VeK8EHp47x0nM3cLCUBzNgfm\nX/4OTXlgCaUylETimTsztN05O8/3W5FqTjCEKA+wI8cWv46VGcQHvPeubQF4\nwOnKwC7ghA3fR+N+IJANfswIysDlMzQhkoFJiQtRBsX/9B/3X2u8GRd4NCCW\nZ5G4uv9ySQfchzR6g2S+BM98O4MCpAr6kphMka4L9IdAB20RusyzsGGGkNgI\nKY3wRsxnOpw4fX6qTFdbIXbY+zkeI2wGMJ5A29D35TnAKeHpEkku+24wOCyp\nKQ8W7iXRikAu+neKZzBBMIjXXuQ7q25Cufd/ZkaeyRyrhKaSdxtt9WMeJjEs\na2tSwBXH9ikpS7a5c4jiibKBDl/ExnpnCIUXlhBUCy/8aGbpJPr7GQdaIxxk\nk/PHqbpkYdMKai4mdeUK/GDzOgxzn0F5YVDhFIjPy9plDnEh19eH1NfUBsHC\nq50xDW9pjI+1VKmy4r2jGLHIZZkpV7EJsOum1pS/4awjuEeh9GiCo9KaQ3Bg\nOR0p\r\n=Ib0E\r\n-----END PGP SIGNATURE-----\r\n"},"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":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.47949b08e.0_1576690823839_0.7096924311539616","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/typography","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad9193294db84006da55876e157032b572bd02cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b240bcc1b.0.tgz","fileCount":12,"integrity":"sha512-CVaZRtnfNW2den9og2c3jt9M4Ml4Lb7of4GBtFxx9pBLBkneKrrCHhfkl1VqSV2TF2mdIzlHNJuYJGOs8ZLNPw==","signatures":[{"sig":"MEYCIQCYMU4kr0K3/akXG3HpTjEiGJzMOfPFwh9jnv+YeBB3JQIhAKrrCKUhC7z96ocYMQeXRDoeP2zjxoftfjp2Qgv4iB3x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsQCRA9TVsSAnZWagAAj8cP+gIpzt+r2BHzK/ArdwCc\nZajeYUw4gRgN09WIlqQB2wZLmWYbAjEww1WuxPkLnJT6Xi8vahaqJCGIG5tr\nTd8dq3tI+N3aiAGp+E3wsH6ceg8XRjoggymh9+rt6or5oWYGmRP8jbpUlw7B\n61ulZHqc/OVgYujYg9aLa/Ui0WuX623RvE72X4Ev7Q6of/uO3HRuylQkfhxF\nxjMCxOA5xCYcI2lLD0zp+/uZqwfzZzUbGsvZat/fKDO6/TLun5B9sOAt3Mjl\nukZvtivQsQeulksaX3HzaEEo2+7FcKd3w3lW3PKVFP1AEmOLDybgRwS2s2zk\nR9aIuX/wrdV900fAEyq1Rmj6Hd9zVivWENlJrwOAtheTBtJikQDYP01MB6nM\nePKZgz2qIQrpbygj0Og3coZBaXsq0nwelWe8mABfsHheIhGnpuWi8WnaZ6sc\n3L8zQ8hbGbO/oXxkjFBPNSknIeShaXrloidMfzMUFNTOMKWlVHrz2K4ODlPf\n4wxq+41ErKT0kmvB8pMNmPZ4KRGTT1E+XowFmJFRPpUCzKjIpmnO8MnW2e62\nMZeOWavqIOjVI/8kprAe9iWsui5yCP4Igd5076s8G7ABtPvH5jAd507GjMoh\n0U5r80Qr53hFRA7ADo6ZBCmZwFCO6zEAvh9Mx+kKcKxtSZ4XIsvyvF2TZTz0\nuQ4m\r\n=Mw3q\r\n-----END PGP SIGNATURE-----\r\n"},"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":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b240bcc1b.0_1576696591369_0.9097337466102291","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/typography","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.391674a26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"560e7bdfdaa7ac266abbc111615a07bb13976224","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.391674a26.0.tgz","fileCount":12,"integrity":"sha512-30vFtdoC8QetR2iOMwgGi2/kxwxW3q1XS7U4KMUT1tBmhLluGLKnPvU8GJCQPTX1LGM8eZ8Kw8fJbR54IOE4XA==","signatures":[{"sig":"MEUCIAOPAJWoDhaGN/gqa37N7fLN6316VUAdzEA/VE6RgFWYAiEAuLlV3npad59CNamSP1nFTqfZ6GvdXJTkU2Tq/E982b0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nseCRA9TVsSAnZWagAAeaUP/RlgpLVfAA2xBur+2kdI\n0r9Ubp3TLcCJrF60QS2uqE2kzxKuenL35KQil4MUYWRLJqV4vPy/7wO3Twju\nDTop/GWs8Q6dTTss0e4+kI+FzgvSl3/ALkoD6zITjn09v47v0vu2/YQu62aD\nLZC2DwmGDg0BbEutNQGu/N7o/vTQx+N7bTUWfcl8MsNcDx1za09fIkNpR4ve\nN8omXk5ihDg0ZCzjaBvYVYEHBylKzTtE/z/aH8kp33NR6SLxepjK5BtR2oks\nUOQxb6rPLIM0K8X4spbFnFHVzEbbOryA4pAbIOllLoDtGvTTYEh4VqhBwTnf\nEwE+6ARFbhecasldLoFo75Z9FKfecaBCXaqNz2++8/aftIQDs9AGagFWzFTD\nWyFybrtdFrBQObTYu/l7h2UnI6T8oCQja17pdvI1TixMf5GuBE6YyBBPHz55\nnSy6KMbKTXSNXF1TtTa1c0atci4AXRfG9y0gSBFYflwAiWqeMdmC9PAYgsHq\noqaWBo0Te9wMzAkJsWt9M3U1HV63G0gFGv0EVxZ0e6JseEgcNiqqlu7/GvTL\nQS/PqBh1f8+x/8cdHmBuVYw1K0H8oVhk89dmm6R/XnO2wPjnZUbQRJAgEtqb\n5Zf+yAh5J5s5JJI4Ydbp9zpiLFWW5v4rlZYGa/BEZ9kUFsSMgu98dyWmhVju\niqge\r\n=UqOV\r\n-----END PGP SIGNATURE-----\r\n"},"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":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.391674a26.0_1576696605515_0.9906073817900707","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/typography","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c4837746c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc6e70b60aa9ad6e32283bd66c0892608d6bad5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c4837746c.0.tgz","fileCount":12,"integrity":"sha512-pA0/TTsjHG2k7x+qwtJT9900Sk73z4BLsM8vOB2Uimj6Ba9mWDR/+o+0q0daIDU8DLfvLzVMUdGYabznQ511fg==","signatures":[{"sig":"MEQCIC4rOYneomQDEtOv+JYYMoEniEcf3QZP49cG8nOPD/RdAiAwDFWuPHGHS/KTB0sSzgD6lG0b3c88zzpwT679xuwfCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9RCRA9TVsSAnZWagAAdgUP/13RYsDtA38ph21RXbDv\nmCCwZjgZXeqqRA0QjvkzsZyCUaLtH/PP8NEvfbnrgFDzgGNba7q8WyaOBSuV\ni8Gv/e47Dbto3AR2t3WAxOFCQ8mWBwkPtee3ciS5MiG5OGM7hA8XknWIW4cq\nWpoR8Sc/YOqA4ufTPpO/rPE9xDf4FLq0LDHniWQhl9qbBAr9tnEXqTglWB5D\nF1JCyFyJQ4RC057o46tlLl98u9QeITfC1PtDTZxb48AD9MOWUsvXM10j8k3w\niW10ZImVwd6erDUyeXWIDgF9DZz5N0keokGe13Me8FlVzaSpvAAcH2ggk2Br\n15n6l5RM1+EXRM6K5bd+/A/VujeM/KI8a8OmgT/3t8pe48mPGj8q9hN8lgtx\neCtMp6CeW5TVz2awwIzJx9fd/jnjg3cCuJF+QFgC+7DDZi8gGuFI/AC+86w2\nGEa7xoUZKWly8JK/fYyUmABSWIEaBiqBMHhDsQN4iSAOBCyeK5Abh97hOhSL\nqCP+AjeQEF3Uce5X8ozX1lySDwmn4IhpjbtFRpz8A04J9LW9b6WbpyFRULQy\nK3PMHKM/Ic+TbnGpcPbIOVoCG5Ri6F+gloG4p5XAIpOsrP2QwAhFeOFgCOPj\nOrj79rxir6OvuSFpBQK2nuRv8qB4ZPq/rJXsM+/4zQZYQZiVzqvv3rAO6+ya\ngGjr\r\n=/6ng\r\n-----END PGP SIGNATURE-----\r\n"},"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":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c4837746c.0_1576697681213_0.905264096746836","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/typography","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.e41a70425.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdeff8a934900c1e881b240986d2144c0efb9789","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.e41a70425.0.tgz","fileCount":12,"integrity":"sha512-ETdwRTohuHX6+CaCSGy/pxk1TFskzhJbolJtBJDFRcmeqYOry/IolHhtfWeYsVXZI7LqC5KyRSOTh5RhoHaSWQ==","signatures":[{"sig":"MEUCIQDgtr3PjjkcHyLLvWJMoARJMFrO9Mxr3zGF3VFgkQxjvQIgb/YL/2rorvQmER98NbHInsBgZ7+KOpivP/DMpB3jf1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQcCRA9TVsSAnZWagAA8GAP/ikNQqWncNGLZvkM4dFc\nebXZKS/J6W+dClX7BrmdNiF2G/PdRi6qVr5PpWHQ34Qme2aR9ycwD7fUdyqR\nGfq9HepZvAi8RGbdAk6wIhRJFJVAD4nQB62NrcL0Pro3IK3yziZB7MU+UvEM\ntHMz5sCoe8h/PyeccgXNYRo7G9Xri3Z39LzLHb2ZE4u0v0kIWhpYHhX7aCHG\nOWaDvs6IMcr7sO6K7l5FhDHmjJSv0cmrTDougH2SWrP5OaLwLK3yK6XQuT7G\nm38Xa9tJ+usL2viNU/kl0fwwDeZSjrXLyAL2FYrs5XnUe4mVQ184yx1bL3i5\nNvvqxFbGp9IR+YSdO6qDSS/ERjYC6HwPxt5VI2qwr3VCmc38AA/i7Ie0Ewfi\nqABW5EpBL/ZzY7jVgVtsnFTEB02udbRuqIl/As6TdCUQwmX9tGMMtRQOAKnv\nV3E2wYiqeLVZvTN9MCLcZEeDSMCMQuzdiuogc5Y6LhF5Fo9gUw0b+S3CMwBZ\n4vXi+UmlokGOlXtTOG5hfaSreHmiTZadfbmoBKVwZmkoVIriVOL+wy+OAIF2\n3DOshKMJu23d66sXj0vUMmq5uu1JxP1Zn7nhmnzmn4+tnJ4XcYjwW6w+uZEu\nttNslqTISH18M12+K8AfBOWruotA+2C8eY/0HNLvd/XDg6VaQ8THkaw7wsNB\nAJwW\r\n=J4uX\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.e41a70425.0_1576711195902_0.4720354406792424","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/typography","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e20d0a2d2f61424891d03f8e9968afd94f8d684","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.bac43eb43.0.tgz","fileCount":12,"integrity":"sha512-sMoatigHfq6E2qrDy0JIFudKdAn8FMTVSns1i51v557HE0F/pLXprAARtMNJZy9p+qLCr7d8865VRkTjzdoLMQ==","signatures":[{"sig":"MEQCIFP3GXqAuZrFoG2hOlf26WYP5L+eHk3tWSXRLDjlHVVRAiALWp/WHEz4TcIeF4zNLWeCY8vEEEpGjbp2+BhPCO3/GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUDCRA9TVsSAnZWagAAs8AP/2S5roBW1DfLAmO2Ac5W\n0KHUmoh+UwE9ceu5/R9r8GpdUlgGlVU1YPl0hHXEnaj1RTlfCDzdn5MPNhnY\ngGg4LtZ0t1Qw5JTNAwGkP2KUArV6kTaWKPhtWog3+ws8yWY2Jx/bUzeng5yq\nOtDmcyk08qHXMeHfslz32Mp8JaDU4z5VgI4v3mu8VUaJuvFy4UALr6gS62vY\nyfA2bKr3NZhhfxVXZ1OfpxUbvdysdyWaljyxuymHlpuHNeFeUCFhrJQxo5yz\npUiptSCia5ZVE3YuLKtF3OXUgwLlUMx2ofV9urXM+GSaWaEJBOR/UgZAUKEB\ntCkiGFf1cIQWlDIhS4zPbl6bxHQ6PejfpxfXuaV6U3EzILncSB0Jso9jrM2j\nOEajSvS+0IWBbOS7+ZipyJKF6UUkxqkHZwDeMaZlmLVWWYsVdtglJs7eWlN5\nihLIGqF55x3cOxK1ewZHfYMrhXuB70wn12n5JrimCK6N899ys8gopxCARjwJ\nM1xFznEATkh+hk1GdAmi6aH8MDhiGHCMN7CchDqz++21DTHqwbGHrAHnVtuu\nQCaLKvDpbtBO+z+otILzq2IciWXvfc8IVyPYr3lGaBx1MnOoWKZwmfjIlOHK\njhK8Z8qU/orv21iuofS0+dUe0TYl9MWyHyR4wbSLuMyjH0rt4kfMweCAki9V\nSbEg\r\n=M3RV\r\n-----END PGP SIGNATURE-----\r\n"},"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":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.bac43eb43.0_1576711427195_0.3654732788536572","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/typography","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.2e491de55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb129d3a27fcbd2ef2edc5488e998b6b0d19bb67","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.2e491de55.0.tgz","fileCount":12,"integrity":"sha512-CMZ/yGhIbsxL7i5dlS7RT8ZGiVwwYXl8T84Ib2XiOwhIOjOa1JfC6lL+uq31FPurJjy1+nub8/DK7PaUFhWfRA==","signatures":[{"sig":"MEUCIF6l1WhXCuSG2erSXFZRLhm5F1cFGDRpbTAZxlfsgEwSAiEA1RCiRSuG+UmNdaPKmSv3+Xzeuyz9LKmflBCBDJ0bdrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1W/CRA9TVsSAnZWagAAn4QP/ikoTtrqm+LxxI8bDJRn\nv4LdMjwyQITR7d0QGHV5WIlr5fPU5yT0XkGGxUTvhlW/F6TCvaWcMVMk7+88\nL/ZO4EkUOvdU9+WRxtgHGGwtByOFcNUuKWK2QsjaxUGvWIbVMIqlrucDOl70\nbTmuAGa4PlPnw1gHtqw10czUGsmrJmsUWmNkKiT4pcKA/4xcNMShTdPISz3g\nIeDxFc0odijZIy15ne3rWsVko+5sNQIqalBujKKAlZNYroAtSrv3pf3R7NUE\nzmw/Sz68reJrHg4MaaOHP4lp1C9OQg83ghw0dIsSFUA+OdZFO9ryu52jc1Kf\nHzEuf5TmXRH90tZjhLSvbgB7fUZeoPy25BsqWuPRhXAP8+Aa3X8CnqgwfOZ9\n8R2PVI4R0P7exLf0XS3LU3I8vrwcCVsNHhBxDNcqx93Ot3ynB0bKcVLJKXmQ\nWeoH9T2CzVtixNhBJCbY8Oi6zL/At+SuG57UXbgkOMV5Nj+87q3hGLTmA1/b\nkK7FP+hJKGGu6UlIt7fM52IhDNQZ0ULgTDvR2sRBNRy9EUxAGuMFjuWKLvgn\nVSqbazujfoZAqQjPX5guVqP/QonZZIj8hX2Vvmrm96S0PVRh6fab+KEPLXw/\nZzoee399JW/HVYxat5VWSoMw7JJmB4T9vS3eSvKtk+XJq0ViFrMJCFeaCJU8\nWQzq\r\n=+PLu\r\n-----END PGP SIGNATURE-----\r\n"},"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":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.2e491de55.0_1576752574952_0.4554112591229085","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/typography","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ae101c144.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d23d7f15a80fd14bfa54e552045ab62a02de6255","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ae101c144.0.tgz","fileCount":12,"integrity":"sha512-nf4WqfuBUVlEkDPbKh4mU1jI+APsKcfue2SX2jmfxcmx2JiHVUBKEcS/GwmPboIawnLjshU9ZuyrKWenU/xiEA==","signatures":[{"sig":"MEYCIQCGxz5TIbCF+SlPzkf0qNJw4PksAlyzNgxE1ZkHXAwy3QIhAK0R58ILeJdNYltaqds9SvNDMX6QFhsLxhkB7mYgynt3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RCCRA9TVsSAnZWagAA6Z0QAJfGIkvGRDlmeKMsAYsd\nwwooe+r7RpHkL1hB8rELzbhZij0Gi7d18fGIDndZmgMeuwmaxvo+npBwTFdS\nLbswwUot4ilyRuU1Tp83RnSwm9RstkjtBAKl34AH1DaxUyEG/Ul3btYtNPHr\nwpIMkEKx/3YADlfPWtQFGLmggYemvYl9sGNuLtICoGblbJ/7qe1RRz2S+84Z\nmSZGLRrBjgmoNP9gb+bIPhrB/3qBOmFE8DCCD+uppQLGIbtloS4VEe32L9sN\nU3heBmJLGTTUPeBFGQCYO0H9k5Br+Tp/Z51wlcMWBg72NUrb1BmI2Cd0k2kq\nqzA02kdNtST+jwMkxSlndZ4ApFnvbcUNLhWQ8yrvb2mxfzY/B5SojjG64ePg\nrdSzO+0aGJF+gwVyQL1+V3jD4Sme5IZV0tn6Yq4eTRfkHzaJzbTNsU4XQ6p9\np4Rqc/0Ulusoyfk5n1sHouzgPEr2TMqVaoLOd+JoqLTgrn1mc5ymr/6lTJXb\nf6BvmDANfjgnuV6f3AU0+HTyu08qCkX/35M5FXWGbdw2/MY/Qt0wbdg4gUJP\noyZrBlLqUiLHykG7cyAltiKlgHgc+wE4K1ej1Lom1MFOiSA/zts/Gh6J/XFB\nR/4CrLRkeXR4MhDv3GBY4HrB1S371ewRw5Uau3z8DVqVhK6N3zjtr0Yb+Yau\nAfFv\r\n=LpVJ\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ae101c144.0_1576772673906_0.6629599010991454","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/typography","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5740c4f0c63f9d1a0af46abcb9657fc697248d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a51c31f26.0.tgz","fileCount":12,"integrity":"sha512-6XdKWu0Y2gHWqyt0LeAQRpgHksq1Ibly4JAt+pCqBGstj+5hqO2f6ufSNpuVOhISc/c/ZRQedS1+DZHGplGROg==","signatures":[{"sig":"MEQCIBBWAN/3ix3Nnj9Hl1DsaO9JmgBonLj8JkGWLvuUCUIuAiA6gusjDXV3m9DOOuoUMUFBNmf6Ve7NXOaMsesQDBIa2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/dCRA9TVsSAnZWagAAUNwQAJxFbk0H4FGW3TeZs2bY\n/L6M8iU6o11Ug4JjMYEy/NRuA0nQp/grKIyu0n7a0B57WwVC+5LTYuOYjr2f\nmfD7UzX7x0L+5E1MoyY/S5JpXPFD9askmXn3pw8zRinga4fA7l6CH+QLXNeb\n7spkBIxuV1iRVbvxMpkD2r548/cVWNlRX15MoFuLPOsGD8dcTIpNKKW7/H2H\nosdY10R2151ddBwA9tHt9EhQ4h8TI2jTKasuNf+jVVZaSD/h+UasVGR14KSz\nBz55u1Y7zBQhyDYgCNkmJPdvOfdqwA1/0YhzEjMCOzvjxyTCWwY0XIDt4RU7\n9Y3l23D6Vf2cGX51wOdF5VZYdMivpDnuMaINsrbDk9C282IchDY6ptQADopR\nfDVe5LWTzGOG8HgSA9KcHvEGVJpzEUZbMNKpNyoRTuTQ0iRrBXcVaIexrriG\ngJIKIcgFBpdtsI4pqXqauTBg6+ySUaI+N+0K47VUhoQyn2ERaXCs4e6tfMPR\nxDMt0nOdiMsO2oKhsLzBvgGkTo4fzq+B8KukToMzDpTJ7lOXTqZNMzPSs29L\nYbyWhKjfK31G5iKlmG58b5+lMSTjzfLLoNRvVbHTYn9o6KW8PbNHIj1GP0gg\ndyjObR4Cst7q7jq+iHU0xOcjTXIhKxfCXMEYdY/gESdMhs47dMcLTwoCym6C\n5FqX\r\n=igBW\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a51c31f26.0_1576775644666_0.4465294304145906","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/typography","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b493c3dc56a8840fd458ff5beda45ed49378a9d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.21fc4e13b.0.tgz","fileCount":12,"integrity":"sha512-gJ912dbHGpZDQGwr+jAHEIKDawvx9UiDXH/YpsbyRDTPpWuK1H8UJ+BImITYHrZtQ4AXStZeMclUm/Lzz6jakw==","signatures":[{"sig":"MEUCIH1Mbo4TFiKI06UPDK0S9fS/u54O0lOx4Ab5ttEIljFsAiEA4xln94sJBFsBbLO7Pq6vgIHK+pQyOaFgqD+/t5GYF1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++sgCRA9TVsSAnZWagAAelUP/AkqImqjTRQLuX3cWMFI\nLmRmM/RkLfjMLpaLZTpbKJ1J58GrdIjGkLIuJkDgiqinuXPltGLXuEfyXGaR\nLPKyEQHkMWMRn2VYPTwWO+/byVuaSRfqGMDPGlEw9FUcfFG0wvlE34hr6YMi\nYRSBkykjag2asx1+MFbaKYy1pfZvDw/9iXrqOeOwmJeEwp6YbJeYO4PPqEZb\nMmWHwbhxRN9JrsnnfM+/Sl6ctZILP1Fms+z8xzfNqTN53uLa4DzZnJROl6ql\n2au9QhLxt2oTm6/JUGSG2cf/fWn+vK30UPdiqxe2skkuZrhSIDsJgQ2CKRLb\n3sI4R4T6StIa1IZIW93j41nbx6JwlfED8C93KuoZzYhVuIMusIPlAoOqKxHz\n9C80Wi+nyLEZikpbXA0YY1a/F+N4QGOoPBcqTwtk2gI+m5Z8Lx6bfUD+JcwB\n+5c+1u3+LlYOWlSfpRF0Aewq2kQAYZWnfMW1mLSrvkdAPauvOJSR+2+dj5q1\nCtWuRxxyG1mpg/hps2tj6PnlTjpOjX0vL3LD4To+H90IGed7f2xTf06p/rDB\nOppvRKWxx55FwZOLFSdfl68uiCfez14QFpiYA6U73hr3coHfVzE8dAXLDugQ\nUuWUt/2lmQfJoYaXXYeR/GHJgImFZStAUF7rFZH2YmH0YqAaE+LnazrhiZzx\n8f69\r\n=up6e\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.21fc4e13b.0_1576790816503_0.9107422743909339","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/typography","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1c1d2c7c467f2c20899e5a5ca88ba446cdfbd6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":12,"integrity":"sha512-xblwZm4UmpWDOdr9Ef4qXTY3e/GD08dlYElS1ZajzUE1394VExdtDdQERjl7x7UW+L9TipYgWg2VOpRlJfeAnA==","signatures":[{"sig":"MEUCIQD5MUa3ePr3P40jQV+moBMDiuLq+s1JSG6dqDbgs2flAwIgUl+nCj7RvFtgB6J1Yz4w42v9zmD97clfgwLCnFfQzCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/h/CRA9TVsSAnZWagAA5x0P/jKAY3bDSNIP7CETkhn2\nTPeN0tG1GUOR2D2q1ILWE61cvh/vc2k2qkW/CCuRQMSaHoU+TqYJvzClSCWv\n1fNZD7EWDIgvlMbdPocmwB7lmDt2s283G49iBHlqskdj+7anJbHhzPVPn10g\n7x1X8P1lZT8cUrp9WCaWoQdQWpTXmlrMyAqbhqEJXT1Q8NBLQqxpbKVcKQgx\ntq8cLpG6cPtkSjAIMlSU9dicOpFlmSsyxiUvZdJp/J+/CoagjWmhO6V36sac\nPE2KOgI319zQ7kUKEhKSu9G1m0sm6KiAlrDSni7JbaPsbd6xdgHPuMzD5vgQ\nSnOsGvwkGpXOWQTGHJYdrfZYDFUjKpYNuZAchLlm/z7icKeJQ+0cXR8yHTPQ\nmwkcq1SjHZTaf50zKx7/uwsXpUjH59lS6ZPoJri0wryVfIxC3+IGKGlTKOuV\n8c40eHZ9t9unv9YAZVLnEaCUabu0wRVz+0pU3PFAM2nIlLYgGt6TJ4isryDF\n6WaiPXupwHFab91aVUigXf4xMV02cV+y3SjaWGGHoSc9oIMJTSIeztckO3Cc\ndZ5eri6gLNbscXdGT+HtreR6G8iUcEh66wL3CyKDzVgB8yb6+WiOYMIrPNls\nRdP8ny/YJOk7l9J+MVMynZA+HqhmGDUW04lYqILghFM0F4kEYHSGSyqMzvIl\n/1rJ\r\n=HlLE\r\n-----END PGP SIGNATURE-----\r\n"},"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":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d2ae6e17d.0_1576794238926_0.5791621485179219","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/typography","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c777c0bf0dd76adb7c44585eb8f9041d12b4969","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ba30399ad.0.tgz","fileCount":12,"integrity":"sha512-QrhSi+WHUzKQFU9HR2tvZ9me7k8G52unsQzW5q+fu/dwks5X876udywlQPNDHuFV5quWVnwaE5smAOjwLTK/UA==","signatures":[{"sig":"MEQCIG43NtM95LPfMYNRlBNQZ67FAkOBixzx4iZomOgEdEy0AiBY9PoFyzg8j0OL3+DnJRrinmT5681nZNBRsAhIKxQPew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9ICRA9TVsSAnZWagAA7yEP/2/WjOUtwbHTcu4d2Y7x\nDgX5dFmGGqOvNYv56HYVbuzawKwUuVCLY9GCJv9HDXyZwABTM6xm4LZPVX+J\ne182OMX1QFS4ah8FHCwKgWCf7UiTK05IHb/5PSg+sYh0REq9/CCjBhiYeNyS\nBC4mRZTKakKPFI2sLCPLkpa5yvHpZhQe5nGQygOtCJsyHT2XM8lkq8neE+Mh\nP8FIGETTbYFGDG3wNHT0TJ/gSLgyAggDxzvkPecXI0fCaJID8fbBfvh0jzhf\nfCKdElzcNJnd4aM0kC8jiqZzyoWubGEsUbLl3boMeFxxH8BqiDbAdQXQyN6h\np72Pwm8/Xc0zLc1C56bXbh4dXD/C+c7d7wH1b1IK/8Pzd5tS8lpaQEEep9up\nW0yQyGnhQZzrnaC0tWVz7tFJ4BbNzMZn+2FNd/OndSWsDKK1QPxUgj7kOEls\nIX5N3j+A1WbTYz2fVwFEHhFsvcHMP3dnVPFILmHQLD0oOUUEBuCIsZn8nOeL\nvpqm6ztmAiNGYbuJSv3/AM4D7Zp0Ekzyc2E0i1qqNnkNVy874hfySm4AGLPY\nDUahgAZEE2B2xoAqyDUAozCWXdi+yZPxN6QheNiH2LFvy4+I8VvZE0WdWqWy\nCX8y5Tmj0374Nmi3tMNiW6EPoLLXnvuH2v/lSFRTpa3GcMyKqgNt1vzkVG6J\n1b6n\r\n=ySRt\r\n-----END PGP SIGNATURE-----\r\n"},"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":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ba30399ad.0_1576804167666_0.5854265371573251","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/typography","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2adfa1dbea59a32b92b70732aa5e53e2b01cdb68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a08ccec35.0.tgz","fileCount":12,"integrity":"sha512-fZXMLG3FZb49Kjgf1S8cgIO+tKrkFfX+QUDvn3sp0oIAgtVbrxz4vxLtqGrQSbJu5NPoTAbLg7/uRG52Gygauw==","signatures":[{"sig":"MEQCIBA94L7ebnO88Nj0cldoj5Q5yZ5DwdVf2AKWO851xmEDAiAYHNWZAKwq7aZoSXxtJQuaVYHek3MouVthC62ewKKwxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VipCRA9TVsSAnZWagAAuv0QAICbcWh6tSqvL1ugphD+\nsIP1fTF3dktIvkk6rfkVD0yZ/vrPPzWlbQGgp0g47L0HDG/9yr+fb5rReVgz\nmXOconWkMN6ObemENDSMszWhbSyKtgZ39dWmH/RstuRPCrUReKEMXTZu6soq\nbP7mMX/ngkc2ykX+qoVeOs82Y3T5E01o6J0p8H38euz/cX4gesZdAvf6GIjX\nxFftqkXBGDD5bPMH7wyCcLp4SPixPv/6foIFpg8TD9VuzGgJVM20IDBhy2Qj\nL8SEBLSUfvrkq1wEOAAobuFtlxLnBV+ig0vGQU41v70nbknEcYOu3NP4hj/P\nrdailNQ2oynGbaIbBLxkN7w1uYCK7P9QO4TwrNFpYJ+jagroRojHyHJFa48S\nmjOqMg9o+nxK5hK31gv1p4k5l2z3yutFDN4BJc7gBhojx1wLeWD2pA4Glu4H\ni6SmtRQd1wsFbuQio2+5uZUFRM8B4ulSsKHkxWqZxQXzI9hmCD032kqYkZft\nZJjtKMiGRmDmId+/AvGMzgqkNmshuQCquuWuVBSv5RwckXBZBbSCQ0OhrogR\nY0Md6nLucwClBM01gMvuMhDV+q5KzmV5L0aVN9CTdUnPpO4lYs8oy07fEjo+\nDVAPaQuyCw+SjbLmOkOR/KMgPC60eMWe7aJxGufxs6ov14m7V9ea3S1qu39a\ncNkj\r\n=v4c1\r\n-----END PGP SIGNATURE-----\r\n"},"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":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a08ccec35.0_1576884393265_0.15768641137248807","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/typography","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b0d2c3fc03a044aeb85b68533f55d3dab3ffbc5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a2f75105e.0.tgz","fileCount":12,"integrity":"sha512-Vi8MzpFac2rMaToJmWltJ3dxpWZukkb7A84D7YeqyheLi+MnJ+0DkEn6RXv2cEQDWh7ap4IPZ80FGo/dWgHzWA==","signatures":[{"sig":"MEUCIQCBJQO+R8dBOIoFSBBIv5TXo0xwtUjo1ttq5KYty10q3wIgXnyoMmUEIu6iBXRBIA7vnfqC5BTc05UQQJmbWMbQ5Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnMCRA9TVsSAnZWagAA13UP/2q+EQxtHWehmhP1hf+x\n4Jgs/qSKw2eWFMfykFLs9fnt7cKS9G3ZGUfPHhYoLGH4WUMyc8JkrVoSU8l7\nBBDIelXr7si/o8+gqqBNDer0Rz+7Fj9res68afXbjZ3K5/43KZdF5LapZbAf\nfS/Rs+Tbx/wG/PdBRnsKkDWwdebq3+euJVd9sesowDSwsrM2epbOHbg9kDew\neAelu/SNq0b5XxF/izLKQ5fcN5t04qc0Uw3boYB9vI6hreb06Cx1syEzw80i\n2VAlTfY/fcVfqH6AXNE0Mf/ulGl7FWO4Ptqy5tHKQmT3xbFWWSK4YzKA7A1y\njI7oPbOiaqfF4cNIfpdA5Z0Mkgm0mfTgmcaFcoisANOR1HQeTgzNXcfgyp2e\nOOKy3P4OUCGI5fvNrVDL+3nivI6wCDfm6Q1gnG+S8AeIq/lGnD7i0CSqdEb8\nDetFTcta215LnrU64wOQ3d+WcDG1V11sHBG/5ICPxhQl72IWYR9XlZnW2+aj\nU4lMDEdROF2c0mBVi9R2w4so1UF8qDxnxRZswCvibyJBsX6RVekOBigt8Z9q\noCzOlqxLt+qzkOx1Eofdz/Y+Rkk4A+y3dW3vgRX4fJ5W5GJhs2Tb2IcXix9+\nx7/LslymLnvXT+V0g9mPRyvrTYes/IbQAfSoxUjSf7nvVPUaGjrBQysxFFQh\nIXNT\r\n=JNZE\r\n-----END PGP SIGNATURE-----\r\n"},"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":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a2f75105e.0_1577130443687_0.4946042374936839","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/typography","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7fb39e75fe5ef132c0be1e4dfac967fc36ee0dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c054a24c7.0.tgz","fileCount":12,"integrity":"sha512-RFFMmlFmIOQ0isa/wkOYn7uyMMFIayeC56A9BGvOtRB7OSQ0toCOalDtMgxvIt5YOq4j+ixfg3AuFlTYfPQ2hw==","signatures":[{"sig":"MEQCIDBm6fhr9p+I9le7+cEVUYQZFbNLDSFr8TpbVbMrazOoAiAHpVYYpOsvXtgbl0MEzhUOuozwzbA9MXNzc958V2yPBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATZ6CRA9TVsSAnZWagAARAwP/R3B7fGoBmv4WxDSCiD1\ndx7oNzL2O0TLCkvcv9jeNYwVzhrv4I64qtDiyYeUc2AZYrxCEXWQeL60C1qP\nLP/iL7PExzVdxNAETU3WkeB/vKTGsK3OCReqxTO4CnDAhUmBBcNo5Qsr9T03\no1iJSwlymL1/4YxnZdth9fkv7kPmUkAIsRWPfWBoan7lq85i2M4V/JoR4T6k\ncacL1UckUKtdpCSrg36eGNJs0V4NBg68xYT3IQ7KxcPCxN4NY23bw9Mwr4GB\n2EbiLyPtpleW+3fX52AvzkMvVdd6xeLzKPLL5Hlb0YRlRBWY4V53sBXJhnAS\n2rq0FnVPt513cIGkOXmOn/e0Q/cf5vPW9DlxCmMnda0YVKprv5/U3Zil7pkL\ngcdiBrFDsamqUZgXko4VxuCtKrtxD+3tPdmFSi5bLTrrEmY+A7e6kt6qKz23\nRgHMrK/w3HrD7CZNkx8CHi5EY+WQyBpi8P8KUhALYy60a27Y222KvlREniMt\nIT8HA1DYWfPw80Mhfc6ZwsGZOF3L0bTUF6wHYTDcE+gA1Dx3TYWA2SF1y8nU\nZq/AuluxXcn2GHzO8E8QnbA10/eR2kb12Fzyq96kLSoA0AUc5JlrcHVnZmXl\nbatKuRPlb2o1TaVmhktqtb5r7ffUVT58l53rIivX6gwks3cf9uo/wIytccZs\nzS1j\r\n=F1fL\r\n-----END PGP SIGNATURE-----\r\n"},"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":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c054a24c7.0_1577137785840_0.3856667271859422","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/typography","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2deb5116d404f6a4dedc3f7e82aa8d2534b5766","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c6808c51c.0.tgz","fileCount":12,"integrity":"sha512-HCKT8Ja2jRWerpGKj+En83fFD7eaVCtVXBl3EJlK/XQEVqJinuo9GBAYFl52IWUbTbbuORv2nxe2dFoGCdgGTg==","signatures":[{"sig":"MEQCIFpoTf6CzAvy4dMYTsVKN9+PIXz/XFok+9BGxPMbqnmGAiBqcbNuiwRt1mmSejUu/PVqIS+dDWKbF7T4AwesJ9fulQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATeUCRA9TVsSAnZWagAAto0P/iDMokTWNgmtpFlMjnSB\nJBTtQ5QZlqSimXS1duO4rK9GkhgLmqd9caBncmRa2nIHvzcUlEp8bHQXKW+L\nKLALkUF0qTqsTvmgTmnSWMqbU492D0RN++NFHLdBOBMs/tZvIiYzjhMaN91l\nOHUkBCyZjCjqFFrNNJosbd6kubEwVemDqLXm6Mk7r8G5d3yPTvHAezmYjjIt\nZVucdVP+GKMygq/1X2mv5xEaA1RdgCbj0doSz3KqcN0jQvXAASadhP45I40S\npFY+RTlLA54F6HGV1ziQAdIajCs00kBkyohe1ctWrh4e5x8kVGGCRtkGlfI8\naO4DDCt2X/8FEg1TkrCSCkbFbdZkuX9KsvPUpnrt99q+k0+IHW0sJzxcVIEc\nZcQ6kz4rYSPIMBzA8+VPemdD8dOzg3T4nIA1qQmble3e+X/z5wb2quSKtDW5\n8j3qYqPxATAV03lKCNXj+MAg6WIENVEMzO+4ziRFJAiKx2N/slGo1lykgQlu\nAVEJfw3R2aPUpXzl5SXF8K1kNFkl5JcZptoWRBOnhvsednrbtnWbdgkAwUH6\ngaPm+UX2UdfZyjub3jQGVi/by4/jfR3CyNzDIwzw2nLP5ba3mOJX2yKs8Q12\nwoxqQ2L01uJg6h8SxaxnSau7iNN45iEBvia9ru+gcqZBvJ0iuhqvIPfar2x6\nEIY2\r\n=UlZo\r\n-----END PGP SIGNATURE-----\r\n"},"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":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c6808c51c.0_1577138067889_0.7524753409226919","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/typography","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8709a3107a7f65fd8c628d6dc6de95987dbafb8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7bce9cf77.0.tgz","fileCount":12,"integrity":"sha512-/zK/2L7LPDZhE/kkOk7URQewCFr0IWjJCHbtwEzCTC57FKq2AGDjAhI6RgMY8bVASBN2fdPeuyxf4KPmXO098g==","signatures":[{"sig":"MEUCIDYTRdPjvDKbOfsOgIZ3fkSPm7i5c5L9efx8TRDKngTZAiEAuLT5rpSRTVutIVeQeHB7im0cPEclhhwmaM6sKbC7KSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/BCRA9TVsSAnZWagAAfLoP/ilALn2UflmVG4zPERv/\nbEte3fG3ZY4nr1jKqZqrrlNBw+gHd4jS0xi1ufu4uBnQk3MbR3lN8ZOw6kzi\ne2sxEszGGrGPqfr83UlkZnKJaMzhqxxpn9PjJFFDj6k2YekpL0ZR+7P6yynd\nx5H7WrTi/PtRxmG5wv57wXfummUOU7WdFHV1pDo7NWWoNCYYdzO4DZA/lOTE\n1Cs5BcpZkvrFEDjeJL4G1G5spe7rE+77iHtJAyWnPzYQO1v+XdJl57Uphm3T\nE90L+PiB+djr0G7A6LZE3eYWaNJdrv+yheZB5n5jcY+H0ov9mUX70IImFD0e\nBbZLUd3WONV0HZR0idxecsf+I3xc1AAbJEqdiJuN+ULqly5qPq6SZBguY79c\nT1NMs4v8JZsXGyd06PJ/UKxz135m6lQNyy0SP0T0SIW3Jb0yjZl1srW2jzQG\nRVi+vkBXA7yRhQrcZ+keM71cvVmC+WOuEJV46mdrhyGGBv7VLTENhhWiBBZj\nBjKNqg4FC7n9sKW4vwO2uGB+WaV3mtQ/2KyMHkqlfRGdTudtznBnfqNw1NNn\nJr9Wq4jRuzlETE+IwPjIazyVPDpwErsoJ6f67f48hFJ0TWgXm3OP0mX8BLnd\nj6517b6kBwdhxA8UXnS8x2Fc/pdrgYJwXUMe0Qu3Nbzop8GdEkS66nI1GPV1\nM2po\r\n=jtMZ\r\n-----END PGP SIGNATURE-----\r\n"},"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":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7bce9cf77.0_1577385921441_0.5503815832522547","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/typography","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db4457a50dc633b0f118eed883f6a0224c0968ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c92f038c3.0.tgz","fileCount":12,"integrity":"sha512-8n912o9WNQD4uCih8jXXZW81eHDaoBiJ2l2sTgvfu38t1NAO7z29z+1UjzDruanH2KwXzGhspSjfdSRt0WDGTA==","signatures":[{"sig":"MEUCIBv8L5A4qRulSFcoYkCDrJF02HmbLqfZEnwc/smCveanAiEAqaJbw9ytd2YBgKhWqJl031WSRiuVPAYokOzPAw6u7ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQLCRA9TVsSAnZWagAAYM0P/1M44P8SLGGsY7xQZF7E\n3C0BLzECROAAYBMHHoZGnxa1BhVfKtlKsyxrrEtDIFdsTZS3Jmm5OMyHRCVL\nErv4FgEaV+oUQDfmh/l/cr0+vdjF5Q2LJVaAX89jsaqAqNWbehKmkgm3Vx7D\noPfbKamV2nCxKv2W+8q5YPNcdfxM1tlmcib/sdoC2m9vBrIRGnBcj4G5Sgm6\nrLNkB8cHRlfQH43lCE5XkKCY0lRBy9REORDziPry1bPAc/9txvgqGa6asOfE\nUCQPa5gaChbMXXEk6bMGC+SGIpZ6c65dtWHptr8bTr8i4Ee7ULtGWKLxKfZ1\nKTAY06aw/LWRJ02A9fMIoVwSkGksvrHRFKypDSWYvMRMWgD/mU/N83a8/gEB\nBVTzjn08cXt2/PRVp5Bx6RYkDut4wLDf5lfZaCuxhOCJV684APfrfMTG2roV\nIZBA9dT/obislKoIIAdxaHMbimRHDIzW4c9I/+2fdA1kkfKgf6LvYjiwT1LQ\nPEGP8QVO9wwaVdmleQD+AbDU4Cuer8JstYeCkRW0XLPBHikYn37NmGsAdMig\naokVXZ9NC3sJRF5IESnth4gjeJYPrbbMF+V8p4wMaRmaZCSOAUK6jPY1yaBM\nrvH7uFcCD5FSQEXIJVAVzkf3i2g0RTeDc4s9LLo5SlKDd0WHt+fGurmVj4K4\nRP6o\r\n=/1Ff\r\n-----END PGP SIGNATURE-----\r\n"},"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":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c92f038c3.0_1577743371053_0.6053748337218738","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/typography","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89a5c86ddfcd9bbc7b461b0b2d8895f80bc8c1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.1f1ac7558.0.tgz","fileCount":12,"integrity":"sha512-s8zbrGApZh/1P5bAhdXPTWb9hNMTtMjhc1iidxf063QWzjSFQlRbrO/76+1fl3iGtbrtUeDQ6T/HJgifTLy3Qg==","signatures":[{"sig":"MEUCIB3vb/upyKsNArZY9NCvRlQgj71gMWVEVr6LLOv0d7CAAiEAmKms68HOgY4BevPU//gcBz2tUmwLHOSvtI74NBWIKyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhfCRA9TVsSAnZWagAAjqMP/i6N+U4TrQnF0stCi0Qn\nwCcSH+6CHktpMFUpSKi8UXH1DbV+Rql1hUPEM29PQb2CVXV6SFWpbFkW17wI\nsDVvbOFdXrT3YufUpG/TS/00xEusAbPEXjsCf4fZvva1SZsSycL6BgguGwQf\n1ZcFfMuIgCE7X//CLFO01B83VOEhjfhUM+kC7ZLwMv2gttIJee1srR0JPfFU\n49gg/mVuFOVySz2sAclFjzd/IYGhMqNsHZF8bHJgqLT2gj1T0Dp852yQX3gw\nniEu3QgNYauZszeJMuuiKYAA6kgghfcO/k5NG+aXgYYRG7+m4sl7Qxp6/41v\nScSk0mwAcc2tF0Xqh53Y2nKlVsKbOxIo2TO22OHScg2btvxFD8MGdoPd1iBQ\ndPvK2FzbFL+nb74xKdKSVNr/4MhjKXNqC9EbaBNF2usCnVUqfAP8wcEHxqho\nr2ljwajWLlw1x6Fprz1ojn6l11k3rbMeJEMiXrBjHBxoBtjYyz+NbWaIDGJ7\nL6/9JQUZ1Jbkll490sRJPqDIXZ5AK5/69GtqmsY3bWQTytWIfmqOI27d2vj8\nmGkrDylAdE2nOVenXZ1a+EhlbQ2qP251F3ldanGbSrIYhKKhBgLabVBXqXIE\n4sZr8n9MnTkiydc1MWz7iMda9EYqMSaZZZmjbuTlzn3UV0/muNHJ2gRgE+LI\nvgAg\r\n=97HN\r\n-----END PGP SIGNATURE-----\r\n"},"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":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.1f1ac7558.0_1577998430973_0.6849903562485962","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/typography","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"755e7fa10a686c0058d61b3479a7bc926dfcbd60","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ec26e799c.0.tgz","fileCount":12,"integrity":"sha512-2jq19sWyOBkDTwBk5iCyZIZMn7/Pnip/l4tLSLxLG7qRGyWKlBTPM1PnO5uX2pXqLeZTZ2XwMobe27ans8A41A==","signatures":[{"sig":"MEUCIQCVp+OEgu/GmTerZC7KaKA0MMmuP3tlKzyVg++u9RjzwwIgPnBggyzd8w6Eec9OqW/gIV9QYqebrfJ7OUbDuxPwRAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmOxCRA9TVsSAnZWagAAE3wP/RNumNNcM8Qz5cNPf/3R\nluQe+YejTcZ6LhYWfAOupyA25ruYpRkvdwjWrhyZmlQv7EH14DOL6gepq/66\nAsFW+QgYkpMQdKYaCkwvq3v3mMYkPIP5oU4bK04lEcO83V0QkyeliNSUaDDh\nQNe2Cw7VIabJ/7b6kIibUGTZ/hIJpdD9VQ47sMOBD9h+PU6+RPeMD0ELZ/gJ\nRU/VH7j7kgtO7+1NHbC+pKEl4hThvsPu/zI7wZ7ddQ4GUNu3RsdQ2Pn2gV4H\nX8rv5/GqGDbCifJs1lbqAEgkxbcXhKsGr/WJZBJCZWdPHE0Ze3TIJSrzbdha\nGvadFtVU6sp+Z1r+wG9d6cUQkSlnDJnSH9euNhjiIkPctpoRKEP0TvdrBi+w\ngLKW5wq2hmvkE4/jYVIuKJjwGQlGc0DNj7DNb0W9fP6PFX3ZM3Zs1ukUMEhH\n1WmKzUP9I8X5GyMjnC9g6M78Q9EgxEaowDp/OOpW2LBsl3az4uJGjCq/n04k\nncIqChDJWrpC00IY/MEEAItSerBuSbKmDfguKyQif2GTfadD9EMhX/8Y66/S\npls2LnbKxguXjxoFRvhdNR+3nzLzDum0sO1oMb/mMe0ThK6XNB5NTRcnAY45\nbIX22B28s4jq9lrGIGU2ayHtCiltXIgQkuu5oypgBjYM7CiO76726/wl8+hx\nz0Eb\r\n=PMpL\r\n-----END PGP SIGNATURE-----\r\n"},"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":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ec26e799c.0_1578001329185_0.40987720173555053","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/typography","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e02db8655e8005c5e73abc76341d255599e6454","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.0a40ced40.0.tgz","fileCount":12,"integrity":"sha512-M3KdBpVIwL7GgnVJnGKvKy/RmQE/ZmPLSFUi+OWyPsKu2LmXXKF5qxvTGv9HLfhIkmBgv7ILT5RVCTWypD+Qxw==","signatures":[{"sig":"MEUCIQDph6omNSr+IanRkdPQOIpaog5dMpGZsPJMt5dBrksJ9gIgJtOvZR4wWy7vEy3vK5HiKcC3wNgaXxZCMNX3YKX0t7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3U3CRA9TVsSAnZWagAAf9MP/3Tr5NX/wvM67R5GRaS+\nId28Kykf5ycq1B3pQWhFrfLEIP/88BtD7oDXT2vGAe3QM8bDdnJZ979/0vyc\nFSK/EAd3K+vA7kn4huf2mygbj9dH8FZAfFUcEsf9SHdhKSLpplNtEHnipKuO\nHc3KRX58ZnoBo9rVg0nhGT3UsyvCOhc3wp5vY4/FrNAuwl95PUUopIOi22BR\n5XLqSfRPxSQTGm+nLV0NDgw3C5J+bGIhK7gaiTsyvlqNv/nLjoDzKcYZmCMZ\nPePUcy5WskD8Hh8Be2x9C+J1KB3xedFecAvWQ9+2lWQ4Z5rd9tIDDcHw9uRh\nlABrNl/hfD0F5FYANkeeqKIxRhmOwrThtGBXyogAwZhkdMt2yU6pJuNk5MG5\nqnMC81N2Kbyn03iUYKoWLvD9onnkCrjhOumdqscQkFbaplbL/dTaiN0BGvyG\nLyr6XBbdY2W2CB5cF0MbpQQpDtewWXSJ1wTLjeZ7S36aT8bXx3RvEZVfsYJD\n+qNo/9OFxNORhPflrzh09cd27h4UyQyEOT4ahOAqWbZHsNYbwcqvFVm/JVLn\nFgjW/TqncJqbTYSMYFalLTwQyN+GZ4CsFfti1uEuF/S8iHJqY6znc+1KgmG/\nZmpxIoal4rQzJMXkDcFSIulu+AEOzDkA8kDK1EjRlZTwFpvqTULi2n4Pdtxs\nRcgw\r\n=OOhB\r\n-----END PGP SIGNATURE-----\r\n"},"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":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.0a40ced40.0_1578071351219_0.9300474411998583","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/typography","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.3adf84899.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a541300938de708998f1de840a401200ee0fc3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.3adf84899.0.tgz","fileCount":12,"integrity":"sha512-ndJyaRUCj1GQ6LJUXdN2jI1OfWih6jXgag4opL25w0791TFJuKa/1c4EQdAehwXy9AFwqz+u4zA2HZ4U4ctMbw==","signatures":[{"sig":"MEUCIEGJm1ngp7Ele0zqzki35cQvBnJ2rAUS9i81O6joUaWLAiEA4KhEt6b7cskUd1aC0wFgiqvOX5fnvtjLXlK49ffLVe4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZUCRA9TVsSAnZWagAAvF0P/05rSSdjkWarpZ+uL184\nQWUZ27TJw8s2R0fTzBtRk+WXKdZrcN9JN+c7/MB9LJfwA6FuE3vVupNJPVnC\ny1t27RDx7COr3ouYrnZ8916sITKF8KWZXbCBnB3JfnFmUPZ0JD2SzeXRElnY\nxaniQJsJJofYhb/sR14PjTfuPfY9+qxRR1XhlbHiMyxi8m4PgqpSWLxpUYhN\noDwCeT9KEBcB8bdveGikSgnWENsqPRYLtY8g/b+lcT+7dMBQwCMIWAi+J3Xq\nGNnrtCNVzrKOu9g+8/QagAgW0uSw0ig24r9oH0eqW2T6Y8qEqM/EefEBkmKs\nGFyhOE0/DExiC8HrcdGMcKokLgYp2EV8GUFf4zL6/iRk8JEjM50kceIf/EWM\nBycutj+Dzj9vetGvQKnAnuipgfNDi8jtlxPjkJrfUihhMT0IY84QFUzh5WAv\njl7sbvvsALCEp3eb2TD+BEgftFLE9uDq2gJVlsQpM7vLYmecUfG2+SluQf7I\n3rfFDq8iJfUBA5FsCWXzOAGkKAq8NJ1FnjZWDpNobZCDtkkmGyhWob8R5b8N\nAuG0F1CRMBCTXsoMmMgsYAwrSHsezkjXU/E3OTkh/tCKlVMUICE2c60bWthT\ngLT3wd1sEeDmB7V7804Xx7K8dIHRUTlt8oQRVVcQMrIc6MulXZT3qkZUQ8XX\nruZP\r\n=nsTh\r\n-----END PGP SIGNATURE-----\r\n"},"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":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.3adf84899.0_1578075731006_0.05675192293271514","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/typography","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81d7ef7d3387a835a9a6a39de749e0057dc863f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.0d42ee650.0.tgz","fileCount":12,"integrity":"sha512-+8qL+hTKqyr78QNTPRulQ3dLV0F+h6EmC3dnEwQ3369fCLzYSuSb5LdQbL/2MdW0HvqGm+XNtaJz7a7jzwr0Tg==","signatures":[{"sig":"MEYCIQD+SQbR8yj3xp6X/r/Nu3goO8Iut3UzhS2JjLSvFZodqQIhAJPR/AAryXa032rRDKePh3A1YnHWxbM0UiGi6eV4nAGU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7PwCRA9TVsSAnZWagAAyo0P/AtPH8TUdv6H8b8Rm6Es\nrG/wejpf4qhsu7AIT8ujVRMQw/+ugvMWoAtXv2ob0uawoMP4bQuUqCJSwp9z\nFCGsLYpjO9WnhyGUipuezTFCN+8dqbmGtjelNHq84wpvgQwWxtbIx/+e3Vlb\nwy2In+r2Pvk+tNsz+aY3FtdNXGAaLTPURRTF725mHH64mwNh1PMGaYaniR4Z\nDVAH6tm92CIt/hSprLdrBOxi/OpBM9VyE/AH/RkW1sM+z5Wuay0q9rhLXyuC\ntTmZQOCUdjaWUjQgFcPbborqvp36mrmWElBFXFxeTL0V0HbM7+OBLXo5vieW\nM5AkAfwq+cR9hGzLhpnHD6bOQEre8JGWVEnBOI9ELKZ/S3qb9xkIOKX1zMqk\nJWS66cVs4AAG2ZFH+hzu0R9dcKQMMWHOOaZ7xTXtY2Z177onKFoYbfxk+4rh\nx+6/HUdYK+mCrNWWMczB7PahmQn9G7X/Igvejn4jjLT4He+en7wrqkj86rb6\n+QF9S3Pq4Wv++oKeZnHSX21ktTo1WD8kpz1Hw4AZX3Q0W8FGixnEjhgosH3I\nDAxBBzYVRhMaqVVKfFBcvz/rhXFq6KiGU0CgxHhKr/CdK1xTIxLsQQbsiSmj\nxpnPwaFqzO09QN26elfsDZb8jjl+uCU6dY1THY11njpTxfe/ojfGU8EovkSc\nopAJ\r\n=hO4w\r\n-----END PGP SIGNATURE-----\r\n"},"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":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.0d42ee650.0_1578087407896_0.8366432968110018","host":"s3://npm-registry-packages"}},"5.0.0-canary.7be9e4a04.0":{"name":"@material/typography","version":"5.0.0-canary.7be9e4a04.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7be9e4a04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab9a7ccef5d65e56bb0608b70dfac9a733afca47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7be9e4a04.0.tgz","fileCount":12,"integrity":"sha512-2YNSIUpODPQJFxZvU2tWQ73B+fA6lPKIM4fB0Lu8b/TcF+Pvc9ktlc5BjQ/q5+lZ/Jf0NjqwSzUBpBnkF+5n2Q==","signatures":[{"sig":"MEUCIQDbT0tNNrS6XgG8GbqRGSWlqMs4WhXvFAof+/b9cmWUNgIgNZ/0ysAOXd1wCqUZPoDm9mUjGTx8bvHDnojhpM6mgUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE2iMCRA9TVsSAnZWagAAKQYQAIEdagXh/dpo7ckuxPu7\nH2CtzdADUW8xYMw44gAXQWO3G475zX7dAOHbT183I2qR6FMaLiZyciTOKBSB\njAMRlu79Ctr+F25TDbe8BT4SVaSk1OvMzRfv7xSo/Gqr4gI+c0m2SWASsWNr\nwGfbLTrVAjDhijbrdHnF+Boq8xSQFwI2kcYYiRzPeUGVvlDT6DCdAgSFmHsG\nJYkW4kNr1TWi1t64qLuMPRXVJ8/hCozpGvkqV2RDIPp9etXJB0PuLAxhD4Iq\nvi2RKLyACiFvEt8DoqNaSoDenCCB3MLg4qykEa7n6JLJx/l6nUw2GEb7HnZ+\n7bYK/oLHI5jxB85BTrSjuZcsBC7JuZeQDwewjYvvLR4si0QbBQSR/WJB3tEh\nYgAo3M0Q7TDPGllyWzH22EwmhbGfhgNcW8VPKfyh9NTX3HfHQkL4nDkjUO6V\nYrAslrGueDGTGgdZzyVQlxkHutuX67h81UdqIVYX4lbHji1rs3/8y88aCiN0\nFNgwg2hpo7CBoplkjsm3otGiyJyj2X5zFmSXUVqYkgSkSnyxu9/AWrRDBr1i\nSlecuEVmbFuuCcQc2swEfMcnAQgDxFTy/b3XQQHOu/ic4oOKGxFIkMgAboGy\nDBHu7p0TKwTqC8ZKQ1WjoEdFwL1zoBgNpkjgZD32UsMQusghORBxFA6zDtAX\nLanI\r\n=FYb+\r\n-----END PGP SIGNATURE-----\r\n"},"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":"7675b02e76469ef82297d4232a252b678b22d1ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7be9e4a04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7be9e4a04.0_1578330251684_0.6336931657756419","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/typography","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d95f4ce959f409a745cb83f9f81d5b4dcbf1e819","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.847dd1ada.0.tgz","fileCount":12,"integrity":"sha512-pVSnnqFH1KwMbQRI75jEMZGq0DcsHHMTGzWzDwu42holZxmz/PVcrtnB+Z/vZB4cR03Pdca2PQgoZIaJ+r02RA==","signatures":[{"sig":"MEUCIBnbNUI/FRAr8qqtEdDR+Cw1VYLEIjkbpFYavvoSOezkAiEA7xev+G4CH6YO0z9O8FPoJJP896jqYXosKOMMbuH/3NM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nLCRA9TVsSAnZWagAAwCwQAJiJrV96lhk/ynUQyO3d\n2n4hjxNI20GEvXLBjvUdXptryERnTPfeRXlbGe14Wd6ii3ezGbGRaBHAgs+7\nAX7QMkLAQK4c/Bq1LfDkwUb608VOBVjgW4R5uMJfpbZb6n9ExneJ+ZDU5YCL\nXKtOPY89a/RkGudrhnvRYCNp+bcl2FhjEf0upteYhPxXgEZlb1Xatupl0Uvs\n5pATA2fIJTp8hhYL5FDZJm1ZxK8xM/8wuLyAFth2RaCFeYllBsK9BC05tHIB\nCwBF83gj9zIhUZ/BByTeOch53nux9Io0MerNu5M4CMR+I0HaJGR55C4ysHxU\nyPmxVUq9KJQ5AOKFpVJf/4cPhQXbr9Q7LBYRZY0XwPVSsoRZIG1SiocpNtnN\n2HT9edRQa4Hg7gkXPOdxWpCRKa2vdI2wXUlzVGJQIoZx//DLNm+HB0fXwTgk\nZ89mvkkMfIrtgHXjS4+/OjmEvNt8G4RAvB3oWnb17PqqFFE3Oq2xrdJsXr0L\nNQJwwcmUW5zhNhgvJC9z7SErWtsAkuEEasa1p5hfVmoG/lWTNSZLYgJcAGij\nj5SDlqh9tzi8CbwcDuXzpFg0xYOQGvQ3o+xk4XLXltvZVGwtOfNoP919IB5p\nFbdUdVvDEvI+f9hbTHu+n8O2E5P7EsECJrRjqqSQ4LJc4oVaLfu/dpZ8A9g7\n0gVn\r\n=gk4C\r\n-----END PGP SIGNATURE-----\r\n"},"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":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.847dd1ada.0_1578338762521_0.5093505838218897","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/typography","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae8ef879db35768bd5a73fb9a3a3edd292dc5a0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.39df7e5df.0.tgz","fileCount":12,"integrity":"sha512-T4xwZVwiNMtfAA9+O9i1R50vU1vuviWEx34nO/+ADaVR1RpK+YnvW49Ie07sa4dLQX+AQ04t95an3v5w+6SfSg==","signatures":[{"sig":"MEQCIHpK4gYwzpHF7QTRvhedy5bZuF/GyKIJQmxX60RDaJkvAiBWaI/uNaBDN5FKBNMaXk4ceG4TG5K+b8r6LP1jx87YTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9bzCRA9TVsSAnZWagAA1qgP/iEEpAtTljD4cteodA7e\nJyobZ8VSsxQUl8SN3+DuEH9lQuDUqEyEYqjK+JY5aZEWt24/SKNqXHMFquMU\n18sMBCuK4GyVRYH1iNXEix3fiEQVa6pLMVHfQUT74biFImerKmJZ3NXr7NH1\nIeLcxxsRdHTa8Z7L0VVbmzOkFABJktxrKF0ff+c7lVYLwWlr1YCDVDMD7VpC\njY54rZHyR7LeF88Uu4flrY8nK9FEcqt2EGYjvdU9mC4W56oqiDg+YTb9QKgT\neUHuXRklLAjnZ3ijbzwsN5kss5/3EM/hPCPcDt/MkiQB6reR/TgKhNTNbE/3\n4T4psN4cvVb4R/MYVvn33/yjM950RNMBwkxrEHt7hNWtEi4FIGlAaNMhikeL\ncwgP3NUDWJA/RqNkeymWYQ9Pi+XiYkXuODZAxqRbVrixBQfCkMx3JXU85vCN\n28Jzy+e10VkDzMfqTc7H9A6lFjjbtgcWt2IRyFos7NhvF4+H//849ZzBBkyB\nCl7sBIdNeflygkDgaUo3nCrzMrGq/dRqdfzTwTmu90Gr/J1Jdla36iY6Qan6\nowqkeyLTXZFcpxOD2TnVTveRyc9dqt4uNwTR7r5RQlIeHG7s3Q+F3htxhA5H\naBJfO6uOBM/BX0tZPoHORkXSSYcY9H7Z/XzHoRS1POLPy2dWHepwVk/38WcE\nIsWA\r\n=60hY\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.39df7e5df.0_1578358515201_0.8507918680185891","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/typography","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82502a4fe77099974f1156605f66994214211101","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.f1a2581ab.0.tgz","fileCount":12,"integrity":"sha512-eZiMt9X1DpOoxCnfVc6l8bExSSVEAtKq+idXf4v1DR0VV5xmXkbNcYjlUsD5zwKAa1OPp5IaLhYAwKgsIB/E7w==","signatures":[{"sig":"MEUCICcC9WEJd4B9Tar4XqdjglMlH2M6bQZ/6qyh5M1eIAZBAiEA1r0YsLRH3X3nkWKVLhBAPdKgnNCXaGDFlkNAO6ABqDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzGCRA9TVsSAnZWagAAmc8P/RTmWOL5u8bbC0MS3M4R\nR3RzX/JPBOLE614zFTuIvJ0OQGB/goSAjQ5O7FKBvl5DfRwHyAHp6YLLH98/\nIEmGh4AddtMEavL77fF2rfWAEznndlnkok1MXQfHqVuIfajtAh9fFdiGJrub\nXPGSsGJXip3dOzR4xx6PEfeJMjt9Gc5VXgb1EDUW2uyJ+mheqGFXzx47tvPh\nObfhIfQxWEDkJdNPUJrzD0Gy6wHWNdiZxnz4jGqFX1mZca230H62ckvGLfhZ\nKkAJtU4zg6fgq8ILfbgUH3Cw6DQJfk7CQ96PUMuJKrCPVNLHG8HV//q5hrmJ\nWf4yaI0zeIWZtM3FwHMfbzIGjCfpWZWhgzyBb+UhwJjCxSp9sgZ6ahF93CVr\nuuAxS+3bLcyVgwmyRs2bWyTmxfu5qE05sES2+nHjsBCE+v1tfjOL5mCXlnEZ\ndWQpPAf7wei9+iXb274Y6HBRsbQzJLjb4mRqw0Rp1CCNLJcvxNkz3mMgdhFg\nSJOF+ZOyM/QFH096c0t2uaaFcrqeobzk1ein+BEnSaSdCfEJHJYj/r3wKA/b\niQOtq+us40STcvZiaJ2G/uW5wiF2KdDe8Z0aehlRoOtHRyrGThH0eHGJSRnG\nR42sNT1sk76UO+XVsWErApiSiVxf7j9ZdpW2zxibJhIbxYw74npLF83NwRu3\nD+e0\r\n=oBdQ\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.f1a2581ab.0_1578409158195_0.5485923749154211","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/typography","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5b25d6ebc90298f1a4e66a2d86b8047667625ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7c7ddf347.0.tgz","fileCount":12,"integrity":"sha512-DWcE0F/qcjJu7sjFnhOneEOUCtlcZdSzXFllrx8/LVsIs0fYmiy+JTaAJMz8k27MpBM0NscXCfzWxV8w7gj3FQ==","signatures":[{"sig":"MEYCIQCn/eqz4EvfCp9Iww0RshSy8qE7Noa8PKfIUmmYShKpNAIhAJ0rvtrVa054iEFIkNLsGGzIwKRzklWvu2PCdFV3ZBBY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKCQCRA9TVsSAnZWagAASNAP/AlAEfCR/GgcUVdqB4cr\n71/KSOmCYxto+DhBvttOLqwcCxeymD41DM+/0sQGcA+kkV5pRCaSDaru4v2Q\nuXojmH2S7yJcl0vccHXSbQVTg8UiyvOLcp0NWz/dV8TDObK0j/e5r1wj4aE3\nRGMHJjhEJFuRDUZnBCVWEpCXXxpoo9PRPDo8nbypUsztYZuG190dO5lJBPfb\nLmy5U2PmGz/5wgAroMcyRjO2z+2Dj6LaJ3HovWYQaj4OFfnQZiIcyKo5V4T+\ncdE6wHhdAeV2R02laj1T9UTjfbMR0RfCkCTFMp3RRM8yg8vz0NEdb+EWLDOf\ng+zA0ZgDFMHfTHNgp4YdUX9HseD6WBvQ7e1Emg6rc/WpBMw7K9IjnYq6s/Xm\npQmpnZu8jPEWlY+LLe0+JKChmumvAxXbxxoomOVR0Xsr0a9/u628UPrbCwks\nNPiJnMxyq4QzqxFTvQJ9HnGYSgr/0JPhTkIJeRxY4xSxjNIEHfegDVupHQhB\nkQBQ+YA7kvDaWad1b4baoVqUgiGDEnfJeMsu8bHaZLVrh+yOerkEnKn50Yah\njfy6FaOBQmaBbZRexHNIEtBYRaRb2hLbg6ES4Lg9eGhK492XR3Q57ExPRiKs\nrNVzvBljFdxS8i/STLp10aKOfruPUIYZ6JNwfAjRqv+TmcWFgLj37vDsOCK1\nvV8u\r\n=hD8+\r\n-----END PGP SIGNATURE-----\r\n"},"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":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7c7ddf347.0_1578410127869_0.024088082611748884","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/typography","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2955b291b8cfe3d1dd4c68e9d951179aa85b5689","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":12,"integrity":"sha512-r/OWCDkKk+AfvfsM36oST7q98QSrAUao5xepxkkCNYQvWguoUd57aWuiDkcoOkqyBkjCJx915vCepspyWTPqcw==","signatures":[{"sig":"MEUCIFk0y/ZchbWfj1O1lF7nc3F4Fe5lux6ieEBM5In2BX0ZAiEA9vPDqhmZkuMZkdwxdoKcShX9ur5gCQ/3Vam3IPwHIx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMlrCRA9TVsSAnZWagAAFWoP+gPT5SwCsFgKUu17pPCA\nj25rWiOmhBEN20ZQioFPLOVbbH8TWlqPCcIU85flnjLJqsiovhEo9Xfe4aPj\n+ZGENpOckF9cgvYzcWFoheIQD++1JOlaEkHZZSAm4rnTtCZmXCxU4bD/B7Sy\nv3PjTD0qclzW6b/Lu3P222tbzJ2U/G4cCzen5p+4//aVeru4q1OoaOmOpWGa\nBoTNhztBYPAqcoYqYeViH/vnGAOZ0SiJhI44oae+YJzZ67SA3//RPxXNCeY4\nQkjuFQSez2CQmVFRL8Evzc0cUQrDB3oUzdAw7mclFmQc+TGZVgU9zH9aT9Zi\neEk6VjVyYswZWWYnPEnFgTQ/MCTluqaoUFKgq2g4eGmPYRiEUDlBEpbXmJov\nW4mSkX0FiiNvGOw5DiwHPQRe8T754fFuq4zcWqgneqZRlAK1YRweyqD9HCva\nFJh2Cg6rrP6hFTI9BnUsl46IX8Ce5sCnXnV1HGBdX0EEhqTusp+jd0vYKJxT\nPWrGn9x8jvWLGrXX8vwvzUq1sbFOHCb/d3LafNZRvL17acFpjiWjycAZP5s7\n31ox08LJWY9oTnp66khuPYi1oFJ1K+IbhORilgo7lqgA4koBcDCS5bWHIuLw\nvOzrP35VmF9NG+jnBn1n9FSWfmohCP2c1TCuzpL01184RtRcly20QosPPrZd\ngBwz\r\n=b/Pb\r\n-----END PGP SIGNATURE-----\r\n"},"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":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a1c84d4b5.0_1578420587382_0.5994133403630977","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/typography","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce4aa2e4744dd94cf997401d87a6566d436bbaae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ec9f16578.0.tgz","fileCount":12,"integrity":"sha512-08iV1C8Q93YJ2kOdjcuM01gX9eUJvGld9xT6Fnb50U9UouXZVMIWUEASut080RJEXFMUe80OvZXeIWtt0GHHVg==","signatures":[{"sig":"MEYCIQCyHXADk5II3IRpZove3LmC24z8sYntFxhq4WfIrtVNrAIhAMmhR9624tVXtYad4PJmFCUu/NxW4UjIzQTNla8BtC2K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5mCRA9TVsSAnZWagAAhGAQAIIOdwYC2zYHY+YBsHW2\nkBwWGV1ggMXbi1/5nAqxivgrjuJl61ech9Z2Zurn9cnkmDq5KxfEAVCHBQpd\ngN895QKY11OdEeWaheMyd5+Ep/3H1kb0Wv2PsgvKyPUgNJQ3M935OHdM7cmG\nk/1a7dS15pzpLN7aMiJlTKfy0tKzJQ5rEwalmabI6OOg/2oWZUazVEZ+5455\nssvRmrakKsy6P6rAk/umWgaSdizCul4STGpV1EuviP15GkOfnzGligcHq+l4\nhb7/gVgLzMyagGAyNQc/hB/tffh0bUgrH1QkxM73qVvX2S3aNliF5UYI72vT\n7YVwfXWo/i++eD9lBoXYz3raDcB40uEjvDNYDTvABuyE2eascvduhraCdEQ/\nvrwKL3/kE+yeyJhm7CXrJWAjPLUOWL/0kATPkGCVATNRpeyYJFuL6LEfzfAJ\nnuEhjDGY+cB+clG7OfVWMWS/9EZitXU7Df7UpgSXUc9rSXvDh9VC+lsVwMRd\n0mVMgZHOAreWf7+S1ieX2OmwyjgFEgCrYIC1yDXZcth8X6wWhIouwynmR9ZX\n3s2utGcweQaSQzW+trtbKVA/fzM4nMsEXtruCQ3/BYeRLmcJnqCNPxpFNfwz\ne1RDrI3H6zJC9iJsF0iR6PSVqZH281k0cqrYhVtSFJTIwkWdTo+ly2ySFKb4\nenUa\r\n=JuFE\r\n-----END PGP SIGNATURE-----\r\n"},"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":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ec9f16578.0_1578425957752_0.22677714007848793","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/typography","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b602226ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c032b6dcc7d47a7fdb2d25499e2c935a4ecd2bb5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b602226ce.0.tgz","fileCount":12,"integrity":"sha512-NoIjd0FQf0elCp3HOTQnFmchlTqdlqR9K1KsNC5AQeMhENNt1Dnz92vCVYUkDF4lYF5dkdG6L0KRTXnAg7wKww==","signatures":[{"sig":"MEQCIB04sICTcbU3zZXIxpKkh3ZKBSK1+KO/UpZBdE+X8duUAiAsl4FMYTSoujGNqUVTGVoLiXc7SWyGh4ovXI1YuKuOEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObECRA9TVsSAnZWagAASo0P/Az1nN4iePZH209Vu+yz\n9WqT2hjD/YJKM/b7xNPMnzvAY0lNeIpV7MZXa3+HBlAYiReTV8MdFJ/7LLJD\ns4eTKtgpTMoZ+nwyC9Luz2Yzap9TToJI2LrMvHnh/spxxaWaq8mxvrzbYWCN\nw3Y+szu737UHEjNYZyRNqr0d7CBAVc5Ew1iI2/4q9lchgB6XWFnWSPxR/Rn1\nWECWwIObxM4uMEoPKEswJecNH+oSRFLDoOJtL9VrKDK6aOqwbPhYPFkLmiTl\nlrHA9U7DyFbje9RxROrFE+z5XPOzwuo+OpX9Hcy7RCvX7tKiPLEsj1xiJ9ZP\nkopiy9GlsvAnV80NPmkeM7F4W2o+N9jDZGW+uyJ2j6KroAU6Edr4QzBTss5p\ntz1R3sCrmsVs+FCUD9qX1GuvrKdWKcDXn+d0FEMSpF04EUQOQ6tpxWXjJidS\nI7AHfHhrrlcvGpyZS0IOTneBnt2b0iFATjsg3t063fdwCr4uUwoVjByX+SuT\nqKKcxcx/L+wtZv+9f8/540qeB1q34kgB5vkR0R0gGbqsM0J7NCUQRV9pDHX6\nX5cUOZklIGQBfLTdO88XNuIsJa5wuX411oFgHL42jOxKV+s+Yw7uRDd504+7\nO6RKrkiYorgZ7uSX0v/8pbS6rQGHVOD+0Fqfmq3+gF8g4KZ6PAc6IZJq48ZZ\nN7Hv\r\n=p9PT\r\n-----END PGP SIGNATURE-----\r\n"},"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":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b602226ce.0_1578428100184_0.07634391613732494","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/typography","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad6c4b8846d471e4116d13561b156e63b11eda62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":12,"integrity":"sha512-q7hR5vj1EOCsjctgGvSfKUmGxdxbOqUrpdZMES2npTyshWU5xTS4ay3h+MzyJujlYNoD5BYqBq0D4NZjuV4xMg==","signatures":[{"sig":"MEYCIQCTKrTRokl3xQq1ONzQwsTRIdCOH4Q36IVCigFsfWPhSwIhAKfRemaoqshujsfxCVpD1FRYDFHwJhTp04IKpL47gfc6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdYCRA9TVsSAnZWagAA1swP/0hTyD3lDoe6dHl0ZWmR\nJcauN0LtDkSfsidnh88Gpio1Z9wYUn4DNBlbm7jX4t8ReYBslY89+RnvjxwF\nw6Vgm4h0nJVpw2uVC37RrN9/gVI097jXYXDA0q1x0VpmRUYdmWyjgRSG99O+\n6eQ3pNF6aXZ1+Ct5NImLfTb2WWp0qI1pSD1xzOlDCPKNzHN8cliSIIBGLYnA\nMVSZ/Jbk4+Tb1JFWdkG6SXEVtpf9h+1KTx0H+7WnubW5KdXLKfI8PiCX0+jh\nn4+Z0bN3fRSx8yrd75fLfS2iNPWOC+8+dGCH3y8tFe0CvQ9+jtvcr1UggQyf\n2hRuQdAklm3eCW6guzjf5ZVRlXtTRqNMHjPI64rXpz2sOB2S8+KoS8itgXol\nYurBFSH/ZznCsnBeij462se4SBrjU3LDh4xLS+9HH2p6eTnfiGRAgIhVVfZB\nms/ZvEd49jE1xtOlNXlWme+65thUHK3j0BjhB1Anf+BkYaVnEQrH89Yh+GdP\nJpJnAlIdVfncKXIZwL8BehHupc16L7EpUFRBoIZQxfIlg8FaYmPvsPF+2J6x\nD974hOk9hF8O17TLLzQS3nmZ11xAXyU04+0UqBvchCnkoVnskLVbzBygEuUZ\nYzdhQXs/m871Su35VEj5kO0Dr6YBKFZChVTds7iJMTeiIJcL96WE2WX+nUyN\nkDOx\r\n=j1eb\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b2d2dc08c.0_1578432343666_0.6769266592724466","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/typography","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43dea17055120cdfcea9ffc84030a3f62012d0b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.61f2d7580.0.tgz","fileCount":12,"integrity":"sha512-Vj7lUrCVReNV6mu1eaOeSWXcaKrfLZRptHhvPqyzQcSrv50Wy3kQ39ggjoSLY4I6utS01AMDoZo3uD3mN8XK7w==","signatures":[{"sig":"MEUCIQDOR94nR+3CdluFhDPbw0Rlob+FN9O7S8c9wolY1+tZGgIgFTwDWy3EHNdoHQWoTYTdjC7nKYWq6AbfTD1y/X6K8Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqOCRA9TVsSAnZWagAAJ7AP/R65Cz0s7Ygs98wOb/Y3\nrj+4a+BDjHGQm+bYIkyypaLj/pzFu6jW2Ki0Kt51RQiIHDuF7WC0vLai2/Hi\ntjR8D1AnZXOcq10vG24OY/a5VDvhx/WzTFMNdzQ3BDS9u+e4NYc3LCq32q5y\n5i+zhbIuFT+evyuQagnp2RcChkdnnDPu6p0mD3IstOJi7BNr4KNAYVdCoUtG\nOBws/7bIMtCYvmd/q2LQffNLOTOTC/8tKQwHtZLk4NMrMQcVFiHkweDXyQ+E\nQI8cixPEsmvw21LLhLqmu7Blcxr16dbpwBPlV3VVI2kaAygYmON6RStFGn1q\nEL7kz6zSjbr7NkFDvSstjd6H74bV+lxoeQvfgCmg2h4CuwNGADA5FwMPUFf9\nInB7yvyrf7TK28+C0uh9blsHzKxe/b65bdDppVQE0/RejZtfKZgFo2eHSWrq\noeekZT5M2mw0pX/5nuMaZO9oeJqarEearB1GPfuqe6MsVTwcmxKqkk343GzB\ndPPB5bP8IHKZdZuEGZWCaFHja2giBJ8mkCbiGzyyE2rY+T9fjN9NlCy+Y8Kj\nH77hORCfpbrwx969kbBzzazEOLd1AnfElMRt7DEajUEAJASHbu8sIuEPm5Eq\ntup4Kv6VDN08frlBPrvBQHp2WXIrVaZTD+hq7HbwJ9E4yhACN13lCAsYwVgo\nzlaP\r\n=Ve3U\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.61f2d7580.0_1578433166109_0.48850064178111974","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/typography","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0e5b7d58dee2a3c489e253606c5c3c7423a1600","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d1be53a2e.0.tgz","fileCount":12,"integrity":"sha512-IJKAe71r46W0c5ar3nvnmU2KV153LIQp9x39FJMGzTjaNbMHApIu13k7jKjUvSAZe/Qp0AELo2bI4j7o/2ROmw==","signatures":[{"sig":"MEUCIQCCKtwhnbDiwqV7fuT4wHMGt3nVPr3RXDE/gJVypXK4LAIgN4HA/pqalvDotB6oH2j6wR1Q5Z1pLKS3THf4CyfdQF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNHCRA9TVsSAnZWagAA6AsQAKQJCUpsxeCdqaHltlwT\nVCRajnpzhJCQq768xPBMlI3gd81m8tblKAfQyRyRwR6iDqluw2BPmon0rpYO\nCTcrPIu8qLnRy5P0NDQmSNS8FLee2LPoYLvtWoGD5JIwesutMAK4zJY+g5W4\nhfw9et0RBiNmR4qgp4derKXbm7G4ukUFCeetFQdDfuwhy5PnUtxCPA2VIp4E\njLNSvnvAbUUh8di7u1++OPIFSu78SF6/RLXMDcplSYr2yqO/8iHkveGXROGu\nP1A8Noa57y7YKSe+/D1EkNMVqKQgMdycJCijnrfYByoFzkEiEZYRpQvYPvrs\n5VCYwv5mZzhublUo9squ25cSvGWZF/pn0HHXbtxQ7mumDEhPJwT0AhGj+ZRF\njptiQxtiQGLNx9HE+FMAB7Q9TO3hnzJuWj2jlUtYEm8bYefQpcH/4GMyLQ2O\ngDGMvBhLzkE9+VXyn3jjBAwhDveFVw79ongqQGXoUF+jogenAWOakxUBhfpe\n6y8e+zw5hAA3ilJtPoTFKUfr1j2dEZEK35AlcpuodKZDIWwbX7w6XbL+P6Fv\nvnTVEBdphrtZh8iL6j1zQw0osqgzmDSDXiN041qbS8aufeX6zKtsi+aWtnIb\nGSk8f09yNt5toHaCozQYgNMK1LoVRMJwpVXwCrUp7+hqp2DY0l+pwLGnuA/M\nxBvQ\r\n=vRb9\r\n-----END PGP SIGNATURE-----\r\n"},"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":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d1be53a2e.0_1578435399435_0.6671125650362906","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/typography","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1275350fd7908f587a80540654aa0e06219cab09","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.9b0d06e32.0.tgz","fileCount":12,"integrity":"sha512-bb/XsuUwinE+HjW/k19qTjsg/7kN1Ypg6MXVBN/dUS0+4WI1nvxl3rjbiVUJIGUrByNsjBWwccCt8FQNwpoxlQ==","signatures":[{"sig":"MEQCIHLqswrsA40A4KRDr5MJWXW0F0iVV2HzoUzRyxZOQlbjAiAv9YFLHma6ZZYlrZHV9uKLJs9nI1ZoUDsX6hl/hezaow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPYCRA9TVsSAnZWagAAdcoP/0lOtfjy8/O45gncDqNd\nFdX4rNA7u/hUz6ZCt8Zm3R0V8bNzO87HSdotSr6mzmFdPsc8EV7cuvcxleEf\nboIuHeRn9ZxaE8s/kNoQdgofVGcdbf4wtLc2XwNtNvVcBJYVU24PtL/qtDxJ\nYOhJ3Ql23Ou1heeW2FLd3//ox3HIOIo0BayM8xq3GqkReHyKFguSezVp0ylW\nZwvlTkL4kc7aNV/BBdSUJsdpOTJ6TjyxkOydDlpfxDabFwwF4AsDkGJhFR4p\njggyP/uJlJ+85DNoyHvbihRkpWtMQTe1PqcOYRYSn+UeRN6q/sWyF4NpD514\nhx01kpBgsJXpKEfychg4MFCt+Y7IFZyw4cHKgk5PSQkRcq05FWNCAtVOIuf3\n55Iib42neXSrUz/SptVIFcv1JXF/nL9uzKj7uWMEQwaAYJ87wpyDdIJhrVp7\nfDibH5cL4E3dYIpRTcBdzkXQLWXMasO+B0cCQBeTSzRGCFEruihNk4NCjtxn\nQ9Czo5Ku6PoNPlQAV00bCXYD4edilNybNuJuJgZeeiO1GYezxQRuf6iaUe32\n3aKMVZiKp6dswTH1YTGeV7RiJkE53Nb9lWb5vXARKWhHVpKdtpwTJopt84pm\nQ44RPZ1qsgaohL7ybvWKOtrhIf7K27bCt5lcPbDfk2guy1xlfQ50SKuGr3nB\n43Ue\r\n=29FD\r\n-----END PGP SIGNATURE-----\r\n"},"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":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.9b0d06e32.0_1578435543783_0.818955929276538","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/typography","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.730c807a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cec7e68b2dbc9d408003c2d3b783bb81a79067a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.730c807a0.0.tgz","fileCount":12,"integrity":"sha512-wEHPQKUPppiPlBfoIR+3j459rT0lXyay12v9fppsPMmCCbe/e4JRjVAyM3N0Gtv6fYdODL1nNsrQEugZ0REBJA==","signatures":[{"sig":"MEQCIDTmAFqeo+bjZjWFJD+Kqbc8qxgr0wTQo7xyJyzqllBwAiAHTJvpEQA0fg/qFarbD19P6zrOyXJwhfgxeCCFGdplmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQ4CRA9TVsSAnZWagAA4gkP+wVM24onJLCORXMamtBO\nKNmz5dPgUGzkIZCr5RscAeh+qcTwQo2PT2My+Hgzln2VpM3F81pUpZsqHBDW\nvtp1HtTx+awDpdj5ne9G+T54gsYtnis7dqJ/jc1YJiBEcUliFK/fwtcc4Gvw\nBpO73a3SZVvGQ3ScntsFChDnK4CxalGBf2WGyDfAIwQ2DT14x1BKAzz4d2x1\nI39Y9L33rs0pCJ6CZeqpeFq+88wGQQAbsoE2CJQ7Pb28lNY1YZCAhjz7e4tO\nVE/0uae1ravdKpRKTWO7K1tXdlmyhdi3vlViSG2l3eMcrihrYcALcclHeKsg\nFkoLqgpELNboKROfiUMFpALd+RtPA7fuu82XGBpIoPs8dDtDk25dR7CBTpOf\nwPsXqD0jH9McPxylbuSTFDQepBiUy3UvS6QOq3/26RqjuSGWp1DrY3fWC2sZ\n6GRnUMaSHif1llyYKTZlGtnNq83HCIcU3pMOlLJ3PnwqYV8kHb/aAI2Gj9yC\nuK1yZr1ae7xZE1AiaQTrXnVlCZ/AxGkr+afNxnC+isosctj+ScvfYzmIGaix\nmTUtPa1rSU68mWN+dNluXj87mjsxd1dz6emLwb7LO/V9mug79lkQMSaC18//\nyEw2rHHD26hG58qYTkh8ttar20dCjVnAlyMSJ5Gu2OKPwvjqJjLCVezx5N8u\nxC5S\r\n=+07V\r\n-----END PGP SIGNATURE-----\r\n"},"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":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.730c807a0.0_1578435639982_0.050619176902880314","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/typography","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.2213152cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47bcae8deed359a22c4488d98b7477fb3fee8a21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.2213152cd.0.tgz","fileCount":12,"integrity":"sha512-4SxkDHJMtVO8mThibBXJXjEgbGHVmZRpNdk3EW7+0+StVX6nHSON+qiU8Uk3VdFyjdH+H139ahtZqf96U3rogg==","signatures":[{"sig":"MEUCIG0fBPAzuz8/UFdcIyuNjRfZm/5GBazmWkKK6frNeG3zAiEAyL4vNeBfClaNFytbr5Or42kVEWA/D9XKmBZD+HcK6lc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg+2CRA9TVsSAnZWagAAdKEP/15E0ZH2cN7tbC5cK0a0\nrRUsIZKyg3D/NFd1tbtHy04Tkes7CNgt34VhlGgkHiuQN9TNH9BLojzeZBqy\nss07CftIEGrsWVTtnZWZI/FcP2YzsXjVVZDnhAu6v+5Rmngu0t7L2RDm4Dyz\nbMXPndbUKXXRiPEeGAdWoLlLTyHXVQc9nEHg9HbD+oKVY0ss19kS/Px4ifhc\ndTZ0yAhaLFU2GThQ/jyPhGH74gdo/ywgpedqX5WxlhBHqvcasUpK8Ig5jc9q\nzq4qibIRWnDYrv8gU9DCAL+u8/zsB+zo4MNleFZK75Eogym1xMLsWYDffpVi\np3q3Yi45mGIDFdtbnVuFvC9HBoRxWX9Hsviw62JIlgE+3X31LVhnlr0Agl5v\n62faRCA7DDIFfBuSjt6LwjNwXG7O3GR9QkmKRIDTyLOf2/LpV2sYgwBBLlUK\nhmFTofbcsQFQ4vLyvYcfgXaMxiglAuwuKjiF9Q4C+Nf9wsT6/GHkts9DFFqU\nu64yPAjZlaq7U78s/aQVF/C7Nzpi48u4yPQOP9HHWPQXZjbu6zXPK0tgqczC\ni9+n+KgJbTznOEa1pLcWvme6cXeEZryM/nsGCU3nAeQYsy8Vp+eqOz2IjM2h\ntyBf67QfFwoWPCIZRqW/R3NHPofSeToKOboFVR2CapyCarcDQHFT7KfIceDQ\nHb6z\r\n=O4Bv\r\n-----END PGP SIGNATURE-----\r\n"},"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":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.2213152cd.0_1578504118216_0.6526659500775545","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/typography","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5750f7169.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5692509227f32c88d589f1c0a00040004dd0a5fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5750f7169.0.tgz","fileCount":12,"integrity":"sha512-70J/jO6aN1nmKRTBgxaYgIc4/vwXTRAmWm9LPFQNNonqzK0P0rpzR5pqzGfd9ujEBIBUIxRXjkxoLWTdm/Ew4w==","signatures":[{"sig":"MEQCIBWGx0kCaqTa7ZQ73QNp2M9f3YMcId8M5EJAHSZppz5aAiAoPouF0sUckCXMm8BWQzf4gmpwhBazNVPXB9KaOuAy6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfQCRA9TVsSAnZWagAAol8P/RrvLS12QXz1EeHJxjAO\nP+p/wJ/O0S0IHiKdSQ9J01Gjdtk+zi3gskK7sLEOS0aBoV/LDqxFjrlg9lzn\n3w8bI1kdaQCCpPAfJDiafsJuauA4CVX9Z1O/7dXceXyvbzai2KqzmT+whtGj\n5piYQoZHbzQm2PovyE9RqKi4TbuF1WsNDqflNtSPKtXCSAAdbCkwQmEXmXsD\n4m17NVxTpsDsXx8gCKy+XaCkNO8msk7ZjAJ+rgGjy5uvRgG0T/6VAmLpoiPD\n3vbmnqR6p9K2sBe/Etst5vN/DJDNHvpT8qdtyIje8LCEWcifWBHCdkJqdp0s\nDuzlwdkE7Qx7+vHn5dTONUvYz/ILPEpAF16qmcrkjJiAGe1YkDI0M8fYeWFh\nEQfCsI7a+GXbrFS8D6UvvdLMrgpk3gDAB4AReFsmkTh07gR9lXWdPxeEv7cD\n3t4QWyNkllOyWq6MZ7z4O6q6HZE2CoM3pSKJpnCq1MutJ09mFndHdkOt6j99\nz8M2Yw7fZ2pDkcrBo1l9PidDaasCDAm7NaIlJIXyhrCtpVy/A2NqXfZ8hTgv\nS/VUb+Oiig8zfzVuGzf4ttv3bZJWwDJ9w3UvrSUkgsLoOUPwZdJgjaOr37SP\naU7Tpb/Izrag1gNVkrO9ERXj9LZVBBptiF3W2PRJ4Wzje3ky585lAnvYYhgr\n0FVx\r\n=sWsX\r\n-----END PGP SIGNATURE-----\r\n"},"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":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5750f7169.0_1578506190006_0.6019752546164057","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/typography","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"857539d1910ae265bb7c31b088733996e01d6fb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.f7abc7a43.0.tgz","fileCount":12,"integrity":"sha512-l5BJ1H8Ygz/O+2YGJ0StEWQbErxFQysMwrwZwD2N47Vxu2yk9+kHoNP+ybcyO8QfYm8ijbUJWRXbyaakwqkaPg==","signatures":[{"sig":"MEQCID4KQopD7LA3EOl1ZZCfgr8t1FpPFVR88IERIXOGUD3xAiB3BJCvLCsrSogGB6V9I7S6Rs9T+e2SOra8bSyI0mnSBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8QCRA9TVsSAnZWagAAHO8P+wfolx9iufSsReLMlXrw\n6WxTQ1bWC7BQNx9PKwAvNwvepR73v+EjNIvGlSgSfJAUDS+qTvXy5PYCrvJb\nTWQ/krohJ6p9VUkJ2Bo7GUkLi1OFSqaSdJ3ITnvm8Yd1iLyrfYfmTfYNQp1r\nTsPOyZIA5AKk+O1DVqJ3g6Eb2tDfEcMF5jDZ7RoeUOqKTCZyPGjEMg671NYz\nT4Rk2w8ChZtHkN4D7fguVNfzV4o4XOeba4dx5O3mdNiJSUe5EEhDeW8Uu3wd\ne37xvamh05ZAKTULC6v2defI5x9hW5SfWuZGDjz01DrNSGOqh6+iDmDfHnkI\n3m6BXD0VBe4FLVv9quQn5gTvMS97xnopvj9wr5qqo2GDjGKfSi+OQwqRtnTH\n6EFIHk2ND1F6DdExZdQrCoPxNYy2KZYUY4pFcvlz93sYbmreMDIPLd4ZSBrT\nx9j6EvnPGcmoglOlWAhzQXiahY+KsgGvunaODM/au5FwOjqvP5LG0beVfEAa\n5xNP2KAjsi9Z9bqaTKxm6B1C8MzAC9sf6ybLZv3zsX2LQ+COauzXXOBmU8Dz\nbyZFxBp6Xo2np5q6kdhDppTPkD8UZWY66lrdX9pm/OgcRyIA8A5LishHFYoK\nINJIc77NqBiwXMfcdGDmcz9MTdk2R/Vw5qu5rpAOeGbgwp+e2y5+NvLe3n4o\nCBAa\r\n=KgTj\r\n-----END PGP SIGNATURE-----\r\n"},"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":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.f7abc7a43.0_1578508047838_0.6424163489083554","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/typography","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3126944e44f95023a0325adf6daaa73b3284979a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.bf7b4a061.0.tgz","fileCount":12,"integrity":"sha512-O2scVFGoCzRrBDYe6Px2Tx68MEweCxAl96D9ejZsk84FTrOk0LjfNvc5ISR6nW3W7z7vkMifhpOWiAp4T9/U8Q==","signatures":[{"sig":"MEQCIGUQkte35PeAwrEzZjWDZzuJRf29MMayoazElx7uj5JHAiBNX2wOlmxaxaB/RgGNdF3oBDkpjdUX2BFz+UCvLuuryg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJOCRA9TVsSAnZWagAA2AkP/iS6yzo4zLt3WAwcZPYb\n1Q1nNPYdGTzXt1dxuny9xdzEmNvjQntg1bnAh9+o48p5WMjzqTpATJs3icng\nkd/1RXZ2gZGPYuOVVT0isHF+TKYvSoHZ6QaVWUF+Dz0qfLgdvBZyKzPDjo0a\n1WUCRfvFNxFlDs+M8TP8+SZ53VS2NQFpBHJwSCx+bBA1oTqqcPN1S3khDMaj\nwT5Bz0nGxKfNVf+SNyHnPiXslJHJy9VHvw9cWOsO/R7L2+zisPZq7DXzvfOd\n4g2kUdvVazXUlKbljgUPOaJIIyRvDI5eW4ug368eKsHvrkYmFnvXKi31VJw9\ntXST2KiKkxSeJFMFbXNh3wly6afOp3qDhSwvOBqpTE2mcHCPrz7ruoTzUDCC\n61wj82VqIIbcKMbi7opliRwVPhMaoCtq0BbF7iwwlKW9YLKgA9IiLSGEfQl/\nEZxsMHmLZfLKVh1KxFh8lH0/LnnU5ygOYXF4Z6Ao0YKAo6nX0/1OBnf4ONgC\nloskWXffgehwiEVDRpt17Gjk2qkvKyYHEOMG9xjkmVVXdkvJ09DfxbZXKgSw\nM6YgQjp61cUVixPnxQ7VEZCpyJITOXWs1EtOl0ggc2QqeJvnClxK5U2qPowW\nOFzFB9+Aei6vURXzUsZyEaC6/l/QuPGWhgPcXpiEXweyg5OFpAxfFQHnubnC\nPe5+\r\n=lQ4P\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.bf7b4a061.0_1578508877818_0.3267069320450533","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/typography","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.784fa7903.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"503d742ca5a167650f92e7deb1b7a50917ec8bfc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.784fa7903.0.tgz","fileCount":12,"integrity":"sha512-OR1KnPm1hlNDnWXZMo5eukjhop1pRPpQUhyvcYXaRutFkI3o7Fne8PBqHTlPRIMEcWnsqStaIP42mKAoRY251w==","signatures":[{"sig":"MEYCIQC2S6tuluUUKJDmfW54dDMxiLiqlhbKbsIAL2tbPgsYNQIhANclIyawlFclh9Pn0vPNqzhP1i75M6/dxkhhE/h8i2RO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikKCRA9TVsSAnZWagAAXI8P/0LsOO1YGIfnzyf+DTZz\n3hLg1QZHvqsjnukZcUaW4hEauVnnr9zEorjsmE8EkvGnFRlAyPvnco9vsyzM\nWNpLA4GA0NCALGrd5iBl47sjkk/y0ZD2kqOzjhfZf6jHFCLQ8T2Jm+vB/B5C\nbh/RU6yXJwUfERXehCslvTIlfLskS/1vfPoZUJJ+F+j1mo+Wsi6RptzrPJA2\nWHKIDBhT+MOaghu3FqSvU/mhzJmyVQRgQMrw5tzAZaCsGd6rGRVqWAB0Dlxx\naWBzj3gMm531JyBY1B/tPBeAeJF5gV6pYJry7FnDnA2jT8rMzxL8YvxhN04/\nhRFPLhT8udZpZkxtwP8y6Mwp3VRhPfgF31BKE/ORczBFzpF2LncOupUYx9nC\nIUGZLLsXht8B6NspiWkTD1EjYsQqgKfkgTSt4yGuPq8T/ytwQ0XFEtHVZ5cy\n5ZGqq5W+hc3/EeC6eXZ2fQFJCpAPz4K9I87s8S/e+hny2S0w55X5jVHmb7YB\nljoM0oVADpsmD4qLvbYK07PZEKx5sdK0mIAETejc4v3CeXNL7zs+dKD51TKQ\nf1KKD7+A0zrtD3wj+yBzB4MVolgS9QfO/GTgHG0lZ62X1FmYUBb4/+bVH6OA\nvisPnSMR+k3dxA7yozmPecrk+mpLwu5rTb0DqyL2BkqAcV2+bab/wYj7zojf\nuOMn\r\n=pmsm\r\n-----END PGP SIGNATURE-----\r\n"},"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":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.784fa7903.0_1578510601741_0.849831114694297","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/typography","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.823c050ba.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e29b5c00efe2a137984706c4f7bbea7b2d2046","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.823c050ba.0.tgz","fileCount":12,"integrity":"sha512-Iraxq7A6Y2vU3JakT1Ia+jc6Jo002v6+FKCB/XwQKPiFsSb+ho8/Z0N5EaZVEs/omeEMAcUKld5N03FoOslt9A==","signatures":[{"sig":"MEUCIQC/rMNWkmNgWJ4X0B5mBTQfiqlWK0nuBvi3uAqaEvOKuAIgFizuoLKKV79B48wADEHUaKZuhSR36cX0nevBUNmxuQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjc0CRA9TVsSAnZWagAAMdwP/iLPOxEzA2wBluwU21b9\nrK87NpuPmEMvOjBPrpeG7UVL+uMoxaKnImyp8E6SXzrnAFv3z2PzKzn3JXFh\nS4DTIqMvgm2W0gs6NEbDfIkqRBBvJRzn3fJRhU7EiTl4rbAowyDp0U6V770e\n2hB5yfIYP6jpYvv00LQKxXL3571E9LGGzuHznFtrR/pJaITjLrS0o9ciyv0Z\nD8al9rf0/DpQsmaZWyyhpwfRe8hFWy27ccau5mHct4j9mFQYGGrfLJU0+zb1\nvzqSilWBsFHbmA7GrGKQleolBW2tmpjYepsgxRWfpx5pO43NyUSN2yLhGbfq\nmDs8O8LSxBMaB2bsHkELEoyOFnEmdLat0RICoRX4L9zSCrC9ehon1ctjDNN5\nRcJtGjYB3oMarQ5/DqeIyHcM1Xwm+1WvxOsXm5N7mvOhLmaHSciMSqviBQ/J\nA4VRC/4QcUYHuCBWPeZ0Nw5/vnVZq8La1gSolg5MNP/2j+bd77PaJ0DhCJSW\nrQ+Iaayye3lVsMdf6HGfjfl3YMAgvd+Ev2ACT/JktUXN6rXKr1RkXXiOn3iI\nm+DlJi2VFQf7+g6jCOSdmRK3/eP+3gHtegEJc4y2Md4VYMNcfvktGqrE+yBW\nfj+pKYk40ZqHUnygb/xIQQCP2tw3k0nQZ3ohVVdDNQbzQXfBqR5SU9zNioCK\n9NRE\r\n=hRMf\r\n-----END PGP SIGNATURE-----\r\n"},"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":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.823c050ba.0_1578514228358_0.40678646242886174","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/typography","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.70c708dee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce9529aec9eb4cc3491852991bb0e4dee2d93f8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.70c708dee.0.tgz","fileCount":12,"integrity":"sha512-akUdn5b5R7bWIozJPQmDC4q13pRFw6+18dZlpSLnbOZmimbKDQwOUwz9R3xM//TJ3t2hFbkKfev8YrTx3TVQgw==","signatures":[{"sig":"MEYCIQCpo3cbbi1iCRq+nDeD2Du7lo1sAQbycsyuds/JAlUNOwIhALa09faHIx2JhAMKYel5py17TaU5bmu+3BaEfu3n3vZZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjnYCRA9TVsSAnZWagAAyJsP/Aj/bt2otra4erDlNbXa\ngy8PsBrealOpMz9+0FVueGeaABS+IJcGQeUnJbrTufr6KuQ8jDvMHqFfNa/S\nQM1eM+MdNaw4qQl4sjK0ulo1MLbP5YazXneJJ9tuWjVTTVxNPAfeZcemUF5a\nPlZ/yhnhzHn2y+UZ0Jh3wk8Uny42r5VS12UEM+5NXWanPdRYpfGvZSuEV7yc\n2wgk2Pd5C704x0uUM+IEWe9GFCu4QBQYauDjaEafFhseHTV6BmGYMvRVbtMO\nV7e3zsgDvCi2iAqqU9Iw6zAttT20TigxlQT+xE+J3HBL2jZV8CDj/xE7vtJg\n9tWun8Yy74uXsd6VdeiOAX//9c4AZWGPcTZ4CHc+btbzGx8p0aUiTC50iJqe\nb3X+JXGxLmx+sZz1KG+fXrzRFK3aeFE71rVcU+KoIqhaLvWFFLlknzjJK3sf\nphVkwgJJ+/D0qk8bQ/BELC5ciJ6F9LU3PHBZ2yQSfEVl1IV4FK7pYtNkdF5P\njgSPCj28W3Nn2YCwcpBLCSRF40laIcVSSFkWumPWwMoSqQWwP5yXPobambhS\nTIhSm1HLraK5uPb1tSs67TfamcajaWYssflozVWa6XdpVv/nGdBsnn+yXbRk\nUbkRMBRfVlyIc7PIl6LtKbT0U2Bo3SPtgHtrQ/eDY5LC2Ko8vTkuuyrgN3Ss\nVSQS\r\n=99nj\r\n-----END PGP SIGNATURE-----\r\n"},"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":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.70c708dee.0_1578514903165_0.5746809366722143","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/typography","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"590ac52c22cf7db456907f3dcd946c669dfa68a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":12,"integrity":"sha512-KC7FuWmHCcNwqx7tAA8mlbcSso0d1ZtZY3SjC8XEkJ8ReKHp56AnfZJR3v+2pM29TPGI4Bj0DA6hMVRhETAByw==","signatures":[{"sig":"MEQCIFYgwpuyFO926aQOLxamXq4fdZrMX5arpu33KdJH2lLTAiBj9HNLDuWHFtY6JRG03kYEyg7vx6l6AibYGdh9qPlAmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFky/CRA9TVsSAnZWagAAdUwP/RMmnqLMtyEOsD4XS85I\n/LsOhcFwYF1b7Kc2pBeOfe1g2V9WdHPg8OSxo+R5cAnPB6vTRFLPRhGRD340\n+PE2YvqZJSK+DqVozcgLveLlhq1Dp3VNDkObrJ9HHnPHRdSlidPjSsAgI0DR\n/yFWSMuRhXAvdKtg7jp2WgAVq0AOMphkIY7o1bz98OfcdObESTEVO6GHm0+i\npalfEtwnegKZI+x3kTxtde5EQAWQSka2J70kv59yKHBrb1IL2kvWWqKz2yB8\nXewIHjAhfebOjcN9iYoCz40aQr28YvIHPZEh0uRb8ZfqN9ReuxB77HSG+GqP\nlCAy8XRN4TteOf0z9jOh3YCFENiIQNwnc3NyTrJ62VMbnbfBQSA/gjCfl/wF\n/JL+A0LqxbotUM12Tyo/gC38S9TgWb3WKm0sBJq7eryKAhcL3EHcxHxAFaRQ\ntQwoSlANdwft6qkTqsUGCStXlNFs6u6loc5HkxmE5SWeCyIyBXYP9zNvcixP\nhP03HjfwuQThU70i3KOFPCOo3bOaXNuDQedMVfKzj/C3+pGso8/89N15C/2d\n0W8gUgw0KK+VhKZYXXiRPE5QgIBmtC/36lXAiPfTFP6w8wsaWlp+8bD6LsIZ\nCR7RAVDsfbQ1srbtnVBx8lq8SuTBYNqLlqfglX2OB4iQSI2hv9ApzWVMPOqu\nQk1l\r\n=I0WG\r\n-----END PGP SIGNATURE-----\r\n"},"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":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5ed9d13d0.0_1578519743419_0.3657492069246875","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/typography","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"973199b8684523c28f9da33c0d9fd3341b86882b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.4819cc7e5.0.tgz","fileCount":12,"integrity":"sha512-/lSkWMuGpAuO+Pd+b4GoGAe90RtPkj7jimUMzlefeHLok97i78Hv1umcZ5zFUJNV7AaSgmChgGhROed9aYoaZw==","signatures":[{"sig":"MEUCICalUmXkbBjrJv8NRdjgEvnZW3QAtT4TL++Y3x/cR+jhAiEA8vzXUctY0ysVifFqucHbCgm34nGOC/KO8lZYj41PT2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBYCRA9TVsSAnZWagAAkH0P/Ru2gq5J+tCfx93+BywM\nEPjPJbj7/YjXpUxkxiZFfi+fvzJWA6vci/XbflhrzQvrxCXg5zCmyUJBfOyO\nDm3kaGPbjGf2QHUMY5Jsbo/WPTpy6bri6twWJnIB55ktbSjDWQpK0mtnk38m\nP3RnM0aeCHEVJK6nG0dzwaO+vjYpezWcR9hJtrJ42XYNrRx/Ywm0v7pmDRDn\nmZt1GW1dxR8sZo1RGUgw9NDVy0Ds9y+5Yr5IecNxTrwa1oOOTmKvNa4yMtFF\nAYxStS65cPfkL9bmflRKBRa9PZ6UqMPA7+9ip5iuEg+d1+G8TuB2jjHN3Ywd\nEZoviMto6MBv8l7uoD/OheK0IXifJwToRbAjg2pXcVObrviAFp6dFLWULJMk\n5ELVtAzwYAN1ZNsR5uv3PtJnJFiFjk6//yFtJWIEjD7UPSmYHsrGQLn3yVUh\nj58B4RZfiNxfb0aPBRqhhVj26gMR1KEe/yHNrGYqfn4vrKMz9txnQog9kgl/\ndMmG3hQ/njOnymYSv6citzd/XJF3XbKSm6AiQXiw4+k6yjUM3WyCnOFYulRJ\nBnMDAhibUJSrxX7W39zmutxb6CocPlAYztGHWbvjrwqgAlNdRn0qwEJwcoNc\nGuHnAE4gGWhaN4zc7tP/qlK82QvI4+F4ceijo8cHgrq8QDkx1nqqMa5+U2Ge\nhLcL\r\n=hqPM\r\n-----END PGP SIGNATURE-----\r\n"},"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":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.4819cc7e5.0_1578520663578_0.5144748128680376","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/typography","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f597fca46f7f8f767dbb6ce15f67556558ece1b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":12,"integrity":"sha512-+YsFavdBucpcr3FL/wqX/3RTeZJ4REOIJu6RTQWfN6DtUc5YEx9pJKyYHXKsOaBf3gItL3smIOpjG3m92aQavA==","signatures":[{"sig":"MEQCIEbuLq5gjkjextf4KYzcUc4BUKjsdmE5XZCieP9+IcTfAiBNx1Zpy5k8TCyijIjRNKB2O0SHivy3IuBTtu1ZR4vQww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSeCRA9TVsSAnZWagAAtpcP/3iw40JjKGdRDetH0s4h\npLzGl1VxRQHsH9rJaxk7d5y76aX+3SL++CAUJezGnpieOYRyS6dW/mjbebQG\nrWptsi16juLxC0Pc1tZzS5TrKZusTYaA+5QOF03KnYCzpP0feGnm+dhFW1T1\nz0PIKWTQZdKxjt2piCC/DO+ZkWRb+8qCMCtfCHFO2AELp/W84LDe1EV0b2+s\nLG9TeqFcwl7upPfnxV94AW3Itl+dMVV2nnjDcSkKaOECMZhRWiearPLDss2E\ntcq819Extt/PuZitMB0IVjr4QsDgKpZ1oWee7fv4OOcoPri3OlYl2BWZclLt\nHa26thCDkFHzGK0Y4qmREPU4EctPvSNkhfNnGDEhBGgvREdZBEZh6d8ua78K\nwQry6JVZy5ll+DCUu5QO+0ISLuVyuC7i+KN6skHgKh1HrsHokG4pFkYntKQM\nwNenhf481wB/E9b99C5neR0I4JfWgYaU6c2lrcz+la7uiA2XRSdEOn9M4c0a\nFVppfl4bRUhyVI1f2xgtsTbLykkouZnDiPXIEtajdgnjGtVnOlxhm/bQku7d\nfTDDrDcOyFD5a8lm/u6jHN0oR/EE4jOrsjiN/aRdvlqbsYripgLMUJWY+1k5\ne5nvca7lARymY4+0/oRmddKrUQDGfn/LRE7T6BV1ZlCdmfYCyjioPbwwN7Tn\njFrs\r\n=at/U\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.fe3ffd2c3.0_1578521758096_0.5340669561220672","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/typography","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c0e850090.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bf5d926403d1c634e09cb80dab94e1855a4fa20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c0e850090.0.tgz","fileCount":12,"integrity":"sha512-EguSSk70CQwgZ4NX3g30ebzxCaGKpstBt0SOzHbGrc6vkDfq+XFJ8RUiwQYzcE1cFhdLQjbyDugbKopc10MNoA==","signatures":[{"sig":"MEYCIQDMqPCX2hyVJlr7T5Ck+hW4L72bp0Q+q5pmaUSiRQRd1wIhAPiwmDa5wSZLY9dqrOK9ehZ5PuLThLjIDXVeUue9jeaF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZCCRA9TVsSAnZWagAAKzkP/1D49nDDhWa4s6f0ItYR\nQR9HFB6jptJNQwE4f/iN4OoKICY8vRYLBakH+8KwgyStiaSuNvJrkOK2G+zv\ngdOM++mD7z5qC66ydCHLNQLz30Ptavj5rBeziS1OwzJ4Bia07Io3+QHKFNw5\nkQE+V8NcmTE0YPfERj+9239P9AWGlvSMlyLXRSBGfkmd9SvUr3+bbfuLg2l5\nr6EFKrFNVK/vCjPk1akVsF9jzaN7KwlXFH6XGURJC7yhrUp+pZlMou3IinTW\nJyuiS8H1OXWexHQkU0sUO6QJ0OQdJQyjCdiag1Ph1Q5/5mOmvrs27GQ+Q9B5\ncBZmAJYDH6NvHB0lji+vksawEHhR36gXAFkskrTdwtcKGdXh2+/yU/l6xMbU\ngjnG37HmAV9p+ah8l8n26sbxFyJN7PklNgIg9O0RGPnFB2nNwCXBtMI+BbgA\nWeflIn0ZRxA2NUsd8MQsQaaFnFyqfvHKatV5HHgxotzPU6pO5xYRelalhxMU\n0YSdGFrkB2hJAl2g+/5DudS8pzgmvorQ3BByn5Xk5HWG79t4AtUDmLe1Mod+\nvYlMvULMOh4YXI+Da82KhlBv5ZRufjkhHs7Im77ESAAkvZ6XRGX7cH9ytvaq\nm6NAZSUiY9LlLiUdqi+rSlZgvi57FYegivbhZ18MLFGGgdpLyJwWLXG5TV2V\n7xRY\r\n=FfDx\r\n-----END PGP SIGNATURE-----\r\n"},"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":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c0e850090.0_1578522177848_0.2887055094961808","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/typography","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.615f86f38.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d74ab061c3bffb2b0fe6c9d249c222770074cbf0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.615f86f38.0.tgz","fileCount":12,"integrity":"sha512-w17THdvBTTie6ZPJ9BExqqs+v/zfcQvVEjY6ny7v8wQdS/xG76CbnjfXQbgkFyPs9jvZTGa2vHRnFOMMnqa93A==","signatures":[{"sig":"MEUCIAf5v8H1eLWphkF2GIUEBl/XFMKm6g2LdMlvb0r6Lhi2AiEAmjxle+89TxIgYvXcEn8go3hZnz1zwIJZFjScwkdajXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlovCRA9TVsSAnZWagAAxKgQAJYr4978KrB36PmgG3bO\nNFyRfNJpyH+XxO86c9xdiIHvrD0PS72qvh2/+28yvqVXiCKvFw3gbbR/Fr56\nk2M5AhklP1yHzUZ+2TLAUuoaahxa3fn1VRQFOBi+Q1fIh5fbzLFsDqgkY0DO\nThRVYKagpGT5WtWbhgVgpA5mGMxHo2hV7HfsteTGFTMy/yZQ5oaiYCIcx0Z0\npmHX1NnQXpX8ubwYiM2yqvhRtzWMkzCc+zHGHwLHOCLVlXbxVHO47Yi4hZUi\nmHTKVdTZt75Yd4UF/FZk2185Qqw7jy0kiWoOsuHTA3RHpx8yG1BEQ1B6GVAO\nFkdenG910bZfHUTC2Q+QB5IMMocg/8Gq3hQi4QIMBJnMpKbz3FMwQUCdPZrJ\n0inaOMvQUpFZ/NOvXw0pOwDYtkRhwQ3/K/UVshGQP113Ga+JDhVMQNGxumEj\npXcmJbS4YC4T6FAX52yZQ//Enh4hDIptfZiUkptsJGij+a27KHy4b3ou7+u+\nWvrsUFlcpkJB2EDfkASQAmTofmvCPCm6kw/OU34LZE6j9T5PUxxHOKmT3PHM\nogX+4vyYqBLPR7R2f/Za6WDuAsr3ohJoT6dBo6nVfLOYcgB3P1y9QglkoIMG\n8DPIz1cZAk+Jm5IgPVXVKP58D7z/aXbN0+iKx9hKE7/Ue1gSTwDV1r4xKj95\ngQ/k\r\n=Cia/\r\n-----END PGP SIGNATURE-----\r\n"},"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":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.615f86f38.0_1578523183153_0.579827810118025","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/typography","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.1eb032637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2ce5daf56432f63f52ceda5bba8e691ab773eef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.1eb032637.0.tgz","fileCount":12,"integrity":"sha512-i/5KMEXzuQ/KwurC1uIPUu+UJNVE33YxvyrYKPaoCbZiuwePCARpV1ZWD4tyuHAQPgqTWDUSJy1SEscQ9+QUSw==","signatures":[{"sig":"MEUCIQCMtIrq89RqJIpRyv9nS+lIPU0ORkGTdP8QyKuXn5Fx4AIgdu8aycIgeupl6B4ni0sCsTum5YtAswmuOH7erI5eNyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7fCRA9TVsSAnZWagAA2GYP/jskvMuf4blfEJYyU7Gh\nqnRqel6T/KKHeL7DRis1DVSb7EozO+GZP5N9M73Sf/f3Q3p/CVHXFg8TSSYu\nO7LR/IO3M+Xg59xCA4wvj5l623YkrqJNF5bup5tj3OyInBW+SI6Xy5U5e4Ro\nqjb5q6Lj+izQFLpQWhFYpWyptvcw/fHm4f56GViOZDqk6xE6FEXBYFxgZcTi\nR2njyjdLIGsR6mYiLLXY9nKs+3MEdqFCZyMLLaGZu2t/KNCFn7LajCAeAb1X\n5NGcaEUS3/dssMtqIakXL3UXiZl6n7iM3C5mg2l47q4yTGHwdSZRnq9KMY+3\ngwj1d5W2MfuqGgesT31ZzzK9WSzG2hg2d+wPbnpm1sYML+lKMebNPt5VCI2I\npDkRDiFuXxddYBPWz1rNUtVvgsdT/NjZPgxynD4p28/6YzPGTmZ5a+uNteV2\nUZNe7TILwkUHsQUYdEmMmGLga6VD1BjjtkJTACAx1TKoeI4jsAA7R3cLkzaD\n1yK/pqJAQzskyCdtUcnovyxIT6jHyRlRtv4lSzw+FAqnJ3LjN0xsqU6cBM2G\nreaZY8EODlyhVHDqeQr4blZyP9MVszT0tVkq75K18v/OmH8en6gqcpBquozT\nBER6pDEy8OfqNM+Og+QfDtaRtXRxIektRLT1f5MZBdbftFoDdmolTNMnAaw+\nESQk\r\n=TiPn\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.1eb032637.0_1578524383423_0.16883036525409256","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/typography","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c5a5b0f265cd0f628972308ac6498ed66f26263","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":12,"integrity":"sha512-uH6NNyBjemh9CQVreCH4OEw4ihHhrGj7LBYHbHBpHv9fXQZ9Nb1fMQhrn7WD8OjzyryxKjaKpkqP9xkFcYCMwg==","signatures":[{"sig":"MEYCIQDaW3vq46HgDRjCYFWK8k0mk5mXW10HiMc1clZb53ms3wIhALZh8eo3jx6fpKrHB9SWQYMHs31snCK9YeEMjdyuFGE7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8TCRA9TVsSAnZWagAA6p4QAIMjv1u4g6UHKONb7VDb\nSgHiCIZDf9oVcaF6RizJX8+jE2KOxdz5NAFwNxeIn2tkkDlytfuDqNfIC3aO\nA+KiHnU28jENYkZfY/kVlQarkoi9Oc7eeWkd72O/HXvFE1RoOdDURqBC9hBW\nv2aY3GPLrwt/PF+AY2uJVudJ6qHX54gQiAEFr8tnrMEZ8vmD5YOB7rQd5nDw\nSdjkKRfFzR3PExbxGUOU5kJPrQKoi2lFouLfPm9EHvWnoZsJcavth3lVJWWh\nzyke3iC7bYkIYfZeb/XTVDG6qGopmKD34L9ljMiRMiRw3FvJdasF1HdGlAm7\nLwXabv33h0tdPdKWsGgsFM5gmuV0fBW+G/KqBlt/CEocfOHZtJ5NEc+j+JZd\nCrxS1nVCQ0jaG7uEEY+IECy3POsOlCHhHTJ1fxsM7DoFNbAnpoywvkuZ07bT\n1SI5rdC5aB+0/FU7LMp62MlOKBK4uEwDh5xA0qxigX93ZAMNgs+w599X+VkT\nWdRy7mC8C3OfULO2j3nFboj0ZjKICWMksOh9k4R63tGbyWfgEMq1WoVx3qN4\ndTcH4YSF20sA3Eypj9kJN9KYzWUVCKFHFzihDVbTDHPoCBpvRME6oXAtdgE3\nMW6tf+Qz56IeKVVVpdgTYoJheOUK1E8ah20OVdwubpq/20X97daXWk8PGlBU\nSLZh\r\n=KEQh\r\n-----END PGP SIGNATURE-----\r\n"},"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":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5bc5ebfea.0_1578524434385_0.9150093622724385","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/typography","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.1112b8def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c682ecd4da211abe9acebb1097d7be0770893270","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.1112b8def.0.tgz","fileCount":12,"integrity":"sha512-AF1hgtmaLPqxOMxluAYuyb51R0YIZ156CJNYCGm87kO71ZpekAJzVxIfjxVZlgPQcWIb+ZLDXVz90pVRXUu3IQ==","signatures":[{"sig":"MEQCIDRDRVAbbvOIvd1cHdvg9kH9ZCR3l02bZJ4cl7qVvNNCAiBZmyqTFJtBYifPe5hCKsj7x7AZnzrgEQRK7ltKS1lkIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6SwCRA9TVsSAnZWagAAkkAQAKEWd0oiCZFd7eagCRwK\ngDm+CgDNsYIESlX9fNcXSZovACvhJs7mfLEDbVr1NIEWU9r3sE+nBXNZrRM2\nk6SQ1VtAUqyrxQF3bXx6nt8snypVQ9LgzKydfjEdF26oQXPsZ7bT7hMTBRqf\nD80E+E9DQUC7lahSsxPB6PzvQY5TCIFeo/3ziydgrCWVCPW5gs6KBrDRo1Z9\nkFRzf+LoydQ3UMbItuyr40qGAKpND4yEGMVOGqDuZUSQ0lW2LEU2H+KyMMxL\n0gfOnyDjKhDW1w+D+O8J670X0ORYH9ILvTfdmOTLda8pNaAfrd5RQhf1Ykix\nQ91dcNQnas0u0nmTAZYO0rQ9XTeO3hzfMW99rKVtqtsia46GqiBY9C4Mx64/\nVlDA41pVLFTkv1KknIT87yh4b0/whUwxEBtV88NX9JTiizZB+FC1ITQQdT7B\n6IyqQ5w/53Tj6gyTG0J7sUcLjCQ/3aT4vD+BAy6zvK4t+0Mp9WYF5tfUdS8W\nnKC3cnTlyRUnxvaTWoeK+d+a3vOQxYwif52vWgAe3lCa/dDdQPlul8TG+JdO\nrjsC3tVOu4aCAcFCOC42wF176sbAIelca8wmQhCxAkS9Dg1AEPa/aGEEQi7X\nyfRDvF1P2Jzs/K8o5Q1gZtf6/9jk2LWFcUvjyAwUIDsyg4C+SEUk1+4h840T\nyVmi\r\n=5i2b\r\n-----END PGP SIGNATURE-----\r\n"},"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":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.1112b8def.0_1578607792295_0.32560318173615","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/typography","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.aab102017.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92060fa5b6ba7509b47260507afe72ec0f67681f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.aab102017.0.tgz","fileCount":12,"integrity":"sha512-0bDhyPN+B+4Woa3bhGUODPeX5iSVJWcf9Xx4nel0md4xt/0Bl4YLo5MDfX2gOkkzB/mqhIG6OGqwa8qwtFS6Ag==","signatures":[{"sig":"MEUCIFqtOMjSGajTQ89AUKFTwxN4XGACl1UO/w3AW5Su6lDZAiEAhU6fx43fQkjVA1OjgMoFMkbZZL00Of487s4/HPQtBTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FSCRA9TVsSAnZWagAAWekQAIBhxHFVoLzrQgmUfK/x\nysICQwKnTlnnzHffPG1SmLDvnVKXvtJtBj/tTc/KfXywfMG65FbGjcBsKAHN\nIDb9XoVC1lYeyZVN5Iu26bpmAPLbOVOwyaLeJjqhZUhQVQ5HwG2MidwTJHpZ\nD92WqbD4nwbqh6T4PPpQxLqgV2yCXkrRDWBDIFG+oZg8OMfHRl6kX9n8m4bX\nKF8wbsljbX149zNxJSA/patlMGXuS0iM0GhkatiRN8zdpiGDFsHNfJgSUP1j\nuLsUqgnXK9Bo3jn2rGtrU9RpVMMxCScBKcxb7kouT5Q1yGUlIq7n2BVILkQ7\nac6z70yUFph0odcbmmMnkLWQlbmrHsh71nrAxQ47d1dmdUUWT9W/CnniMvgs\nI4BexZklsgiZ1vriLg3mZ6egJQF7JP5CSiJyf2Pyo8atRSTSFaZpjm1cvN/0\nsuLx1EkSilmpFapI7i6ze0iD32VqtCGG6WvXgPp87JVQQ6OAJXTf3ljhYKGb\nKwYWzyFx0+wx6hKO+MoSXxkUqGUvj0zg715t/Ku3eDKQHK2i+jhrSkQJzUA3\nCoDcNdvddcJPfI5CBFGF9adnexxMJDhzG5DZLRWn9Ri+q+X6PHzzCrlaEX88\nFAH5Yjb8oXG0TEIRkMULH0HgzfNOrkQmbOCmn9Xnadr9DOJsUIW31sHx2eMB\nzaCe\r\n=Kunk\r\n-----END PGP SIGNATURE-----\r\n"},"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":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.aab102017.0_1578615122098_0.45089944824265293","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/typography","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.426913342.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80ae767af5a6a0c207760bcc7d9fff7f6b8cb3e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.426913342.0.tgz","fileCount":12,"integrity":"sha512-N6mAuFF4m6UrKvdpiWlvzVVfrxhBE1LkJrn4zK5KhCAeYOl3dByWpRrjaX6SGDYQWeYF93RZiIuZyLv9hT2fVw==","signatures":[{"sig":"MEUCID0lVcyoXRYtkJzmEylYzRTMTQS4hCxRg4pDn524PQW6AiEA37yYdSPlW8SsUF7ZliuVghiufAc57lG1tgKkI+UJ1Lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bcCRA9TVsSAnZWagAAAQYP/3qF1pjzV6ikTP47F5n6\nDmurMSzJjK3cPN4JxbCgS0WD0KZ02BQZJnA7Iha6F+qz1rS7J8eT/C1ViMjP\npTTZnyPZF2rHoGsbLiON8XjiKvSE/ytFnQBv+kXwaf2eX3Rra+dyxSxpaibI\nFCaDjixpFSIjMxAkMnpBBOpJO+TMhV96ssfIrzWmKAz7lnutMnNN2ylOg+Tv\niBnS5tL9rDOOfVaWIqkLRGVCUoU00biVYTT1B0IdKw0ghfdPkQH4o/e8AR3B\nU4b432ytB3biN2SBZ5I1iCkhVVqk2SR5nn2AxwCZuQcsVKZkr9jw0xEppMIa\nvr5mcqgTPcMhGlMoBI8eW4TdtqMOR93mVZkJD7Dy4LvaURbVQFGulvF9/5vi\nw/mCjDVL5a/VLwZU3HHYLswyC+xWYF3ILF2hGYPPqGNKXWoyzKSTv7BuoZdT\nKzEUtH0jinnJI2Fnegc+0SbyxZ3TrCMievF2+N/XKwGdaMRTDV9aDv7tarZT\nX3UZXDCJ7E1B4X91BUkvNA02PkN+fIkfasGNBZjjJ4YqdvmVDWByBTlgczek\nKSU+5DOx9Jm+L5H/MK+NrRna3LC42wGLGWpzZ3NGuco/gTATzRZTIRwczj1O\nHWuNY5AKsH7fuX5mAqvqXrhMVk1XNbj6/SUv6wJcOsKL2ZkEKNx04IpxfMS3\neEjv\r\n=Sr27\r\n-----END PGP SIGNATURE-----\r\n"},"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":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.426913342.0_1578620635771_0.46829498657427493","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/typography","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d72656c2e036ea2bb775b961bd36343b57cd1744","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d4ea9a706.0.tgz","fileCount":12,"integrity":"sha512-9b9e4JtsoNTl6qijtURHzeniqsAcQ3j5LymAjjt3dszsdR40k8ls+zt+BVouWmxt6NlQ3H/hJk+48PNeaYzocQ==","signatures":[{"sig":"MEYCIQDspsUXHNd5vJD4ooLL6qB8CcbL6R10JpkWL+h0Pn/1IgIhANjsQz6AfyI6ABMhn6mfTGJ9j2paNe25GrwtFQzUxG6a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLNuCRA9TVsSAnZWagAAY2sP/i62UNAVcrdjvqmA2i6l\nGGSsyA4Q/DyjlCshDyjWI0wy+u33KHagNdlSqdlNR0eSNdQ5HvcFN5KQ3NTO\nmIKL7O1bZebJ3dCakuAFf1IsomFXCcIc35T1JRvYaUCZX+3zzoJrJbuv4AFH\nAGLQkB8SffvndmeJ40HtpalM4lRDPs5GUkFUWlO7dAf/Y70oohKtbvyuChz3\n2Fqd3NocxGED3A3KetnDao0QpygKumEK072Tq4n1Evsgny7fWwQC3iUDPRlf\nIBDyU7yOdl41DUpc5vvDMYkzIytYOkTEZqRX1YUF862+Ul5/kwUAgAw5LH45\n5XnGhvZ8Z1E+pJNc38E2awjbcSG5fqWREVLSPuTBve7IHUWj4d0O2U2RyE91\na4S7dbKrWRx6SFqZ2l8qqQoNxg9/KflgZLuLHHz0EihaeC6zvLpRVSUZh6mm\nx9lnupelQYOmTqO48KuAGN4ZEDGHh7hnloJPJN2tXFOO1qHCZ2sY7OwAnP5n\nuTr4grY9AP/T1CswW9zB4ECgUPJFky1cVyL1QOSecMFzjB59DwxXI77OMsKv\nmyA0trG8jGwQwSwwP6cgKMHrwrJU11XjqdImINCmCWoyjIBr4Igr25oZBL8B\nmNeIMss+AaFBupsMeD9hkN4ne6ib0Mfy+vGmXRvhz9T3Svt3fA7ViuhDT+Tr\n1lco\r\n=QEBh\r\n-----END PGP SIGNATURE-----\r\n"},"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":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d4ea9a706.0_1578677101759_0.7026704013643215","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/typography","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d86d5305a84149fb45ac834606a6c4a19d3e8464","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7d4ee2996.0.tgz","fileCount":12,"integrity":"sha512-7s8DMmMnBf5zacuQNUMcjNLcfPzqN1VNDSaE7kXd7uMhO31lTGE88B7w+AdQr8HvSjFZyBaGRVM2PyPUt+bZrw==","signatures":[{"sig":"MEYCIQDOQ0sG+QpYc+J45sQTvyY3i1SAdn2upOg3EnqtgDsFAAIhAOETUUvp/Y4TZG5V9erR2EiTrpeNSLe6+SV0ApnBZ6QV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrNCRA9TVsSAnZWagAAFSYP+gNO8BLQvWGzsp2oB1z2\nHxktEwTZttzsW+uoer5W5Rm/mOtYBUsmR+EevepuS7PwnNqvtsl4ZFLtBPXl\nw6FLcdbd4QUu0zfoObBSdIra9Xketk8Pan/IEJbscWsoT2kweF2iLfq3LeSt\nL2HzIpnnjOrIYRXIU1TPLeczaB3L7awd3U8Onzo1G5pBqcfVZUaoRzas40V6\nhYfXmLXcRFjXSkNOFErz1Rx1wjV6//DpyGCu8usFCXABbwJmXYa/hVzIIIA/\ntxgsMgxwT4YUXkTacXlCz3pV2f7j81KrkMKkEATC8emFPnuZs2fMO3LxmkgM\nsTqvdYSTCWEWxcO4aqfEEJfvGzZXtHibfM8rYc0zOfw8bzcloADNYlHNf6ZZ\nyMCRXUa2/wAHe17MixmPLyShU2+36/RUnJ1W3BKHKQFfQoKen9QSAhwcXyBN\n+uJVyZAgilmLSFwQT1zttdy6yFJnO7o8JtiJb4ZNIX5g3dXmLzgq2vOTxqws\nxOE4l1GHdnpH4X8inNH7DfU2Sh2oKHDG5GMWyoh3SsjJQjOOI9gUa/DTkAb5\n0/y0iCixB4dVcMK28uOE2uod+8nFAa1UKNPQMm//oW+H2fB70zEaLd2Y07bm\nfMTJVIt/FE5SXVzkAmwekw2fH7U+OGr2HmX4zmP4yTw+xr1zxEYLkKvnyQ9v\nkPw0\r\n=w0Xh\r\n-----END PGP SIGNATURE-----\r\n"},"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":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7d4ee2996.0_1578678989308_0.27934271787380505","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/typography","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24a141c994958dabe2e2c839e7aa94fcbba2c07a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.981ec9b6f.0.tgz","fileCount":12,"integrity":"sha512-OrVHOvZRU0g6MSFQfzNBekL8DGj3s9K30jvFz1skuco1BAn7D8+DNyBsY6dKkhe0+Ou9+zDxSz/sqp3V+RiVQg==","signatures":[{"sig":"MEUCIQD08BcL5UeavsNSnAySB/tzeyi+a5eNq/upXrVgIsCwfwIgPLBWWuzcjzfFZFTcrN8B4sLHa7ghA8haz5n9IutLb48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/eCRA9TVsSAnZWagAAp/8P/3Zt5wzmYgI0iDXl8MFQ\nN8eOe9CZhl06C6rUfsqckZLhtOWk2RXoQaF/2jbYAOKd5ozCVeLI94mBMPLS\nFqvV1RFTCbLqFLAu2O5ji9UrFO23+dSarvbPM2Fgo9A5+//QXy/0D+3ZoW1e\nuoxpwDjfjfKWC8vW6SXdL8NeOACswIw3WUcwhAplybf417YXiMvxOPyXXKA9\ntESxpQzc1FxJQNemLTKzjcBGNyMb/W5Mnz6smfhUY0U0tq8kwoJatMhIOIBP\nkdEWDXE3RaJTY/8htH2N5pXdjLhEGKH9m7CdRlLP8+C61CYycdP6VRdJbE6Z\nWm6VTbCHC47XDK/UnjkQL/ctvdvJV4FsNvyeYDgxhQ1cj6pp/P1LNusC/dao\n/aiJUzyO+KUdl4iZppp6U+IEK+rYv95Cd7rf5IhpBaZ4TvWwWjHKoFhfBOXA\nGNrM76DHZwLYvX4pYvfoQ8JOEya3/bCSPXqV1/CJxmW/mgyUCrd/b9Eq6J5R\nOFG+/xQfLr9mLM9P2kesHktQ3KJV0rG+aKiefSjxSbRpFoYfhtoNOO57oAPY\nTF/nUl7WLJO2Qmai0xGTBlK1/w6NsXH8FNqXdnkjDfN8L2mvfOf9v4s3bn98\nHFtQ9r5Mhnk4J7TMDWnCWdMm8XWuv5bcT3o8oKPJwGld+EQg4x5S3yDQpt+W\n9nm8\r\n=J+r6\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.981ec9b6f.0_1578684382275_0.6249022875609702","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/typography","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.737da83fc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed694c9ff03d85048b570b2365e7ab9ecf202b74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.737da83fc.0.tgz","fileCount":12,"integrity":"sha512-wEz+dKeurb9wxdu4Jfyf44Ywp3EN6xhxRzHaA5sO9WjLgaf9KR6lQJmdlB4ZfZn9XwMmH1VAqpp+NYkRBTxcQg==","signatures":[{"sig":"MEUCIQCB0DeFOb2UBH7M46hvluTRVu5Mw/JeAseZZbHQywYwHQIgSanY/Ppygr7Lq8lXi6gxcqtzDVNnc9pgrmZ8QU/ngJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOonCRA9TVsSAnZWagAAsJ8P/Az/zH6hA8HzjS2iRSsO\nI//iSkDtZHG3pr1m9FfqXs3DQyGfascsl28+syy26PqJ3pkJDUpgRAIHjXNK\nQvFDg9hTPc0VgXzNOKbzUdysSzoHv3c3tM2szQ1JsF8/ddFjSMdgcViWM+1S\n61OlNFhANfEBnBC/UaoRMChWZO7rh9MXuryISkHXp8NIS5kpu9fSN2B2ctJU\n6o5Wgd1ZaudW6pDJ3FlnhoqT3NePv96mvMnCqT1ehDEnPKIWAE3ODMDjE1A5\nWqMNMRQixyVJoChxYTpvk19fmxtgIZsDavYtx9tQmAOZCPSg9H7bH6ElMo/A\nBefXvL6TAKJ9C+fH2fHOXTpuXYR+KLyXhyt3Wt/rYHLppOFcHFVQznXzMQ2Z\nS1t2pI1ULZEYhNQbbHOdRhz8H6AUiPiN/IOPP+c0RPMSYGr7gU2Rwgbc7HWV\nFf/y0gZCLHKAmEQ2CvTipm9xYpa14Bv5rY5+IpVcNIHUy6lztGbYQMphGplx\nbkkhjtJoBL5DfhWuJT+sjOZDUbKoPpjTTEIfcmZFKJes4FH6jmeIS8tHIr3J\nj3MYPM3/vMsvYtzwMHvxiOzkv62MPfapNhrEm4H7Z2SZnmd0ajueG1vYwpqe\n4efgm0ZNSJw1lg3puPYthfQCnFwOcyPksTt8qQrh5oxPCoeabA2JwYXm9hG1\nMgEB\r\n=b6LY\r\n-----END PGP SIGNATURE-----\r\n"},"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":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.737da83fc.0_1578691110930_0.7353965132630416","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/typography","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a4c5785b17b4533f21e9aa19d10de9ab0d3a06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.aca8e6c18.0.tgz","fileCount":12,"integrity":"sha512-GMSRTO6GYPStkc97r8XM8VXvPgbWQCCTxKxqCJ3EG4pkT7xIa3DxhOgoKy06x8002eoVuU7gl1rrIfq8px9m/Q==","signatures":[{"sig":"MEYCIQDh0FRsByjFESO8fWxOeIAImy4iYTkQB1JLDPhLwT8esQIhAPZsouvvHnYHSymS1oC92Qm9ozygFC0R2kuRfDDwjHvs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMWICRA9TVsSAnZWagAAdjQP/0b5eaP4uSXOY69Vqri5\n/g2ACHLyRsBKuKULSE+dQCc7vLmvty/sq9qZ8voHEo70k5toScJDmy+vN9I5\n1CCToBQq7ICECIOpkk++Wf7feoFubPiMFDa1iqYzFfoID2YqD7l4kezBSrtE\nYJgw8UtcEbWKxZNrfY/RUI49at81q+jOVEjGHf2tQFhAbjiGcn3d2c8e7PVi\nGAOoWlez2IPNVkvNKtr1gNNWPl76wxokawi288T0D9fvF6U1Et+gVtm3vDQE\nqIeRdBUJqxavjeo9BLdwhAiPVIh3g390fRpMI4l5XpN9Ovd8hAJ4/FvFtt/N\nNcCOzdHBWKVdyVVA8V4k48GnBudlWol+p2iT8pbiu+9v+KIivISWwM0kAOlF\nvhjGIThGBxzrQzgC3Ec5sWIKii9RCOT9MqE8Qnx4stJ2LGX/pZfoqYD7HYBk\nXpan8m/el8Icq6uRabgNoPoINeO5cYggHBVJ1cJy/qwFgN70RZpyovA7tyZx\nyG1jrUQix6F0jSEFDptl7/1jV8y0ZagRKY5+IZoPIZciYhoEZAjj0mwL6ne8\nmh6YHT4I9ayJNrBfmBbJMnWIWCgvpbF8HG5Wu3nV2D9yWBl27kl3w20oltZ+\nO2zEo0ZcsLITgsQZ108IyaVFIVORepTged0KRhY9aolzur6axRVCdsaK9XB4\nw/6b\r\n=Goqq\r\n-----END PGP SIGNATURE-----\r\n"},"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":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.aca8e6c18.0_1578943880246_0.8453002393464026","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/typography","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2179115bc77fed3d1e83d2bbe2b1681a26b24bce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c38d84e21.0.tgz","fileCount":12,"integrity":"sha512-ZjSzPHtMCTNC3UzmcZNSSTuwwLo+uJYFYthnXK5jut27YuFxL6vf7278eRRH+gqmagrsJ+NX6J2YG5gIEu0HeA==","signatures":[{"sig":"MEUCIGWx9paL5w8bWC10cDSUNDUWGXBonXcW8M2k/EaKYRJZAiEAscJWyWDYLOGX9GgH/CfqdT/afu1Y30CJ56sQLujUMbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOt2CRA9TVsSAnZWagAANvAP/0Cp/CzvV8glxo1ZrmTC\njvFvSETU8cuW3+qonkq8f38cjQRlm13NF7b83s5wZ3fYN9Ff+MYhNaaY/AfT\nZ1S7v5IAE4pXqN/dxIN/XWh6GBm+FD8be+8S8Fz+YMAWwCX/QVSs6B/ChLkM\nrC9cdLCK9Vozgt3gLPPp2WCmlxOaY1aDkhbTVbZMls24hsQmg5o32E6Hz8f3\ni7JKmwOcGgdBRMFK3Y93sNIPLkoCgk5JWcqCgGdAFMVU8AKDamXHi70F5ynV\nPab6tb1c4IqSeuDIqj7/eYJyeq9YZpNm7qSyOnWHC/hLbiELd5ao7oH0mfFj\nF24GjIwmduPhGAyH+2J0CfX90T2eIdQ3Fl8mxTbEbUqJ2yeftmrHZaDby27c\n7Dwmxexv37leR6VfSF6cIirF0XeXNdGFLPdnfqt7Tb9pll+WC4RN9NbPqL7L\nROMJgKoV/tvWCJwvDvd3ikWLhwtig5r8JboCuRNn6s/XLBTFbjCqt7N7kuPq\nAk2Ucy+JNAjeAOW9wVFfYpsaz9MrCB+Sb/KdyXFRy/R01AT23flj2T2nChD1\nlnxqNyzOKrmyD1YrYqwbsNECT/z9jK+jz4yJ4AHYxIxoKLX6b2M/RCkbY32U\nIEeVGnlbMzjyQMe93HkkTqDyZMLWzHVxvxjZTWvhIf2FACXZG5xzrBe35x23\nVDaz\r\n=NBzM\r\n-----END PGP SIGNATURE-----\r\n"},"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":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c38d84e21.0_1578953590478_0.357103480770284","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/typography","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"758a0754f21c24a855e4479bf38bdd1c25380a39","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a4db5fbad.0.tgz","fileCount":12,"integrity":"sha512-JqHekuZpVjTPjkcblHQytlAuDLZXs8LgbacNfLJmxtM0xqPeeXaYrv7pNZncghX+Bvoaqt8+jPzLbCTTajVozQ==","signatures":[{"sig":"MEUCIQCZGByaFEQVE8g+pyZOsFAyek2IBiFVUHOWrBS0BXtzgwIgQPXw7oBear4gWVBKmyfwnAHfrRPE+GacyZnNSOGdOLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQrCRA9TVsSAnZWagAA1mYP/3wmzdbih/h2akCa7uBA\nnHSdYHgJ6KpN0Tk+UtMs6HEmdbzkxFfLqIcHWfpCfgCR0XicVWiqYfNdiU0X\nSF1L/z3va/otPhIg92S59uIAmIbXfnS9XNDxS6dCl3Iz5wr+MwRC+kuzFjYv\npxmYVR9duLmxIq2lbILIjwjJMiOZvf6d3OsReFoz41nwxtEhGhK/xyLJZJxe\niW0PESAB7DQJ/1plz3QQS0llznHa5hAtf6XUBwNcJscEHhBumHf+mxDRdOVB\nsomYyiEVeiOMYq0nxOob/GJZey9Z46+aqgTnA1X5BfZubVDiJEgqIA7tghu2\na0R0B4qcpdAOzA4W4xD/ZoaNpi1IhEUANrAhw3KP8iQraFpCR9n3vRAdKKtZ\npWn6VbEjv1rbtIQgEQtbC2UGl/ss+0nHze93f0mQkX9g1YqX9Po7WxROv9FU\nFwixfVl/Lw5paNPDUhuizoW0iqXQnrwhONiDBkHWJnq6SKR1ZJxsME6sGtHR\nefz+dH+EB1v0v0QuDWV/VkBkTzp2uvkfPTa1Vr3cJbTeV40W9xVDnZGgD1ei\n4hUuona5EOayZSlx1HmZN2+lHuLpkmYSObTdHENyZUE2HRqBb2pgB0ITqzX5\nKiazqSDK7i3i2/33tp7pnVww1yTLwpuXDMr9IZpfjss+dDaA3i8Z9I6uXHcC\nHB0T\r\n=a/mM\r\n-----END PGP SIGNATURE-----\r\n"},"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":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a4db5fbad.0_1578968106916_0.8840654384337998","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/typography","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.faa9af310.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77209f7205c44e44a9ff3b3519eafe2fd4ec887f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.faa9af310.0.tgz","fileCount":16,"integrity":"sha512-tmEXLsNQJd0Di3Rwge/t2B4tGz7AluFnwkiwYI8rMf9XbXzLnN551tqwZyh7VAYYOjVzop4YTicerr8lCjMpUQ==","signatures":[{"sig":"MEQCID+Zlj5Rnpg+jWUZxLvBA/VolQEPO4XxpqGCWTz1VRJpAiAhU7gofdzidrPwptOFxTwqUqR6ZYMznIgSpB13z/o3gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHICRA9TVsSAnZWagAAoRIP+gLLDy3zkKHTtWw91JZB\nL2ZAvp8VOBxdhQuWp6gWy//TiinAcObH6S/OwdCu4O9HPLqzyHzzHk7a4a64\niAbdZZFuldme16+u+Or1uvB6EwiU1UvAXLsmx5e9O8n7FEocE1E3oakQL0tg\n8wTOMZioDbeyd1hIbNwQyiRGQxsm2r3oTOMWKOh02kjkCfO+hQHInn9ChCJY\ngvQSWISlhd/1r5m5zSCc/P8lmE5GFEvZj/JPk6tZf8ZWlBT6zKLK9eGq6Lws\niYgrR9D2+jMwCjSk9/4Fo/QH9+EvyIce2vEFS/ikJsRt5Ky6hYn8o49ETpEh\nq9G0g/DaKfw9uRMSY2Lp1q6utF5s/Ej2jgtmP0OEcHdyDwIxmW2eNg0MIUpD\nmSNw9VIxWltZddOp/sfK1aBOsjiiUrM7ZzTSQOtPiFqYCDGoJIHU+Gu6HtUP\naWw8ooztuXCo+Z6BliIh/WJW5u40NJ1q3AHdAOK7o+ap03g0P31cU1u1z85y\nSDOOJ4LICGGo7tTtIwbuuQbvmrWYZkuWUdMR31LfhQQ7Q1O/PO4UeTSIFo9h\n8bZ77XXtHiUW/Fx/J4dtdgiNomWqUnnC7xYg27zcuiRfsuJcnVypL9V9AOal\nnxq2pM0TtKdvbbhDdLNW8zNrYR+t3dQW631IQ62dGdRnvSZreISgCcSsfCUc\njuFY\r\n=+xPo\r\n-----END PGP SIGNATURE-----\r\n"},"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":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.faa9af310.0_1579020743855_0.7268806769738942","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/typography","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.60354c577.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"026d06905c6bf2abcfce27b76b3ddf4f388f59d6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.60354c577.0.tgz","fileCount":16,"integrity":"sha512-YUeD9OapGA4j7svhFLCoTSS7DJMnscHn8SKEkG3lnuioRnkTD/t/2pk2ub2Qt1q4Y4E8iWR8Qy2cFkMGMpJKmQ==","signatures":[{"sig":"MEUCIEhC43KhxWAM8GiJqLCtv+RDxKAd3lbmSD7aJYsXK7vuAiEAx8Yjep1U6rVN/T/136hz3yDQ5T22bTEmyjG6GyYKQP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSVCRA9TVsSAnZWagAA8q0P/1Sb0ZgyviroVnRRqtH8\nvBMCRr2KegKh5xDWzxuMb+BGamolvumsMBb0mKSZ6y5vs9tG20yStDq0ltMw\ndMOpnywk6gg7LRC7gH5DTtjPiX+xKO0w8mALGTS9DyiPFaHHXEs59DiiZ33S\nVK5wCQDZc/QzPSLGOoO3YmO2H17K0aKHKGmCVcljx2ey2z68W1XrCpg7O5Ah\nTyLcdGsXmOsJAFjFevck14F8E7RygQ6yCGXoXia6Re0X61+Y3hvOVQMi4Smb\nuLdkkIsF1fq8wdd2/B4YRaqWO6uvUT80o9zbJKemEz5CATbZSzXnYekit8lY\naR5eMqN6FRP5zrYyFVJgjYvPTenqRTvaPhEoyZh0pVa6/LftAJAYJE+IOh2U\n5mr/2/vcWw9N6RMn1Jx6ziT9zboaVZzN8gmG7x4DUtdsDRNjYr3XRSfgIl+m\nuQi2A/eIayVz3n5DnoptXvtTjZ2aJcGofpCgRHZdKC+I+FNU8E9iQgUgp/jx\nE0P7FSahsyZDx6zGwChDluvSsdaRvi7G3H7Jq5nVVHqLrTQXHC8d/EOizyXm\nwR2uk34qAJoumQ9GDXLXtXdRvgpITCda9wdXi6CnNpaLzuKw+uhQtv4J80YO\nzAN/XovXXkW0CzO2kqe5SJsXhIvf0gmpo96hD0BzG1z7ldRE7hYUQFQR2z4N\nFzLO\r\n=UYDX\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.60354c577.0_1579041940756_0.8188040713683644","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/typography","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea21c30580b60302e2744d0e2e3b3965f7e48a70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d07c78daa.0.tgz","fileCount":16,"integrity":"sha512-W9Rsd+j6l6znX+7cXBW3pvCuViEgM2RP/jeUxvz5sZRmNVgwZaqVnCpZeUa974WN8AMxu/WhO36oD9E4jQ3Iuw==","signatures":[{"sig":"MEQCIFEPwXMHy+Ru7tUS6H6mJ4J/doj4dC1XOn0PcYUXhrllAiANn43RW0bb1afHCbNkiZrZ+FVlZ5g1DgfsUb6z3kMGhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlDoCRA9TVsSAnZWagAAJ5cP/2RsRO1GwHjT/p0/FzLA\nWQQnfe5fE7jO7JoK09m9o1bRMjCVSrGCav3u3cvPFD351PyAEn4aZpA1bTQd\nxHVcZtqYloTjYnekjJMV81tM1uOWBdFmRU/SmCTryUqVuO9cTaPUdVTK8M9U\nCm7L3lHdQw0sP8dJsifvLW/VMQE0+PDOPncGFKN3YbiblkqM6T+2Ic8+LWN2\nf77+krNf+KqRF5ZZ7UYA7uwTUHwefF6aGvqMEGFrhAnFX0Hg8vEpMKEpNsQt\n+aqBxIeJ3QyGQbry8hcmXS2C+EARsg4lH493W/SEhYS/0lpO5+S2rLjJlhZZ\nRc8V77VhOh+JerPen7KMYZhlYWV8EwFIiALEYZyIRGrzFLzPgekwkJco9DZ3\nMZO2cCbyq/UZP7AWu0UFmNZKleYVXKMC6eZBh5yS8Z6/ny9ScQCeh9qeqs/Q\nkIq+ISEb+NObATh0KnPuX+zR9943xv8SXDMKGmcIlyH0RiG06sqs8eePno08\ngUzI7pxJrHSasi33PuA2XsiwC5lwtJ9089ITt4lBjW1HEh4KeUEH9DjNOzoA\ndfjdN8QqgYn/RN1MZuBlFPqeGkl4YeUDL1gfXqsnOMTd0r64I02I4wsCZ8cn\neS+Tw9M0YAJ1M6sRJ7etgKDxhU1EkfGLcHqmmaES5u4pxPrxPZIX3LwBnxdk\n0KEL\r\n=bXWE\r\n-----END PGP SIGNATURE-----\r\n"},"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":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d07c78daa.0_1579045095692_0.6838954484873814","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/typography","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17e30075d67e2b2eaf03e4c151f762c8edd218b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":16,"integrity":"sha512-kDC6bCrR+0usOS0kkqqDEAlflu6erxb+8wbuGxHPr7mqKboenaQPEsUqMSe/5N1WRqjH3aVJDfeh442VwMdIpw==","signatures":[{"sig":"MEYCIQDued3RKcvogZ3DSN+I6lG2olQaK4PdNcpmiy1pvfBXngIhAMoKmFG7+HQ+/ncIpm635/HDUsDUfZmqqk8vr+qENgr4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4XCRA9TVsSAnZWagAAXLQP/ReJ/wF62I6uq7JOQC5A\nL6jTFeyr1Z4w1niQHfFiy7Ov6/agrmiSdvGuHzOLvr+A5XkZtIo75csss56B\nxUdKf/YO7MZcBphLvsvRLY0iDzr/YuVAhCHHyWL4c5E7JnZd2UUoHCeLGVE/\ni6P82IPalm74FBQ9n99ax6Pnf2FUVy8L3lbbRvLAlMSibZxUu27Lx86KD+qu\nq+y7voXastucj6/v0PW341/dezRSq+azWp7g68xwggyMxHKZI9eDaVyM4zij\nvJvM0REx59GufW59U/i5p00ihKeaa9ODYF1+rguYVSh4HYW+qqSjBYATMyBe\n+z6ta3/9if8o4HKTpe91lsmZg5sO74Ye+1daqQ+DQ7uUCkyjFHDJl02pRySY\nWchk3iTAfh+BUQ/XsI4smkXoLw2oeo1VctiENq2RLhmgTJOPm8EPIfbWhCZG\ncg5NfOEIyDSuIoPggIl6CkS+++hIo9a1SbqhDR4Hy0upnMB3hHbS0XAxIdiy\nSwgI7M1CFU3fenM3ffgpDWxSwXE/MAU9Y0vcz49ErvA+JOYiz171KqYfZaqY\ne13aAz4Mz65J9c7VZIRD/zEJrpqKs/b/oehUDyai5HOYHIUyr8HXnUR7H7gC\n3L4XrLzn2C6wJNLP4Z+0WJ+HVh6817ecVaF2tgCZY2PjiP340uc/2WBB5bt5\nOnNa\r\n=LT9z\r\n-----END PGP SIGNATURE-----\r\n"},"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":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.8ddd5c6dc.0_1579052567260_0.6541774663876152","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/typography","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a9511d870.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c13d3f19bfc4a79300c83a3b0ff6160aa67ab13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a9511d870.0.tgz","fileCount":16,"integrity":"sha512-tFdPb9GbP9XhilHEaF0ZtwXCU0j52nJbhaHRGdpAx3MyXIk6zbcQHHUifroRZk9Rkk/T+IvtXCd/W0eFJQAxEg==","signatures":[{"sig":"MEQCIGt02o4foMmiJ6vSFCJy9XykLRPb33rJFIhEGjoi69wJAiAnSzKO9Ya+mSnKAZaR/zdZfm5nfUL/m6ZqTdccG3mq/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OHCRA9TVsSAnZWagAATtYP/RgMBrwqOaLedufMrzdE\nAESrC2obcBCJGu33wgSQ1toqjo3KjLCikDbqM/1NxpPgiUCrcs/jngPdKh5V\nYnONp0gubiWbtg+kzTvLlxmk9zUOAHXC+to28EGiBsV2wxabV2cCz98kQnaQ\n07VUND1BjlN5RDEdK2cWwQzHlf4rI8/RgKsTscLCRsbX8oQjaIfMeHP6wTmO\nHDpFH3Q3uqVBY8yInf/15K7H9npryFM0vDZZ0kPeUEl6+jwz2XJ4BIae4ClH\ncJ7gOlQq87lEJdsrWMY1SDuYU3HLVbtqqv1IX+U8VAHNUkQRD8HPQvtA+o+r\nLU3QztwFnJj3u3ubNT21U8cV901g6Wcb1MnVlYlD7xzKKO0KATz6bmrZllPQ\nX4a/XuLP8UPbAhk26V5ZIRfMYvO5CIgBxJ2iljRPTHvLdUqndzDayXFSgg75\nLkguXpPiZANbG7HVRxiQ5jfixQN0C+u0jIrYGg1PHKMJqLL9tHZacd0lRudt\n6pE+0A5hTNZikqcMTAufZhFlOlrMcENHr/2Jb2BARXgxTMA/XPGutvFkSs+N\nXZEMWcYPX85KcaCS4EpxbVN9rOB+zP5/DE3HJeJp2BDNQIff1R6YzjR919w5\n7LKILiPeGGpppOP+w0GNK3W3eDk5puc8r0wD3DQHHW4FF4IPht/HXlU4EDT5\n1BFD\r\n=un5B\r\n-----END PGP SIGNATURE-----\r\n"},"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":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a9511d870.0_1579115398940_0.7689099404376294","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/typography","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb87252a77c6d464e2d4d82531f56628a48a929b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7c8583c4c.0.tgz","fileCount":16,"integrity":"sha512-0rQY6tmM+VzTH+M2CubH54RGH3WlBp2Ia7WiYpYfFhKAkDllGz5GZzRnH/AfE5qWnP1g1J4N2s5P9O6/w1vsQQ==","signatures":[{"sig":"MEYCIQCaJQxeFIQlE1E/NdqJLfMTYt+hANtFh+f4GTNRrPPB9AIhAKivEwfepJeFW/r/yFRThpg6Mm2SjbaGVwfLvaVCekl7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5ZuCRA9TVsSAnZWagAAsK0P/36FOSVTFngq+zLFS1jF\nNhYjV/sn3c+3X62c7vZZz6mGGeEDFGBEqRj4xcez2gXcCSdb2RDYwYHK2aTy\nCDWBRDL2lR3BqG8TaeKxUVQc+jkGYqW5ryLFQ9cEkNmOKQPxxC6KBwDoVA/t\nymgYqrOC1kkApjs5ewDDZqbmncVBpnl4org+0JZq8Ghla2aa2kXxP1i8BvUk\nkZyojLusfyTiX5nVgNR9MB1o6w38yDI0GwVisEOFGKX1zQD5tvNzJZxggTBS\ntHlKL6a+osKP2kaK+KJgPH1h2L6znkvCoz7FcX0Rn9dsnDDiKe09FEZfyXZ1\nU5vtzht0mowt2S6OwxOJdaeFO+sjUpdPSI3QV16+PPtWTxHA4h2qDq2uRKGK\nmYw6MtK2L+j2Oyf2OZ6btv8pq6mdWYQPMhLAcYpPHk6WzOSaqxTM6RtJYh+7\nE/HoENbHncKiY9rNOellbXtkjYAiAaT91SMKxconZKg4FG9O7qOh3x6r/VIT\nmPGtUB//goRAoB3i/0E28kS9wPBpd4RtO0lXYnzoJ1rBW4/8WF6yWHGcH7UG\nmPij1+DBq30K7DkZdlFUpAEZSf4JiKWw9JbS/NxLjYF0x/1YYIoWp8JBCMgG\nncrry9aQUTDWfP+UtTRN2Syl1HTrCM0k7MF2goG1SUp7ceKQfvyE4dyg8nn2\ngqKy\r\n=QDMJ\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7c8583c4c.0_1579128429771_0.7441133254863614","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/typography","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1e4539a513a161be9163475e176b42d35dfaaf5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5d4b82bac.0.tgz","fileCount":16,"integrity":"sha512-5tfkxRETi9b6RhEDXlaigTaZGPMn3WhhpsbgA2/uExE54/no2HRcQHAhFKVEuhCiaxVMjS/e6DmkYGM0xz1R6Q==","signatures":[{"sig":"MEYCIQCEcpFdxhE0bX3eG7HGJJ9MDw2wpl3zYWDRjyVwK8wCpgIhAOInSuMFr0UXb14p2G7AXKWoG8g5bcpcVz/gv4++gShJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5Z/CRA9TVsSAnZWagAAVPMP/itT//SGyCdx327OTSIp\ncsfDN2AU0RrgwRq/vgFiOAD3zT3BPKidZfD0BWeYDdnXnTF++HlVWos7xGpj\nDwO0U+0ObUSyyG4nRfDI4o0lA8qjEIj4qQJi+WHtXhYY6tkIoWVPQwYC1NQ1\nc2tUOmvYNCx4B6k1YAjjp9Xt/uPYrIztfOxalendZMjQexHPjZApHURShShM\n7Fa2N5577YgbFRPswTw7lrvA/cMm4aWFXHh8FBO7mAu3NbD6jQP5C1KJRE8j\niyA12ZfLIsLmCfAa2lWxuBYnabMZWvG89TdlUO56jicX7QIkcPwkqxpCe3Je\nNdX+2qMClPyKLF8Izkmn9dEU+rNfmAzELZ9sP9LvZGP1HCp3860AHtF/eEf6\n3Ghxn4x9pyWuplJqbRPEvHgwCpHs5W2sf+KNzqtavlDCXZrEZU01uBDVLt76\n2K/ld/FP8m4v1HbqgPcoQxvUdsqT2g8oTuGNAqeCHqZlVt9tkg6l4pb0e5GC\n3EJarMC0HvV0u5jOdWdonQCKJp4GkujyX2cdsZIb9p6GfNlDm02iAl5OMzuG\nOUdKL/6agshBZvyk5v4+grbOrGJ79siv6uJe1lplRCOSYP+oYO1i9K16A9Cs\nOxnVcgx+IjHUfLCPUwSFKBLu35pCTqG1wUEv9JwAwdqhV5P1xjJGoaLLu10b\nx6Rb\r\n=R/vA\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5d4b82bac.0_1579128447506_0.9450005438123319","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/typography","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e9f646f5d4b17c77a6b2c8b40975a97bbb5f98","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.57d0186e4.0.tgz","fileCount":16,"integrity":"sha512-UPyHs1yEm+i98LxmPx9y7Tdusas0NF1tDTNvBQGTOjWQnbKYgY1sHeXxWyvEThIc9N9EwG7WE5oy7LHgay8GTw==","signatures":[{"sig":"MEQCIHuZNCZdX0NWjsbIkK/Jctupwm54WfR0Oadh672g9hc8AiBaSTebOSk0kXrbDIqGxhV4sIrEyozKefTGiJZRXA/ELg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKigCRA9TVsSAnZWagAA5qcQAJ3IjZcbbX8TNTDfLPKY\n8386i2TemA+B6EU8IMD2Y77AGO2o3ZUhsfPPTjP6WNtnljMkKIkFZaqLR77Q\n3zEI+jjODak7n9DsrZ1Sw8EreMaJwLCpH+ZdLhY5u2n1MHs2zluJbLPhbmY4\nBKpI1x2nAg4EbpPZu+ud/BePgSU+KlbSAbu7KhS6t33GZjGTYp5vqK2M8Me6\nHipGVou6fjidOgQYEbyBqgILCAS1mtDxir89gZ11ghmIbOLPyC6WNMpvuwpe\n4h4CijXN5U/lJNebTMG+Z9l9LFPHA3poQ8nNPYTWVPiyvYGTIwz6i+AWiNRM\nR06HoDvuaLtOgLIUxqoeWl7VLKBqxRGXnGbs5d+YFvnfWaiybKLY5CtEe/ZF\nR0TmMtEW6riVQF1yhIoQlurcTwYHiPqLCUMkPGHLvH1byuU+lCVLA9tP0nwg\nyjRw4VGGygGLAySdGzsc252R/5u8Ui2RjXGgRmCxu/i0/5fdGvRHre3GlYGT\nO763yyXv1W2vEReYjYB2XaHV+M6NVWSUvC70up7Ez3okpOieYY7g9EhAWbVk\nYAiFMdA9hYJm0WkvI27DFIBQJD6hfiXYLwzJW7CfrWmUX2HbsdmtFpTuY+SC\nHlbUv12nxtkUNJeY7HFsceKvxyKETzr4R9VXdSmnL89VSQzShnPQdbTz4Px2\ngEtf\r\n=ELyd\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.57d0186e4.0_1579198623832_0.9644313426046343","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/typography","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"188fae19988fad4a64c3ac5cd869ac6819d237bc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.071a6ab70.0.tgz","fileCount":16,"integrity":"sha512-H5tmtYNLcz5haoV6noOw66oJZukIWRFJHpx7Dov8Pd8kNiwdk/HplqFiHkWlXz1pI87UbO7gyDscYrYAXEg25A==","signatures":[{"sig":"MEQCIGJ1YqR6W2Isbx9PfXXJhyTTgWR/MRUW7xKMseEe5cxtAiBstuEVRa9qn6FzXAOA21LBFZLNMwGPfEQkxPpTDi68XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKomCRA9TVsSAnZWagAAU6EP/0jDB9bKNc0w1JXLuhqU\naOjFeTtdeEWq7Yr0u5Y/W9oCpFW9xEeC3MEw8NiM420THMl6y0A7SRZ61vjB\n/T+bl6Lf+Ye4wGryfDOcuJQAynUC85CUiiwrb+aJ5tpeEEo85f9fucGckif7\nzFQpqebS6hGYTrE7HrF+N5gm+nE/eLomLZ+iAUVkFRJjQNIQzIt4io77oZeQ\nb49EBxaiKKfSUO6QwU8bMkyCIDJ/1VK5WiAjPEEZ+TEfj9ZcQWaAa+gMf8JU\nVVsR2n8W2kyzAhqRGhovC7s+KQI9JXFjlysd8bkhn77qa1vRvhHhQsn9R/L2\nx+vrLlg/VZMBwTcXyQf+fvJNWyz+34w42HdaTK2NoqUAyoFOF2E7OfZz6NT3\n8dwQGjhQT0+9qGIl1U3wDNmQsYaIwcY54xhlenrqUru91ZjMX/St4AqSmEkk\nMf9asMNPUJfQ7wO6qczuwDq+ww1HbFHtWPy1AZUHNHFS2YSq7kBfnWq6mGvK\n7TyMD/GBwYdw7iFPrl9zd10MsjEIzwVBbQurY9RH21JN21SXT+ZHrqIeC/LQ\ngA81js6HSbevJUAcZUqyMmPkHqheqags9euRS3OV7cXwY8M/3LfQp82PnU7D\nHzQmir3Ve3nvVaOC+Yko6ElRK4I9Pv/zODITpprrtX4bk9HtX3zTuiSkPJ2h\nEnql\r\n=1xVI\r\n-----END PGP SIGNATURE-----\r\n"},"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":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.071a6ab70.0_1579199014289_0.28775105185859484","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/typography","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83aada7654ae243bf2a621045c49ffb426f6b073","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.22e0cb618.0.tgz","fileCount":16,"integrity":"sha512-i/rmmLYRH5dwGtb0SL/+/+CWiLgmZZs8yy4p+47NxVhpDZlGjIN0vSv973DqINE7uKqziTdeQSASmUd7AqLnzg==","signatures":[{"sig":"MEUCIQC7Y0PYi1ICzPGUzpZcrS+JdczLuKK6H3nmFnj9/tTvpAIgJJD1qrwnijSk19FjWqReD6pz43XyCleIxKtXUSAJMKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+UCRA9TVsSAnZWagAAQxQP/Rv5HVxxlLrWrDiiCgFS\n5wBPkA10w0dVPv9dMaZY9STAXpcmVQ6HuoLMklJ+QNXRjPTcOljMzSJmkLbs\n+VBXWyrY+xb406Pu5cBMxxWd6ZVA8mNs0/Aa/C+PQ4LjOBUWHNGCCknvhF/h\nGgvrsU/NXwLdNkGwbDdAsSuRPavVrj9ujp+fJdFKn3ZpnUX57IBYZhhWkG5/\nRJK5ADM7R6IAjukAWBvc/37Coi1tslXLeSeIV2dwbqhi8MC3bzykSmNlMQ41\nWzdln30TVsTBEIL9KB6Vyvjdo8qIMVzQqz6nlTkrQA+masaHkTOQPMrY0U0s\nBsqvuAOALKL3xZ0MIzzCBtAVgcuOdya5PDnUNMYemt18OYPcCtVg+LNXYwrq\nBRjr5GNGOVP0qIjfS2Slvmn4/pvzGmv2YVfPBh1G5rKh0sMedrzvo/KqYhNU\nO5Z7PwSqn2jPgpjPj1bSTJpdM7HdrbwN5joqFT3XtiQceIOF8c18fKpsLz1g\nk7fCVGgSRkc0kJw3kqmkFHEeZjPgTaRw+mY2TgOHnRHDlsysLK1skwROvWut\nGCgm3puxoNbDsAjrPgTSgqws2hwpqVF6eQLxM/j59lMfgHUMbImJKPbCEeOC\nPuW4nyCtZP960PL7KZpgYe6FzpAKtiYAfhF3a7RKIq31ywRU49vdYJCAgXWc\nyPmg\r\n=K3LV\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.22e0cb618.0_1579200403571_0.7994022107908889","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/typography","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2254fb525ea7cc36cedb7afcd13093577deffec7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.f16f15b8f.0.tgz","fileCount":16,"integrity":"sha512-eRQDCCsdD3vwxmTJCygnd+9iE8quZAl/tB08BnBgW1u0AUd4wGalDRd/Ii+UmwRU975MMWBEp4e/qafSyzr4xQ==","signatures":[{"sig":"MEUCIQCl2/+CejrWyVBtzsArQwl5dFwspXs3cJ+LcuiDBs4czwIgPjSk+4SHuIgClx1gnpaKILhPVjzdwWtJXAM9a9kVkTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqNCRA9TVsSAnZWagAAWKAP/A9wm1ln44hr+QxAs+Mx\nGQ/t4H3X/fUeIhMKQ5Iwiva/zANx/kOx5Ybh0kezeUIoNDo/xJ9ufEe7bjUa\nvOdRmVPloEL7tdu5kL9lQV6rOoAnvJz7qDpCLnG4KZJN1U2+VDRocWulLevD\no7ZWhk9Zt++O25fN2bFnnYy/1OvT3mSuIQY7wf8Es3A3ruhYwE2EkfMW2+7W\nXkEVfsKWXtfUgYcXE3Ow5g7mMBBzx4RTTOvByYHDPHiCuvc1Zfvy2tjYqQL/\nlRJq06m+YW4iVMS9UWi3Z9dxpOfsFtTqM/QAR/6b0sXojC0iRCkFqQ79oEa3\nfPnfH9rrERsj6PB7gR+Vn8NNqugLsPw9LBPFh+OWu7xvDag5dz6ypuHcA5wa\nW+ZDJA4rArk7xRU6yZteQv6ksfBmKka07HWb8pa2z8siaDxqtnmDdvHDIit3\n6lqB4UGrEVCw3PifnNjMX2TqZXx6Bo4mAVzwNz66SFu7Jmomk9VAFjlXfEuF\n5UgCRxYITgr74bOD8liNTTwNIv5q/64MCValbcqQfBQaik+bcMdHwpZmgerY\nDqOG+VxAiI1zBfWiP84CJu3kqKiP743XfGz/WNB3BVE7xwUOqisZJy0sA9s6\nKryTs9fOP0wBVX5TNmQgZj2IsTGqCiJmceuOrsqhbHY9SK8xcORVZ9eHMU5E\nEwLP\r\n=ykms\r\n-----END PGP SIGNATURE-----\r\n"},"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":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.f16f15b8f.0_1579219597211_0.6489079367084076","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/typography","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1184d6ebeb2ac22b15d7ae3c21b7ab412773a4c3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":16,"integrity":"sha512-GvKHgQEewsJkRzYn9l5iaXUDmxYCwiYN71Roi1+khf2zERb369zW9ON4TXCNOglCXdaFH/YqpLRjdKtmfwkfOA==","signatures":[{"sig":"MEYCIQCCuP6OWaZvBVzGCSsd48oXQ4HgSLf0zO7MRdE1F6ImvQIhAMDWwgst3xKS5wS3ybcEGDOAyRWXCYtTjJx9I4L3u6jw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGJCRA9TVsSAnZWagAAe9sQAIfl8sWyNL2In8yPhfig\nDfam0E/gcZq7AD11kle3fCiz1kzSnmQQXeuQPzeUiFvgbeHYxFP4tMUgU6eZ\n10gPLxgnpuKOZPUgQ2vEo1PPt8HkVHd9aIeo63mvMkwk/V3nNxmS1N8hWayM\nK20IPZeiKEetnszL8mqf5zts0MT2aw4QZ9lRrUhixi2NSj2SPDNgAF8uy4k/\n49CvcPbBeytLE7+NurDyNaY946R8qbsf3iuR4EmjRqSMV2bjdKtGTOPEqR7x\nPUbx4rQyJsEBnyFr4c3dFz0kOUbKnGIK7imPqx3YPsEdNg2vVTAD7adyn1Me\naknDACyIg/djJkOo7bxwzbEeHvHpNmaIWjGAiP9Y8LOaeDpHHu2eY+efv9xW\nRimd4RoBtucO3KkrgrPxH7RsK5esH1U/xoz7mIOfka0i0I3sCmd7tSk7MixC\nOPCVp0tqQyedh6hKpuFTtQYz8di3vCyY9HKenDjgxfQTjW9Z81w93pUZVkxC\nwAROC3pyy6LQVKrs3Yyj9ji7m7zRmtmrUoj+5Bwu2mmcfyjDPv6F0lkixP5P\nC7D+Rz43Th8xtwwRwMPjScYGAIyl+ae4BhYyzwP9p3t5d6qxRL3DqDacEJ9E\nsxKs8GawkMkKRqyIpiXioH5zWDS5zmfaJ9VR61FnDpQG63dtCnx3HHmhYXEu\nrjmi\r\n=djTu\r\n-----END PGP SIGNATURE-----\r\n"},"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":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.aa8e43e9a.0_1579221384889_0.12031599653163427","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/typography","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f5a0b40dc1d9faa64d914b251b88a2b385a3b36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":16,"integrity":"sha512-4hq37+iOd7JTQvLCbky/lEv5n/rQDcmX58vDQ0xYUya7aPPQuzuPscTcsjXvQv40wKV01nAYdasIyMxy/F8wag==","signatures":[{"sig":"MEYCIQDPeMajiOik64LuMJZ02oSZLh17iw2R6k+2Cr/ahUfpqAIhAOq5fDxj1KlngQH1/KcNQOud+Ye9+Kdf3wJtwlEjM1Mb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcNCRA9TVsSAnZWagAAC9gP/iGI4bJpiCz9vj1psNb4\nqHqENSW0jtW2ddhvrkmz6UwaIXiM0THqcOVwp1G8Of0aomtQllzFFOsCaAmQ\nbbayS4umWCYSRPPV64KTVAdcB6fN3Fm9uWZnsPzAbV57p/duc/epYKnj0f5e\noXevfWjMCO+TdhwzUcF5y/DonnPwee2dGZ8Ro6swltHXqtjgtln2ce8oCm8Z\nMEncvaAqMLtCsmRoJHe66R/MSCt+/LNEnoOvOUuoqBeIMfkeMTANtKvpYcfg\nam8EjqQilQGyHvGtShi14p0zs/ZJIBSCRbdl1NTBeSM+JWzjH3iKhL0UGrvo\nD7HVwvF12aTLSgllLNh+Yb9+6ezfFv/3jpEcu7SpWH7Xt+vz0YFE2xCPgn/g\nD/ZajrMJde6v1w7uMEC8zVW+uHX3bm4eccu5hpWgOEnqEdGOdhxxb+nMpvFO\n1qCLQ1H4BsTlcGIdNH75/f3ETfXrUfqhU6fBwD4r0YuTHg69o31jUWgoy5PT\n+ck7NqZn8o4W6AxMThknTWq+znEAiXQSEglfyMBLaRLqn2aZ6+8FgJn/OeJ0\nt8LJOFjaa8/Jc31cuTeMlHQSI5Suu5UpeymmHHXkpTxv8gugCS5FK/vpUryh\n7ip9Lu2DDPccYNLJS/FvTa0YkjkFAg1YzUq0wewNB5InpaZLIfoT2ERNxYO0\nILYn\r\n=oJHa\r\n-----END PGP SIGNATURE-----\r\n"},"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":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.fe1f3ca07.0_1579222796920_0.5957210778878967","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/typography","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d405af26b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f63488fc5f7dcd5a9ead0788672a327c1b47ab5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d405af26b.0.tgz","fileCount":16,"integrity":"sha512-+ne1bbhS+knxRN9ilu0uNkTzUTAa1TWihUg2lLDjRmzoldKW+8gloSmutm0d2tzc9XqTwbYC1Uein9k/ZOcDCw==","signatures":[{"sig":"MEYCIQCk4Ub94ja6BU34QPs45NwVuAt/Non1if15hYbVkZNSdQIhAKOc6S2JFlNRR6fkdVdP9/6bWMWTjXuKkzCfI+ZUIT3x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfoaCRA9TVsSAnZWagAADsUP/Ruw0NgHermJmUMnP5PC\njzzxfESavcyKb1QU2OJe/XdoTbnsauXgef7nraJGtcSBTjuyRZr48Hd9X+or\num7Akrxf6l8N6UPC8ryX3jPKD3rlOWDyl0f+OJU9Eg/fGd8+fkUv30VoENot\ndZd8jSQJ30nVhjTP2NhRtpAVwZn5XO4/dcgymlG6OOQUFqk/I2E6OkX6RfUe\n4xPPihf3YLb3yr7NxQODRiiCGaIw1jzZKvMMSoj7WgUWHGpHz2CgBwi5DHC8\nTfeahI0Xx+YrVk2+YmeLx9VTyJhSqOmTYTqos9LPS4PBvgV0Xp+VWRDjlvEv\nYiOS4nHE8OG2QehfS7Rlsw4hi5uak7hn0CpmSgw1nXOC15DqgQWxqHN6eRut\n539YIo7ILvCYD8F52QeAGd8MpoCcXZxruoijH/lE0aLGmkzuZzkgjHfm7so6\n82UqBNaFkDC+ssk3C9NKWWl6TmiWa69bVBqhb92I7/hofh51jFHb9Kzy2Xsf\nQyoKH5yF7qT88cjWzotnYhFXUgFPp+dwr1ID+q/Rr/D0Gwk+4lhiXH1+8sn4\nPoa0nW9D7pb6JsvMD8scOmqpXwrGkRzSYk+EUMj6dNMS5Hy4aO9CIMMnr/3C\nKqhrjMNfQX+DX9wIE5sWeQDt/MNVE5TAVx9965bUBoMrtuqjW9fBuQmADL5S\nWdED\r\n=A/b3\r\n-----END PGP SIGNATURE-----\r\n"},"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":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d405af26b.0_1579285018175_0.7995448788529895","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/typography","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e26cf68751b55b55a216065a4db0098d6efbcd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.6e857aae2.0.tgz","fileCount":16,"integrity":"sha512-e8UrDxYi/hUHoOBLYzUEowvinGT0Cyf9PToprIDTsGdnAF337yIVYfcJsCeLLcpeIACdWxz/L8Vwv2ML6z7SSw==","signatures":[{"sig":"MEYCIQD8zsSNRw8h78urfC7niBCzqwz5n8PYt+fDLs9Ww49xPwIhAP+RB5mEllg87ZRZPZfD/leCkZ3KnHA1NTe6MlVPddGD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfrsCRA9TVsSAnZWagAAzwUP/1gLHbjkRovhPn8W0Kbj\n2mK39rIw40XES+7rLtMtPpxK7NJH6vjNc8A91JLotoeK0ZxAlBgn521ijelb\nceHqKnKr4EhxS42z1lwxKW5I1zoj5zmXvZnuBQ77yby4VTTX6ayWjYLPcsLM\nA8kLdicFjqiausAxGTHVhPAYoY/ds3rlbnNWUjnZS5whbPat5zy0lrEmyo61\nu1CLXGVuXRE0STjToiyCZDwsR7cm7+aL7ign5AYzATMaWu3A+CoJk/RJzt8L\nbnC2CR5SoSuwzUWRl1athNnTF3gadxa/EgeIlDK5BwuYfg/cZ+7QQLq4Hj44\n9ykZdt7/VVX6Q3dc11Ga751pApiV8845dBPiTs5j6h3olaeGDxxbs+JtYYlv\nm9+WAJn4lJjgvqKfyGU9e4kXpk2LanvGOkFLX6oJYjiBSoLQr/c6G93MpeQF\ne+1P2Z2AhoLX763icy6mldrnfhgnXZopQvT2TjEhXHEgBTDeocwW17dW1GfN\nzaODE4bLVbDbM4TmsSRUoKAlAbf2zqxyjycus9esPJ86qXLgFvLRWOlnCsYT\nLcnzZsiB7QmZQ938p1Sp6cVcbPCesAE77Zr+z3Zdp1PHMXRsPMSMKnPfU3Db\nritFGi0aiOmZMUCx2WE99N5Yad978OXVwiJd5BKzEZtILzXDgy9XfJFuTa45\n2XtC\r\n=o15x\r\n-----END PGP SIGNATURE-----\r\n"},"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":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.6e857aae2.0_1579285228514_0.4425952126780033","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/typography","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cd6763cb006febaffb3c83126d2d9c26e8cce00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.e2e764f7c.0.tgz","fileCount":16,"integrity":"sha512-at94VJWPFB++PsYuDNB13VlAN5BANPZuErGUxk5Ng2neHkZJv230oSMafQXkRtLMSlHKff6U6ARnbOvkUPokfw==","signatures":[{"sig":"MEYCIQC1/Jpl/gVHeaNtZLZ1IqxVWuInX9FCyzWfAmn9DOfIdAIhALEiKq7ROHkSKk87bnCi0LgyJDPTkYRjWZexEy8cGhpQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf58CRA9TVsSAnZWagAA5D0P/Rf4usOL8o5sF9hhk+zn\nYCU5XBcIBHdW3bYSDe9U4O2DU+GaDfwhd3wuLwDQJx49m0IlFXKGfEq8HnX1\nDWq00KSwBAN1F59IT3O46fiY8OK94ciBjNPg0hzwwZCCBQghDQwceUsAzngx\ng6kqZAOKncN3mn5l3qwfmsrN4Zy/dOkk4s9S7Wv+c2A3+ALV8Qpv59mEUgC4\nkbz+rFxBdAfghDszljHDs9s5yydcYFLm3LTH2w+239jED2xX9LDfi+xjOd1j\noV2456JQ5sTP63CzgTAK/AJARpqpDp5AzbIHMq5wkkROKAvZE9bq9dNWcMc1\nAVTZRiS+0oxTyhVLSYuusilrqobojQL9nsJ9k5OBhIDJLzJ4gauUJ2YYhUfN\nckeXRiCYsicCosHEFhOY19Z5WcwK6D2kDpC+f6hMHk1CL3qcDUpL7r8LoIap\nYF8GZUcEkMu4qouFis3Tr6jh76rHF+UBjtQ/qMOokSeqmp6j1JuNEnjDM8Ki\nT/WHLjW+0v7gzLoSxJmFEN0V3mEc4OXiYkJ6QYXc83XiI1jg+2YO7H9yGgXo\n7LTR+avmcYUcrehVdVrbF2PXXj+LnbazDNYWfpmOopPMaWMQTQb95U6MAkdT\negns5jrN/PgTyYg8eX43PH+NWYFN+b6C0qewxGR3mW7TlZWv2Ej72fD0RxbU\n3ZTI\r\n=E6Nm\r\n-----END PGP SIGNATURE-----\r\n"},"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":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.e2e764f7c.0_1579286140244_0.3054013020356512","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/typography","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171009f9a0c32f4b95a8a533d8faa19ae4a6684a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7ef986a87.0.tgz","fileCount":16,"integrity":"sha512-BgyJr5+FtBrakVGUK4aVLDVSXBQvy7+V4TKT05sKDlQbeMZPXH2CweycQjaFS5ZHh27xtczlyv+PTlXEK1B4Jw==","signatures":[{"sig":"MEYCIQDXJ6jLJIX7390zHOu7XFf69pwWd9ieHV/FuBVtu0i0bgIhAPOegk+IoL1AtrqrcYspT/N1hGJymorJwL0A1ETY8NzW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtUCRA9TVsSAnZWagAA+GwP/0n9cqpvTxXsRacGsIz7\nDNUZRBxv3eqp5umtJg7aL3Ra0pswH3qLIY8uo063fxvxzgOs6FrrSbPJBqxX\n4ftl04QDnQKj9SEQLUJ/0lUNxi4YDTrjBDU1hDATXnMzqN1TsDBmQ5/5lSlE\n+nsX3YB/l1U9/GdNFFRKq9wgAFXDTy0aQjZtxSOoo9SryaUxrpvoODUMt6fv\nWb+0ghJJGE2xs7dngmBG2p7lVhqQumDknAvWHpvFqHzUPQQARFB6ZqCKJ713\nPl/Hkz4gQazlSdK0nZuPnwMnyVl6iPY23+MmTmRGX1m9RTbNAe+qMV7NVqwS\n2KkK7DT1nBxiln6cJv6b582cHJZlO8bKFVC+qXbY5qEAvMHPwQZUwB98UnRh\nOIoYQJWBOtEmmIW40il3fPyGgSWnBT2LtMmyNW6iXLHSePs0LI0Wqej9EjJX\npwAwut23Fwf2anA6eppyD7wEgpHbAIGaegg5BUK6QS1pyNSTi1ILEhfH2mO/\nfwIqlrKv3bQ+Nboz8wG1q02UR2hzMhZe32tCWc5sWcaoPnlkCt2ZUbii+6bT\nMi/XXgpgwbayCUVT2ibkv+MeLcJggVQUA41TuBDp37lGeo8k/8YaWPs+iBdY\nJPN9HEwt2lYMgklinoo6N+UbfloQoMaK1CoV5cUr2CVzPi5DM3FWoV631xwP\nBvvT\r\n=8yHo\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7ef986a87.0_1579289428273_0.5377860502108496","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/typography","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39428b3b81d216e925a7e2e263cad1b8ea66a137","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.29402e2d4.0.tgz","fileCount":16,"integrity":"sha512-KbKrZj4Zewsvo5GlKKxuqlRsxRHF+fONSzDBLdBN15E8wolbY0K7b3GMCYPKYOD5B8P/cDqmOleyB3lxGwonZw==","signatures":[{"sig":"MEUCIEVoCfvFly+516DkPg72UzDhT0i40qO6Eh1A8OJnqD79AiEAkcg3E9g4ECW3EH3JBhu5dovWb+W9VdhMVo5nF+aC3TE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIht/CRA9TVsSAnZWagAALI4P/j/jiTUHZmfEytN+PMMR\ncM8j8bRWmRDz9cfaQGbImxIvRZEv7NElm+s+vHqDzsHNgI9saz/pnjHDo0Iw\nwi6v0jDvkf2eywrB9EBJvBhCCOjJ2Px6lG7h2j+TsTwwMHKJwrsVwssb8GCd\nHopxYQxvu+5JbNO1+SVewS0I/zxncFI9149rKHLTv6bFacdEFb20DxqUw+wh\nc8AAH1RHvHy+NxmWwA6aEM3az6y0dZ5OEZvDEyQF5Du1CQyJddqC/gCfdhI8\nQ6s694aXy9L6+5RHkvRBhgOALpImsT30iVumqzcpTLIxfp2knVppicL/avFt\nUup3IrcuFHkLKli77GuzpCrAw9b+PcBVYAeRi42dwgleWKb+6Izzs/obzPUC\n99fOxRNWX6QTbrpSFyv7omXaxMXTIRPYPej6FyzjkVvqM4i1k4XvCEIRPoyf\n4AlD8tD/r0h3g6pQuBEvSlg8OxKwxMi6bj+rwxViLV+eK8qFlObYpJkjc9hD\nBIZk175aMlOwg/QqQONPvWNHXFqFDbbVdQdgt5HdnKEIT87AM/vk8OHwPflu\nwsBuSM/gy0Kn26q/GOE3mbkFWUTdoAyGUDuZz1c3e6xleQsen20igK8+XpuW\nzwTnGExXjU4u4Dmi1gQ2hYX4LR5DRmHMUV6LfU3XYPIgd4hvsOhoWYW+Heig\nQKi/\r\n=Mj8g\r\n-----END PGP SIGNATURE-----\r\n"},"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":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.29402e2d4.0_1579293566864_0.34883414248764044","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/typography","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9488b40ac500b17b3aaea68a32716390d2effaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.2b3ec563c.0.tgz","fileCount":16,"integrity":"sha512-dSOgV+1FKrEI2q0ar/+rRyLGYwHK43oLOkQLAuONUgB9/vaATVAjP1YupFuTZl00w4W8Pui/NPfzSGtAIHQGlg==","signatures":[{"sig":"MEUCIQCFf+EBX2LEY9qEzFZDd6qjwB2lbtitxuojP7sb8VK8QQIgG1PGsBBYUxnuonSVef9tRtCS4Z4ORl5jzBxJ8Yp/oxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8OCRA9TVsSAnZWagAAIDoQAKSa9eYIqhY9hb54ytV/\n8e9WJJ+wSfqvMFc23rQ1cyjzyyb162iEv+wFzRPRMREaxcdcjYaamJJcq31i\nCJ4vkAtiFswXXjYs4FGiPvfqSJKf3Qsj/D4vrNi607+/6Llk4CCeIIVpyhwf\nROICdaIwhOc72+sdJRC7RUQZHMM9XlOJN4JdA2NLzi4wbIuXU356zp8TwoUi\nhTkolZ0prrbGnwjyF8jxQBkPcPyx8/DiD/f6uuBOF3TMoq08NP95j4v2+3yK\n9xRpjyty78UrDOOYtZ1qPYVu95xtUbb3FPR7Ii3GXptjESkAPBTcMV0PoSeN\ntrDK1EUQViPSH0m5PJFD5JmOozmqSidzGFS36aMplSNvy1nOJer8QCs/dmAm\nuUuAsA3OwTW+K7Cd6EPZKNcvwygGHJxauyQ1rvqLd5+DxySItXdc+p3GmZhV\nuptWUe7Ncp4lRetuUeslopS7F6wK70aJQKcZfIoeP8NDphCvQdKsHF1iOxxd\n7w//w/isRL2/GFT5dwL7nhMPaP/V57eMmwtjHcE+fVV8n0sjZNW9dztBa6aT\npnowAzVdg8OS0zvsIYiu6qWwOLBBq5OGMCYz/iz30duNnxrS6KD32N5BPsE8\nh55+wk3yb/Uv2eG20TYcF4+xCAuOAITTTzwb/482jzzeyeC6EwX5yC7LWsCo\ndcTF\r\n=Rj2J\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.2b3ec563c.0_1579302670132_0.4394397485255739","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/typography","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.e8a993677.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53a554fcc939d1a59fac949ae159212047736d52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.e8a993677.0.tgz","fileCount":16,"integrity":"sha512-H/Y9Ifsrx818E7CtBVk969kRldlaMAlTu9NwtrmjMftk9g2LWU/n3vizYgnxbp4RyuLs3IRnRE0LDbEyLUX/9g==","signatures":[{"sig":"MEYCIQDgqdaCImN0IhhrbUQGpayCGr08h9Vbyihh8ir5apqBngIhAKfoauNTVUclB2GCrVPcNDKL4JAhOscGztNRV6S6v9lb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyuQCRA9TVsSAnZWagAAfc8QAKAzbNM4Lsk7BrawRSGE\noddNU50ZlkUrZMIlWK4mBnHEadZnFc7UjrFKWenflmWGHSuh1JM87uRBbAX1\ny80m+PSqbu2OoEImULFT7D4mjUkHI8gMK+SjEqP2ofa6VuvTwWL5Tsp4O7+I\nNluUCWLwypwPKMWH6wR71gsO04bJnr15mYDdBSidj29S+7UEMHSEGYJePHkt\nImihlXFvr0z5g0oUzm7Q+b17sOTVC6Ekc5JCLaYNxQTDtChlaIWZkpapZPt9\njQKefYjJw+YKaIfoOyzCcmYQ+WS0gx2+cG+AGRBTQedoXKjzonKSWtUtxMbJ\n27VtFgPd5HYRlgzADlVIsgk2reEzU+Bg0lGL4CDNjd/iRzHH1MgrOJls23D8\nIXDlmV8LYu0WbfVF3aVOWybkSRJSoyBdYumz1n/ZsBWYTleMTVQoQ8EkyDFi\n9GeCO6qposJSdwGnDFle8xWjsKKKHVIH9v55X5FZGADKmOza7TXIlpy7UKOY\nuU4mew8CabuIdHVVVL3acpaga/SDynVbcq0k5V/LhvQpww78P1encYLqWuMD\nsHpDNgePfiaZF2AwL+2Sm50wsOP1cpf4+Nxr+ztS+DlSfmkkD27l//iG6aDZ\n7+Nah8VzdSWYof3XWX1YSVaG9TQ9SU6fV9EcnVAapERrhG3dreRUMfajDPOw\nHva7\r\n=xWrj\r\n-----END PGP SIGNATURE-----\r\n"},"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":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.e8a993677.0_1579625360138_0.5743911854679185","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/typography","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.cd4903304.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb2e0726a3611d4b3571f8fe14e8cf60aa918f45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.cd4903304.0.tgz","fileCount":16,"integrity":"sha512-eQt7gkGP8Ka52eyW3pHpkiQLS4Z3aaj8I2jCHIz9QiwPJWt4ojdDo1JN3PI9jOGrOvClnWtkLYztRS5M9jy2AQ==","signatures":[{"sig":"MEQCIH4p+/Q03WzALR7F/yY+GOwpbOGOcyK5maWnclIuNPmcAiBos0/00oZwlcF+dQqJgdu9d4ynsRv1ZpwoIjPI4huSgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ27/CRA9TVsSAnZWagAALe4P/1NegHvnm8+EmpcbMs2Y\nGJlQ2fLmuiPT9kZC/E7d1Thj7LqJnp0GLb6exfbm0to2t0rMCSKbVqh1xRmy\n5OOt4fPRvzs7U7SMtCtOlk0gwBUitAP2yPaqgZRu40ogctAENA9xXtCgDE8O\n2jnQHd1yrRaVYcTaPXUv2z4WmtjRaxJvIDoVihOHQGvaGNPG/hHSe0vXSoU3\njCQ+eP6exG/sra2U+V0s7sJforIUDAIoAW/9No+yrs4fpDu+Gd4pOmW6OuoP\nTjvWfslbzLePQjuPM+aXF7X/ChpoFsGQpkgKjxbhRTi2MD6U5ck5PW7ko8bf\nFXBdxNOUUShXUIvA1pUqcWjR+DYu5G8zfhQqVNZxU9A3+Efr/OFf5kbx2zLP\n3dEqk/wY/7uKTOaO5R5IPWt5g6l+/udogXw0lQ+hc/lZmG8EdLshuWklNwbJ\nZys1ETKwFMTYo2aqnZKknFCMBpWHdkKZsQp0N+sDVzOWlQNQIDWySwYKpAQ2\nwIc/RXWcy5LwfItDHNcie/7kA6Vcdu4AdPi9FNwg4YRYi3XP1o9rPsCuYvD8\n0Gz2IgTK+MzAx8+Peo65mFUOgM6hKX0lj+xwbp+TEHy2W8dF8VhFEcmifGJK\njZv6LTywlgduT8oEGevk3mkhLf4lyP0HqOsvFOtxYJP6HnDNiO1W0cdukm1c\n2Ent\r\n=TXa6\r\n-----END PGP SIGNATURE-----\r\n"},"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":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.cd4903304.0_1579642623279_0.4480023368456256","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/typography","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d23e595d7849e21577c6df019eae337d443a7fc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7e4b04b25.0.tgz","fileCount":16,"integrity":"sha512-edYvU1uhLYUSxJULV/jwT6JniYeCtg1ZTmJPhyJiaUNdGjsjSUiixe0WIMfHii0Rc4H7nXdA/FXcEq4f6AFh4A==","signatures":[{"sig":"MEYCIQCYH3pclNUZ9tQY7ZbeZSDYkL4gsgncDFuuBDyI5A6CjgIhAIjSFkiaVKtvrUx39dfds+iqGkqYrZm/uL+5AHWxMQ+K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38KCRA9TVsSAnZWagAAM6IQAJjb+UWXhwtQnwJdi84L\nqt1JKThfM4LRxdX2tziQUDeIOsLZvjCJq3ithYFi7bXfatpe7MwzLdNbwcOP\nqXwpsoWwmQkYvobW+jOInMhe7mHI+7uPJuKE7UQqZzSmFGVYp7dxNUzk3JIA\niHoyh8zrfy1T2z4CFLRYVzpEepiFz9dN6+3e0QTQo/ODB6n4LZNY1VvknpkI\nMb6DzW+1VEEQI9tPz2CR39a6KgbnLxQiAjvZsc7Px1LnlKTkpEb4jX/ii9tc\nCuW1jb26/UfpL3YjiDS0SlmCUgWf+T/cbXymahq5CmP2NDtGD5ViDmlF489F\n0pOOlXlBo29L/xiM+ZaP+B2Z5YoFsUQzfM3UvPUg0Q/EFJh+V3FpkrBf4Ac/\nYO90q48a5WhtnA3/D2Crh4kCPHZFK21xasySMbpCrz+xB91Tg1GWA/tAUzTe\n4Uqg78aOhLwQROppEXXfwmfarYcBcbxBhwOuqMZb/yiiQSD8GJKbVbPEIp2q\n6/tLc1gLFGK85t7BTPbo+BLXQbAtZtvnE+XRzbjicOCt/aS4QdTAazWwp0iN\nZfJXmfvaxBPimbkKnaeta61E9uhXH3bI+vMCB7wDacXdRm+SM8QNqiQGw6rd\n9Ewa+JNtguwg6mYFv8yAdYwM1RJwTgSLaFHmE3yg+58kKfBKTOQibQr2ug6X\n3c9J\r\n=QqwV\r\n-----END PGP SIGNATURE-----\r\n"},"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":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7e4b04b25.0_1579646729793_0.8200662325229522","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/typography","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ebc296937.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8c92fe154d5b20a79a2b52f260c69ab3e953f81","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ebc296937.0.tgz","fileCount":16,"integrity":"sha512-4WPP7x31ymEegIeYCN7I7HFPl1Pj+n5iSBZM30HE52DUJTzdJclcFRntm4nAPMwgT5orubbNP4f2O/XX41h/pg==","signatures":[{"sig":"MEUCIQDqUlDehuIuabAL8BYn5RqbQC2Tg3fkoMXdaSpggwILKwIgKCWC8OwINJmmWWg40HwzChqHJZ2A28r+frV3NT+776I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4zhCRA9TVsSAnZWagAAkfcP/17uHx7b4MpV+fGDnMSs\net0xh5AQCA5NwvTA7x2zxrz04IcspmjiIVQ6Fs07tNw42+2YRQgzv80USdhm\n2xcPs2hl2V5ifGDK2XIq88abQuoQ9GZY2Jng+UV8Vy4m/144Gf238RerCxAw\nu+KLAYo4wOxgbXDKBCYYT4F5dSLopmtDkCqVeZOrhGtXK3M1sMfkLM9JaSEh\n0NqnSObmIG9Frxz4U2E9+MHgOvn/670M9be6BTqFQz4ogd3hK16JoEuqUrhW\nRd+wKaWtvrml1BCIPzs0RKaq6uZCWQDi+jVzFH/JrLml4/Iun5WjWYNoKIxH\naHp23wdmOvBJpBUR1+RJKh1dUoLkOHkW02pTX8T+lXF3wB15z/Oe6K/JTIb1\nm7XKTwtvB63l2BASYh4CduSaiTjUlbSQKER0WbjueNQ76Eyr4YMVF9f1fCVx\n3IyRxrlEHy6HTED8Tn2r0I9yJKzlGJOI1hWG0e8esgyN5MSReVDvphjxqVhv\nK6asYBuXQEBli4D4enamRdCbtH18hb3Mgjd7Vvqz6XxjYB2b7aVdbquXoK4I\nZ3fsA9sk+Nc3C7MSpeHzvUy4Edv/jlAO0+iQDnHg8YSzIDtldWpAhD6oATly\nXV7scoSkaxdjwxEyz3qZcKZ2PLyqaRydob/bU2uF3htStAC3+1nZsfq/xbxY\n8AQF\r\n=xw21\r\n-----END PGP SIGNATURE-----\r\n"},"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":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ebc296937.0_1579650272636_0.6682208604541353","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/typography","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e34b9976f77f8472d0f250c55e71fd7f5756bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.cf33f113d.0.tgz","fileCount":16,"integrity":"sha512-/qiMQtL1sW24/EbAKJTqUzwBJvWuwxfB3qIDMeJSO6km8eggU9sTdDkyni/dDQga66c+5MDzEQOzwQ8ledEyhQ==","signatures":[{"sig":"MEUCIQDq0Ow0KUH4i3+vwdYymugHNcib9MXzhksbNaD4Pp6k1gIgbXmmHLXbhVpL+UVvNz55q8rFFfTkM3RXoPcGVaSighM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48634,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6O2CRA9TVsSAnZWagAAWTsQAJeyp8JzKh/ujV46ax4q\nQjvJFrTD/jULbJrwDmBUGdU3k+/7+MB0ghjGu0+y27LJ2O4WWkos62mLyb3K\nSS/8w2hknimFru+zzwTjJ1pMWmZlFbX4EmHwQ56lnhhAzONxaEu8sFZWkEvt\nQ/xZ9aCWb4POgdo7pP7P81mG4DG09XB8+6BI1gCquLzSegDH0fXE7gwp9VsJ\nG+xspCSXPLrAXkQjy4Bs1V4bkR3SCC0H5e8GLdBTW6GU7lovlPVYa7Qr3SSC\njFilCZD4HxqzNroRFZyNSQCkjzTZpTpnjBQN34UX448dR7rFNmJvb7stVGxq\nOC3wvmzgWlg6gnXBe2YI6dZ7rE6wC7VMGWqCyH6hJ/Gkx8oI73ywqpBg4RUX\nho3gGbEvL5g2mTzw6icRUMisiRq0CFDwYbiXZRGrAjh8CRStMTi/Y90oxJ1B\nYa51h1YiqYw1zKpDCGKOFelc5ZEvQRkSDtbWR+65URVeCqbgb2pzT7PhBoEn\nGwhSB5NqYlZTqUPRZxJlHmDOAGPX25LpMjWXdBwCDBWvxWndg1JiIWeOABEN\nxRn9fjgtvC+1HT2JeQR0Iih/HM+Pw7Iej3qSoLreTgkndJmxkymS/UVsJdz7\nkPHbAZ3oqk3tiddMwh/ATPkuC97HaSwMXG78ApBGK2+eLRqlkboM7DieDKG3\nySN1\r\n=n+c8\r\n-----END PGP SIGNATURE-----\r\n"},"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":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.cf33f113d.0_1579656117672_0.9086691076863833","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/typography","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4971359be1f00a8e06c0b5d7393487a387f277f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":19,"integrity":"sha512-WpgvH41UdsPXWXk63yQqfthR+cpvSzwCs3GRWemyBq0V90ifRSBuxqr+fIF0dS4IvDvEHon2XU+xcd80GnTIWQ==","signatures":[{"sig":"MEQCIEjrobFdKnkqVEqpYD8yYu9/t7LZUZ8Yva5m3CusdsfKAiBoaGtp23abgt76xqN3Qjoh33GSzmmFcP0Ge7AQemTB9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH5lCRA9TVsSAnZWagAA71IQAJWglXHnKbA9i6DAakQM\nPW/0XOaEfUoosv6ANL/p9UzRnerEsgGvYi8o6ZplQz2IC0RslEDAhzGqp0/U\nMtecAhsOt+SkkdfwdQKZOcRAyMvPGFJP+U8LAE9Fl46uTtkXi6749HzggJls\nx3p4AkFgFuOEplkFdBcWqZH8szaq1QWKseZnNjQQpBUQPA/c+96p5G7WGjDb\n148G3RjFHq3fMCJXn6jYSfaQmFtuyVBLxnQ5FoyZ0vd/tznMOzow1nISEedC\n9vuTczRiumsJmH8nUbxyBn0V4ClDM7sZcSSYoInUn6JlFtwns2sVA3whB9xR\nXnWXB6h3DhRBoQPrfvM49S45905efKOBF8pFDGlCdySCZX3A6S5QnDCbPOlh\nYnBb6/0i/gw4IwmhnOTaWHlBGkn/VSQFWNOYaRNsXpQM12vt5sZKCX+ZrR2n\nkVqWOCpjaKSRDspFCuADAP1VEtZxecMQlDID3ionfTYxcjY8/tQ4aNLvrO3D\nBTFs1NFmIdIHZhdcHlABEQspHvUkRAFV6qjs7FQ634ICrX26EDjQpoLdQUaC\nICOuG1saWoIr8ey2DO1R54wcO0EI5qZoKEtbWeO79+Fi2gwvIoX3YcXbExSa\niZRIJbszgHd7mUwzPr4+VSfnBHBZnBFajj5s10QSdvspT9wqB2dVL7Oa68v6\ntrRh\r\n=CEzF\r\n-----END PGP SIGNATURE-----\r\n"},"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":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.e1d5f1be5.0_1579712101026_0.6521834046154265","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/typography","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f5b0731f9f6641533b3610d37ea4b43a729dd91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":19,"integrity":"sha512-g9G0E/bMfH7g4jf2/i2Fscsh/K2bH23KrKTQqwRTrQIih16tZrC+fWaJgf3YPNMQrmoca9iCD575vq68h2qfLQ==","signatures":[{"sig":"MEUCICbYHxiXg+tMzvm5Ri71feWQCmOe/lJ15CZ+FPMHIHJjAiEAjRC1pxrM2Yt6ea7V5cBzUOm4BZGeg5OHTGz4M67CHw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKIz/CRA9TVsSAnZWagAAXXAP/i3gAAbVtRNcSCZFws8t\nd9IQkG+b3hHXtFuqdu9c5A2WiPcudw6cHhoYltSCkM9dL4IWLI+ALp9k8jNr\nGELA0ZT/9sQh7E7KZTPZ+SBYVe9sZ1XIdfEadyGlRzFWOuYGi78itfa+GxbA\nfb6Xzo8PfT0oTN+w9tOdMgB5IP6aZyP8jaA75vlIsFE9CugyqN36JPkONw7l\nW6iJ02+GgnE5dpnrftp1ymfF2oMhLHGLvFtczKS2XrhaKPthQzJXWlrWlMwh\n2ofkSH/dGz+vUwCAyOTXhDXcSjjUIxU8vYnrLwdg1JabWw2xYBT+9FDzAe1+\nV1WJwhh485nMmUqHhrjMfm5mr3DZe+ui8+lBKeYNZ5LYWPj1t2l0kjvCV614\nhUhkKTmuqEXupMpAtP8Q1cwkYNdkXbLpUggsYxcUZqzsCpkHj+wHqmZjK48+\nOKhiwyvuVyXqX7v1vW+aU1HuNbL/I2TVF/18vUjuRECytrvM0WXXyXMKyBkY\nUtRc0bVOVHfb7E0Bni8dtjXmFo79xgt2w0I1u1xrwW7oJjCzeecX/zfWH/cT\nquLqmW659YE1lVkDrbZV6AHeXBsYjhYlNyAwC1QPdzAgmQOJqc1e+QqlXaC3\nHlH3NHMqkxPtIFqcRzVnYvNoLx33hzj/LhWGzy1PbEKXnw073Pq7aZD+AUVM\nC/wh\r\n=Y7f8\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.6b6a4ff92.0_1579715839233_0.5513342333198668","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/typography","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57f52cc7c62b5e3898a21ea3879b6cd3d3713ed1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.6092f71ee.0.tgz","fileCount":18,"integrity":"sha512-MVw+kPKBWv6lqtKzwrPVKMwgfN2nxbjkhhF2Wkw0wv3AGpavssytMmFBj0dlGDUl3e/tRa2gpQHspWRyaqjr/Q==","signatures":[{"sig":"MEQCIGhfZbOnHNUO0XAhiuDP4G4h0JbcLS/Qi9/bhIp2WHJaAiAtx1Y2BJmU3x5KJ4/jJ/B0qd8iY0n0iaPzRr2j9/f4og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLuzCRA9TVsSAnZWagAAqMEP/2cj31IvS2lGeH/SpRJd\nuM7VauYp+mSqCRiqrMP7YbMl3fw2tci4czWol5fODzghhziipUnrQ00LpJah\nIwOMJDlTrtqkVU7tu2sgbXlxGrIDiGnDLaaG1KeKpX1cCpkVakkpaVwgkoxA\nRL++8j0tWDxoAcYt/P0Ry/foa28g32IDw/JBloTlXxEIh1/+kzbdZTKoufNn\nXi7EspKFu5jmeQb5PCeg7afWYxNq+99o+ef8TguepD66an18aUpYsklI7eWV\nHZd08ICm9CNrG5snTs7VnbVj3M7V7evd7DW3Mn7xXfyXZbWvTgwQeOlDZag6\nvewsV5+2kzX5Qr3i8esMcyV27PpJfC1GxgpDPURcDPJLGM2ZPjTT6tb55QdC\nws3CugAOrNEqTLlJLox5Riiah3zHQkOPJ1JLVKxXiCe/HYAMVCNZ7YZBQwHq\nqPZ/H79TcRw27O2SHAzaFiHhCjFMtInT9td4hNswlYaGR1NLH8t0N+neri8o\nlptSgOSP6Au1LOI3DZZgXaZpj+YHRtEKYbp8yNVqSrbunYzSskYhxtCOuklD\naIsltIBBuMkr8CQM0p0V8J4XSumdGO8EsXT5p+G/5DWsWjLXt4Ij3f/8ik+h\nSVje++/ANT7Gs04zsSl9vCxgMTQ+g8XDQvuWP/297rRHlqnn4mzgJLcZpxN0\nhe0y\r\n=wTg3\r\n-----END PGP SIGNATURE-----\r\n"},"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":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.6092f71ee.0_1579727794688_0.3443399665596949","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/typography","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf58396fa657aaa3672d86e9f4d2ed921b02d038","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d8d95020f.0.tgz","fileCount":18,"integrity":"sha512-q/g2Q7iWmfz//sejg1APW8bprjpgO7itlSTw9QrcoaSKp8l23bUxErxcN9bu2FRkn/SZXrwCEHYsjO4rVFT3ZQ==","signatures":[{"sig":"MEUCIQC7jaGWwFHQSd3ZFzpA0dGOn+asPjLnpQWhCYAjjvikJAIgTlk4JMr+mn8Zs0ENh+3zU4K/l8bt1aXggcldCaPVOfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYWCRA9TVsSAnZWagAAYrkP/2LljzSydxfCuvb9xug8\n8VsWFHxDj0Fps/1F0sQLz6WQPBERc7lKOuzIW5ivdz8f1icjabZ3ht7Raxmy\nLHjWwDc9Qwd8odkJl+ovkXoipo3KxcUkjAbu3Qlz52ybDShUWolDBt2VWqeK\n0+0sNlq7U9QqZtZrj63P76MeU1W90bRSUdk7w+R5dlKvObt2j3NIz+g4gfzq\nfCfFK60o3Mn0mXSmc49FRm2x2tSByesdiZtie8ybpWe1S7DW3fFFsN8IR3id\nI9e7kT7ETiNhxZps/27XOWjsAnsHM4c31bFd1RhXyMaIRSmkvB07O6Tu3bYe\nD+NeeQjqHvpv7BHwSFIECPOYmsek22ihDCED5wvFxawrJgyf+5wT5Avp/bVU\nJ9i8Bav+ulmnCJvCHNjr3cUNRvzaORAOOhBKjX2XfLd74vDGzCdjv6Xk18BR\neP4zEDyPIeS6l8BzZ2QFUzy5jn2u81rLnOq5fliG2ubZWWNajakGly8BL0zk\n7LlH/Wm1QLYr4yCOW5H3/kXiF/K7H0ETdf8HZzeY6zTnhRjnKYLFZrVOxziQ\n452a36R0dwmDxnMoOI8rScasV8QGADBcNAJP08zi7A4kgcW52sxJKLw/JhHT\nGhPnawIvZynNe33POeLpNsusisvZAfNE48VH2QS0XsjzNOgqd5fDS1oL9QCI\nZgrW\r\n=hPs9\r\n-----END PGP SIGNATURE-----\r\n"},"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":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d8d95020f.0_1579734549800_0.4606835378660088","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/typography","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b7facc628.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76b3a27bc27d7858dd383507da1c54645ba87c18","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b7facc628.0.tgz","fileCount":18,"integrity":"sha512-ErJEEtGXucRR3wu+cBILi6vqS21eLo0j3c8cPGHiCpNV0zFqdKllRWrWWvqq4EYvg0Spt+FZKYfcYRB6Gc6bvw==","signatures":[{"sig":"MEUCIQD2/6k7JL6BwjAEV2Xjctzo1uv4IclXrlTZSQULqZaymAIgXmWMO1UNIC9qx5t4T1dvW1zxd1vXNyWPNZHi7tB5Ias=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeH3CRA9TVsSAnZWagAAeREP/2a9JupETJC7SkY8OnQ7\ndfMDcB9M9AkrHfIUOnXCHY9BCW3Exm55oNe98RvUgEb34CwiO9fwPTuSHgNr\n/qCbJ016J3IzL8AgAvOZkd23p8drEIaKrT7suIDO6/42kRVIwFxsVFilKr5c\nVNRfVpP8ZI0r+FnSJthhPdyh3HYeq4iwJ8Z0m6XyKGGjJOMicG25WSlqNBt7\nuzrVOZTVw3hqMFY+ksTulNLg++YfAKgHuZrXXCBotglGl5OHW+0PihnINZsA\njBO6M9H8VGRmEaB/WyUNdKKbQnNo6QVxO9rtU2WXXqr51LrGlF96XsJOGgdC\n+X8WpcynuWaeQVIiwzpWe2P1X0k4JbUsWgHOEuzism4zRqjJ2d6yKG2AEXER\nCwS0q90hzNMoIfoSvc4uEA2WY21YKxh/CUkWfYEs4F97CvD61QbxwK2RDXye\nCLRNiIIFfCzSzLfb4XurjQ5k23Mb+4w3jiBc636J6nWf1mPOuFXbB/R7DOVY\ntPuFIjWkYwpFSNlI8OSn5GZwVV8YApQT2vUNQNJ2EycjdLoq6j1k81xjPC2W\njzXBZUlbHe8W6tP+AdO6FV04VBIFSWsSogh+XGDbsTk10Lvr7exSDBw9o0qY\nf+/QZ+eCKb13M3UvBGTjh0KJTfCX/M6v9+g1K5j7kZENBhjdoIq9u9bRJlWj\nEngi\r\n=jXdj\r\n-----END PGP SIGNATURE-----\r\n"},"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":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b7facc628.0_1579803127427_0.6361273438883399","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/typography","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6cbd297e101492d191b695abb36becb7d73b59f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.63f357dbf.0.tgz","fileCount":18,"integrity":"sha512-1U89OoIPcxUJohu5tQkm8swLwWKWTtg5JpPJs6jbyOrvmKbG/b+NyZZQH98/iBAdYSoIqJ1O6knTcRBNj/84EQ==","signatures":[{"sig":"MEUCIFnJzfSnrZPT9A3RTBLlRwbXghxiKYN/kvZFL47H0u3xAiEAx4W9daBt8a6j/HiO+MundGp2nv0eno+vqcHZ3et/MDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhYxCRA9TVsSAnZWagAAoWIP/2Xz07XMgsoYEJZbwAio\nnov9kJi7UVPdHIV2inNqlF+IHjq0Re/WoLdZAP8UENWrrGgjIr03QYi0tq7m\nnjYztEVboMPZFlqZ1IfPR5m1n1elR1hzYXmbNFwbyTfnxDpB/xLQqkYmhxbr\nP9kv1YTCN4im5XCnXLyI0CMpgotngswK0S90jmWk2sgKUw/4qb2gWRNPMiRG\nnrDo4uPAUAKrIBY3a2t6S5Nk1u98fGLav23EMfuJro3Y+2w4dWW/Lx9K6DYb\nzyR/xqre2Yk8A9k+dM+AHPBufmgeDy0j9e8mzCxtxYhl83b3bqvmujfVftSo\nw9ChWZfTCxdHuFhGt8W+GLA3yBvNtsFHDqBJbH2c4RxRx6JgSZ4xDbn+T9qR\nw6zplpLapos2HLuCzM0MeB2tF6srAVuo3qJK7ikGDVCT+EkUN6Nnsy6z1g+N\nmanyhiLpF0IatC0e2F/k6bWnDR2R5KcnsfmkcXW1Q+KBhoruKxWSFvyQifGn\n0vJoOpCMPTss980qRa00AuqKT4js+WIi+8NNqm1pemEXTuUxj0wY21oiqOYk\nLsKZ4tcRbMosQLyRZ4fC09ROLJo0LwaprbzbnuB5HQNyYyCDIIfLdM6h3UHF\nJKqPMEW011WBpGXRSQXewx0yYrf85TqQ74xb4+2XuRamNfhDd3Uyqsz0PK9V\nVML/\r\n=epNg\r\n-----END PGP SIGNATURE-----\r\n"},"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":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.63f357dbf.0_1579816497304_0.566636241628963","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/typography","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3874f57785cd649bc204ec555b49288ae235f4e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.f2426d26e.0.tgz","fileCount":18,"integrity":"sha512-5i/cS3/BDiPOa07kcv6yo2S3pjvcGYm7E7fTw+JQfy5Lj9ZxBBFQbgNoOlZbw7Uyjba5SvIt3txiz2OfScK8eg==","signatures":[{"sig":"MEYCIQCMLXhqHmut4DKXN4lD1Ka5RwDKI0bGaN9Ugj0egUMFgQIhAPbP4lxiRaZGWQgtyup1zA7wJjuD5ZqUMpCXYryz4c7G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJRCRA9TVsSAnZWagAA8wYP/2TWENlkgVKaqAHliWBc\nPtKzHp+J1XkKYYYy9xYNfDRZSzmmFPWaXXMEOfWRkN4jiXjhbyGM9WVITQnK\nderI6jUPioi2wSK/1SWSkSiMHe1ce2Z8PYiwQbqfPD+1Tnc7lL4eySa+fn9w\n4yCvzfOvZblz2xb6tdvKcCuYQJI2LNgxrTzXfoo0zaJ8ZUsR2M4cVL8Hcsgw\nFQmWBDmb9hKglvikN/NoVgMRVgCRspKr5RwquKjs50drRH45YCgd9KVvVEJd\nfXjF6f5qYGKnT9n9Wp7ybdN2Sj8oZPEhNp4ijIm5y+Zyx1Saot5O35morD6a\nQyQagaNj+N0XdsrXMnwIA5046Y7dW91cerYrqou/OxIbe2N9XpcKCYRAHu9V\n+n2O4yYKMekLaoTb53DNbDhKFRwhNUvb+mEi6MCfZA/cYpNzlqGxAHg7Pza3\nxKxNP3aIXfcWoxhjwSjgc79Pb9UTCFU8SkrBsJvgPXqGbzt5anrnksvbc7zC\nu1i9oSxg9ZhES8iyjbbj9IcHBQA6oZ7iAMa0XqxqxRgnaJNyVyMujkSlbSAl\nI1JXrsi4QMfNvR7gaHWUFWBGW3Jc5yu134V3nY1GfJJ/L2+9sLINQEu9agM7\nRA7wXGsm5uqPU789Ed3sJaMRtrEOWrMEOq+DwuwJdy4P+uODRgAXgnDgRaGf\nqohm\r\n=NNX6\r\n-----END PGP SIGNATURE-----\r\n"},"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":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.f2426d26e.0_1579823697554_0.7654670897466382","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/typography","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"335ce39878e1c9fb7e03301af994fd1eb36607a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":18,"integrity":"sha512-zZkzqpSnIEkwevxF8Gbu12pzGKb+9VBIOktMCAU0Ya2JDdG/sDb5DaaYs2SK1s91U2c8M5mNtxbYFjQK0Dnr9Q==","signatures":[{"sig":"MEUCIQCAR/F3m6btyy1nJmmFsdvwsauzEvFOqqPryEZmgZJXgQIgEDMYnY95KuHgtoXLPQY27I0qrjBzCBx52L+VzD8G08o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+UCRA9TVsSAnZWagAAKTcP/0BNuDPYzXhwP6e7W4I+\nflYGtGkRIIkQzh2ZnkYfPSapWcoiGU5y9USV9sNdm7jJk6ZIPmbv/hJYyIrs\nkv4WhZ6AZXjwnVOm874Bt12cmYMw7KG/xCpoVzlQrmbDOAsRg6gsHjL89xB4\neZRVzsECxckhJNXzAMBIOjSOtF0UhcGeFPvIwYyuGdnM9R87jCJfbfxIFevW\nfcKW8Hh1IJTMo086ry6uxg4qIrJpBEJsFrGcKwu2WjZdFc9c2KlVLCg7FJxT\nJp4LV063NPiNA06DsIjQM1V5Aca3vg+FW1sleBnfXUVo4AkHdAygAdIJWvV1\nFXLlgHi5BASFiaNfOSdYHi1/r7w+5FARO1lMbrOkFSPf4e2VNnynuVKkNu0g\nOp7rHDICEhMXAdiEamhT4Ux5dugBzUJJ+oPEOzuqR2Dv09TnZacqeegnt7Vr\nEZJWxnc+ymJdaUFck0EQ62NtBKiNNiDTNMauktttdg3ExSB2DBvw7CmDRVd0\nkeFCqy00thPlVkXra7lMX9/q0uLUf4vyBismR/dvfdGmWdNlWNKVQXpWZpOd\n7wb2WYC3MrOB/Q017Fd2ysR0GiG7uephU8LUBTadIzIGp5b10+ftHQbZeGgI\nFCc/dPuRe45PBFtP42c52HlYrUyLcp5vPEYA0bWiKEscrkgwhroTilwYMiO4\nq0XD\r\n=ziJS\r\n-----END PGP SIGNATURE-----\r\n"},"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":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.7f5e0c23f.0_1579884435960_0.44744336637171145","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/typography","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64ab496040f9fa29dcb2e68627cbe7ff04f25505","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.3fc3ab520.0.tgz","fileCount":18,"integrity":"sha512-tWDYnWEsQpUR23Qge0vfcBIiw+TBPaSYnXHlpLp/sL7jz/Xx3cbYjNpHvIUmm0HC0u6bPn5+mmJhNWeh1MVpEA==","signatures":[{"sig":"MEYCIQCT5KQIgEUqHdHYdQ0sWJKlyfgSh2r1OUBRc566zXm05gIhAPT3r37wkWDsPtCWrbBVQKRAawmyAP1P8VAJIeXJFep2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydcCRA9TVsSAnZWagAAPUIP/jo1Qdixk1ScOXctg/0C\n6Pgudsd/ZFpVgIgrfKs7BpwRgkytwwG8oxqs0x8Cm0up7Wk23ASlRWVPsTNS\nIiiUwnY8yMrEopzFMnOS6QoekC2nhmW49RnX+5WTFke//1O6vbk2xneI7ol/\n/a0qem7FWfI+IIxf9M/1rlQ55I3Fjji4gvPaifZu2P9pVvdc7O0sO+DnDreZ\njcy1HeOj9BP/CnWtrmeoKXoKtsKHVqWZFPDCKlxNcioDXWkWvXXqMnj2NJXi\n3EJBobxaHYERjseMaXa1NimbL9bEXbE8mgdN7UbQpvtBnW8akXDK5C7NHxh9\nn++HKq1ALAJ1db/x31JsqCcooZBQ/WOj65K2ltHEsTpS1gTiQi2htaB3xZ6g\n2T9/OsoXgauI1QT9w4WncZx2+rV4bL7B5uso8jvE0sS/X54BTA/6HiMTM0ot\n63UkK1vMdax/r+5jXgqSsmQCqVQOgyGk56EJoDIyyfgzgIGFIswCEKPlSwMZ\nnK7Iv9C5L6LLSY4bVenlLTXsxz8SCGVWoYVDqXMIBhCvYYCIDMe5JsEr6xeB\n7fh2E0WM/mccOhHv1Eauu+4YyDt7TTavufyHLPIbxLqqW0jvkGV7bePSj1nO\n1IHRmSotWx+BkiDI+C93wRkzY3g2wzlfijlNfpLjp/VWUgyIRt1jhj6Zdxmo\nSG7P\r\n=Oi+i\r\n-----END PGP SIGNATURE-----\r\n"},"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":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.3fc3ab520.0_1579886427659_0.4629435683280032","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/typography","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceeb47e5b3358f754ce18ffd506030b5a9e26437","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.80a4d326f.0.tgz","fileCount":18,"integrity":"sha512-ntExE1kVDRQzmziHGIrRD74Sf37aCM/CifnctO1ZdNaYCUhKITQq7DlKHN8sfPW35OZ9bAxEeP+2LOU+/VE6jQ==","signatures":[{"sig":"MEYCIQCdVMmWpmRqu8VPVlrfserbjah1sS2XGrKddIhLUX7YUAIhAP8bV2wnKJ4QZl29uQ6ZW7SOS57vJB0lMS8CnQTdEJY6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1dpCRA9TVsSAnZWagAAnKEP/i1/5UyIsD9LO+r5v5/U\nehlZ1ZHAzaeVZq82L/tm35j+yKL0tS65iW1oacvjq4vnzOD1FBmXhYsf+HT+\ncucDlp1vUXTV1VuTLRS8jriAmS9oB2r5Q4Hm/4W7R++md3t9dS0qh4RMii+o\nUJweBiPUePiHTCyojHgaZFmhdM2kDdvY2dJ7zA5gkgV5+Tu5yZyRLqusY3OQ\nKNcyMfDECk13GySlTocHBndgEvanhFeUv3DpmyA+3NZmaQ608thOY/CG/SGi\n1qEzqXbV/NTRzhyzMQqcxZ4hfvFXkkYPIvyjDF3guoFLRjg06KSAjFM02Mr0\nH6RaJwM74nBi9oiH7R/gaGwQ+1eMn8n08olU2HbYNZrNro4PhzMI4EeEOSxe\nOGw85F0g6JkD/VUygl14rDy86YQE8bq9ui5D78Xq9VmWmKxDnxxlViHm3tyY\nbf9A8iUMvsB0H0t3Hd/1gbHY124orVQ+7bAnPvvpoh5/VB3m1rnj3emxISL6\nOk1OGB8hUbk0dCc+fYsE4gPd8Rx/OCBP8Dsxi2u+IwfUmLbDxidGVodDGUDW\nZd3TEY7iE8QNxw3853zN1dUiQEUUrOCAs5upmGpsxf6/b5l2zahJ7lJZkT1e\nflqxZcF/TgPDz5v+YD4WsYwvpygHQKla7092eCqUrJo0rCdKPQAipU+tNv/U\nrdvq\r\n=Uwca\r\n-----END PGP SIGNATURE-----\r\n"},"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":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.80a4d326f.0_1579898728736_0.6886481756562826","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/typography","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90ac753c40396f00147ecf6fe8bd4560c62bc501","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ef7de4def.0.tgz","fileCount":18,"integrity":"sha512-cOkgzjvyUlDjt19yg9Prv3TzV2i2ZQvR2PS3OozhV5b0ha1AzWD94v6UUg6XEZdVd13KYPgPJNgac20Xa1trdA==","signatures":[{"sig":"MEYCIQCEf2LvmC6IosZnkKVulAvt1mz5vCrlyaW2lvL5l2UZRgIhAI9z7dekKApHtAAN5EJuYb/6KFV2pSlXyydRGDuate7+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JACRA9TVsSAnZWagAAiO8P/i60nILn0z27e/WKX3Lf\nrp6tPZOhMcPhuFOfvJzSkzTEHlhWKszFI1EPHX4djsneDK5VoNZUjv5RaL/9\nEAFzkilnYRemHuCMQz+02MLciz1TlyQqbwQ5OVOS9C73NzKSrf4a+VPm9gB+\nOhMKc1TMt20KjnuyC44e65ul0uRHtxRxZztKECuhsG22JHF+I7KgyP+HCQKY\n4EcKo2Qb5N0kfyDy9Q6wiHVrX8Se9EHPn+2DTVdQ6WwSIq0gd6VFHMkgnYCm\nURT2Aoq4gaur3p12aFu0SHQfXWByLGR1EOcGbNOj5gcw1J2ha4AG0kDn6I41\nscbyiSUdjsbzsa2xmR57wwbAbBR4056pBnxYfvYBbmvCIpP4I9SQhzLlTFTb\nhdChqDMplvrAJJL9EdXlKVCmkySIZmMeKrkbeOtSUgWCJL68llLiG+QwjM9e\nJo4fa/wagtTRdizUTW+rsra3vU56V3/j1ezO34bZh5Sc0F7mE2qqzpCM0J6h\nSVzQ9MCHGKkQT5hQlBDJhotBSwkkQ2rOD+XjGrVYvGrQD5/TdLYerkaotxyu\nBuYwO1fF1S5EAtnH+LHhb2ORUDjoOZwYBMsae6Edo0qWoDAKYV4hclyX5U3b\nak3e908mkvOKORO2SHL9tjQmcDcWLFy1T/oX7WNwFQivNk2P7ouVe9mnnNWU\nTGyS\r\n=GaOI\r\n-----END PGP SIGNATURE-----\r\n"},"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":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ef7de4def.0_1579901504591_0.6333376451206918","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/typography","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae9ac39df8ba9396d7cf50e300b1e455e496da21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.93e2288b6.0.tgz","fileCount":18,"integrity":"sha512-oslX0EmEsEECfUbqBreiyZRPDVb9LlMZkcKvRFWMYQY82hi0wdwc3UXlXzXlx3SS44Lm0QWa0/UQ22ErPCVSBw==","signatures":[{"sig":"MEUCIQCYGp9Zb+mkEZtm8V3QIMa7OQgqhiEEhwfcbzYwm3Ee3QIgD6lTKoQ16ozzWBi4u1uBrdN9nMnX9l60DiwINu5iZvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGd6CRA9TVsSAnZWagAAsTcP/0Bah9nYof/4KGosqkjO\nMLPkLAjQH4qH/6C47AocYlIJdy6GCbrWAg+88Ke41Ixn2qEtLmIEA27qIWgd\nG5JVwGI+w4UNklI887i3bKzsQfhh0dXJxX0zN3TLWqqxxyuFyHzmoh2QWaAW\nUGWqpTo7Cfpj7KFxWdvzlL8NElQb0sNu0tmlXs1SitN+IA93iy+C9mm/IHCG\nQ9t0aECDFAu/ZxswIWu1Z9VpFv+NcC5wRZnG3h7mV6/GmyCa+xMIVBN1xsuw\nGRtcw1Q7tllEEZKel7x5hXm40ivKOg4Q+nTKZchxbQf0y2ULkeaVddy0UNFm\n581G/FGrMCZLvAJP3Zqz9/6zP2ZFqINq3WNbSF43uiyweZchXtqYfakhPdFK\nGGasjS/80UcJuxhqHH62CNXDUCUZAv2Tis08lTVtxecqOFvV514NIhggLU46\nOirPCPldPBF/3yAszn4Ko80Q04Leg63nhZbSCbHDyrS/ymH1KmD2h4vyMpzY\nSMmVQZ+jGfvxl3EcK1RsqJCzF3qsN8oJR/AsBiR4mnaPEwQwnuT43Z3TF5mT\nk9MCQS7awk152F/5FEuDRlEkXIO5LW4XWNtWPuiH+OrITDE8337sP7wq8bxP\n5TL5vlcg4Ua9QqTehZhMTkNJsla/Qykc/A/WxTXXgWke38sp0DQ9EjwglBxU\nyFcD\r\n=3xOE\r\n-----END PGP SIGNATURE-----\r\n"},"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":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.93e2288b6.0_1580230522005_0.15804199000787045","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/typography","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ea64c37c285db23d47d8e337e524387b9c2ebb2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.34ef15f67.0.tgz","fileCount":18,"integrity":"sha512-M5jcq/NAW2/8ARjwVD/jRPLcWX/ws8bHpqqVVChIFX2zX7Igy2/TDLfRZ9nxQw9q+zvHHPJXxa28sdPEPosf5g==","signatures":[{"sig":"MEUCIHEchHM43icBxxap8rnva3swhzV1IGdiKxezRxf8YIO5AiEAz9bXQXDONVE3ec8Xw3I6qH64NRhlKiMNNNibqFQQHuo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG4eCRA9TVsSAnZWagAAmX0P/10UBmbRYWCUPFM7Am0k\nnP0B+or+NcOlxm8poTtShAE7zM39ndZQLsavVS2xe6UTSll7ai5iH/Cwmyvt\nk5Z4BccTO9J2inheyxOR65KpozknDcEiDH1dCSIhXiq+DedCRarJBfxTZuEm\nVViX061wtAMqsJpRuSdSuDwQ5Di2cGl+Ib6WHTVMmsK1mW0tPVPoq2rs74oS\n5gGDiwV0xJLhZcaORKlZ3Jd+HOTXFk7PtnBzygRhp0y/s9YnYiIcsog86tPo\nmuKHmTCseZrTQ/xKLtCqD8Ci0oYvkbaVZt9oNYWHqPHbNmKjCZmS8Fuyilu0\n6zuZisvRS79z5YiF9mUtAFboRWK1cDB4Ovnd38ueKjTCdPo5agBodtcuTLYY\nJTNhv3PgN3SzmwzfWIS7AZ2N//Pj27jGee9ICk4Hu1b619MOnZKwAqmeI0/Z\n+4CEr6OUGgLhsHByMEIImBHi6nm1HGpWQH5i0zMfPIr1l42sv1J103x5Sjsr\n5s8uk5ai15+tooAjL9wCNQrhFmzrXqQ93wu/RP5XRTStlNECOyt0sTIS5QKT\nVyaoN+/t2c71cO9OzB6xONr+aEeBxuJ9uKczKHtIKQ2uSAAF+13w/yOQO0Xc\ntGQ7T2FLmrljqDnjvc7KbqqGWNGjtrP2ACVHi65KgYTAYJCaMh3QY8uIrl91\nvkzB\r\n=bs/W\r\n-----END PGP SIGNATURE-----\r\n"},"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":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.34ef15f67.0_1580232222485_0.849472732021993","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/typography","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e8e20a1f7fb69ab0e370f7adfe2515187eb1924","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d3d176ba5.0.tgz","fileCount":18,"integrity":"sha512-sRcMHVR0f7Hyp7UQu8/4c18RjliHZ8FNuHM7DsbTlKDPVn/csWDTkffr83q1X6n0oJ0D4t2wp4DnqYUVfjfQ6Q==","signatures":[{"sig":"MEUCIQC9vSK0yINkTrgavDucD0QCqzO9FYJ92oU7eHWKo7jQ5AIgEGa+NOwpqYBSkQPifcq1hBFyH24uiM1fDv1tOaW7coU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9hCRA9TVsSAnZWagAAhBUP+wRWuuM/hQZ9Yu1Qn4u2\nRSQTYLj3ZGkiiwMgoXaB+V0yPz5ShuEUWuH5NS/Pv9TWR1nKFeMeAwgUHmaJ\nPhXkHhUv4irT9uH3mGd9IbehccTd1e1BBvLdD/is9fL81Acpv8nKhQ+o9NQu\nhA98ANLPSu7RPeHwU7p44M/AnoM3+69XuQfkub7AASIdl9cZB62q9Yj3h6cz\ndKOeRzoooPbYuQJoJaLYWL5nZYeJMLU6Ho+RVdB/MwcgYj87yHaElO4vblZg\nwGWG8Pn73isojPgLhrlUHZEyeZyLG/ub66cE2+GtcuJJQI0EbbznyOiBTXJM\nWqrLJMm2+wSmZYIgQCrGx8p4sa+NVSXVVoWL2A6eV3g5e+Eux1+AWsuACKzb\nOACUe9Y0oe4X69rNx+Q9WQTZSXhEO1BDiRNy3VT/Dwrpc+tmJOvst918iLuP\nD5TnqAngVRSNxSCG13o/PBIP4ZSIvNBHzzP+9Cy8xvz/etzoQwHy8YyYgw6v\nBJsNKmmGoJJEfJ8XhqLuPG3BBJvFfpg3rV367n9LfIlyc/V6Qezqr0iNE/bS\nORHQtQG6S94hXAEOxrOtmG16cxj35T+vEFXOyDLBYnNdbynuPmZL4GoqF2CV\neUOHMIU8bCR5zI+BTmaxspOi+GanBmf0Qya3KwBxm+cDBOq4aSwLaMnIWnnv\ndONk\r\n=5zm8\r\n-----END PGP SIGNATURE-----\r\n"},"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":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d3d176ba5.0_1580232544730_0.14115255421244255","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/typography","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.32c1df133.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcacf7c18eae90d3e3ad0bbf3ba019a472b5a8d6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.32c1df133.0.tgz","fileCount":18,"integrity":"sha512-Yr/uFLb3dHK8nnbySEgl3oaLHh8Q09fF9ibpBwkArHqGqBlxANahndOUsa+2oOP2GTS6wVbFvAIjSGQ8JX3otA==","signatures":[{"sig":"MEYCIQCEbgeAZPq0Of7ceob9Qota7lQuNcNR9ahmrq4X1YvlmgIhAO7jIdFzuZFvNZD6rrxahMARYLfBBgIc8sf2l7i5WvVy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7ECRA9TVsSAnZWagAAcYYQAI5jJz9SLhBaR7MWyb6z\nwmsNEQ4F9nnjoRCmybaVVX02fxsDeg8tcntLekaP3WIUAlmlg5XQhLtMB1Ek\ntqA8Sr3CRKiiKhDTX6LR35VBdKJCkMhol1xi9vfmzy4PSBkpOOxwKeTwVQKx\nClFUU3cP1Jg9lQyJjy40I7cs5AKnZzgqkgPTfxGGsKgJsT7RqD0U3c6Hfbc8\n43Rj031zuYNRQrdrfnkE8yABqxqDlRZCwc7T1chTQNDNi3kY8FxW0jndniSe\nwqUCp/wMt54J1cZqe1aAAQdhFYbOrn5yDlJHFeECFwINEGajW+BmS+Vc42rV\nRs9a+mtXMTxcfsE11sUDf1z+t4DpdD3Ix+FDBHR47S/1ZhYI8FggpjlQctm8\n8KzHtLIN7QvEDA5gQ0ZWI9Cnhq86zdc4W9YXwOeBAwaA/3DyCUTDYGV2WNNP\nBX7cPs82Coh82YUY9p+A8DYfOSsYyxCtSfUvJJzxLVabA2WNMZu5le2z+bem\nRtcIUDTInXvbaJJr/T26zoiiNdo+MB7Y7/xy/JSIgs/34l3PctSvfQKO0VF3\nTfkYVS5uo0M4DhLfUbORsIk3SvC4mHLf40UsyYLGs7+UQYpyWONPD66vVL2W\nKdl6YqWqJ2/2cxlEDf7n7jDWRRYJbnuYlksQrXydOBocVEUdwe1dYh68AJ46\n47uk\r\n=mnco\r\n-----END PGP SIGNATURE-----\r\n"},"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":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.32c1df133.0_1580240579765_0.487255412561189","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/typography","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bddf0cb67f16aede52dcaa027f1b572659512b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.f3adce86f.0.tgz","fileCount":18,"integrity":"sha512-HMe3UuuCxcaCITCso3Z2tm0KKwqGxFHOA6RNauLxGr9mDH9dQH50Ygq/f+xoRjgyCGeH15vnxzux1wMWvc83GQ==","signatures":[{"sig":"MEQCIC8SLiTKGyCnJ7vKra8ZTNlolCFjYgy4tH97yoWSDqiuAiBznNPolUHd7zhJOdjdsClSP95DqkIoJbAdgmFXCX7kqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKwwCRA9TVsSAnZWagAAbUQP/j6N4ChgHwb21ogvDe5W\nlU/s1BXC8Vl4jG+rDPSB7QvLh06CeacRl4jl5X4Z5k7kEjm4Jt0NgX4yeiL/\ngjDSgqlV6xxbFirjiLZw9vnJeV6nu9PEG7OjTXsQ7j76+AxWSEc1Ztai/pFN\nBMNrmrd+w3Fwc0q5EqJqSU/5cpWGykOyXV6qMmDOLKs6kqhMNUQcMXdJ0EJN\nmVrv+ymd8WTkvb9lmChr3yZ+xBwiJcbvgY3YX2XtkOTXW0GIpeGoJPZ90JW7\nvVS8Qg2iIe+F9HB0GyoEHKpGHEtM7rRPpiybUBPIKw2xmoGdJmnSdocDqNBv\ng3PrBbrbDM5wsBCzrkmq0NebnyKm1lX7DaaN7xLxcBccdXhPEFPdnTKEKQWQ\nmCCZ29/t2oKiIDRQ5qAHK0B1J2vY8JYSMQVTllEoJfmpaV3SOXCR7QhYfBi2\nMOJfeg4jNs+LmDTr5OOvG2dQ3ieqi4v7T6esMfJJCZaKJOrE85QEC9TcRIwF\nvxGbVLIl6smVQ7PMmu4+2CPEf1sKWI/H4vxH69lyYDZX2FcFrKzvAoRvxO6f\nHCDTcB8tI9IoA4jvxWVKPYhPdzu4tdw6m5I3MaqT8aRBzKvpMjVyrd2pF7Jd\n8q2mWIWnM3170mhxpgD4geYDMq385wKiDRsNwkyC1L7M3UVz5hJhVffa5g74\nxV5l\r\n=ekBt\r\n-----END PGP SIGNATURE-----\r\n"},"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":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.f3adce86f.0_1580248111668_0.8335218267819549","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/typography","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a4423f890.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c713697790515465f476ebafc02800e86dba8e68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a4423f890.0.tgz","fileCount":18,"integrity":"sha512-m3Go5rRYtmIaLomujwjdQYvGELdULfU0qkrs9xj76ChrVUKpDvCjolcNu4EJFeCOLhf/FKkflW2eMJAacgSULg==","signatures":[{"sig":"MEYCIQDYGcbI8xoyudhe9KL+Ci7CCzBickd9aSXUgSQsPkC8cwIhALgScCVuFWVUg5UQhqu+EBfO6gb4aSrtybEANyrVthu/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfR3CRA9TVsSAnZWagAAkG4QAKHt71PPAEsw4hlaMY7T\nrnXs8KPts++PgEtG31LCSqZ0uQN6rMIbTq3ujtC6eexm1JhYzEPVl8/gxaT4\n1t6cHcI4Esew3q6hQj+93Aw8dTfvHEnv3pB1Ls/Syos6YP6xpS0KGjAco2Hw\nqVig4t4tNXr7RoYc8gnhpq7uQscwz6XM/3opw6cQSrSxufYtxm497fPitRiA\n8saFaEPR3zD31KZANtYLWgck58IsDNe4EfhVB5W+mWTchcOWQ7x+kaCULkZ1\nZHFKIW9RZmviGY1fbWlMVG3IZL498eV9D54p21GkRIpDJzb6pw9P5J83qxKs\naBibca5E8BnbGPA6GsGVwsJaqIlI2+kKixJBcNirtOXGiAx0Hsp7mPYOBVLW\nDWUASjfntqs8IEifSEEQ4gDSy2ypth1Iv9oujr5A0zzEjnv5TVt5/1E0fvMQ\n5hrVVDugNZRK1K41d0c8y6XvQCy1Q8u6CSBJlS9wvOWkeMGskLDFBjSONHan\n7/z86V1AEkTQ+PHlplCFUzYNMJrHF8HYEyn7TOMlwr/22im7HhmCmhE7kfc+\nBB/PLvOA3SyxyAD9QiW+stiZf9rsPnaSGuvlbULUT+ZiEI8Zkw1NzAUTbNAt\nK5bKaWUGnATodrbIYACOAKzUFQ6fGG4PIKacKMIK8gwrUNDlEXWkWviqJkeO\nktGy\r\n=Z2te\r\n-----END PGP SIGNATURE-----\r\n"},"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":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a4423f890.0_1580332151058_0.13623782722674016","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/typography","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.9351f167d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a584a71810331c8aadb5f2427f033a0aeb87fa25","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.9351f167d.0.tgz","fileCount":18,"integrity":"sha512-PC7sDjzF8AoVy/s3N6LvJlwJz3Yk9u+/6CXN8V7qtyrZSJNr3kiOiYJnxwilOCMcEOZfooJMSRdURdsKTSKLMg==","signatures":[{"sig":"MEYCIQCO8I+Z3vMk0perwFPBGyHmh19rgOx5SqSCJn07jcAu+gIhAM3x2OlkwaZRguVT/53ertqP28HBzbDY7uLu0nWafBW0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9DCRA9TVsSAnZWagAAwMgP/0w/M834LTMb5vPKuSj3\n2zi7OUPWtTcB+0XEbWeSEqoRno///Xhvx4D/IOvV94bsG6n99RY5bpHuR9Mj\nnAEH2QYs4nMdGvUIvPDMQCPSprsCWZuJ1OugxOXY8cG41gpV/n15UlGBbzHV\nQrrmWmiV8KzuwxNa9OXehKC0dZqNLxKFPKxxKSgSFPG06NwB0WUxCeqPSem9\n1+182DtRc/AwZvobZ3gdnKvCg7EVxkuJ6/MDiPLSPQRweWXOnb0tmqeJOk0I\nh5oH4se2AcgiH0nrED/b6Tug20VPrT5Sc1CNOR6hHjw+n4GJ2TwxPUInclj0\n91N+7TkvcUYgCdjhD5vquPIbsq2SNJFIa+Rp8ZlAwTC0d7mTmZMmhxEM2lkn\nUmLrcuv/TpuiqeqclO9VWyGhrBJRLccdsi+HviHQf3mZAhmkc5kO7FlSASxj\nM7SsIwg3ecuvF/vMFM88UoozJhU3AiuPLBIuQNh58xfm7BeOCfYAVDLjS379\nshvn0n8bHC/kOnLF1+6D88Sk/0ku96ONcAgvhKyYQYIIsACnGenZatNE+MtT\nYg/ESRAMyfVfr/70gcpGlhkCUr7/jgvvYeORQpDflIVlWRwn5UTCOZ6ZERZy\n6Nlr7hZVffoOFwhd2iJ1kxDypZdfyZ/Y4JoTSf3K46GAigdQf+KuQVr9Im64\nO55F\r\n=OzIA\r\n-----END PGP SIGNATURE-----\r\n"},"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":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.9351f167d.0_1580334915241_0.13766328029022445","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/typography","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6d4df1025c8b2dd28b93665380214f4c373c2c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.29b89dbc1.0.tgz","fileCount":18,"integrity":"sha512-zOVFvDJTffBVjQv10a6KEl4HbNmXBzNi/IHHtPz0RlbxBaW4NC4oZg5jVKI2qOIBJSXCcnsqZvhEUxRzsWUSkg==","signatures":[{"sig":"MEYCIQD2jy2aTzTsC8y1IBcZJmMDjhGyXstPerd4chll4xM+nAIhAJ/HFJ5rjJ1YxOonDong8pcuNgogq8jiJpEk3woZAUkF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgQ6CRA9TVsSAnZWagAAl6EP/Rgs5qOFpTPi3LDLpDZI\nxtjKXFyOv/W42Fb3fpCK2lRgEBVrcrzCFq9ptCMiMYo346G83j/UV1jlWseH\n5qdjuBNEerMW65eI4DBeAQdT5tX4vcB+ihVrLu84w5uTV2UFfqr5/LEYyXFK\ny8rADezgAhdG/Vz76Vp6L9QIP7v0f/RDiFLFalkkjAyBjQpBquIdrMIs2BFX\nc+wdh5lZKBLJGdcncGF+OXm/X5JbbrSaLdt5tkF3wMdZdAujuWDyhE5PdXFh\njZGLkC6Ac/JHDEndxr0nhLKDoNGDxiMr47ma1Y8cXkzAis5bZRLxxz6M65S9\nPC8xXr3EaIqR9jXxcBUp17xvWTOJyJc3o+NwF1uQGE40jSpnxeC5UF4xyX1X\npsOzl3AGLF88cJiBicd5t0zuhhXW/vSX1xALHzKpdJQSfnbSyUgq5R5ETWoa\n1etskYyUO5hpczw+uAf9on1ADpi7pz2PYY2V4Zjq4Wd/CsxP3NNms1Iri+xq\ntbo4rK6DUCwT/pxEVWsw2IENhwULHrbua2yyPvsRWdWI/r8C116x7hs5Vc4Y\n+inRrcXvAoPfhIJwuTtWl95Gtunuw2PGkj4qlLPu+fTRokwF+Tqo3VfcVUNQ\nRpKHATXRFKHkEAjAeA+TSHWWCsBlHa0Fpku1zQVJ468vQ7wmpdpSDGKZZRqO\nnQFc\r\n=Ym/6\r\n-----END PGP SIGNATURE-----\r\n"},"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":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"anonymous","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.16.3","dependencies":{"@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.29b89dbc1.0_1580336185678_0.7528280062215689","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/typography","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.45985457b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19618c590f5d43db7338fb1dae1f5fc33288e0e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.45985457b.0.tgz","fileCount":18,"integrity":"sha512-/gQEzsz3cawwweLjsjaONHgkDis+qMU2Sadd9vaZyisTAdzOZSb1fD4a4221C/TLE/t7TQ5EJhiOAFp9Bmdvzg==","signatures":[{"sig":"MEUCIQD3xT6BTZtLzv3CnUAlgZNXWJhmYLop5v4QubnrfMaB8QIgOUB3B8JrrzkZVXaMlVd3RdKYUOdwkk9m6S33fy+Imqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYMCRA9TVsSAnZWagAAPeEQAIBbr7CrLlthVwMLQNwe\nQMh5kh0215+5EQTBriuQbOsSud6KYd666odY4dFce5IXqMG0yN7TJcXKIWq/\niT5l9ELhmAOjxnCtYVIEapCDzHTFAXKFGP7X+Y911C+RdUaw/exz5uW7xN8k\no7q0P6MFvuYi7HyvDVA3kuYEnJXEBWOunI4Pqe07QanLh4b+58fnCcEEk1Au\nypAfj5MYUpM4fLUinGzwY7Z/E+pnxW3zNaEsjN5n47Mkn/NJ9ZVtSkObTBGW\nlnaUnQ6xN24fXx/47IEhocfza+ziQlw26+PaV/lECj6Chz0rb1s4LkAAMj+H\ncfOdGMFIy9FRFvRTb07+yYNrDOSJyD6A7bIrv1VJFnvAsqcP89XLP71sMc8/\nxydH2AD8sPrKADvRdjMc8pXZ5VJOnZXQ5QLG7G3gkamUZsRVCqsU6PV3/S1Y\nVAsOY/ao/3IqYYowL2tpHFHxh3vfy7kR1W3HRACMnb3XY5NYwMegYttW4Swo\nxr4NCxh+fcG34ReDQiSTYBB7V1KNzkQKIYAIc6Fnq1+d/OFMrAgOGhVSDQMC\npsb6AyQb05fG0fhOR6CyRb8lWTyGL/WedqAh2t/8ZeeKYmj86LwKuGWb35Fo\nm+NF3V2zPqPcWmInsIdvlXtOEk7BZYpLmAlmun3deOfHEFQ6HXNee3K715X2\njD+p\r\n=MI4j\r\n-----END PGP SIGNATURE-----\r\n"},"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":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.45985457b.0_1580340747802_0.3509776517120926","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/typography","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50c488427d1425f9ad0c615eb7aa237e6771f339","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":18,"integrity":"sha512-t7ZOFsFzf6v25XU7fg5cL3IKuDqm1ZqcMpurYZHjekH4TeRvcWjX7AupZ97dIyBuW9BiDHpsIYI94T0E+MQMpA==","signatures":[{"sig":"MEYCIQCAKlzj3IPZE/nCKYtY09soGUKyFv0DkfQTBBZPxBX7dgIhALNtYjp2u7zVqxDPW7JU8UuL9a0K/WZ1u7/qmgeBEFe2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxQxCRA9TVsSAnZWagAAuV0P/1gZOPrMTUf76BkmuOZ6\nKruTxL/75xL/jDZDrtgFlKgg5xX8CseESf+tqFCMjiHmmQqoRvFNihtnj5KF\nnFDwx9j4VJiHcFBDteW8TQd3UW83wLc0bgM4mtP+Nys0J9I0oGrHb/2OWCEe\nGooLHAsoDuQbVpZVf0oC3T2IUYoylKmGaECtmMyglVLV9M/juM/TsbSGhzT+\nLT1z16T2A53CNr6Z2GM22YbHgTTWwYgERPKZPmBhQWtDiLi+9t3c8mWyosvQ\nJBEzMkbuBWn7WsEt7PGe+uHghl2wAf4x4+Bb+7SPRMSZKlEic6lBBK0DBPYT\nG1BTm8NNPpmigcHxyzNJ0YTiw34t5R2nNq63LrUZhnaFafg2nt4xX1Rgq5fq\nC2OVy5smQBr8PZy/NJkc5k4hiWMPe365wkoWb/D+cxgkl5lIGTcsMGUsWhoV\notmmmm9C2xu20RdXPpowi1z0SDbRnXiJAULHCxQnv/7jns0S5K+bEz9tSjNK\n7ZXl7kh+9+3JBNO7uNxGAePO4etL2uWlnD8Bj1g2f7MONWj21HOcvmLTCpQB\nq4gG8QWUjCff7FXTh4xVtlz4c+tDvJD50qE/Go4iUaLyvybNEnR9ZWIaI51c\n+RxSrxlhiE/B7ubZ/7RpkjKqTkxsfq4FhYZRR7S7g5u++O3PTp/ojgGGaEsW\nCkc0\r\n=+jyO\r\n-----END PGP SIGNATURE-----\r\n"},"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":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.a1a0deb3e.0_1580405808480_0.357135000166662","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/typography","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.181486643.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c929ed9e556f067045b6787592eb9c027f71797","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.181486643.0.tgz","fileCount":19,"integrity":"sha512-qKrYK1suhhnSbQSS6d8F75yZe05VmwW/SS77eMoTnxJ5SGV9BCItr7gowuMg4KdcSOPjzf5cqvpsxoQLjN5t/g==","signatures":[{"sig":"MEQCIGvToU9Y5mzyqIfsgFTev9GkqDCr1Jwg8RgMXZBTnQtBAiAZhrPlsbSxJaCVfPhnYKi8vBKs8VsPgLyVKAJP+l9rjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LTCRA9TVsSAnZWagAAt60P/3OI55A9z37+IUX+ZIgS\nGF7+3wavi6fqSWzHx3eyjdIUBnK6JTaO4Kpji6ceZTaHMFq6JnSfY2gMAFEU\nQJW4Fn3siNDEu8hyIeL8aNKl8eRPelxuHSKbJwIicE4dTVKP08gK7+UlRMdb\nqhVl8BXPCsf/5DIwkGWDrGqPlSLX433aEmg05WWja/zJhfhg51dO9HuKL812\nt1ohcujZs545X2rZhduNtHBcf9xqVW+1JdMdbtuZdt82CZiNCOAFO2P2GoAs\nWVgdNxdHEHtd+G9Hhqnsbmz5ousDQRPXWMFhoKn+aGWpOBCdo4B1WbpPd01w\nLAjb7A9sofbB+znlQmzGhL38r6AOfdTRXefounkzAKk+0iFm8edsInf1/8u7\n3ccv3ZnYDrNjGlmuqdnjS6v34khwy/1AQt4J0FZolST9+dxNkV5f3/Jc4Fe4\nAhPkweuIKEaPU/J/auUDGKMV5Dvw54tQsp1E6HcaLLrv15+ON8C4cKN78uCB\npy/s1DlnDpkAsTLr11aQcVgnKsBQZQx8BVenuJtt7XCgSN/RgGF/41FaQPzS\nEsv1z6MYHQxnusVjcGH78X4vEG7td9kdRjhxpVA4Updo5WMIeXcmMl1SBdlf\n3S3j445sF4W0MuYxh4cGT946W38rmZaq9bsaNJdlhjSEK8LB6B1Dcvtk2fsW\nbOA9\r\n=fu+r\r\n-----END PGP SIGNATURE-----\r\n"},"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":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.181486643.0_1580417733524_0.24025340932179629","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/typography","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b04612ba2d0b9b86b6a192e73a22420ad294a55d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.3a85313ac.0.tgz","fileCount":19,"integrity":"sha512-g3Q9xBw0ZumhN4l+HdfTy9txeosz2Bjqm9QtNjdKpe1+GOXc95i2TDMZzuzzh0n7n/+7kTlncspvGRxlziu5NQ==","signatures":[{"sig":"MEUCIQCKhqxfH/bswHJh4/VdBf+aBPh6HtiT5YZ1KRx5THkSTgIgOGfWByze50aaibuSgV0gt5jAZtWGMw+cf/ZwM+R+BBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRZCRA9TVsSAnZWagAAM4MP/3Wj1PERdB7JVffrEJ8L\n4rhcJKq5lPWyEx18xmfUUnX4cFeWgsAJJExx8fzwxPxOGn1yfNz7Ho8H1DHD\n4qF0H5CGvOW4oz1iZCH6ra/hkyRrJY1PrniYMQS9muXTEY4QbqB7rdf1eFBx\nFpQi9F+WHV20pMez+Knj1BtwQX+RoekkTZTB4ByVAIWnHdq55s3oN/ic9ZbI\nGXQTffJHiV7JNagcmw/0dxZmw4i0pVnpqN1yKNyjmEKpEy/cwzSB7sdniSkq\nojqwzQn7lPD3/XiOlPs+HddEJq5hnMOHWqxpk4VFM6IY3NuK7xlZRcYt8b95\nRqwNK/xU+rti8hbHx02egtJXmEXwHeGgsk7ofk/P8HfVMJktp1LO/WaKiiIe\nekPWGXze5fFu7qmU2UqMRZQRV0vyVDs22cGP0Jl519Bd5zALuU2135tzIuF9\noyeBZmslsSN+SyX2qfYcp6J6WDR8jLN9Z79ssTGlklAm7DMgpW+UpeF+5UWm\n3jooMVCvjM0fhiz+BYPV4sdPqKmu2l6OTkLjoiqvMnyhAacw2V/+c+qQEfF6\nzH/BfaPJjmVwpw6hAWBMvhMZlvesnhhVl5g5bB9/6yfPRGZdwuwpRJegWaMa\nLpefsOaHRdkr/DUFz5GlqH7uon3NUiedrxxfIdwkHZCRiFGc2Tn4ESYddMhF\nn/GD\r\n=NU5m\r\n-----END PGP SIGNATURE-----\r\n"},"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":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.3a85313ac.0_1580487769247_0.5967695093100127","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/typography","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43510a654d7d91c149ba1bfbed81bb24f2642eeb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b6c7f624b.0.tgz","fileCount":19,"integrity":"sha512-bVqIXYAZS+0xpuS5cv9YB0dZDo2+jueNfWYnmPElYbJNlQkvaWsqwmcKYZOUM+ZAcNppqnhRF+43Jlc7DT/mhw==","signatures":[{"sig":"MEQCIAx8UdHYixgpEJUuFKSaTlJWcOMl/CXdxmt/ps/qx9DMAiAIS6wuADzfBY4h9cV5O2Ds1VD4f3jVZcN+rVq/O9iWCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF2xCRA9TVsSAnZWagAAxHcP/Ansq+T+Rti+eT6WAOoA\nNQNkfpvya/viuV4KkMekjd8agSoSzIfZVIlncZm4djQQLeFCCUbUcTMFRgnJ\niOui6um/V+6IUPNPEOmSbK4/ntFHt70NMLTIo/Hn8RzYFpX8cAOEtXJswAi0\nDGCyzOHEX+6KO4Qvu8/zJxrbvubL9OxSsZSjLe9v6SXMw5Z5oz6fb+rs0uiR\nkGU42CairMZpb0jsaUQX13bFE9tylvi6PCK8ea9VzjV0JdYHZd9Fp/iozU8o\nKc2n0JYhhr2Px0niYPHbdkyiyoZEAmF7KakoZBOOhqK655rMz2LAMTH+QqmW\ntV6V60GVQPQRPH1WuJvrIT8B42HutN9RGBPM2bepbwa7Ofat5/AluJiG7gBo\nbxjzEh5TykskvSAQy/Rd+k93tDzf4PTZbwD59wl71frNNZG1RqZ4pUwXga8F\nYsBnHivcpJzbQYDLNUR9fdCgqlQUEvZijcIYYLNoYMGaDb5u7+9PoRtrzZlF\nSLwAgCyT80s46iP5Z0fC0abXyQgYjSWVv3e20fk52evmTwIW/p8KTAWWmnD+\nhIKC2JPB7IQY+TVbj33QS7iixlyQF/DSXwfEzckDh2+ChZc+YoMEpxdgcZNC\n3v+vd8oVCxl4l1aFP06HaQyvT8QLKrSxVKlj+WmBUmEW1yXUYnl24e1LMsxJ\n4wsI\r\n=i9N4\r\n-----END PGP SIGNATURE-----\r\n"},"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":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b6c7f624b.0_1580490160616_0.7226391856916856","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/typography","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c36f3a53af0227920db15bb500b39787546fd74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b3f70ebde.0.tgz","fileCount":19,"integrity":"sha512-VdMXEGj/P8Ga6O9r5p7CBIN8rw2GEuwR/mXRGEuezsD8XS90z7Zj5ZuEmd9Son3ZuVVVXi/ANmoPyuzBoBDqpQ==","signatures":[{"sig":"MEUCIQC501lF1g1n8O+X9yG7062sQRNM9tSM3dLa0BfaXjWm9wIgf2Ds3JSUy+y/RfeZpX8stGPFtckFN0LPAq8PGTn8GYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImDCRA9TVsSAnZWagAAZksP/R4lQmDQKKEHo9Sr367u\nwb7incNPS4z2tsjOE6NuU7qMorhsRkXSByYxUlPs45qXBRUb4XAwBVn8ZsXv\n7eEOXnemieVFs1YbIj4oCvJRXxtsS5W7YN3V6jtvDuA4hK0GfoDeLyH9jdoT\nhBp/9hG0Glm3i56bpyANWy6khZ9gFHeeM67oM8t0Cn8bdyIl2b0vchZdrpJz\n8wNosIheZUmo2LWJTum4Ztiljs9WE3KCHKV6WfUSwEhSykqBWrnt6q9wgkPA\nNIBmKC1yVuPEEVTMSLOzQMIDCncwFCaa2F/w91nVFby1WAFvGz0zzPHKqZky\nw6aHVXoJtOd05s6GLb+TV8ygpxjJfV6QeMbKUpi8AG3TIqY1tX6awltnB/nR\n9rZ9jBLZIfkk3jBeOvKU00uDEZD3GVkRKhwua38qZ81r0glLIS6dqofFhJmq\ngvWlfdQbBhVfEPg9UAmOprs8cYnQAIscgcDFKCMOIjwrdnmnmCGWDsrGbjue\nZ8m2vPBDHOZQneKQvow/YB/0rpBnyerVBbgjjody/ygK8kDNp/nGivF969j1\nzDJQUGh4J+2WnB0wR5GsSisBR5Ti+4AkSpko6Kr3//GOlVMZ0f3DS5AHn3EM\nmyTtDDFOd3zsjXRyFicCZeMAP8HHydh1qJMxnUlhsTanLMaODX6QmyW/V5pV\njARF\r\n=VS98\r\n-----END PGP SIGNATURE-----\r\n"},"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":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b3f70ebde.0_1580501379431_0.5163617519727075","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/typography","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22b009333b8fe178401a8d9732fdbfcc1b38c86d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.3e782d8f8.0.tgz","fileCount":19,"integrity":"sha512-qtbORyx4PayOaSlxjjW8ho6wP4GkdBJ/26tFfSLRt10SqIIMRCa8y5XDMSLmt7G/WwLbGVIwuiXP2oQLxwn4bg==","signatures":[{"sig":"MEUCIFeBfKkdwp51AEtqKHVNwOtTEPPfMUzYz9Gp+/o7VO26AiEAmVDlzDr7PKDJQEq23vvqTJC/PKgZY9J8WJc/NaBRsBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiH3CRA9TVsSAnZWagAAqmsP/2ToDegZKu3Nunvq67rt\nckmNozLHN/BFityjaLGUsj18QL7Y0qk34hnwIh2WfkzPnpT702wy4+78CC9A\niXLL/hP5cDy3aNHH4bEalnCzaoS6UOQP9a3+8v9H2Uzdgs2CDll1j570CdIj\n7XxE9ubZX8nl3rWgYBcno37xF6IKsgqpu8pPr5OYn+R/I4r8UAopz9XAB6Vm\ni6vsPFAPmPw2IgyzobYsPZpJsdukLzwrstM9OoKqHtH7fwHg44io+ufdzuDB\nhJUfwaVmrqFhTK3+CzkdZO4kqQL+jr47JfcPMcFMPMTUFGZAB46N8PssvrkO\nl52+ZDrVsO1PlPMxsdtGW8d2xg7Hue5w5ioLeqbhFVgWF/Kbs4EdNGSXHfL5\nAYLZtPndtm/0GQK8EPtCOANvoJp7wUBJFLH+leIs9apJ96cWdMfavaIo2Psu\nO/skQ4DeCUxHTsazZRcPrrUb4s/jfpCylIaqQ87DD9CaKaEOFVWn3A/JirIh\n3fttT9sy5YfP36P49Gxoy/KUh9+6T1Qi0i4K2B/xp2TKk0ve71/CkquNKLyr\nDturXAvy2rfxgAfOXuSG92TQxPS96ku0HvLE8MO2cJw/Ub0BLBhTT7KVWCS/\nuaqAHWWM1gy7zL6JHJ7IlfLx0uhdRx/pFWgZfLnC1V/ILDew3K8g5f6yeLRj\nbize\r\n=WxmH\r\n-----END PGP SIGNATURE-----\r\n"},"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":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.3e782d8f8.0_1580605942977_0.581468843424993","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/typography","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.535398572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"504a21d6634dbea629cb60623c751c7e0c3dec37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.535398572.0.tgz","fileCount":19,"integrity":"sha512-k5gAHC5AQyqkFxUemSx4JZobWRw8Z4A9Eymm2WZ4ZJ/NDGm7xAaqv1DXgJzhZu0V4fK8+AulGiU6NNNPrtjbcQ==","signatures":[{"sig":"MEYCIQDu/rm6H5beAQroQSoOBtkB6GP9XZVpOmOjJUNYZB1uXQIhAOUXOQsf1yYi2JV+xdcWV0L2gE1V7tMCVj8WFLEu8RGe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGIxCRA9TVsSAnZWagAAKo0P/AjBSco5U4DN84NkYnSq\nxgsanNFELGu/0hhnQyr5ueEHB+yeK7L2XmOeFdFOakgZIF5U4jDYLPn0gB/O\nnUL5GrgpE72yeAjSBKEw6hwpFpbjt85Vp0g061ups6VrI498fygkZkdDJk1P\nuLQM8lUfZxQtDKW4UeXN/LA6ewheZ06xqrLS9awadtlqwwBzE4EoLByjeDZr\nrSvOsiz+fIpf+7uetIYAB6/L2mzBVgo6JvZKjY/SUADyiHpXpZvg/i9QHylD\n14v4cELsrX7NFInxNdxZHwKP7QRNyOahWfRPAWOinPCEYBIEAAgJFrQq6+ul\n7Rzaiz+xPPtM9LbgeEVsuyU9bSysJVLoewPIvrvWZ59dQC8T+hD2mZutfoPh\nFMFniQO2V+k87iCRklj1wAsrsZMJjwL2eX9NahyX3UnhNFf+8HCMtK+RccV9\n7YpBQrUkyK9D7KFzgiiVH7cengn3W7ThViNMKvWFAySBMm28CC/T9aOgkT7d\nRRTukY/UAsPlpn7OcaKYa1D2SSp/nzCSYZX5sqTFbZYa+yEfXsW+eQDCkdnr\nwKByowVsM7QDjux/KJPYzBwxG3Ue09mQ9VFuWMbsy4VzeuHg/7GEkURwC2EJ\n8ReIeeREzenKKf3zkixpll5b2MlFRph0d9BLvrNnefV5rxSQBRQ0iMgKDQDB\nfst5\r\n=UsAU\r\n-----END PGP SIGNATURE-----\r\n"},"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":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.535398572.0_1580753456617_0.5057986849058353","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/typography","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"296735d9871450471ff66e75b6dc705a19a69ebb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.5ff33802c.0.tgz","fileCount":19,"integrity":"sha512-O6HVMZpYV98yBV0Pgcoel+lzrVTmv5Av3pzdZGIUbccYKNi601TxCQxA/1+J7GtlJh8LcDRcnQ9Tl1ixWJcHrw==","signatures":[{"sig":"MEYCIQD6Dj6AZpHIGXdt8wPjDRhJB53u1dL/Lv+ahd+nLoBt+wIhAMy7mUGADFLAnAowYBvFsAeIr+hHP3ZAETQKrLPIdvCI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObHwCRA9TVsSAnZWagAA5TAP/jmBI2XEC5kiHtF0E4nX\nwsW1mFcKvIWuhJHQirkfTqOCuy3Sc+yB7PxwWIafiThh4rkgtM2IwOeL4TFy\nyarFoM6tSZ2VnbYMWDAhFHO+plJ4NDs+MJpYHT++qaj8a5y5EN+7LKt/XfS7\naQbZXBPt6TFBmuEskDQAjPLujpMgD9KXvQx9Pg346HsIL5vdcOMosv8QWFZf\nNz2j+X5PrJCuQOaswayMF88cnTqVXoNNAKV9a4LiJdMiYFuGIkFsZFE2tZfE\nyp8WZvycolvru+GsBXeNUhzZcXy43D86u9JyRQ2RBksmzNPnCBGiHwqzfO0j\nWzqpv9T3+bolkJy0Q04SsnVhASYiUQnIkJqSrm79f91v7Pc3zuaCntWsRU82\noSAxrdRiYngfJZdb9MaJ8eET8XQ9AQoOIrXIkvx3LyP+YQDOrFL01BIJU1yA\n9y+f+tSMwhDJcc8o7ze+XSYg8Xh/Jxu0PXSgrRyiJwYGOGwkWwwHeCnOr57O\nw/CJlvHLtz3eLN8Ep85lclEHIExrOKjZfsRzLJSEyCiN68LM4F+tv76eQXAi\njFEt1oRZ0dR4h8Pxf07adTWZVt6nmEMFG7MdVIeXQY2zvd4Jdp3ao8KeIK4j\nsXMuZ8RkMYIXuiCjkCXymqP/4ckMMOj15N3Czktz557/FUVRRLgeb4LzOl7J\n1XAu\r\n=6tns\r\n-----END PGP SIGNATURE-----\r\n"},"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":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.5ff33802c.0_1580839407698_0.865119695715614","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/typography","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e7c88256d9ece730bb89b3448731b2e41734f26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.1eb29491c.0.tgz","fileCount":19,"integrity":"sha512-5cVDwB4JIyMFXTI3C2mPFGSvSmPNsusIkNzm1x8aqajUmoRl4QTx6HVGp5E653hturzMzDypxZjQXg6uKuD5SA==","signatures":[{"sig":"MEYCIQCMMWv3AEte0+cCwcNzmAJwnMmpbEKwUPES6/y2k/INuwIhANmicnaKnaU/nKWZGV6Gz4V4lu7Cmobkf5SOMKkLHvPI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdtSCRA9TVsSAnZWagAAxWoP/ifh/rC3sBcFZHA8W9xO\nvuskbhgXITiN/jVJKexshXkjWSb2Fo8FuYh73MigkNuq2993aZ/TqlyRC0oa\nKMORG+g0xC3C9Xyb8m4f7ktQM14LaUyPNnpOcVWk2C3lqP+KtnBoEonlAoXj\nQp8shPgpyvooBTK/FIJhbEVF8Wm3IYHO+Y3zmwnKDX5BXnDC++R8FDw6Waz4\nTOiMf/v7/AM1MY4nXFohbvzpteeVTaOcYFAJULyuvmNPJuijmtvTfH0bKSZw\nM/sEpHoTrwjsDMLqRuD1a88XLglWOe4CV9M12wW+YHrFKxyg+lG3XWxoFB0N\nF62tRCUf3XOoWm0t4BnsVrub+Xn4eZLA6ESxeR+ymzF+J/skSvTzLlNRuuZI\n7eHdFYw61fRctEk6tv66UwnTPL7uGl7jbyacQUKym/NGUJiwov2VZ0j0bDbk\ngSVXr+KDQd9SFJsR6rJGgKdR9NBlLomwwW9Ayw0XSPPNn3o33+i6rOovAwRU\nErz/zy4zraGfp4DZEiKTWbKghooLSvzjLCbUl/1i7IcFaSJK2Kfk4+LkbLqx\nfI93pUaQXosaFgqHV4eWjEXB1AOJ1zTnaENIUhZkH+5o4G4Tq4svkN/Uj3r/\n6VWbpQ7Qx/Wvds6t0px+NbV/Vtojc7hvAFSiHUYPSDQ+Gme5Yx+xEbaPq/Su\nBeVJ\r\n=G5SA\r\n-----END PGP SIGNATURE-----\r\n"},"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":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.1eb29491c.0_1580850002158_0.3659262761846789","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/typography","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ee9405800aa9b3a1cc3e920c905328785078c74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.4c7154b26.0.tgz","fileCount":19,"integrity":"sha512-f8o/nxBGA2AI9UPDjnfA94SshKcs76Nez7znLSlcv13WKnDabiv+DkgP2LrBeEk4wIy8BCY/MNW8J53yogaDOg==","signatures":[{"sig":"MEUCIQDjIoP+K1MmX6OU49IbvTd72hHcrEuzL7VnWnW7XtPHDQIgP/qeIEGXphMxeAFDxAZPxdFhslqUeK2Rslj6grD54js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOucMCRA9TVsSAnZWagAA8a8QAIuDgIi43ah8AzbbzxmB\nR1Qx0MvGPxrxdo4KZK4qPxyjyH2B812Fs91wBn4DFk66DMAmAx9mu8tO5jDW\neu2XBcQbEdp40Eos3Y1UsVmZyPuwY+HFXE2ufDjrF/uD3/dV66Rp7XzoWetf\nwjIQjNn+noQgngWw0lTB0DWNwx9g9/t5KCylnCwWn280vVf/J5tt0ifbvdpE\nOqVhdkZQya4r0MorRLnWzs4x5ufJ49zrAKqxy5hxHuGfWzjyXnCl8Ydw+HKG\nhRXf1tSsNLcLPxTnkt9vwZPgh16OSbdkJR3+Lci9geN3tPUqyvcEvDPRuQJv\n+YM7/TCsNSrd76kOKa6gsLa+av/ZdzfR7HzTnDA/pXDiQT/sQZVsLbMBAgrr\nJvZxq4MLI/NcEuZk0zBnkfmT4g73zTqqDgDmd/PZqfVr6GTkTR4OEehYi0zl\nac8Ufpam6CJ2kdxQsChehSxmXtc02o/mfnynvsi/kiOUsHHlgWFwZ947XRd4\nNvsmSb+/i2OMK/tu+vsknGrofgQec85Iuk9T6H9qTJwskUdUB+KMSTGddRA1\n4bO0inUBLV7h0uG4CZAIrUyMqHbeU3yhVx+S4Xn8rBrdd9lu0+dkDmOEAFVK\nUIhtIrreZth9l7nPHixaKeVQJfPRKNLSqlDxBFAllUUKdZLiPJQHV7XUga55\n6P0l\r\n=YSn2\r\n-----END PGP SIGNATURE-----\r\n"},"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":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.4c7154b26.0_1580918540447_0.05250705850895532","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/typography","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01bef561ffc4cca7662e27944a414613e10ebbdc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":19,"integrity":"sha512-r1rk5HQmmUkW8jNQevUfTBaLEl6jymLRUvx2Dv17qDETxNZN+s0Pg6oYbbPzuAk86ziihgDZoiUX4K6G+3mHgw==","signatures":[{"sig":"MEYCIQC4EBaS7edl714G2ucVyeySkgPLG3whQsR0XcCSsOgIxQIhAOTDVgveqtTmvfbUKkTj+44qLxiXgJrcxuK+cCE3v4pz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1CdCRA9TVsSAnZWagAAD5MP+QFOBNgaQSCxy+9KrV/2\nDZqIbiDAnaUwfwt8/97zgHMBJCzld+ZtOZfgRdiioSQIeZBIFM8P+A/at5du\nfZ7hKXQ8lQo4kXi7Dn1q3FAD8z7vd574lw9BOpU9uWdO3vuSilHQ44q++URh\n3UKoNjWk6ijpZTB6pkumqrgF39n7Xg0nij7ZDCUsyDOZUdGoZM7u+GAuTRBL\nyhCz1i3nm09qgAwwZl025zEuetQux9DEi/8g3n5BjjCKq5jRFRo9CcJV3ByR\nOXCO1/ggmjvYiABoeyDEDnS7ix8xxQkfARScGFo520eBrrzhcWEQouoKefhB\nVPpZ0HlolvHqYxsd6ldShL3iLpi9oRLK5z/yGTBd1oVohRVY99JdjyYOxp4U\nVT7Ny5NbG6BFz5edyg35wm1Ec0weEHhbxovrb9CtlVWoPyvX+Z4U9jyear06\nvcrR6gcMb2vQeHxFFGcVTiAiw8mvxm/Fo4t6Xoa3KvMpTPZO1KOaTqj7ddg3\nGvR7/qr/X3Gnmwuk1+jmRGltLbpC6gZYdbAOGb4TcQYYkNmWJEWJdjKnteyi\nTxCJ2fRBSoKRbllzzEPzKFWmSGB/Cl86ljiwN5oQwHT3UmWra8ZDz5A7oyg2\nG67N61nN3CGv/nx3XyqBbestwncD7vwi7/jGqbvcrmyei0dKqAvs8Ai3QbLK\nPhco\r\n=Wtga\r\n-----END PGP SIGNATURE-----\r\n"},"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":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.18.1","dependencies":{"@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ab5f49a2c.0_1580945565076_0.73692803465586","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/typography","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c1c632840d2654e82316f7dd9c9b7ae719d4042","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.c541ebe15.0.tgz","fileCount":19,"integrity":"sha512-GVGBeq4KU4iX+Fvuu+oRA6NfSxjMR8y9VAJOlhLrolqKPGdSLyJNlGz3nMKGtQNogFWYL6E8jf3B6mUcNI5nKg==","signatures":[{"sig":"MEYCIQDSFqlAj4X9qxudFsIJE9Ze/TskkXFblXadJvKX3BaYhgIhAPyeH9JdpmrTjE4+wo0wFtk8KG0aNvlO39HNDN1SQFuQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNICRA9TVsSAnZWagAAXVUQAJ9sVjsawu2cw9ZEQ4b6\nMKqlLEFA3zcPk2/IcQCCxo9vPKVi6D7oCH25HwGPPOY21Mqpyj5F98ecyrn2\nVjaxKvsKtu4PmeP24kytpRTmTZpnV3xOYTB86I05U3IbiC527f22UJ2hhBvz\nyut1xGwOmowea1HbnBq7M4D62G1o0oQJ2fMs5omkTEqdtXpdRvIvShp0OXUy\nwPkgYrA2ymiwMoqut+bh0HB+z7rvpAFNkJbQ0u15YmqC2+EzruGe8LAXGbRs\n1b6eN/jgQFpTa3vPDWE3rlxL268VJgyUYsUyZtr2cOaND9hg19RHQN54CEuJ\nLADTt/wM1prR/AyaDJ3jAvlMuL5DRqcbnKZ04U8Rp0X2HF1toAqqrIdU5Jc8\nHwhNYlM5Zw36tzuKMUmGjkPbMJMmm89I75mBW9z/6wzKasm+qVVrwOQ+eXS0\nVyWu5Rz2I8JkJ3qI3YYP3E4xyRsBFGrStQQydqlwcn+f5VN82BD76WKIKu9U\nukLZIsWIHCnBl9BNxx2qBBRR/u1uBwPdYB2L83qxQWwa8vubv4XdB86K94wv\nBoG+qqjnxtQdfLk5Yeh8tkMY96ISxnVf2VyFmwUB2ocq+0IlBXv0QV3K6dF9\ngZ6MF7mtw4Uld9CHBZUwpKBf7Edgjr4sgYQAFjrphQIiDIdwf7HB/56lG9fB\nwQZy\r\n=3CyI\r\n-----END PGP SIGNATURE-----\r\n"},"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":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.c541ebe15.0_1581028168593_0.7789094917988733","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/typography","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c3a3e5712a7efdb4b894939ee335c4bfb148b8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.98f7faa05.0.tgz","fileCount":19,"integrity":"sha512-VBd9uh2FqgiLy3pNTx3R5i/jMhv/K6LN5gYUi+6DLtJs7owLnBvtffZOAhwduIphP2xT4I9DPr6sF6+l930wlA==","signatures":[{"sig":"MEUCIQCQgxFEBWTdFU64nl0sP2lyZPRS/5tKQxnJYZ/+6PZk2QIgO7j1TCfLlWynzsrFzJCqR2ZfyeiiRG/Ze2TtFK8JSII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbiXCRA9TVsSAnZWagAAwRcP/jVcnPjk4T9c7zGe222G\n05QZASlY0BfSNGW6mlPKzF/PD2jtHL/iRUzjEnoh88afKkbzH25zvjl2HQmz\nYoLDf1G+xD2E+8dte1/h/iAVMA0U0YEYW7Kqwvg00hJzFwN3ngstLn/WbXjt\nN/5900BkqgDv6ggQ4Lc9xzFMmvcwPp5say7ZDoWIC3izIqZcJDGYMCJeETpu\nTW2ixJ+Dp29DM3Sp9g8p6+12L7OI9ITrJ3zZ/eEzLQDKTC2g6UIfcKtjs4YG\nXAmpS0o1VZj89uL/DmLKaB+HDDb5Mli5rn0O9yYMSQ0qaJKJ5jvnlRbiRK+K\nNHBX85KE5t1j0HlEkt02J6nkNs0j3v57iga71cQH/oZeWm5RPEtB7PUxAOF1\nVffiGyhQU3p0PlbjcqwJn4ndvXHgL2aAcusBZ1j+SbrRi2TSrYnboLeiRbzj\nEKgQqBd3fgbM+zQQL6QGceRD1JvR4ACoJOQrI5gJpt14u8AMI9MjsyJ0N/JU\nqFHLH9tGo3UzCY1+WalwXzuimWEmJxKPHKR08l8pf+QVEPhYW/z74Lyakh2W\nqaVMp4mKwFYlylWKs/1E6gO85Qfxta/T6AZdVC4bQFC5USnJOl1abe2HpewR\n6v8gmU9jRb6hE1pHKmFHdRiW1aJ5Sj9RwPGpefr/Asv03xEYmS5kikCvgbbi\n9cB9\r\n=HJnC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.98f7faa05.0_1581103254762_0.8261638182043791","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/typography","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f8c0cdb667044035842f8f46611aa39d818419d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b4727e43a.0.tgz","fileCount":19,"integrity":"sha512-c8GEpNm/vtCj2/K8L51NlGeSSzOApc5IKbl9L2qIJAk3chkZX15CoPmETU9RiLDrenpAghA/KzD9ZQ0sOyaezQ==","signatures":[{"sig":"MEYCIQCL325gW0T21zY8wzPC1amE0DsT1ogOK1YAsCYEJ8/I5QIhALv8duGSug2PjgDAwxurLa7vsGDHGZpgbTYrHGRHmmhx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCXCRA9TVsSAnZWagAAGyUP/i1DTHOifGHeq2RbAsbe\ntVjnMxAdQYf+xyroruK6RjpBluI6tOrPCuvSiiuPjqeWC1BnluWX5txkcat5\npN1QSp9NOgxaEbj39AaORQFQ7qj8Xo+cau7ESWOgo99Un5mr8qh8kPJzGtEo\nYIRbn3ee0nLdVpq1RKcM1Gz38Oe1xGYiXDWLdTvcd6yZFwYig/F+TgNWl2lO\n4X32ot9aJpfwDqTTXgz3Gg89IQUedOqqEzW7iK+BxjKnnCI9p8jKRFOpe6gX\nQsrnjbX+Yudo4uKbB5LdZfMHcPsadY5R7hQTLjbvbXtsl7YMXDnN7LvE2ejY\nsyAl23x2/kj7uk4d/BAFFt2Z4j3QJwIB4jViMQqTVa9l8SJJRJNLwCeW9/Ui\nwm8A5E1LnpdVpUPWQReCNZa/8mznAx9MIbKsQON5CdFTutEk/9DMhS4/A2kx\nj+eC2bn6iy8Egd1n7wIYFBYuywDVyuzkRJluB2yqJ97yfuh2VijHMW4Pez5J\nQkJxYjLT5ug7YTTTL/NeIg1KklF3v/SE47kQFDkxm/heAMAI3bAnFSOYJ/Im\nc997ED/p/nzmrGKWhEdFv+HXIYaSSeMpcWTtREjpMvFMuKJLWA/T1rRHWGvV\nITadoLn8cb/oo799vP88cDSTnTQ+ntaQOlUqUCW4/aUd+9bSlfNUgwW+9S8y\nYzgY\r\n=siCI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b4727e43a.0_1581105303010_0.9596488185653265","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/typography","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40968b58c856687936e3654c416700a2650f3b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.91d9d5a65.0.tgz","fileCount":19,"integrity":"sha512-6EEmQewuatwQDZB2dlDfOYKpTvhXTFMkx1AWMgI4Kyd6s70AozighKiK7i3p6S97lg80i67HMfsJjpnUE0BgqA==","signatures":[{"sig":"MEUCIEO4fgMcGdN/Zv7QuxedcPpC4uqQHX/ir6TACNwDCk+zAiEA+Orm+ro/MAP/K4mfG2BnhJ3b2VDZElTqX+vqa6ErzZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePeusCRA9TVsSAnZWagAAK0wP+QDRrhP01gMUFajNhyCp\nw993guE3q3ICk9PYjK3JWz9icgI6ohhWJJF47Lc7LwYnoIMWMaLOK3/Ova81\nOa/fnr6jD8ikmKUsEU0MxCUABoVqsWMyeGnweqKQkboQJsw18nwIq6VkfwLy\nNrLly7Hjt2MqeRDFb3lC2Yf0x46i0rAymDGWMsWkGWzgfpNjpDdJZRQd3PBk\nal/AHM9K9fr+i93Tf0/2ZBycZ2qZizm9pDNbxVB0PA6iMw/UntuZK96vQnno\n71qCrgGtWRqzQkXn43W/hX269n2AOlJlvGXrC9TdjyBwwPW5F5dCPNNjRG22\n6YN5LbdOJ2WauPpVl6RcXLec0cb79lbZOrWsMm0G6DjTiC3aZ99Y8intYKIg\n+ecVvULUpHRGiU7tYkt7sbN9sfmqLh4eJZEkHtX0EmCw7T6LUFp3MdCE20Nw\nuYtJRVhBPuJpV2+1bbUMReG+qP8Kdbd/61RipGYuImh2/rQde5VqWqNHZvgZ\ncd4D+HoUWw7pCTWSn6ot9fmnTLyk11zLP0VVlEaLiyZc3z7p4GF9CNA17JAM\nUaIFORi/i3LwTxBjjWddjRSOjg7eAxuZdvLSZykAZ3+GQQCLnpeicPq1PU+R\na6DZvGqk5HK4p2gUcJoLNhuD816ujTPunXmwb7NETDmvBXUDZw+a69y+qCH0\nDVNX\r\n=NZrv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.91d9d5a65.0_1581116332278_0.04929647599898024","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/typography","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dade41e27bd60211814886555db1892139fc95bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.d5c006ed1.0.tgz","fileCount":19,"integrity":"sha512-UdNO/RZdVOkeB7wa+yauieTC1MGEMp6T7qncX55YpI+5w3G+urxJOUcqk+YbJWKO3mNaqj6SUoCHIRD90sjF3w==","signatures":[{"sig":"MEUCIGIoAhdCSXidwsJsvcqGjut9Qd2EzuA53aYzjX3mlHnlAiEA7qqhvVYmdDwrPDXCAv59lAyZa4DqfBJFMVpMYRCisoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYlMCRA9TVsSAnZWagAAoZoP/0Xr/6iPMKRsorAH70v1\nCL3HBhzhTiChQUdzkp2BRqh3pa5joCJzy8s9mbbsCGPrN3CN5Y3U7SuMi/Pn\nerhc82Ee4YgS0mP+GO/UqGnqSnUKGjMQTtf0mYIw83jg1Kf5EW57g9cncbxr\nGEcZ8Ce0VAs3BIJflypGl6ducqOXZbN+M4HzckEJaAFJGk5xU3RreDNZcOwr\n6rc/5WQaT6ExwyXUoTKFTK4134XjOiEKfpM2MwFpwIuXCtY5Zc089ZR0vg/q\nyTC7k99/bzcu4YrkIqUEKUBrsfsnR/04xhIA0683S3biNzxfHuMMeh0twaZy\ntQ8165tJPomKTNFdX0tNSymazpprxR0ffA86SgttTSkmt/Jsr9K7ayHjgiZG\nUQYPZGl3UPitRSAC6vmyeN8pYqSppR7PywXDQ6OmP4rk9VQxLHroVGu67BvP\n0nxi7d3v5JhltATQfkJkAyc/4OsfIPoeeonuiUXEELS9O2VvjLRz/CYh+PlI\nGfF22idB57SWvpjJw2hYM2dd7n9pCz3EdyncdnCCpe5HUtBHJ74czrd0zv95\nnhImqWksdIRYxD6HSm4t4PUP+UH8Q0szVOWS+02hv9ippkC76nIt8zP4JDRj\nzZBwnBkuL2wY6e3kklY7dLk1ROsZ2qvgesRzzLSdU97Zms8E61eWZmMIUMDn\n9LrW\r\n=RapV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.d5c006ed1.0_1581353292488_0.9199064490842888","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/typography","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.559f1a570.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7b6d7de8fdd56d29ce38ea144fcbf0effeef2b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.559f1a570.0.tgz","fileCount":19,"integrity":"sha512-pYH2zbV/j8y+8rrB2tPdaRshnV9mp4JiqTy9+2QlFZf+BGgIGT/wLDfAEERkZ+CsoELU9g9jA6ON5Umt6R8Dfg==","signatures":[{"sig":"MEUCIQDMc91Yf2+fO+p20xFekiQFTNYbyjHTqiz8pgu3KLzrhwIgBKBozZ2HrlRrsiVu5CnaPQxZIPMZL3Och86P4NJdsAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHDCRA9TVsSAnZWagAApN0P/jyvSyMCoji4iB274h+4\nQyp2EJdAfcJGjwz43TtFVprykZndhx+veiQxVU+yBKTV6VnfLmDFNzTZGnSy\nTfdmvLOX2ITrDcrnWmUZT+HsjeEOt+03Z1RsfV1fESRFPt4glZUwGmRWRt9R\nDBgzpECP9y1yMSwGgorkhIGghCugvaz2YxH1jLhZMEK7bmFRIkayfMaFrgB8\nKuUjG9aamL/u0RIpDfL45PGkVdECd//zGgNE0iMAUd7OoxR14iBab4vlqXCi\nKzhbhGBZbxf1v6elRkqRfjapu4Ipz6sOyb5bhw9z2qDPZ5XC73pgrvSKv+DS\nv/w0ctHA49bQ8qS6OvW+KaYlYBS7BLjGMf6VH04Z9DGVZ5Mc59X9CKBG1WRG\np5SPywFlO8AQYtCE7IdZy1HQ1mmEa9TpXkq5JT96OagJfXZuOCNIHyvkre11\nbzC5wBIUGteQ5thw/gQgr71utdU6duiDHLA8YmfAivWHuiUpAuk/hPJNTpJa\nWnomZUW+6yxqBPoscd6uPukAXxisviyQ257Nz5pYR35CB905rsmd+ab4CeyZ\noEwjrNdyBCWKyFZ+20SvadEYkqK1tKglsKnyTIQ0fF5SbBQ0pxSh9RvmOa+w\nYROn9MUv1E14RxLGGsxfFRKdjFgrSJ06Q1PA95khp8uPkIE55/FFP6cSxLMq\n+JVP\r\n=fYrL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.559f1a570.0_1581355458958_0.50113194913077","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/typography","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"235734a6dc6197b9e345a03b85a9ae7ec046dd33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.ad3bbf782.0.tgz","fileCount":19,"integrity":"sha512-wDnuHsjNDMKgZtuflO6lTCiTrRT00cLPcS69/CE9Ok7arGFR48SDf14VRELHsKWjqysT0uwQnJn5jgb3FCqsvg==","signatures":[{"sig":"MEUCIQCMNVSyin1TGoHFx5n/8tGwOq2Uyapg54Tov+IRwfDv1wIgL40VDBTN/uFwuvutneTLvVlZ1yof7VNf6KdnUUBc/IM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarGCRA9TVsSAnZWagAATIEP/1pamNRiiazMqzmYsnBc\nsH7uW9NELC3lKUNFqplvfVQDea460tE2zaXVZUCzN25xxIxVQQJuxen+nHQV\n/d/nWYwRTxdkg1/uoR6vsVOUvdbdsbNRk7ucEguqrGfcVs4SWl1IIyC++2Hl\nNLy1xhEUhJIyIFcibko2yi0ZrC0idYtKi/5Jlakd4AkE+qYLcIvNCqjl6uVj\nU1W6i9tKRURA+EHG48C598OMIt3ZoqN8gwWnbfYnFA2F+YhRaAMqrOo2ThzX\ntrDYFMcKdfHd4VeS0GnKYFDYdWdixMW+k09HfJ/y6CWeyLaJYezzJ7H+473J\n1M/2SXvdS03QbTqrzkbD8kyfL64i4b+O6b+46Aa/oxwirqfGUOYtBQnnhkdU\n6F1DZFJs0rWKIRdnu9ZYwVtc4QewgmYx1nKVNd5PGDgXTGpWK1lfbGqSNTKv\nFksAEFV6hlTqVLwsTtn6PUWIN+COsunzzrS4YRXlqgvNYrc/5NXQhmmUCubA\ndwWEGNpULjjfFRLOQ15PC2fPIPaCbB1o6p0Wash23+waIP0WOBH4PhjZwev8\n8y3kak+zWVBrGXBhOjrKn601YDslLqFrIn/FwQ+FTtKCXKXOEb81+MP1XYq6\nGZJ9FIDEwdQBAQnOJ6Fc05gJgy5trXkrZVpr+5/LD8cb5xjHFwHRWAUA09IO\ntbPZ\r\n=Qwjz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.ad3bbf782.0_1581361861849_0.2336683812654543","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/typography","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48650d7745b1072c1bcb2d233a12a3b5db373bab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.570d8e49c.0.tgz","fileCount":19,"integrity":"sha512-1ej9OlbbLwe+OgPLio2x5IiJsbxWmjt+mn2WAczuneapx9chWn1w+5a+2rBlZgSQN7HZ7vFzF3X0FUfumhYPqQ==","signatures":[{"sig":"MEUCIDGKaJD2jXXfVr7uWSyXTe1sqw5SJoFEs4kjaY8WBlqKAiEAkrWLP2WGdCXy9SdmIBikEGaHeWrmtV4WVa03GygMiSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBXCRA9TVsSAnZWagAAr0YP/ihPpZ4rI5eNyW4ajL0E\n1cAFAAtg2fq1pa7SIlXOtk4zYybSpdINpYUmfYQFmyEY7FAmfgBzBzZemFmB\n/aTShwzYBc5rZa1IETpnyeL5cHT2q7FoopqRn3CdckzLoIPEkV65RHpgkolW\nu4ka6IMXHlthVxpiotsFAUS9SB1Y+1piAAN3SCCKfyWtkg1LHL+1rGMi+Fnt\ndp17oe9Hy5UCgctdlWKLoFn9f6Flh9xBmvqOFWk5zfz9k7f15BLibKvynHuJ\n3jL8P1mJz3dVPFSioSivKhnJ1oMXlrPEODoy27/FfSXjMhB2jdjdjELyaLlN\n4ZGJxieaiK/oRtGq1st8z4A4lvTx5/eL9yPYQPmfLivMsFpynbwilQZhRC9I\n5OUICPLFKiv26wIqKYJmIWnZ782iwM7gJDqB0UflIPXl1M78BCTT2wMmbyM0\nsDfmTCJCBNKg4ngiRkwH40NfuL09d1Xm5NXD/vmQhhzPBSGNUC40lDXMJPRL\n9d9TrUkj/AHDKnP3WAPxa5Tm/G8SKghx/A9sfSFtPntA3U5L2LhHrRkS79yb\nCfp7eLGZcvShkkicBxvROQatznwk45luTeMmGMYZm2XtH7+Zp/6zrFmtfgMV\nYdvyuzn8OgSXjZdZBZXXVlqruiS8rIH16Gg33NvkH4F4jsnmb/wlbwHEbNlw\n2lit\r\n=u2CS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.570d8e49c.0_1581367383426_0.6890936333681601","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/typography","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25a821be72e87c3cff2e83d204b43e63f1397106","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.48b06b89a.0.tgz","fileCount":19,"integrity":"sha512-6p4RA7IhZuCVob4uJQvgxL0BEnL3hup8jaNbltW6Y/84cSji/E+WBDNoqh8oNfvXj60g0XPAlq+Bwqx+qJMppA==","signatures":[{"sig":"MEUCIQCiN1IfOCwP2RryL9SNoP+GeCpjnrlM0tS7GTOtte8y3gIgIFBrtOONUNhO7eOvj6SvfYX9pTbAcX6Y7vR7Ye+mcsg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvWoCRA9TVsSAnZWagAABbkP+wWBWjrJoqirmh8vlD6f\nG+wSDdjfrTo55xv6yq4FuxOr2JONix3UNXn+ss4T8BqQmU7DBvse3v/C8fcg\nIPpAR5xF3s7JiPI5nDuvW2A0fMvYU0HqEL+YYvOS33MBq4J4G3lvpy8Jlp3N\nV1TnwE707r/F9rqaIHEW4irSSHQytXjWvewxc+Ia741AlJczD6K666bN4COL\nwwVtIesFs1TNTzNx9LEMAPtwygBqkPAshkN564c+KuXH2Xcts92y+szrFFYj\niGhipmNBmB5I9UPDzxrngYbISciguEa5BD6NdHY12sPpgV7Yf957uakZHyro\nU0hpGP1l1douy5GQejE0RRyAQKRUKXq/5Tq2wt97NVLaNYDLT1LfAAEyNPo7\n84P05hB5MS1Uxb+p0dGzrWNI/uF5ggqt8mO74SBo+Mbr4EyXaeq1gU+K+WMl\nQ/QoFEaPTA9oqIBwcvnY1CAm1vfzdkaUy8PY38g8ynpD0itGpjEUANY41O9H\nNhAFhFuepZftl+VhZJkRFfby3ILbH5YIoA6znqNkEo9sfU80TeUkEMV8dibl\nxgjXkrgCSIufHpyQ0crnNtOo5UFuRbDdJ3Hb8jDGcrfSeb+qWcv3lPLV5w/x\nkAVjzH8hbjvRIeErJJPx2Yjc8H7aClwywAqKZGDE8Hs75gzZ3Cucdz2Z2me+\n7LP9\r\n=iP+d\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.48b06b89a.0_1581446567781_0.1946804694805111","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/typography","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.612443dfb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdec35382da445cd8bf4f18e1b384296205b8e95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.612443dfb.0.tgz","fileCount":19,"integrity":"sha512-Nxh4bWKkKbTwxN1nmDibylfLI6JPOd4ZsV3gTAkNfsaASYnB/eCDGtXA1LW5LVIFPB3yQ3fqrsfiE14KespjTQ==","signatures":[{"sig":"MEUCICj0MTCOC103PkL9yqElzwEL5u9L144Coz8oLiGZDYqRAiEAqkqI+//Agm+Vw6fzvRvZa51d0pfqDF83FdlRgpWNPPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwULCRA9TVsSAnZWagAAaAoP/j3tRciHglrdWq1rl+/l\n6ARc/xiKbP0DzGahmiQRMXqvxZ7YOUJSomScJ4i2jY8lBroVl4fWzgjnF41m\nHb+6bxVDHYNtTIv3FJ05iXRcGvdM9ueYfFr5P74w0RIxnJllF8cXDe/Avuhb\nr/5erEv3RqQPEXkG/xRG/nQWondoZAIfdqxfYhpeYP/RgcoLuZHU0Kt3YwiA\nM1S39kEwqj6WE3n+dovQdFmwWcdmGEwf2YM+pu7i0aLuIVdbAZTkxyVHGNyC\nUjiTdh2hPMeMcchW8g0JXFa903PtlJvUwz3DT+LcOrADtofdkU7j0MhHvgSu\n9k/jqs5aAaOWO4StGQ6AcmSuobHFu4y1gt7XGIzgbOtkGnzrxYKzm5xEszYt\nwTEI5EwBqFIFiBBBri6bmNJ8ge3G1RpOOr0nO1bLqT2kO1l3dfnKtu/2elkw\nBMPSbluaQbYp49dZKBa6/l6XYYiEzbXMxnbutjVywCMU6eJp/fzAzcVPNEvd\nr4cztUkV6lyIjwoR/Y/6oI78lZx+FG9cTg/8foqt2mSZutMm30N4HZ3s0iV2\nHTRM6ekajhJUocS5U+zTphOALcuC4nKbObFyJQbjcR30bQXdkr8DbLPbZvFO\nIf60mswO3PdRleh7PnpNkP3QMJVYS8uOVo4nbEaIpjZehPJK4TQzoPhB3vwj\nOjs4\r\n=mNN7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.612443dfb.0_1581450506628_0.049586447729867755","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/typography","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a046ccdaeee8ffef8b4619dc5cbac50e28c5122","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":19,"integrity":"sha512-R23mUovCpjc9pjWVu65R9ohQ8oscHJQ7nrqq2LVFAhBvLeoV0KfrZC6xbTOeyoqMon7tYNPnLmpKC+uiNQI3Zw==","signatures":[{"sig":"MEUCIHx+s3XdzQ47psOjn7PzDo3v9a368ybm7J0Xgb5Flgr4AiEAreKcPrtkkDw7JL+g+B+4u7b12oi+OKy8Y3Z0WhNcfLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7x3CRA9TVsSAnZWagAAn3YQAKPDXjrxM55GooTmE6GX\nEFOMoNbwQOFFp1lPZBJ/aSS8bqmBp3XLDQyY/Ow+FWzb0dFX6dTCfpJp1UVs\nLbSTJpRi8+ywkBul4xxy5WeBvMqlbs8CPoJ3KZoJoYnjTJW+GexR7nZdYNBW\n1iT8DWb4KWAEwjvhOfsZHLzQD3V9r2oT+YxHgy2WB35mOvP2+4nr2okCTGqT\ny21W/aZsut7a/6TBhguK6kQbSKHirjcUbtm6bVOv/OpeO0ywLoNdwQKYIeI7\n1q7zoTTFt5hb3aCv4YINRIhlrybaaKgaSAhxr1CMh8SP+X/7kVuq/QeP0gTN\nesl9OsJMVBxlQd/sn/JizEo75lDwDA5IAoeCf/r1Z0KCM1y1NQzp795LW0wB\nm3rQzzxMoG8DHbwCluxM7tKfP63FKHOofNJdPoRhVsr3Kf9CVCMR4PZNB6ms\n04aWd3+YQIvr346BgjErmlWBTtqATS5pHvMwLpvj0O0FrexIldhaWtGkCTV8\nneaShK6MQGN9TBoW4wcp5cvE0xs9zif9RQiT5/MpyIgLAhImsKUvp7uDsJaW\n4O75ATbcvqiW0QG2h/zppnlaoASjmsRZH3k/W21gc5D+JofAtNkihTJy9NkH\nfnaPLF9d4bC/6BiRoCvPMZOGphWNu1H14UjOuaZJqwywAZDswNDMmE3gSlLK\nsJ6E\r\n=3UmI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.8c11ea2a3.0_1581497462499_0.044385563535401795","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/typography","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b46c9d7a8d58af4a788776a2f3fdd70bd3424ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.b2f3d311e.0.tgz","fileCount":19,"integrity":"sha512-/L8D8vtNOVDLqMXtRwY7LvhJ4ncF//ri0ny47hBctHiDgr3Z5G66IxcjBcAH43QCq3FRW8a/qwG27pHu0iTJ5w==","signatures":[{"sig":"MEUCIQDCTGFNhHyRQTKjmdFdVKbiHLJhZI6Bt/+mMxW1C3dQXwIgXC3mB7yt6iquVmZCasd73Xo0Z3X5BSWQwFz0KyqVJ/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcLzCRA9TVsSAnZWagAALHQQAIrQdilDZeAVSU8biXBS\nKBwPECrEVwMYAbDP2tZYo2s35Y1mbt7wMAgsKs0mPGS5IHSTu4EclryxZXSP\nyBPu4MtbPlbumJDRl/X65u6sTxeWPHbyLt2xJHaOaRNINLLsMmyFK8cjF9c/\n22hyBr6g7qMJtX7YrIYUh9PZdg/Wx5hYN9xmtyF1SL1IDVHa7InbhpZ9oPo2\nUWNoWb+X1a8ct7m2Gxh+16rCRIizRFJaSjc6HB8ZIxHbQnar32Prz1liFEmo\nrHaxFI/Vlsu54VOQpadrIdI4ouJQu+1K4APv+bAJKUGD9Wb83GwdhO1FQN+E\nrpb2HOFidUsBWJg/W7uWQlDpUuI/729ePJIelHrN5TmdF3YqEtPCg3Lda479\nVtCxczaE1EDqo3SYRv0erMd1M1GnHxHycIrix2jdTfp0LRlsO3sIvncEu7eC\nN4QIW2YZPPQibxMTQqmix456M2BHcrnsBmqOjDDNF0mXktJ5+6HMmFszQ177\nPz0onrj4C3FUiW3RlfOhJgdnFaJmVgPl5aEAfB8Y1QwOvsBodBnR/rsEN8O3\nsMQbJ6M/zGId89q3FfmoplOqGxE6CwgsdN70X3Ots10jZKUjCuevX5qHDCxi\nBQicaUKa2Jk2ttJhqwv1Rz2Wl4IWkqTxxJc7C1/eVqqlIsxVZnG3tNT2sfMe\nX8ke\r\n=uVKW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.b2f3d311e.0_1581630195096_0.110259954021098","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/typography","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b2eb40357a2b0e786bd058e0706f2ea8631f20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0-canary.4f488d0ee.0.tgz","fileCount":19,"integrity":"sha512-jfJGf1lQQI6DkKNZA36iF8xxbQ5HHHvwKKRTIx11j3PeQuF3JlUMxrr+FjdQGg/EqzT70tHws8VC9ECaSGfmFw==","signatures":[{"sig":"MEUCIAkANHaL1obGMhmpC37aA1fgu/v7iHvVeWmrZ1Bmfu3+AiEA2oFbnOwmF6UGsmHeK8J1d7yInvan1KSUe382dU4S6bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZNCRA9TVsSAnZWagAAhRkP/javwFrb31HjxJFYLgOL\n5fVA6Ax2zPX8D4qR1afiubYqI460cLV/GL8QGYN3xEyXontnqfPPK3yH15ot\nhtJYisR+ENnkOM5sEA9niCuNtl0HM5xXnYwVApLqsyjO9ZrFniY5OYbvz9vc\n91iWYeZjP3IosDaL1t0oK8JbSkJ10vylQ9pcr4Z07S3qEs5Oy92PjYiKsTDr\nFr1ihu3yqu4UaLnwQOM2q0BZuPrEQ68fjoo7D0GQtEzE+BRSkCjDO14Y/ABm\njyHb4wmaSb4HqwGHIXGzEc9RytRkO7TenUq9xZ2B25MCae6WfrA2k+wis9tW\nmjSYARy3jNoY5EQhqNIL68zo0j0khEXk5CbLztP9j1lUGcTJyPhGdOEbyjB9\nXF0M1D1OY3aEWYuLBVGwvQU5faX4DmguJQ4yNore85VQfn5TPN5zXd1YzX43\nP7lSQE1mMfcqeBxkbN/TqZBXCj+Nhu0eDjbLDSTMY8RrwmBZeSkxv6ye2Ofq\niOPmaieqpdgpzQT2D67zChv+oHWe8teUxdePZUXEKkQT4FKEGNVU4TqeKDJ6\n5KmnddnAsa65w/5LW27Lq6NWlX0XF94RoShbz3gCWzI0T332vGy7yBVY2yjI\nsRz9nuP2ui3f7AHxouywId89YQ93KYJxRAdbx5jZHQ3+169T1JZsZdybR2Ky\n04JH\r\n=qYI0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0-canary.4f488d0ee.0_1581635149049_0.19623159651430067","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/typography","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f20a522793350ebab340ccb455750443c509c634","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.fe79de07d.0.tgz","fileCount":19,"integrity":"sha512-kfziGflw00s+rbPGyGV5fnGfyr1zh4fqtQpHifeBQamzb1BVkbprt11ELHX57iUMA/QgC+9CCGp4z4DPJQDffg==","signatures":[{"sig":"MEYCIQDGtPrH/zDUwMz+pLBUuI0BVp7I6rQGUJCUsswjGh1CtgIhAPYWMQmzh3f4uo3XIMC2DCJwVvNaRhbhe11Wv4Jc2/uF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdpaCRA9TVsSAnZWagAATNEP/0/QqKJ+rQtIBUqBW1G1\nxwjsUu9vUtQfxTiT/TeD4H+WMG+AmpIdRtk7wZfxYgn/S2numnzjC5lxzlYf\nsL55Ii9RDfYY3aBp1tuRsAKXKUVE3lQmneQwhWAhfDWZ99fmddhQT4nxTsic\nXOrbEl39rfkH6rpEikHSdZJOZky575sGdXtZ40IYLWAHw0q8Ly065D8LyEk0\npDb/cP5GylTLKeq4BXWYO94zPGRqHLiWBUHGfzCGViiiORu7MGCt4lzcX9hy\nHYhkW/NRerfY2R2mHEAbjyj3gc8GDK/vasjjE72uvq7couKBSNy11/TkxhUe\nm8e00ul+i38Zb8CtIuRepxrfe62lndtbUakDE4JrwBzRBotCVZBEd9wWDrpJ\nEMr2WIAwlJowSXKFlYTFG0zgLEOWRxqOgMIJQ33tUtij4NgEc63lSVcELhF3\nbV8styNo+DofCQyjAETwXFVVGf1V0HMuCVEq58O4buxgAUGgWG11orrVcVSu\n9cdtZqbQEdlDM0MA29ThvTs8NSdlHtuGJCaCg/LOGbQ39zvp6dYfEB3DF0Ue\nptTmirQvFv3T1q2Xh/knB3Fs7l3a+LXu7moMKKzgltUaHcUv0J/MM3+lx6kR\nH0WcXcb8HMr+ZDJ2algBNeAO1b7oNKeCKopf9+Z/syl0HnqTY6bHkDEpIsLF\ncGYs\r\n=lPX6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.fe79de07d.0_1581636186429_0.8140754973456539","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/typography","version":"5.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdab61aa548f51c5b95000262f46d183b66f5c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.0.0.tgz","fileCount":18,"integrity":"sha512-8lBDc8LNjhN5NwRIpOHUNpNhMtWXYThb8FS8z477Omv1i2EbMeGWxg+nXHLFIQM4daym2qeeRc2YlfMVkBdd1w==","signatures":[{"sig":"MEUCIHAf8B6e7aXb/S85wzZOlxKYQLLTUE5hZT4HwwNShDWTAiEA1w3zzTwgNLwI4j9LV71y0BTtlOeWSs19Vb4U6mgIwpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReT9CRA9TVsSAnZWagAA4nQQAIWmcuZMNB6wADlZTOOW\nc9guiSJ4iRyUf95y/nnfyalD+4HvdHoTbvL/gJ9x/mdMqxXZblrip8nO9TQi\n+i9l02RKAPYnCSwvt+kHTb55vWYk4s+WhezRlrR3EJvQOfO+sM/iay3k/cRH\naHSSZuHuYDjxG+eQJ4dzak+dkADZ3Ihf/bi/qliqDXaKIHhlOAn5rAxUcqqb\nklis1HVga/CBGttf7PQUzztUm7da5SduAmjljqaZRVdToeIRK5XHzy6fkJ96\ndSWKO9t9m6B9qqXhq2mr/yIhHetQR9QfeWW7wkxnIMEyLjmOv7rGW2ZgwgXG\nxBPwS4gQTtN88B/idSTbkk0s14SiM5KiZcw6wsXok6siMVdtwC4tP9Isftfz\nLClEPFbivnKHt94L2lKbmiAugX94g7342yVtf7MWw4cp5a0jq2CDe97CrWFq\nzU6weOBfIMJBK4VqeH0tdLlUReP9MzlI3v5WYJE7qu3dB50orOvlJClF3rCE\nj+mtzCbCcxx9s5FqiLviTwX7XBl3CIOU48blAtOJ+3TcfOFNjBssz0Jwh4dn\n/iXabvKiUxjYhz2Y1RzDAcrFooMOSVQgXytAwibfJpFU2I6neChNZf/GXXg5\nrsyfxudTrtpMLhNRq/L3tSxvPEt57B+1vF/gzWi++Pdk6rgRPrmWjXFdKobL\nFUv6\r\n=9JHJ\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_5.0.0_1581638909302_0.7195509010131074","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/typography","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeecfec474e22497037ccabee5a74669d60c826e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.5e313b1f2.0.tgz","fileCount":19,"integrity":"sha512-tEx8Sl16gKXzVW7y5zW17GHTrbYqO86/urufpm/6dEjDYHoxVU9c3yXvcgtUX8KFbhjS/SqgviThWXkQgLCC2g==","signatures":[{"sig":"MEUCIQDVwWaLcH6U5dRX4uTfWTjC5wkS03me9YIeQwHKti/a2wIgULbdSewOt0LqMZqLOYEYgKy6KIBA2OZ0/qiMbQDPlSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzGcCRA9TVsSAnZWagAAh0EQAJxKpBAf3FYMPZGE7mqQ\n1ci/q8OiS4eGNRh4Azz49K5jKvrmOojTnNQjSC4TEwnOUpO9/pDiUhMTyYRC\nY6L5kRWnwdoi+/3gIjpuQskzh2H7SdTPzdT0ckdIlCFhn8T5c3iLGfG/uVRV\nnPMDTM2LQ65VWwyyOMOQelwV9OnjNvgiFWYmEA5VGhay1AXk4f3M1vcgoY9b\nYIdntEcgr6/xwA7y6GqqQAKWrGma+MTodXebFuCsO1AtJwSLl4fGeq0d/kYk\nG3Wy2fohiTA60qen8XSgIiuJNUe9nfWJ1Tp7YJV4u6lt+ia/BzjqAaIR0EJd\nwOuZ6rM5uf5I55YhbqMBMlEIn2C/7CJ+BZv6xCrEQ3DsOHljMrGwvPSVJl+9\nUi2equkSso4aZD/PBeMqj9Ba0FiBfpmQvUl2gSP5d1q5KFjYY8j0oQZemD37\nzIyIpPuAq9mj3ZJVZlM0egJS/jUbcrqDcwKSXyS6W4dsN6F1Oc6ea0z5nTug\ndY1nK/+upIRuUGrMutw0KtyK3AAluU32nOb2zl+aS1UXmJFSkiyYaQcHNE2I\n54pF/RpGEyJIdOuEvKuNZr2fY6t2TMoEeFW4giKIseDNVzfvcz7tsUI6fUvJ\n6d0b80hyDbQ0IO/iUYhRwxZx+puK2jEpAaKjBhd+1ri+zDVixzykocT91Icg\ngbBw\r\n=1Q32\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@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`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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@use \"@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@use ...\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@use ...\n```\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.5e313b1f2.0_1581724060087_0.6584640867171732","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/typography","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a010207306e963a2ee29e282db1a0becc26cec8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.6a56f387c.0.tgz","fileCount":19,"integrity":"sha512-ps1I0eg1oFD8mo2CJnwuwctFA0Ae8Wnn2rdvPz8m3T+s2ZggR+XQperpQBwfGdsnINCSMoPeyWx8Dj37wVDScQ==","signatures":[{"sig":"MEYCIQDuN2jP7kCInvLYWN5UIDIsqLDXaTJeFRTv3FEZH1Sd/QIhAJW3Qh2MGZfwKIrnLbcUIj0iB2u0HBNpYFm68dVbBMtR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5hCRA9TVsSAnZWagAAEq4P/0f2LkBL9TKVkVSp9KY9\nUM+jKAiU1qn36/Z5nz0dgRPaIsifwcEQqfAB+iOfhesLyBoL0sDMMaM//JuL\nQGuvlAxKiVxLn2L5xwdxrtLgBt+Sjx/i8Ww1WUcSVkKbIaN7HYkFhWL9c1qD\nuKf//7B8u5KJV5bzDZ0pG8RPQE7NH2EZc8jkBNdKbPo/3Wkgq7w9rhysUIOh\n19l6AbG7/yG+cgsnmdbFhU8QytYSsOouctT6T+JEK+XoNSUtp10fw23iBkAQ\nN8LK9SCrkOUrDx+039pwz9m2LOpevz2iYRWBiOQtUg72WZ8OaOC/FSLPOBj6\nxgrMNIJY/DcQ4BLbN7Kb7RU9wTBG0tcrCJjxJs8n5CS+Do/BxKDIx6ZluXXq\nqYZeR4F24LstIsH8WjgfjtEjYewZIqdVFOX/ub9UeQRqy7YstKkdRO2jGW4V\nSq3U76Q35pC4OvWcWaWjxxuAuyPGrdZ0//HrjZwawpcIxN8pCXMESN4ieen9\n8WkZX8OmUen2PI1yn8JuPDZ407qUY07Atgovo+6ZbBQM6Z3T37eqCbuHGbWz\nhyA7bi4LL3vkeR6tFWjLcaFJJ9LGsxjb4o397Sy4wEo7Xgb//RXqDiBR9oR7\nSkNkTiPyGASU5UPERJ747NsSnTVxUHG0CMNMtgnlBqu4v80qktxXtbJoyUQp\n3oC2\r\n=cZlx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass global variables.\n\nWhen using Sass global variables, they must be defined _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\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@use \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n...\n@use ...\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass global variables:\n\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@use ...\n```\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.6a56f387c.0_1582055008678_0.7047882996575403","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/typography","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5986104c446ed25cc5f04e2410f340b204ec3f15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.bdfd52632.0.tgz","fileCount":19,"integrity":"sha512-k46i1i/tzPnKndzCRJjycOaYH/Uv6yXtINgS9EnhNJ8Nn5TqnjmbaurB5x+JCQTHTBdxcrJHm6iShPXuQPdtww==","signatures":[{"sig":"MEUCIELSvN/Gz0rOZZauUv78Lmik77alIYiAgAXYcWr/oCwMAiEA46OTG5AWZYYLOeDVMaDqNNlljpYmgbDcBvbbzN+xAcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkBCRA9TVsSAnZWagAAPUYP/3lncTJ/07puOMk72qPP\nLENelpKTEUVlSGoaQyDVjLgnBc1yS6n44kxMNN9aFbadOKAW+84TqWoCihEE\nk/Ykiy/VqFSJFnX4jSIcXwEU7xqFcYoTMo95DUq9jvrQQNJ1EQFZIrln1CJ9\nkbRh2dn3n4G3imNVEGucWI5kJ6hpYS7rJKvzLZZPyLsdbZTi0yzGQIZpXlcn\niNJ1QLAoNVp6eByAGQy8RexnCr98Vax02czCO1erdFq1jTUs5OqQS+vJpHyV\n3dISiqWyQ/UhwND0+u9ahz8sWQuCDOTDgVuGnmSIFbIYZOPInnTui1gJWFQ1\nwRFqBgCo7zHVd7G1ku3uLUr5n2nWJ/bZzmryzI9+YZqYwDLUKbTg4sTqdm9y\nXi7DwQ0KQanSvN2xUurJYRbZ2qTMCjJL/FVRV1lLf8tapwCio25QVqr9P5Gp\njiSVudt7VzHljxi1N08lsf+caPy1gOkWRDU+UBIlmFB9+wPgQrVj8O2BkK2s\nH8XrJQWOqKunHOGatnfMvC9Q9wKUg7d/hTMKj1wgoZQllJqZcDj+mo7l+/2z\nHNYdKSUPQXbNHuuzYo4V6cN67sUm++UEJFFVTI+6MCdH1EWGVl3ijwAx77Ay\nB4doqhq+MTWm96hZt4Rr7MSkDsjAqcvse5dmZcvnB29Lkg3qtCAVUJQi3WGE\nI6sB\r\n=/eoo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass global variables.\n\nWhen using Sass global variables, they must be defined _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\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@use \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n...\n@use ...\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass global variables:\n\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@use ...\n```\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.bdfd52632.0_1582143744978_0.7894343618463013","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/typography","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94f1ec72d983a7ce7255f093e36a1c0ab002a024","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.ad2e4376a.0.tgz","fileCount":19,"integrity":"sha512-Z5OPkrvmONmiSScOvvpVZDzTLeX6vbKdaA5OeexpGHbt3M6SATInfbNqPlAB5ssRr/vtVbkZUF6bQ5nguWIppg==","signatures":[{"sig":"MEYCIQDYSYVZGGRatcp3V3yIug1r/su5hpqgJ02JIfje2cf1rQIhAJo5XFwycE4fftC7POmEcv+5H+3GRjLJiIsfUvuSeAwS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMuCRA9TVsSAnZWagAA4iAP/RUkSIlAOw6yigGuMANF\n4zu2UCSoDl8U8W+dXzg00IhKhbjCydgygkRXkY8kGzG4f5LhZMDfXX952G2m\nu8T/cGkeQi4OvxKZTdDdbQ0ujcoB+wvBFxHxYez7ljVLMybHYLGYPVDW8BRo\nsDrRBF3dOCkWFIVZwp7v6aa3XjMoZ/qL8zjHBDMpQ3U/K4d+2MjnOPXHdL0k\nSaP2UF7BmM3w7myCR2hOJYnu3NZnc6Z7gHvHVifdtDAv0CpTVsfOIENULbCB\npngMUoPocz5jIJnQGIYD2cFpro554rNW2CEODYjWD0R0XtMzAL2Ic+fEGjbB\nlPHoCvmVPc7muGLGLwEmxSkjUj0suPu6HrOnqG4ry6PGVOvpRczf1hLjoNHO\nd/G0kZHKaF2KOBjOKCDHNO6lvugItwRgJT4fgtZS/3YTVXfGE/IUocbWs0cv\n3JMMMtOgXgP6qL4ky3Ef3uC4LoJMbO4SGOuF1itEUshfDZHbsXgY/iDKviL1\nnhRJJqnnARitbl6k6TSC34WgBm2akDz5IbLPikP4fWIQGhZDKeNGl3v8CM6H\nytJL/BsCzED0MOQN+2uVUehV3iK2HVQMY/x6upaZrNtAD5z6qBLv5JVDfel8\n8ZOwji1XwqaAEgxHm7cOpYD1EBRuzzC1SDtrCmLtmFPQXgh2cPA2sboHCK67\nIBRB\r\n=01m/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass global variables.\n\nWhen using Sass global variables, they must be defined _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\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@use \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n...\n@use ...\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass global variables:\n\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@use ...\n```\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.ad2e4376a.0_1582240557156_0.29318087805680304","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/typography","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.765caef18.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b270171a63d870c1bd3391a928fcc8d4e0950e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.765caef18.0.tgz","fileCount":19,"integrity":"sha512-OgCS7DVvDNU+sXlPjzxNbRWeAtEaAsZm0bGDQErAu/DsJX+Eh4lzURDEcaj2jn2SIeUWMZBXLub9it+iE5JWcA==","signatures":[{"sig":"MEUCIFZ//HgQ3Su8mKXB+Om8siDOBAcr+Doi1N0xlYNLEKwYAiEAhvBIYgvQN2u1LQxiFaevmy3FM9Pg2ZPbA42bG06P5EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRCCRA9TVsSAnZWagAAu+0P/36EMwFiLcTkbR+cn3pM\naOGIYKdSZMLbtLGglElMimU0j2QVCTyx4HUnCHR+PdKxYIMnLi8ss9Tslore\ngMNc9dJG215nAVgAYL41AGZVkCRmOisqB9pgXsXTtIbEz0k+RppI1onvmEit\nhnw4DDLBoBAsMrYa49P9liauHRYCMO7mkiekkflh/PI+TyqHj1kbYwFTwNNt\nkqUJ2NauSSvxxaYfOXq210u715oo9w0J8uOE9Q6MZovmbvISvRarYnROGZpB\nWhadqf9WNIvtxwgQsXc20ievAqXO0/UjUMIR7ODXA090aPj/ZNyoSgC78Etz\nPAVfXPOeD8zU6Y6QYWDUu3XxudWzKDIKufK/CxcmdrHseB99Hr0MKav2uHIf\nHCt01+ccnxxmPWnB1QQDNri4WSFdGQZuLcZ+lQc2XIb5DXTX+hzi2o/2NHxl\ny65gFWX/45aZP9aMFP1IRM7h2QjARCL223Si4UlSOnVWycsIYaJQUZr9JHZC\nFzZCfVeKrPjs9v2QDYr5txGLMutTORBtRAtXBBFh1LzZi7KmKLh7ZzQSwZu5\n0lhJzb5ArLVf2PfOodWc9Y/vt/gKb9BUOOeRnCu8hByUYCgxVfRViRsJX41O\n1N6NHC7g4w9f/PNoAV7h5mfdM8tqnrmblW3vS1U6WBLrpfqxrXkIB/Ntp+cC\n24Qn\r\n=RBZ+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass global variables.\n\nWhen using Sass global variables, they must be defined _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\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@use \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n...\n@use ...\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass global variables:\n\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@use ...\n```\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.765caef18.0_1582306369603_0.14122464864471795","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/typography","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.949562303.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf810430b84c0ec610cf0f3f40c3eaadadc65982","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.949562303.0.tgz","fileCount":19,"integrity":"sha512-0pwqW/Q+TDDrdRJ5V6nI6MB9O3fZMAa0JXY9T5RfJ9gqRTFlU7MjgJlNvIEa6pLgfHowcF7tLB9Rbo2mPmUyIA==","signatures":[{"sig":"MEYCIQDaoUMmFBry2P1VkBybDwasyZ9BvWwC8+r+mCF82gdYvwIhAMriSTirqsIU0J9stsirvNLQPCA4NQgscZUdjDQkUgyj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+NCRA9TVsSAnZWagAA7psQAJUp539wRCIDoe7iiOSB\nL4aPFiIwfGh7PZEp8l5QcjxmLuYqhr1gpzBtlP2nDdxPbNJX14DXiHtQ5Uby\nUAlq3MEtiFHHrVSJRobMgWGZEm6uHblisimpQ+OLbE5YCfXxQ7libjnHTrtK\nKNCyoeqVPxIlAhNii7z8RV3c8bDeFfp/70PHEjU2VwkhkT5OFYp6dOW3t7P5\nQD8FMDvPcLbfq8zep5YaRMTJB6H1gH6dML11yGkaPN61pY0FtMAtBVJQBSEP\np5KCh9ntxkCzpxA6v40/QIpop1lIVygdmQ0MeDeesog9LBU7W2QB5x5nKIXV\nzomWOkibatsoTI+95wnBE+aXP+/0sTP1K3m0ge7ZmeIvXPKxB+H5DZ8eDLws\nBqEiDOEubYkUlQqCyWyOV/YJS2DH8rdz09Cmtn/SqY5Lb339PZ1z7YGV3sSS\n8JhEZyQozNByheHe5lgc9uniaT46J4/eABtiWQU9YIRrR9vW67vsuo66oZ/e\nQ1iiG2wsABOHkjnK5eJqDV+NkRLhdAaydbGeCVNoB8+kVY5R5D6uuagGSmzz\nv+jpfAk9zXeLOWdGchBybhZ0C03bHZEbgm47Fxuw6TU3+CU1R+TaZUZAT1ZG\nRzfdm0YNKNl6F3SgN8WLOxyEAGVeZxeAQI6fBYqFPxELtT57H1CTaAMb+avu\nxxam\r\n=eunj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass global variables.\n\nWhen using Sass global variables, they must be defined _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\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-styles-button: (\n  font-size: 16px,\n  text-transform: none,\n);\n\n@use \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n...\n@use ...\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass global variables:\n\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@use ...\n```\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.949562303.0_1582317453402_0.5002339227148931","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/typography","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17746ab3442c80997475276ee00f972d3d66514e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.7ec96974e.0.tgz","fileCount":20,"integrity":"sha512-AUCD5qXhBJMvOtRp0II4AgU0Nt5AofIXCIbjZAGYuvSh6nYl999WPHAzUFWLqpIJazdkupzqFAcVBm7UKgOWZg==","signatures":[{"sig":"MEUCIG1d5AzWT3jo8YSZa107JkUt3ElwuxvGlgwvtPfaNnZNAiEA8lQ0ycEpNChaTGIIvUxwRugQoki8dK4EVsrjaKMc69o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVByyCRA9TVsSAnZWagAAYdcP/isUYS4+cfZ80yjTTlrQ\nt2qj9ak5jcFho24jfv2uztKW/np2AU5hkpeIr9z2l7TIMoHZXMuTLGP9Kogo\nEzEdfAH18l+HjC62oHnA8/xNW2v1bQ0npL4qKWx2HXsGpCJFEyhzSUdmJUFJ\njTVWI2C/OLtQeU9xnNgkbj9f6DXhSOEdCmNV0l6KTfMLCpp+ny1KWcc6I7Yy\n6zyLZwBHR0IUHv1Q2Srg9Of7nNvanBSV648k5w0upvwLZv5bpEGiVIdVxHYi\nJoMiFQ4tEI7cossYxfFy0ug3kZWLY00BG7l5YEKIq/6Dy8EhxQe6RRNVVcoC\nWARoSPoMcqr0n2pIl3PGDfM5KVfwwXkF3WF7xp6QAkVZRSxCVQmLHANfApeV\nz/NXQNUEM5r+UYFnRpURF2X3EXJROoUwyeHuVucjipZmOMCTPA5Lfgn0g4f6\n1o2ZhxURcPTkrsAbfoI/3yz3PYA5AE01+fhyM/cSxh5dEClWCAQld44iMc1l\neGflWaDr5xnbVBxMyLdyP+FowQCzB3SYHGvBUJnCverQ0Rj1Y8jELpn+z19g\nxZtdKIFmZsZdbuIQ4e+twRrtxVroReTKiOFvCyjgvdKs7wj6G5YmiEWH19+6\nYjuBdT8yXCEz3D+6Ufs/Cll3Zltr17BZYVl1y5rQLPbVQc7lZxE09eVaDvSj\nYHzy\r\n=Arzn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.7ec96974e.0_1582570674468_0.9443390364018323","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/typography","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97e904fefb204ba4a1d063f9fff4fdb9bcc561b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.265ecbad5.0.tgz","fileCount":20,"integrity":"sha512-jTgNMcQA9J6cUOXXv+3L3MFkupOG2bYqADxHDrft61zyI34/vfjNE4u0THVwICorFkXhKt2wMGsIC7sHq0dYlw==","signatures":[{"sig":"MEYCIQCw7SINkSP3CDsv6iHBdnjgQDBB5BgSjME87XMKXAdhgwIhAPM83TI35SNodZJgArncsHnhNI/+5mh2EGdySn272bfx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYrzCRA9TVsSAnZWagAAesIP/0gJGnNRKWfPD2tPR0yx\nnhGT0Hc2cIivJyzWnhO/GBSpJ/CE4vdu1doiuV6D0r9eWHWHrwYXqh9gEB1S\nwS3TeptfP/BQqHPcu5tYpSOxoF4beW/+zzGgk3oXmKlqjC64WXp7dRHZLONG\nLG64yIackVGuDgLrcSAyXaXaRnmPApXtGzRp2gUYIsonfyRpqdSpxl5m2AL+\nUX0RHUkP98E5vIcZT1TJC/5bMo5A/iBwyPX976Rh3oGS6d529muxRbJyYlTQ\n9QUpiTKXwYk9Yyz/xiFIBmYBur9PT7u5PIUThpHiN0gdL2GLHEygnWEA8qZw\nz3nmY0XxTHKVt6UzsVIvat/9ISwSKG4vMmHX1STza3JKNpzW/L4RVCEoBaZT\nhzpF9KIghlvhSkFpw0sIMOcbXusY2w0svZFtvq5OxsNN+FnSUkzliwNmp7Ho\nUdLC8OkAGYcwS2wHg2FeSWvuwsgQpuYdjv79rCvBuENpD2Cpcp95+EoZKvaS\nNS1A4tSNeDO/+IPmDakXTKylrnr2Wu32CrNrRW9iByjCYlrWPgucmMBCM5Bq\n6YGHFgKwv1ipnO3W6uZQmukCK2IeXyACQ4eQ95gbdePsvjGMtQ9CP2nRcDnL\ntSOCCkZ35EpfrgaAE8xMTIeX5/bmRHQvbgCkJiLOYrc11HXdyxv31pQOXO5W\ncPGP\r\n=nx2H\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.265ecbad5.0_1582664434563_0.6197209447002561","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/typography","version":"5.1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@5.1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b346f4139b231f17c84c439a1c7af311c40c5844","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-5.1.0.tgz","fileCount":19,"integrity":"sha512-yh02koa6JLyPT5u7Zb31kyqhoZoppL0n9FmZK+eHXZcfeDF7ROL0UmtRsEjQxfnCNZRR+FIhAgrzdYxClwH05g==","signatures":[{"sig":"MEUCIQDlYdTZpa+zAJv5l0feThCn4f9q1XWk35j2aLS8jKvcGgIgC3eU8aQgusAC0VKH8iCMgKKtM/8qO8i3avD+bNXepaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZOuCRA9TVsSAnZWagAAEpcP/2fncvNX5DYVHYNNQLyU\nfXEAdkPZe2RsyV6H/bvL2wzL4t3m4RUmcQQSViiQ83JNR2AwQO605uyx2jE9\njbTo1x3SqoHtQaPkZfnlBYy2WjeqWDx9UQYg7BnTy+63A4U/zPoUnbpwkNVi\nq621LB/cuw/Nl4/ZI8shpAkzEgQzgCFHfG8563XnsoZnKKgjrA6LDNJYkhYg\nKqujQvbijzo2+brGUqJNNreoH3v0x46hugpo+j6VuZ20+wuQ62+Sy13G9Oq1\ncvOUe4Fn4zyCEWUCJZPgNvewFEKWU5mRSs2fNcdb+1f0Wf/lAj9PIl+REEA1\niRLmpFYxna08ThI7uBbRf8AWIdNAO2YJNWJBAytZIjxdpTe4yQ6FOyu0Lp8y\nEggmB2kiVKq1CLcP1Gf4/yiJOdmA9CmVOoOzo9MvB22DzCNg+u43fgeEhh+S\nVSEiqf5recwcntRdfRz4UowAN4A7QtC3ph3xnS1qaNpNr/dkhrUItkewyKv9\nTMz3Xc3KRPrMrUIuXNlYlfDrA2AT+KAaQevj1YiyMo17IKbCoCCjSUipoKPS\nhT7tFZgurNuoIdzrmgffojJC3gSuGldhzUnFjC0CX1wAGT8LsE1LdyLkKDea\nNw7+Z0cNxIpvyjBGB1knMsdUGEIhg3wxj/84vy6KNePzjL7cNWmaPF9rOAp0\nSMVV\r\n=KS3I\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_5.1.0_1582666670195_0.43572570897156804","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/typography","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"220306e631da16ad103b8a7e5e927554400c0294","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.2cf87456f.0.tgz","fileCount":20,"integrity":"sha512-Y49mB0/xFmfnDuYHGD+buRC4d1tyjj8YI5UybUpEMYygx71ZrN8Xn5+eCGyX7qIbJNQVnim4GFzCnjAVVsFycA==","signatures":[{"sig":"MEQCIBlsTPumRBq6STM1QFSd/mwl5myDcBUwqFN9FOvafpeFAiBTbOPvY30VfKo439/RBX1scIDoQnSC2ZzPFKmUenI3YA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPYCRA9TVsSAnZWagAAQJoP/Ru9kZukqIT0skMMXLin\n4uOwzTkljKqFY8Fav2LKb/GTsdQXZoVeKl1RiOneg9Onk5+wNxAjPAF2b399\nEHEhCITVAXKlMTjVo00pLeSmqd/sUZ59ke2ujZ97weaAUsQy4w+Q/08Mg4k9\nXuAKmAN9745eWuPO2PAYNgCku1M4VVIHDIUjFuymFtHVk274ehoTLXdpRyD+\nLgqYMMyCWfqvzaqz1pXA+mwjE2lyMn/99oewMPgPMRjU8HRyIhw8rzdRVX/V\ntHASyybFWoof2OXkd9ouUcfLNg/DhEByQQnTO/FmKDYqm65kq/TzAt4A6GGF\ng02F2IR/IIoxbZmUkfLqaTBFKVGh1BipkfUxz6nFcb3uFA6wIMIdltsqUp5o\nbwhyGRsa/0HywCCEwLwBU7K3DnXY0h+4Orjc9aLmnoanaQ45JRSj2XnOOoqS\nf+ntyevw8XsfvmhkM2TyC0P17BImfRv+K+MjxVm8BkOYDj6lX+l1fEyt4Vgi\n+1W3eeCVG7qXnupfKWGvwMHY4bexYjAV6HGSABCSFcqjAuKvYJldBzEpOedp\nTxdJ6zhr3THMRy8P4SDCJZykJ0KjB5VBDFre1495CroXu3t2O8vG/Y+I20I/\nB2U7JOqDAZRrAeZchjzep8baR/0ioA9Xc7XBREKDPksBIuSD/xN9ae4u8ZZQ\nYqL/\r\n=1RGa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.2cf87456f.0_1582666711685_0.08814366091614301","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/typography","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.781434a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f53e5bfac8ef53a6a0225eb4d6a694cb86c00dc6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.781434a92.0.tgz","fileCount":20,"integrity":"sha512-lqFUoItW4qqddqf+MYB7buBZps9fBrHdpFON7n9yJ1hhqI7vHydclMy7oncmvY7pneNWTWIx562ybHAvGc+oBA==","signatures":[{"sig":"MEUCIDxvp1ZLfN0GpAz2/3Suh93buqpYQjpfDck5dRqRZ/yPAiEAmEuyRAqHYllTdkV34+rCbp2Zm5mQK7QsZUpnaWVI/QI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa11CRA9TVsSAnZWagAAqLoP/AmXH3bs6N2xGXlPkvO4\nV6rDR4tCc8MfZ6XA9eJhvMz1Rc1MJ7It6OJKF0y9DBw7ckvUoVQKCkCoEiuH\ng67YQqCSQo29ciJvFzipkf4uCsvUAElTKnty/Jyv/BaZyDCgvYjUi7pWkoDm\nrNhwKd9vU28xl/Idn3oHeWZVUqZNIYhj2hI3zXEWa8HnhdjjNo87Kq0eVhpB\n9gBa59mjrKA0c9LeANKVEG8qvuF7yhZor++dyn7qxDv6kH8BcZjeQ97QRyzy\nPpL10mGH0Qgaz/H/OmQDKWSKMmNKHHMqWvepiWDanMJEGqqFUPMghmhReTuy\nE6xZAHsckudikFtwIKBZS8Ij0/RBlSUC8nI44Xi1gw7WLlND2aLlfZepv3Q+\nmoNlyiPGt8wcxfyjuayWzOZ7r1LmJmlBAoy4u8wKgeCm3Jb06mCAnIvzixbm\nofAVwphXlgpTea4aUDOblkaByOsCYH/GUWYaRxMc3t57lPbTpahhIrEhOJzm\n+BJqsf4L5HAqpu23bvJQwD1OcQ3cliVqTjWgWmhNEQn2IxIDkJqLZmXrCHg1\nEoNpSnrCwR+yIqoULGCrRSf7zBjudUmiWqFkaRsAiyAwo4RMqpoRVOz2iTop\nLu3yrXW4gY1TURQi3fQcX/yec9mW3qzAZTLscaq5aBX5r+PFGUkuZlFXv9Gj\nu2B9\r\n=cscj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.781434a92.0_1582673268514_0.2104147780151997","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/typography","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c0b58e019cde4ccbdc07effa90d4230585cc0df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.d6f60c98b.0.tgz","fileCount":20,"integrity":"sha512-J6YWAGZv/TfjfZSJpOd/aaAUtsdP2IjS3PPrjqfQMxHv45bI65aXuwmI3P00aQXn8stXFim99ir5znvYOv51AQ==","signatures":[{"sig":"MEUCIC/M8fOnX18B8zbU/DzQJIjGNGfudDAzVqxU8yQCQhBLAiEAuupJ+A5eHN8ttCf9UfWxG+eDRUsY4rHzewWvNorW9QE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4pCRA9TVsSAnZWagAAyioP/1kLMbb6j16k6TIbGvEq\nr1egrtq+YuNqMmiXqh7qD+FsnkGIaU4yUqQNSL+vjDlbdrhGMumw5jQcvqNj\nmQ32h8mxzayvN6BFr+wceO3FPmLbzu/NyhJ/excyPDxQLnU/zuuEsLv4XYB6\nTYjmYfoP6CuGZUnu+4tHjHTK9AOSj0g2O8u9jgXWe3H4ghPbzhZn27XtP7Ef\n8uYJzwo3ujfpoyz8S6YDHd/+ac3S1Ewmz9ivDu7ryAvedZFwJN2awfXxVCM/\n2fjsjuQvZ4mXcLFpvJ2APbRDgPa5d+51ZpmY4TTPcOAZKKlqji7pXBPiOcMF\n1KEFIn3Wcqrw93F2Cql89sIZsv3RG1IGGHvJD4LkVAixsarB2YJrKt4jTWy4\nlr146WAocTvON7ETF6X3nYYh1PdaCRN8d5nx36Kuf1kA+Y4nd6AK2CmJadWM\nR0FNwrrLIToDII721/VrU3bkLA1dLFHSSbZCRA1XWs64drVcHtwR03OtLF6q\nvtWhXciC1Twxr3rWsQVhJ7bpNRZFeF3X/hjnkO4Eki5dZXnMmS92/yJONPeO\nvqs/QjmgHseQD8qFcqBeYj/y+UJVZpwuO0VgMgUNX5dzHci8A2N0792Jsqj1\nWzBB6/9QmqoDUv+Q/Da+AXm1AlVYRNGg4sbY5R1T29CaW3IK4r7GgRFGDOB0\nEamI\r\n=2iIs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline-top($distance)` | Sets the baseline height of a text element from top.\n`baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `baseline-top` when setting baseline distance to following text element.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.d6f60c98b.0_1582927400906_0.6173252768982906","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/typography","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d51d7b96172b6288400adf3414d3d725293b85c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.69edc6e28.0.tgz","fileCount":20,"integrity":"sha512-zv8yxn0fym1VQ+W+Q9WpVegEH+x+sEyRh9svcwP1X0WLCTarbLlt9FarIVzd14PY8JVFOS6a3naxAQmjx14oMw==","signatures":[{"sig":"MEQCIDOs03WKws3yTDgZpEvgCfJhcmicyus+IcvgdQJeSa2lAiBYMAaJjHwTFhrqlR4oSg3+dXYUv6rpznFG9rKnQr4W7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZAtCRA9TVsSAnZWagAAJJ4P/3GPdXueW/PxCNll+VR1\n8DQ5Az6cUAehLEJ0eF5oauNjIT35ynfyFF3QTgvYAVyzSSoiujedsHTqVC2T\n0q1zWocKOwjMJrfA8ZPCmYHXOr16z0BInATIPwUArXnmLblpAzniFPOh5XR+\nUqyozDRRMc+kNeVO3IwNZoXNvkMboIO0AmyTYbcFoZ3hJxszKfYJn1QsjoB8\nWPUDX9UfoT8s21+p9eW5/RBT3O7jkHlLnpiTHet+aZ/qPBE0yUEKdySqAaA8\nDKJTuwQ5+rWFPkVm13pdmUAo/565G2wFFCpr5BQtCp8s+Oif5DtZaLGJPotP\nlo0PB7WcGOL5K0RZ56vwKBh/bDOdwwaDTEw1gmhGI6MQ65LMMN66yqwld4sS\nV1uNcMqNO5fvSm8MM6DOL7RFlH5jMTAJttIFkmB2de0yMaFW2r1/EcQBD//+\n96jiryYfE1WqY8B3sF0sbdHMO5/i2v2HGXpnijCDgzcMdFpbTbJqJ7RDaJaR\n66tA859wztEZGqZ58t++MzAISgOe3/qnCtpH+2i6tZz8atdfs5ZPIVaTo3Aw\n24FCDVtZGE0c/FK9xufTnsmjrU0me/fwpk0RA5v/Pwg+PLrxOd+r43gfMODm\njbCDL961B1EXFFAQIBbzFdoZzVPV1ICY2BaLfq/oCcrW8qU8owALkomUF4id\nytGp\r\n=3HpO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.69edc6e28.0_1582927916788_0.9088048175668852","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/typography","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.9372e4939.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3841b899329ae9c5739ace4be55beeaf1733bff4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.9372e4939.0.tgz","fileCount":20,"integrity":"sha512-i4Cr/4TdO/Phaco2shJIhQd4pT5H4WhXJq0igbhG5gejt7j8dS1rM5eo2PrLms2KIVgWMs1iRshAu+UYgClBUw==","signatures":[{"sig":"MEYCIQDR65aeVzjC5Kdlt89c/r3J2OWLcPJXIxUk9rsk1XQYSQIhAO3rmvVq7X6PHAkjkTVc5oUpUS+jugly1NDiVdN/Rhok","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqtzCRA9TVsSAnZWagAAU0IP/0GPqnbZ6cR8yH6pCkf3\nTxmUf6PtPn05/bnlzWUqEXPfdXIYXmPxdoxdB/qZsDAhcNgt1s+lYOSpqo5H\nzJNF8DY+p4kt1h6emgSuZm+d8dw6DqaXdJ1tPzZ1+yeLbWvzMLmd74GBk1xj\nI2+aycFWAw28a8AFmRxcH3uyouwCWjz3e3AbCixsLxx8KZ8npVk+UoATFaBI\nBbkD0WiiUEF/T5XU/s7IIwFcKU6y0FYPEIL+udKuOmYVJAeYgaQ+NrLbyIsy\njxM4PHEzBxC2ImpWvyeQXVKPnvN0WYXGd+dStuxnZqznPerI85JUHNLYpKG/\naG9RcbDv+FlziLUs0RDybGADQ5hMiM1ytUQ/L71firclBk1H8uCnZ/H87l9o\n0ENnTy80GKT2YkETUa76VHbEU0MNiJejvNh0aHkh1lqRVT97rid44kAEru1W\nILY8FQidV4J0ZoFKOl4mFPgt8uLR+OmwvwZd3rdjjj0fQwF0SOAun3Ce6gMI\nAx1tyRHgs+NU5yN6KPvTP7Gq2E4vZXOUjGuVGm6/ciBBICHcgZzuqsiN1A2h\nq0FpbdsKNKcUKBMWV1lbs328FVOB9EtACuCuklT18IBGhaufBx5ErComeu+q\n4GNNqM0+VHfqPBkfAz+rbH6NuKJWqXANhbGYFN8gEU45bfojpx+8uk0H6xhW\ny6WK\r\n=p9QT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.9372e4939.0_1583262579000_0.9513884975826772","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/typography","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31e9d6836b65f7788c4a172b59d4f5b7624b6690","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.9cf5e9842.0.tgz","fileCount":20,"integrity":"sha512-Xfa7xQVw0Uj3medpKU34Xh9mB+KdrLqXWWH17DVSnMGTO8uOfoSdp7AXzsbKTnj7SPuu7GsSn2rOpMitfRhISA==","signatures":[{"sig":"MEYCIQD6sLYXA2SJoMkuK1TS4x4VsA6gGnLMmHI+J22vN936VQIhAIP5VgDpYeZbM8gIRu9++l6+OYpas3lMOtJf135+2Sgh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudvCRA9TVsSAnZWagAAIF0P/A8RtHqeDo6RjaQYxtZP\nUGgAruJOC9uXAt++CET9pjL0uuvAYo7GG0bLPDLLNlqiJAxdPMr6KZtr4x71\nvLKcU2igGpGm6bZPbQNIkacJDYc+HymqvBk48CtuRGoQATERldtDnlyMJb58\neHfGIXcItQUAbtiJt+wntflL84w1bCMk0/o5bsvna8tCAfhuCAC0AvuMUUCt\niTCEXrZ0ElBznvytpSpyRS2TIE45YmxjEN8sbMDRxs0pBXBdpAhSNQVBDCy/\nXirbb9S7r+l1YhTe5TKWqnjcfWyGgehK0HVOkRBNSIASAhTpemGGrXvMOFI+\nkLWjMrNUjLM176XVynX+SB43wG37XFnkLOOHWtL1PIZPRSn5WhR0vtoD5Th7\n2MHJOX1jvE9IvbUY3UQQg0JYj6WzLOnUKhYXCyNksI8KaC6rlEcy2D0eLGs4\nGVa47Q5IemmS5kIs7HCjWIp3ihSrB6VlegqFlRp8hU6VnbBMaDTbcqVHi5yN\nKRKWVkDAxQfzd7odG7BVJzePNo68q5NF1McbyZDR3qPFvuCoZ8NqJpWXO6QO\njQXSORSUZUUqJYaPMaaYsgtiMPlXEUhmdnuNiaXqKAQHN31LaZiQYEsU4IiK\nfypEHiylN258ps0mSHOnR/1o5EXEmKXpCha1SQcdvb54hollJl/vyjTy0nee\n55cM\r\n=mjwx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.9cf5e9842.0_1583277935071_0.34320989408334457","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/typography","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.3657f8863.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e87737a9de1ffb6d1ead9fc9702412c868f870ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.3657f8863.0.tgz","fileCount":20,"integrity":"sha512-BdP0+D4ge3mw4oWTD9PtwxOEBnvHbDSiuxrRyJ/rt647Xjz1qJFjZRCIqZ9Gg5V3PfsxN/jpptc2ZwIGQWUzLw==","signatures":[{"sig":"MEYCIQChBhoxII7Z2Jj96wGyCjgtZFTfsi7wiR6uPtarX/n1zgIhAPfmtQ210p3kj0KOC3CTU07dhIUtB8WoR+/+h3dA/+C8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jhCRA9TVsSAnZWagAALIAP/2h8bXqArdomRy6ov+KS\nyZz5GRY5ca9iEUZ14IdBWhP2eZkWLTnsuOnnWMv5ec+Rc66Ezh7mn9FmZWXH\nxYCaZY6lv2vu5d+TGvfqVeNdHAROFO5dv03KAM9PZ6mfwHCQRfS5UEmVP4lL\npyxE9NXUyY1Xa2bVlzW3/Mqas2qbgIaa8YzcDdVe8Jro2apuGLCpcNSVJZYH\n0BqkHzEheFv9zklsC3naOcF9OuD+aQ55RwMYRwQ3lHERuwTw0ty8J2VqRc8Y\nK1697BHT2nHFkHehm529J+7v4Z/t/clIS+qqS6SrS9/w7M70A+eZRmNUEl3E\nf74k2NJIXyTKnBUuFLgUBiu1AGdoQ0lRw9NJbETp9Pupj6dnjeZ8dx7Us0Et\n79DKFbpHyr1rZ0tI8vOKwFUJGbMP9j9hbYfubrvNhnH/22aUQNt4qbkFEw9V\nkZ5sy6Vqj0f4bFyitkJdCpNg6u52meibotyTDUDFmrU5WoWIwn9s6Zhrg1as\nt+P4woT4G0CAqCMmsdQLzJyGcmmHdzP8OmETFcKQVVYptA+d6YD6Blxj1PBg\nJnaYbzEj03a9vYLxrbES6txx2OXMmTEAY+Swt/4eDWjiPoiTmkYI/Zz9Q0r0\n/yKVe4KRX8MgMOO278B2HDZP7ol12fGg6Slt/kolctjp5bNTjJpa+w9/bo1z\nrWHm\r\n=PDcF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.3657f8863.0_1583343840576_0.478461372354843","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/typography","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.98b843417.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5de3ff33baceda14ea6eeafeb858809da6d210d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.98b843417.0.tgz","fileCount":20,"integrity":"sha512-0XAqRaVG5+sWjvWcyoHL9Qz4zjWNwlaEB6BR7g9XqdbcYvmVItZytp4r5UyGPwN4ODnCgbx9cKOVdcaYb+kDFA==","signatures":[{"sig":"MEUCIQD7EETbGR1qZphQcXMOF91TAXCFpb3zlvq6MVN5G1TgTQIgTw5hODCBh7R9IPdU4VRVKPw7JfZEM33JsNj9euFCpkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVeCRA9TVsSAnZWagAAhxkP/3iZs2syxVuAID2U/4b/\nsN2/Li+uTQuE7DluIzjnU2xV3xEUcQvazJFlTq03HLKkCc3KMMvpzNqIMStk\njoq+mpzaSEFBvZUoDJXm1007tbdqAX1ORPwlnB4hQW14RiqyKC3FoV79jDy6\nV4+zCLwzu3hdW0KLt2wEwyQPoMy8CQB9Bvg3zSQ2jg3UwXt3kTuWyQBZRpbd\nbFd7sFf7QNvRw6OSD+RPH3ZRE7K3hgBvI94WlEdsyikPQGGIopFWdTJjXoA5\nIKQAueu6lhscjKfpua2nds4fTeVU2m9EEMCzpXbb/C40rQ99txUOxsh+2JTP\nqgq2eY7s6pM8ICVnErYrFVH1t5uWJ2aNr6UKzjYX3E8a31mGSVlSQb46OqM9\n0Fl60dCZDY5J8JhZvJ9bqYRqdzgRcpiHXOt6o5AQ4n76gOeJpj+O7DPp/hu+\n0dnm7LMcyzYvfFo8fSULQ3QrbR8LDyt/NaHwAyHM9iLxsp688Yo12/V0dVrf\nnLC0ea68kOIrJaOgih+fKHvm1OoZJ9VzfO0lNPmoITxzEyq0j9GzbVu359c/\nPah7d94o1H95yUes+SIi/FYRa2Wqtth66/9SnbkjK2HnZgoTxpmni5JdPcd+\npbLrIa8v1Jy9OkL1rzrvMo/gM/cNxAIoaQBh0pBttElLcad6l6sIhcZH3tgM\nFJDt\r\n=OoQW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.98b843417.0_1583433054243_0.24160966918085935","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/typography","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"604c55b7ee342a8307f6e0c917ef16391efcc502","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.17b9699c4.0.tgz","fileCount":20,"integrity":"sha512-wSpwKQPRXzvPCE5M1acz5KqP5vCV6MbJVF/NrLR0GJzifWO6fG2XHon1POddnZIN7qC6ugAb6dLjZ7a+xgQYFw==","signatures":[{"sig":"MEUCIAlaLu9CKH9tyZWba8Yw91ip6+eM1YMsjCr725ke3jDaAiEAqvIx9aBdPpf0YSxCYbUNmI2EOUIVRBJTWQtSQqnHkB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFhCRA9TVsSAnZWagAAPFkP/17vwnPa88UT2fFgE0Ex\nJemeIFCGPbcmFiPnnZFUgoqZMtjqhsvp2X6nTejaDfXoiPcLQIu0DN05pIPl\nR5CDRt+B7Wabed1mjlmQkiRwvf8mZ9IBuLFf5V7ZIcqT29Ez7qcybsJ1dG2+\nrgnNyyVH54IEPAXl5I7Nd5HBHExZJXPOmdUiGblRu5/kdfSDUvoo9PxYu+xi\nYyguCR8T5dRFRco2tvw57jUC2Y/PBy+UZy8R5EzCk8I51DLkbTcck+CWLf3B\ng9Q7ACfh7aD/cfOgjY2AvlzqtUmthUjAiLpDzF2GATQzg80sfldD3w9ff4Tv\nCrfK7wg9EkAb475mDqSF+z8apFVjMEsABebvaGPy3y/lMEHXRjDaAlX4vHMY\nKNCdVBgXycj8ezkfqIAYF6p6PRM1sSlbUZryNLB2YIsSYcSlNC3jAEYBoFLZ\nMgiLZ084EiwxjJdgFExuM6BfCsEL1/XxBEhZkhVq67+KR+6tPSnox3e5R5md\nVYx/s6nxKqHqn0CagpR9BxbXjuOQMXwqQPtTRatfrv859ERyCts+EPoB5uH0\n1QuOFlGpSipxjxhSaj/ELIpYSrIqNXe0iDoUS3GioswYipW5kG1ltNjvKrI0\nB1Z64I9pes+Jhi/JLWlDHbN5nN3z0F05sMf4Nx1GkFOd9PGyl/4UdiIA/xXc\nEz7D\r\n=cP8L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.17b9699c4.0_1583436128718_0.9846940144830754","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/typography","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.6ee035572.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e0dbc3f5f461f2edcaf9f9be10cd90d7e52709a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.6ee035572.0.tgz","fileCount":20,"integrity":"sha512-nkBOODLuELkwONEaEVPpYNZPettUgA2YnWbBF1re2xklNm5k91RhGGuUydoiiCpbU+h+1Jo4v1nmfZskRKQhVQ==","signatures":[{"sig":"MEUCIQC4cMvNnht/2iuYQkE/wmvHFji0s0eqSjdfE+hrMV/GGwIgE5oyDJ/YSX69luyTQ//Trr7hYKdrW+AF0a9lbz3rUH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLiCRA9TVsSAnZWagAAqV8P+QAcVomMw+8pvzv0AtoU\nTjDBVt8EBvHepYe2ahYlQbUVqRpXn0mAC44Km0wrjVwQu90AQ8hE4FC2ZMXS\nxsTmgiyYL7X6G6glBq0PuZhRYsxDUDIFExiy5OyIA2Jh3G128adS3+1UgO3S\nVR22OPoVpz3Q6n2Q7e7MJSiDxa0OWyxTduKN99pXwCgbF/Ms9ZpmZ/1w1G9v\nSSoltxQASKduO6pS/lDKU1Fy63OTcjIEE3WzjJtx8Xjf9ChplJmyJX8NKYfr\ntC6OmM4BANnYDXOQFq847EFLdj0aCmHRT15/sbGtUapCNf8IN6dvR4nXCVuq\nG4kJI94s8B3lNU/FUQRPiuQF4nGzuAzuv1pJY2L/KlS8g/gd6FJ6BHVnbTsE\nxIlcaSwAH5D3/MSdshv1fuCfWMyDRVBoIr9YpEz46ZmNk7eum1dM5ZxVtli6\naUy/3l4kNY2lXcQEamGlS1atL0PWcdb+jnVOJX5S+VF49NdggNlzpUvEJClb\nkEE+xbsuJNAbg+uLBN7I27/k8iIE8cSpxO9q3kZiYhWIKLV90AWLWeHWOCiX\n/Q763izC5x3NQX3YnKgjuA3yRJqW92StnioLVEyHlKVn8pOoH5QLROHa90Di\nyYMnnVYe2NCTAUd1FHHyUdGIvJimsTfKWsbRagNGrDIp/dvhoARFEYkxLUql\nm7AQ\r\n=kbIR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.6ee035572.0_1583772385268_0.4373293714282125","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/typography","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c8f05bad09f7196f38ccfb9501991578d1ec2a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.bd33cb56b.0.tgz","fileCount":20,"integrity":"sha512-ElnpC+EOftBlQx72ibl5lt0e0UeM3DRsa4hon6r8qC6BeRmUD+zd8FbgdeRWzpO634TSTIRfaTQqLhSmGNCr4w==","signatures":[{"sig":"MEYCIQCZC75fKejOyqrmQjVzp4tFasZP0tYGU9rmbScCG8SfoQIhAKt+aciUKx/ZiHz2UZqjVg2Z+rlTRXv3d6qMJslS159c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnstCRA9TVsSAnZWagAAt18P/0Xrr2Rm2mtFLpfOaJi7\ne5Z2G9/mO2rLU6MmlTO9TdRQzkS2esZrfDZwhXNl6DFiV90HpN30RLU8OKrk\nwzVRPkmbHtLtEyzqduhL+RaCYPxi/ZLqfIwvo9PTBD5Dj5BfEFzmlDH+yKH1\nDfu76Td8q/zyLUO76T3SoGSP1fWs0me7aUCCMsyP1BfhG/84qouClNNl/SKG\nNRSQ1C/QReocmTx23JSopASc5sFjsczgpgJSTO6awecRcJxw7wh5B86TJSo2\nbFHY1d94X1sg412zX726Q4p8qplxVmBa2fpRAcCjsHuXYuTUrRZgxl/gcndp\niXM5nDaG2ds6LalaaetfO8gPYzxPMlp31BKc+C3b1R8gcRZGk+5wmpR2/nw7\n6auFBnrJWBNNCdSpUMNfEPUqUNPp9DCWyKtSqIIHYYpo6RF9/imZfWWSKkiq\nIQ1Q5hdA1guFmhntF6RKxpIF9hMsjUvf3sx3tKDh6P/8D2IIZbyh2/9JPDhD\nYJcBgC236kQ00Y+E2fIXXD5ac2VSNl7hcm0T/q7mw+l7/m0LGB0x/tsp8PW2\nSH+24ylSxk8tSN3/AfrnoLRUWdkhHV1cI/xnpY5Z0XUEfPz8xC9wInaJDpBh\ncDvGXludf3Fvd10ZDcW3hMCv0R7gzWp/2MROfl4PcqN1pbR5/j0VYwBF0eic\nnwtL\r\n=BDmk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.bd33cb56b.0_1583774508739_0.5891454653707402","host":"s3://npm-registry-packages"}},"6.0.0-canary.9ebee4ceb.0":{"name":"@material/typography","version":"6.0.0-canary.9ebee4ceb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.9ebee4ceb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a32aa153e6b09157b7c1cedee83c53814b6b68e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.9ebee4ceb.0.tgz","fileCount":20,"integrity":"sha512-wFBP46+QmHn7cp2bFL5TEKaaaKJ0phGbG5DL+tIf5bVBU7+E/nILQ1QRlzRhqXR6MZoAa+tuU/n8jHcBTHFt4Q==","signatures":[{"sig":"MEQCIAwoGzM4Lagp6l3RD+jAjq/NIEJqdLTER9e36le8rhoIAiAOKekUpXweaijXb8XSD7y1cPpSgEMAJ2Dn1p7VlSvlLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZrF3CRA9TVsSAnZWagAA4asQAKSCzDzLNIqej5yyugcp\nqW+wDoxtGlfxjCoFtkig24ntq8P5GkRyBxETkkipUuoCoHpz3UnjawbKfAjX\nFXwmDsabEQ4HkXBayJezkUsRv4qTYtzR7BMvz/lQmL7mpn7xwW65T8MUuVJB\nGu6iNTXDDg9NaUVj7s+hoEFRLhs701f2Ru0AtQQEnLaeTWch2go/Zw0je7Ba\nlvvPY8Wgw3yXgN8f2f9Ak1S/yek3vKj8ubgOJ9eHtetRune2B1e72yldgtil\nYz/1j5JlHwlzmKmuLvKn0F5OWPsic6T9z3JGzOF4RNtiIc4dvpfwAT4yhWrB\nONM3LH2KE+x1xq3YOk3H/qlaVgDfiLX06hk99N/tiPvHggYGY7BegQTQJWoU\nEKpa1MMbUN0CrRrNh0WO0kD5J3Lb7naLZG4ymc4hJWcIab/HcaKah19gdYPB\nwsw5v3k3ebGZeNouKyQMnpW5LDsX2Mrj8KSeL29yEIzI89sYVfBSM2cSSGt7\nwLwMsv3w5HoBSke6h6bAkL4Cm3xRm0jwlNci5gaiBYQb691W2g4e9m06Kwlc\nGvp9ZLL+fqEpU3esLMQJEWLYHkBUmMKUYy8U5g9DXo5DOc0MjidT4lH3DrVT\nUOJEtwtpDaCJHKPPd3uV48SAaFUiPgGY3JQ6Z71IQHeRcJLtoiyxKbTBF5iN\nkFe7\r\n=ovYf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dfb57a81f5ec017319a5b83b6acaaad397e95839","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.9ebee4ceb.0","@material/feature-targeting":"6.0.0-canary.9ebee4ceb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.9ebee4ceb.0_1583788406636_0.40600847910555515","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/typography","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.26c049afa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54743883f2cfc84853576ba15534104303b835fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.26c049afa.0.tgz","fileCount":20,"integrity":"sha512-N+yyo8CBTqJpxd1VkdtPunnM4CGTqP2DPSJTKGL/re2g557EU74zQQuxgGQEjV37R22odbUAXAzLlw2QVUPV2Q==","signatures":[{"sig":"MEUCIQD8mvZSGd5YeL0UgeIKM3L969X8Mhrni0ONYMrDkD4vrQIgaKAoWN3gZdYSlh5mCwIzP1tIVsXK2aw12c8wqQjvfxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gWCRA9TVsSAnZWagAAnOgP/3V5dYA2p+NmUi8HSWr7\nWia7fsUQoqmSkSue5a6UFgIrsgGRUhq9NkbioZVZt299CfWK1gYba0bVU9Ln\nxUTcOgBQrI1gQO1HjjIAD9mp4tW8vZSnaHl97f2IF753rTBrPxXW61vn/1Ye\niJot+N3WycM2Zpu/9bqePaoaY5/t/pwMvDOWfx7GfRGmzf6lL3E8cyPeYu6F\npELGZxWIloAmm0zpQklCl6379NHu6NJPl9CSFBoqWl7T8aiYj/CD++Z+qhP9\ngK0tWRUHF56LEgoMfiCgGJkFfy/PWlobQOGYevXva/2hINSC7EIUNLC/J3cH\n3xblt7cp3AB0pWt6PhaIj0qYOdhJ1BJtIqPdGzNEmoZKY4fprOWsdDUyQm0S\nSc7TIdmy4hKNVkS7s3HJdvHrGxPOB8mNH4t/wLzzNe28IVnrGz5ljjneL0t8\nIU+U2hrd0dKQ/YxUQndrVkrL5BP5QklEiA/TyGikJZxeG3YnbNsBc273ZGYX\nbnRCwsTQLCucFt3w69hLa15VSVF3P7pylcv6eA90+ZEyJ5ZPlvKzHVRR7uuR\n+/MLDSOhcBmyQ7UdxJ6068o1hn9cs5RjcSGJmP2o5lAsuYVblASakoAdcT8f\nDF96+AJUfPWUCwmawzJ2mpj/ZTY2WmKEqtOuj0ILnc/cgb9rp24Qb8eZ1NqH\nWwhz\r\n=3nGW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.26c049afa.0_1583859733494_0.935877232190027","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/typography","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ed216ff8f2214e48ee565a60f7c07c810803d41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":20,"integrity":"sha512-wPqwYeU/8vVw7YOATuDZUDzUS7IL6lx0JwA3JrKN6nF7ogbk2AK7hXLe7ULDpU2I7lFJtu22vv98sFQ17hUNkQ==","signatures":[{"sig":"MEYCIQCx8MGnQj3awM7+U1y6u9uN58q6eBUmmQ0xeL2DlmdKxwIhAImzBZHXKNDMnvzC/3EqeMC8bpi3Zvh+TjAt5VTfPLvq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/pSCRA9TVsSAnZWagAAO6QP/3IX1cfQsFeD6fs5eH/w\nLGXw6a+bl3TYYEkCtSCTuG3uiqeaM2KM0srNeFXk8oncO8hlkO5lXSsODOeY\noMqAXIsWwhPqbpUBXCJh5aYsUfD5oiYZK0xDHLzfSyyi8wZbH3qVbhHQ1gD1\nZ2xK9Xn9PjqrHPywsQtBEwTE1Mg+HlWOq4lqspo/ZNrZVovuDeitdmBqSI4l\nNqkLiT40uC1EKF6ru075uz9A2IvdjhMHBWiZ+iPSkbxBl/VrpuiOjUW55qb9\nXgLZv+JHUHK+jfm1bZoR9fmn6ewbbQcnZ9+ATn26GI9EZHkIegwIJPEpaFiR\nmqdgr8I8nPWFSOGDobjShy0YXdVLokIpC9ScOO7Y70kbZfxol4N/QDqoekgf\nt+aWQJEyoL1+sgkAE7harHU+V2QsxPIsbUsfpfk0fD82YptYN7+32Tj8ebSH\ns3gBxI3URLlAETnKql518niAZ0fCZaefS1WAG3rE07k/rGQlFISQxDFz4i1J\nIn58CrqntlH32QvwW1QBOaPQEprrwXBQLjZ9Wt/pkbrAK71VbMhlAH03WKBr\njbhGDknn2ewxZkByDyrPNdzGzz++vOXC+nxhJyuBDmn+Y0dw66XTu6RxOG+D\n+kx7NSIwo9Yv5bdGr9eeiONaKMGVFcG56krSwdcxriWMgCEP/10YPfdYzzVR\njHOb\r\n=JJHJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.1db5c9fc8.0_1583872594192_0.5652879776896125","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/typography","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.4971637f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c6f80b4b88fa886df5fbcde123ad56ff3f5b09d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.4971637f4.0.tgz","fileCount":20,"integrity":"sha512-vg2hyYTPR+oINi0IzpPrWD9ZtV6hq459Xao3khkbQgmCygl/7IoOCSCAiitmRouzN/hZguOyBAB8+n7+2Dh7mQ==","signatures":[{"sig":"MEYCIQDTbyLulyvcpsnaTITz3Nw1o8VT9bPh4mcfzWcv7VBkdgIhAN+M8TDnD9+te2D7PS6k0X4PVCiFY8WvR9vCWxx9eMh3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBuFCRA9TVsSAnZWagAAl7wP/iiLHD7TIti0lqQitvB0\nz37w1x3ahtNoA4SnvkrztdnMMPQTK8P6W5EDu3OesH0f8ynETiB+fi2W3p6h\nUGMJK5OvPAsOINFMvkoy9qFc1z3fr156+yrRXz+MBpovbWUHWCXxy7XaICGV\ntnNdkkh3EHstio7m1TkjEJSn6pv03Ynq7RUt3ZXzJFKkZ6bCSWXn7HYlXR1p\nh9iubCbDwpoSv00IrnuFKdE2lGod5+veAxCrlaEt4DKf0FOPkVy0FFKSnsm/\n+RG+BkkjrJocqitaSmh6OxmU7rO0dF+DIZrgYvwfXt3SRHlHUPur4N1PoOZ3\noKJ90gBMdmFg3emjwyPr7YSEojaijDauzUcJpEJp8BWGT0hQelCLbs3e6ldK\nrWiyvdbDvn7XouJ6ngM6Y5bLXaw4c5xLU2bGONl6GYDS3xeufxkxPvP5CdNK\nMXpFPrJk/LRVlVsEgXBYsjH5AhQBkaxHqegzXVPA+/+O8DB61VzjfFFO4y6v\nzBeFTMHn3l9JA8kbgdv8UyFyyeFIFAqwzSB5xCWybbblyAegnhX8P8P7k/Gr\nPxn3teqLcce31fHVFXyDw7dPo2sPNkbrwA55w4diUkp7pNLAJMwuV5WizCI1\nod01p6Y7lCGh5UhVn5U8H00jLrCmSprIMwHHHJL9i/aBRR6BNye6e1rBf7b4\nM0xT\r\n=Vdsp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.4971637f4.0_1583881092556_0.08057977195614718","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/typography","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9981a0eeb295f66607c250b5d44557fde3113f2b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.1ae8130ce.0.tgz","fileCount":20,"integrity":"sha512-pMmXuB9GbSmkrpPPOWLDHBg2a50mUf3lj0mswQ0QcuRy7sUPN++/aanbsPmRa1BVZeU1S4VmdbCdtPh8bYzRkA==","signatures":[{"sig":"MEYCIQC/oOOR7yRKETsCAgj2eRBBS8OrmlvBDl6KSjPakBI+NwIhAItX8TZZCA58Nc7Kl9M8jKtHbdG6H1cM1l0M9bfK2C0q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0uCRA9TVsSAnZWagAAyCkP/AuirYdcSHMqAjPM7H4r\nX4xeCji1zuzIc3tJUWuv11KMV8r4qMjhfgOrRwnBxr2R5KkBCasTJOv5yvlu\npCf15KI3KC1OsngAZc0Mc5OX1CklkdTo6F5mWGLuIodwhuJgMJwUy+uaahmr\nwSP8QNAosiAwcNem8wB69QoMw1XaDqjjeVaUZljrDQZpxsUq8d/CZ+EpLoJa\ncjhMTdj9gHdgbJR22yOj+B443dE6tWTh5xdbz2iM5QGn2GvJ4/FRSrn8p1yM\nFVVcjEgdEgXckGYkx3LYdNUORYpd4ve/hlod3j1P0x2X0fVEir3AqGrsBp4F\nUYlgjI15CBJ8nuV4gPaggiMPnLW1W4ZMBLjeIaIWApgJucw4VwBqc98xi8w/\nzWMZzt0rXuCQNRiRr55az8F23nfUxoJZt7y33ClMwqf7NYeZUUKTSW25Hwkm\nVrbQ1UsC7TquwwmxT6C7jQp2PlSX2nJp9PoqBjLFJUu/r1UwPD51489k6dE/\n7+O5J77uIpfA86XhX23A6dCa5aPS+IufKYYdFaUthV3A/SEUAbuKpP5+Innx\nfiwxs+0p/S4waKjfIRLp/vAwnEcha1WSUpuwoRf/G8oyv3YF1JfHdpxWEEQ/\nubUeO5zgeud2nLOVnqdnfOMR++FxGMS22F3Wbi0A6eWKLEGKafKWXpnxNQee\nE/+Q\r\n=L2oU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.1ae8130ce.0_1583881518361_0.42614746856274177","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/typography","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.8639c2690.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fa319013bb94a34d1bb502aac32fc92c903d0ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.8639c2690.0.tgz","fileCount":20,"integrity":"sha512-G4K9L2FoB7Bup9TMu+wXZmzWni8MAEtzjbnsmie5QQkJqnoDDzGsgR/HkQNtxFO0d59qhnZcAIqLk/aOQ1Qbgg==","signatures":[{"sig":"MEYCIQCsFy9/3QYhVUqJaQTgHU1jdayrD1hF3bZ2MaxpGuHbOAIhAK0i6hO3pioOaxRtaPkhsB0uPIioPARu4fbnHufun3OO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYiCRA9TVsSAnZWagAAf/wQAIPOrquAqYS/ZbU4GvuC\nx/lMkLNKJuAgOBGYxRKmoz6BPK/P9AnJ6DYt6QsbIIYxEncFu0KNZnDOngQW\nQEMqkDiMl1efIPRtj+2LD2r0ZZGogg0fwHJfr7Rd3rMvCLyXKjeM/LyPHeTb\nbYfOBaPnvn+1gQ3fDvG8waXVhAHyI1w7oF0Ngnd6OeQ7K1OZAfEU62RkPcxd\nd521iS8bepa8KW+ZaWy4i3Numg4h0xHOblrywGnRY7ov1SGw8DKX6udVQ7YM\nnyQsx/2FJIW6kXI6QJ9K3cWH+MCBhwYneJ7+lq5VlUDrATKashwxW2viHV1d\nXp/pvqyy1pwXBkPc4eQVQtlT3ZUF+BQpjb8z2VSADF+yCbuJlnlyygfqcLpT\n52unocSNLJ9HuGiCkuLtpQsQ613mRHGJKRZFxgVk8a9b3G0Avghc8b/UDmGu\n162b00V2uM4rRpDKY2JMIvpXGNodEt6comS6xdRZfFlWjXs4Ei+gbTNeOnrk\nIRWJ1EVQepoopNOZvVtDwNuuuWlYhishD8DHD4YUwdGCfaWYpSPBd7jf3+Jq\nCETY8UkZgsA5htuokY7gtQvfH/wJ/TqYpsHwwnA/5KVacqxdVeMNR3EJfpSo\npq9nQ0OAD/hVk15pI8IebV19H/IDqzSUxlcKhHcYG3BUVyGOPCcnxoxmSSIc\ntP6D\r\n=uP1v\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.8639c2690.0_1583908386036_0.6900519804887524","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/typography","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.d5808057f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc26d9df231d5984bb70fc0c114a2557b4cb895d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.d5808057f.0.tgz","fileCount":20,"integrity":"sha512-/sWIMS5wLKLzlSaR9BWarpTG+rwDBEypHIUvN3PCAyaw4YPDjvAZRnROs2+UXAGtDVFSIemjhS3+MpoB1rRYWw==","signatures":[{"sig":"MEUCIQC1yxR3JNdiu/Rtsl3xhMHyxQjRx4F+cJsSLWq9r8YPrQIgYC8+IX4liYWN4DJjkg5hYYo0nFdQeYecGyDfgxy/bZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDyCRA9TVsSAnZWagAAjQkP/2AFJJpLf3637x5nSEU1\nAKx+zrh6vHUT1qNO/aj34Mv6s9+PmUYdaeRywmYIJ6Ntns4y4mkqqLZYA0mA\nO3nkE8NJHhkybe0cMOKL/KtOadBQTK3WTymXcdOlRDxP20ZB2kRyGSrxCVAx\nIQYbp/7rw2MpJcouTUu8xhkE/0U1fSkWaWkHtXHIv52R0GvQKRoUycYGsIFc\nlGxMTp69vyFnvKsX3FF1GFIb3HcrwdaZ7Qee9qxjKTBt5NxYdv3BvrUhzxoc\nJmyTJ5e8tZhAdqPOlAYxUu7lI+vV5sfWrhMVZRl/tMy4SmmWhVLFATNCmSpt\n5RwvN9S9aGT0+FChyKFUPZmNaHOeEX4jEcxO2yUv3ytUe5U3XZKmiybmsYTI\nt8GRdGvvAVzz7uSNofV9GIQMPvvF/MOX2kku6oHVaj9VcZkWWtvhd6t0e4PV\nPvWb612BKCmSUgunhjUeJ/vufcCwvG+I8xcbIkX+CV809pDAEs5xgChC3SWq\nBJ2Aq9tcC591w02GO47W88WkWCalQ4WP2zmW5zGTOYQyRQPxHRt1a6bgpMPH\nSm1YrSECxj6CqTIbLqX/93JdEJVSy1/j1pPcAcxUepPYHuUYLR5s8fiq9LRS\nDrachRKwIblll/XL9xQE8c7FCytLpmQPKhzp9ICJ1nZH1xsUOuD0Iizgx2tH\nutWA\r\n=c7Ba\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.d5808057f.0_1583943921389_0.5109752762937916","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/typography","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30f6629dc8a76688eaabb168b6b325a998819068","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.b3f58203d.0.tgz","fileCount":20,"integrity":"sha512-Oif+XRo5wbEMyjd69G7RpErv1Ro79ArveYD3OLkKUbVfUYPSAB2OFNcB3o8JGtagIbsx6FiqwH/Ovec5kCiSRA==","signatures":[{"sig":"MEUCIGtc1Grgd+/mSKTL8Eyb3qt+aY2PAYd9GsKwjt0Fxx94AiEAkLC6rzty+y3S5uL65rRNjjDo91z3i1Ifrn30+1FDx5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4SCRA9TVsSAnZWagAAt34P+wYVw72F/hUQCFTKW+TB\nbXBSS2XrlO3Uch0p2Cvxb0K1jIggWiMK40T/tCZ9xvnWXfGHh1MQrBK0xAE4\nLCw/wxqGFbXUbYW2uT3qWmLW6+XeoWM8LXHQg1gAgnOJJ8V5aLXQUm9iSxAg\nngp6UN3CXbOxTBF74Ne0F84asYxGOKdg8wh6Lkv+ba7KN4q3a0ozaXZe1WYQ\nJlJut/FeshEnEmSziARi7qF8snelRn/AN+0dC+9aQGYGVzdwS4B4wAaPup3K\nPzaxRzTIAmvgiLaJap5aNxuw5XvIvYkVse5IzLcKR5ItNvdDgeeAD1WZTvcX\nFiwsDgqA5Y8wZ1dOLvwqik6PjDibYTPd9SfiAwKqhbb/0XsKqVS8f43mQuEu\nJTQUyIhEG2x0P0iPqPGUKfD2IVmSJTmEwjtbawhSTTVfEO0uA7+D7n+A4Ug6\nk8UoOXyZoGHcDIUxIAygi9MvX69vCZbrul0lSGi+GVGb/33SZ6AHfbYboPkz\nT1Jh+4qCyO18dvYohYRMzSKy87uqoPXAuzIjPYHZbAI7z12qfv0N3vROzriZ\nF/Ryfza15JyCEa58qc/0irzjxONhYy5BMLiRrhnhTBQy3G2m/y0GaeiYh5Mf\nEszQJ96acCquvaONof40NgP8DBUjbUpzMJG/ehV1KETMzOwHjSg5fPV0TXys\nIfjo\r\n=R52v\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.b3f58203d.0_1583955474119_0.5275909726770329","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/typography","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.bec065920.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4458697a25f539403780f8e9fae35077a6fa8dd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.bec065920.0.tgz","fileCount":20,"integrity":"sha512-q/EXsx4TSb3D4yWwMO2gTjFJ9AHHsObRwEMXIqkD/Q9X8M/QbGrTJdOvmp4qeJeg1cM3iDQ2hqJGBxAsMu/kAA==","signatures":[{"sig":"MEUCIHvSdfNLjgVxSZ8Y5P3XTn0cg2pZO1P84qdqN+LlXXa7AiEAiTqkCDoBzWLGQjA1STVJiFbj6lKQuCJBIHNtdz3Rnko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapl1CRA9TVsSAnZWagAAX/IP/iAz/TKSLKoIeigbikii\nTNuUJkc17aYrYuaE2Z2lwmHKwnPM4HKJgVJkm+TPVs0l37v57o9UcLzW0Sfv\nA9FMoCONsfdYyWUdlFL+rS1Ax+cBN+KmAKbOtA83zBf+g8jkbOvDNrJsXCFI\nmr7J2NGHL6JSmpSDpaKRHcNmW8O5j+zNwE7N3wMhliE2fjHrhaCY4TXh9EDm\nrIylvgiWyyZQeCKsF/q3lJ5iMFJ3zZgqUue+53fHxJvxU8rMTUxIzd2AOzRI\n8eSe3WoKqAAT5CutRUbNGUk9ma79vbMBfxXVoTSGqXoMWINn6tBC9SF4COIh\naq/C0IWkTZ/iYOmQo2gdg2+REx3WNDpVkDWpt5x1RXsjk9y4/G5RnGbGt3BP\naTlP7rZh5rqytliVjRoFHdU1DBuBXir3QAnN9/Ei3bVENOp+4Rs9hbcKTjkH\nTnBc9pPeZMEB7UggJxeZNg4Fd+A02pVohGoNp2TonHIpOFVpN6hiVRNzO5Tl\n1LgG2hzWbtkRFgAfexBP7QcIwVyi2kTqNAk/MVXnJX86xVX1lpi6QtBz8hAm\nQw70Xyk9ggqDLx7waKeFpK245xxv19mDZrZKceDni1YpN43Wo/Ad387K2VWJ\npz0GPLKVLhLYws4iNNIGiLEpjzxZQMczGZgN6H+6A3QUatDRoSfcQ3y/RiT6\nxtY4\r\n=uONp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.bec065920.0_1584044404808_0.9983187646789093","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/typography","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.776291ef0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd7080ee54aca94b6f33789d001877e63cd991d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.776291ef0.0.tgz","fileCount":20,"integrity":"sha512-+TCQzv+F5ZHMVH86fo/WclHCzJnNYYsJjd+ngaOdpYH9t5NjkS3VJWn3PaqKXFqHiWcCXxqpFUWwvJNXm/f8Rw==","signatures":[{"sig":"MEUCIQCxe7aQYi+zv8V1WJgA+wIaT1eD0o6nfDkY/pGMS8F35gIgcs1U39vWFAjnwfHDeg3KZz8pVfFGQ8JpzF7VsqBShcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMECRA9TVsSAnZWagAA8VMP/3pnB+JQ/S/kN7tcMFFC\nTvBSVg+DBqa1nD3fewoZELz4PIMKiFNdtLeN/uJQ8cqA2DvMjca9CP1486QU\nz3jOJUJprxjldY6VBHE4EfIFJ7Q8TNHfpEM2c2FF7Tx5O0LMUtZWqKDPv2P1\nWaE5FcVYuJrvMNHgZVKCHPYhW/YhvAs65bZCz6bB074ONyslPRHHiDedaeOF\nPGUzTOGSKBhQkpY9tzlNL1iRCzavo/1FPPik+vtzCD5wu8AEVOAs6fk0k1S0\nXj6OloQuv3jdQcGkoYG5rNZ7k9jgTingwdAgKdiPiiO6i5aAGY7WpoGGh8R8\noz1LoNApnmVMsq3nciaKGd2/MZ1OHmvZWYec7PlawpEyVg6O8J1Tgg2rXqHg\nOEjQr5MzcNQTBGirGhRY3OuheM02x9i5natDIwBpIsD8Z5Mi77mJ7LEP/ZZM\nyU0rWoes3CdXHg10nfRnam3mW5JwWET74Yy6PJHvcEUVnm/6dSNLIGl0qWRy\n/BXoZCgVY8+CSfzmzVPcTwIZWx7c+x1/Bb/mBiNHszDE5S3/fG7yR2Qap9VD\nc+iFpv4141hr1e4pmXa/fUzaVXvMK3CVCJtWK8HfOjuf3tIAihfPWQyCqVq9\nEV+iNfIrw664vhaY6o9Yz8KLgnu+NIEk+YrC/Rb3ydiYgjjxRM6f93PwxK/D\nC6n4\r\n=mQoF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.776291ef0.0_1584472836169_0.6228495343871945","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/typography","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8d197530bec3e68e21dc21fdbdda24b5d07b9c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.ece19f3dd.0.tgz","fileCount":20,"integrity":"sha512-lAETTkMpmqQpYzdv6pcwvjQYwppPAJ6hjCxZEbGdyTPV/3gG5xlyI5Aq1c9Dk673l3stu8XRf7q9/EZwgxAg+Q==","signatures":[{"sig":"MEUCIHKu6jv9WvN2uNzFQCBwyAW77oMjs/3Ghoh7PHilQPkSAiEA4kikusqEaH0HNzFxLsfuyd8b1yQBcPngn84xsldCr1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiiCRA9TVsSAnZWagAAhQIQAIiIW0GJmhcWqKrbRC3l\n0ZbWlIL/ftMD7+tbhno93VVD2OlmMYYiQorTAODDsbG1NAc7gHrw8YkKInwz\njNeg+UM62TzoPcZL3Ilti+HfL2vSwyZVfE/NIleFAL0AMDEDOhXVZUz7iNdh\ntLi1AFExQsfNzTW0+uSzy4hwaBr6m6i2Ihh/Yd4jEwhdTRwjA4uyFSgDtH/m\nEjKsTaCcYmmlG6EchQzFTXsLlywh7ERHoahmQGFM0SbIdoZM1xHR+s84W81J\nDQYuOTk8KwKCvqjl9MyX3w55b4qipf6r6R6xYtrg0CDFDhU07E/vBRVkTq7N\ntjyoHx0SxJZLrrdIsy8WOJqTWjZ6ZPUX/IBBlLH+1QDZYO+Ed44o1psvsGbE\nG+3cWaMjd50z+BBTja/bwwXY8Q2xi1U85BtPgf2EHUpGwQAXFFCtOFpLrm+6\nU6Dmn8lp4r0qQiQJU8yk6wKs49+BoKkKFOqz40cohz7eqFVlMiPRFPDP6DOS\nesS14mOdFPNB8DxMzfuKIMaYpzEwgMRoJ3a5a2oQFAUnwmnMJO1nCB72SQXu\n+E3IbuCZxxhzYZuFUa6YgzcUFtbZp27vanCoKefTvAfedLaFI/Ps0+fbZKin\nQDwVRGMcr2WSEbgERtx5KfdjaVzOqdoYI2rdggItGk+xMquUJLLC7ldWLiIC\nENCX\r\n=TB04\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.ece19f3dd.0_1584482465951_0.8811963621740129","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/typography","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d209b5ff1c58b24db10f316c637aa10ec121ec3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.4dc45af6c.0.tgz","fileCount":20,"integrity":"sha512-U7AI5KeP9tpxakMfq7gK0xrhoI9FKFUGSUYlKlZZpKEzIOXU4aPWiO6fXls1uKPXOdkRPOsL+PmFHA8mvGhFUQ==","signatures":[{"sig":"MEQCICOnL1WrNGB4UyreasznC2KQhsCwZ4aScG72Zdv/MV9UAiBY+39uO9mhQL96rCSiaYGc/mCoZa4Hi5kn8FlnslRZOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3ECRA9TVsSAnZWagAAS3cP/RmjDGtedvoMgrn+gQRc\nflxhpuqskkrGwo09v5cRO773BjtmhF6oF7X++k+Uu6S1rjku9K0flPUzrrDt\n3rOwp3Y6x9UgFXqMd3Lchj/hon34Ea/7WwxptER+SqJVw1Bm7ug85Yjo2ciC\nGyzmEXmfHTf2EfKG5bTGDL+2wb9iXF7qAwX/c3f+FZUOcD/HXBwOJWiaDrAj\n/ubOBI5R9/sAtEjgEsNcZpqC2a3xlnmfGtc1wlBGzeY/LE5ZW5tkCviWdzQm\nuzRMKAwehiuSMdrUr0kY652vpncD9Qm5mNuOPwC1AHVLtgR2wp9kijF9Jknz\nhweUi6NNCCPDy4zo2WjuRvqzXVQU5JI5RLEDAeJVz6Vq6TmNINPn1ZvwgHCM\ncQQ7RKv4X5YOKipXeNiD0IaLqQJTh3Px3Zf2ELte19VcmI8MwlR4mMu9BhSA\n9JxasU+wo6ceBtLmcDWzu3ffU9jn3Gf+zbuvMRZ/NluNEs6qPzy3mpe2tq7h\nJ9l8Uog5jJ2hdKOGnkMaaupWGN+MFl6nV53own8c9FRZuLHt7JhVcbCN5Yh2\n/8TkKaL6iYGOpc5XL3zgXrJf44XaeoO4w7KftNUxLkWIam3ryjtjTXcPweh1\nskvyg50NQuMmfE76zuIr7EStvap33qbR9JPw/+3lrBMOJVgBbuE8OvZh0JQJ\nLD78\r\n=y1Cc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.4dc45af6c.0_1584496068001_0.7748742350101385","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/typography","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c98389001151bec23b8d075ecc0cf262c04cf4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.6b48781bf.0.tgz","fileCount":20,"integrity":"sha512-9PfeV4rO0Iseui2AISte2vIx0w+G5T9vLbnlJZ8LLfNiD0OLDqQ1d1jAdG/ZfdbbIUy6IPtP1g9l/jX2aFPbUg==","signatures":[{"sig":"MEYCIQDaJtzDZRxrZMEFRWdcT5YTKK5tWNS63fOerM0zNy+digIhAOCdFOOzxBfgXyXLu5WmlyTRiahPmeZJ0GjWoQq56bf4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+LCRA9TVsSAnZWagAAA3sP/0ykUXaxYn6AUMZ6Sl87\nES6+0QBtsx4gsIHnxH4ANP0FSbwAivhS1BdWJbCWoTL0gjU1vG6arF+VBXlc\nIBEijfP1eqMw0XSEztZ3E3ta/gLDpnQUBArDFQLsgiWDN6aKzSrOWU3nUMfP\nKkWkxp+ZgX/IKoZkVuBitP0aAtqOuZ+HQGcvUY0ZgDv45tvb3e9tFOtXX+ow\nREqF7K+D6GQt7gRP5WqD2zTWIhBUdb3tBNcT+yVr1hYnRn5X3E8q0ZPtwawN\nw4nhi6GENiH8ZdQeceaVRl3CYXkGcekw3jkN9HR4zZl29ABheqRelyHrPlfX\nofHSNzFArWhkM438CgWNXXMs/mqW0SufD4Fc6ouCmojt35SDBGUy0140QGzz\nFzortv9/zx50auBRGIXsIAV70yKKXLVKz/l7fsNBrNfnpp4JCDY7FOdSS9zv\ne7+f1ivJs3JR/9uu1UASV1a9bIbIqmvT6k9r3MZTdL3WlEZg2IQoJvX34I6A\nmQppVzJa+gjLDCWFFcfpJsnGCj00XJcwdfhbAXNQsy1mE12Oi2vDSkEqUz+5\nfvsMXzBoOzkgwTLjU8hoHgwQjc/xDaRYMQ0dwZkI8etgTcJxvfzfZNBq4tMG\nhsKJzs5UBR+MS54e6rujyAiE1l2kzs/309cIn4DsS3Q6hlz2VUhrV94pIeVS\nOG4L\r\n=VOyj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.6b48781bf.0_1584545674698_0.38141410911482443","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/typography","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61b6a7b1e1892d500e833ded0c6d35da4c4fa10d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":20,"integrity":"sha512-OQNS6VuPigFKvSotJ6fkBMDyjzNK7QVXdhr5cb7OCS+wtsW4FtN7CuhvHe5BbSQVHW2G6i9lWld44OOhNDFTkQ==","signatures":[{"sig":"MEUCIQDMKhMLKkTtzaYTeDc4+dGc1XVJggNLFqQfEY538rTBpQIgToIYbNhsJ/SKoQyREmodLPOkH/UIenqwyEF9F11TRFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61zCRA9TVsSAnZWagAAG04QAJAVWg+9WJTEf8nGORoF\nn+D6zicG4ftLRDbqllz5hD5NZhFO1Eq87u+NHYIqX5MVzIp8qBDxoSZ2BkuW\nMn8fQKCk7psheppaExAedgvLLY0xfQsdX5BMg8H3+8FLYqnyycEryPrpiokm\nCqE0HBR94wqcR65Oz69pNr2ZOvjb5z8YJogBq3+kdjcfCYIO7lvtOBLifbNq\n8BUnJM+JOwX6riImRIc2gMrvwo9+cHV1go2ankQBshc79Le4ztDvzVbfsoAo\n1liBONlkwdL+jedIpcFfQsnB4oGF3+Mjo76+41WsJhkkPj716Many0Pdm3sx\nLWAoB7V+B4KYk8buRSwb1vPUf0dSlaf57vlq8I46CADSLoYhaHEsoGxelR4r\ncGN2N0mn4SCTMLnvIppRtSHHw4Mpc3CxisHPYSzmcI7UYf0g9oNV53DB/OKn\nxxTf/gTbFVA/Xq0IjJYqkyAeFlcSPIvetlKdcdCGUEChAk9+ur1YvqAjSZqp\nEt2PUS74mVwp7uz3EajCLN9KiA8AtwJQZJaienkvLmk6binJYL8Z1g0iLIZp\ne8kvw1i4mxe7zzWLPtn83wKOxfIMOTaed9INy2PwXYNQn5ivo49roNdhBDwQ\nJiUup1yR6NYBuqqkTFz2ZIKfRHS6qBVEcHI5VoOVKIWuhHQeCYrZOHbhNfbt\nyLNw\r\n=QO/u\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.a88c8e4dc.0_1584639346677_0.8548749887088096","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/typography","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.cafe18860.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8609921958bfa036e565245ce58d019cfc01bfc6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.cafe18860.0.tgz","fileCount":20,"integrity":"sha512-PKwMzum6AU6DKRDvKJpo3+rQyZy7lp5uyTYoRGH7zeZENNrMaqNw6HJfu8vRbVVJ1/bnGNIzbh+LS2WOiMDL7Q==","signatures":[{"sig":"MEUCIQDlY36TCEOZgxjS6CQ/5DrAeteS3YmcCElcGAAuVt7IrwIgQ6lX/vaAG7MxoXrz/cGFD4wpJzdovc0ghe0lgkS+AZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjgCRA9TVsSAnZWagAAxTkP/3N7gZwv5wdc73bzQgrA\nL6PD2gpUVuMRKorTOrgolkffv4qpjug83vaVJg9hLmH7vC3anwH4NK6Tlk+c\nunhWQAWdorni6Lswscpx74Mw/GKMTgZPMTY7tkDegPjXtKkfT07kLnLKjpZD\n6YJwE4adeoVBHCnEr6k+rwRZWX2CojGwvXrJ47uImNRXhONN7/KVMSrhqBK9\njljr1/ZxArE9+S/Fo0ASHbPhJFDbW4ENnJB1jkhL2sDsdl0e0N0/gbRJ7o9W\noM47BX3fPxoOGggIFpWm7jZY8FXnyoCMr1anfbUyZHk6TWfEgt3r6D25PViM\n554XW8uBrBVs5idsRN4K+Fb369yoT62a6om8cL/+RQ7FgqEcTn8B/Chr0VxV\nMsk89f165v0ae/bU6VmR1wlIy5yKm21oB8AZjw7X5Rk3QVLTugKWQ8cdSRCk\nv5J8an/Y4eLj40xKEN64QUjKi9JfsL2rgtdtg9x4K1hBVYbv6lbCb2c0S8u9\nJaqf4BOon3trnVHKO61/cEAnZNv+VsPjCMt55VXJfkf3UfNTZKU2hBVjBKBI\npbP0U4vdnqruyUfEl4E9k1eNnCWTBH9mstVfSwFgs1+zfwGsv+3K/dblCr9a\nZdqCfnMDHxEgnLo3rGCiirWC0qtdELJfUxWXyLsA+ZpN8EmdbUoJpb9dwdIn\nLf0L\r\n=/3hM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.cafe18860.0_1584716000034_0.7319890894515055","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/typography","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c401724630c51b1c233bd420300f1d459ae073f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.35a32aaea.0.tgz","fileCount":20,"integrity":"sha512-cK/gPHvEOLMwUd8Y5Q8RW6ubObPhmEaTQ6bnE42dWLJu/CR42yMJyjNVYYVwWrclH56+wB613bGwvSnFueMD3w==","signatures":[{"sig":"MEUCIQD9XPUMJftlUJre6KXf6P5UQ0HkXNztnMV4GfC5mZWvZAIgC+XfkwPB583knV8Rj/neycvkDJIo8gHON6NIJA2sptw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCBCRA9TVsSAnZWagAAK0gP/Rflbsdv9HJ17LOzJvNH\nc6l4hx14Hf3z3uzLdlHswmXd1kObvwLZJOZPRuSsrLUFjZI6LaJuMae9mH6d\n+P7oZE7AKvkMPRLSn9eLNfrx5uAaC7I8L+Gd8tkdJ+2l1GawhlmYWLGeFH3I\nLzFptuTIsbTjlYX0JGO+XVPUi4sAwR0bZtqly0RfsNUdcZpHTewiR4lAjDIM\nNZZTJhZMPnN2kVo3Jg25Ndw185TEc8HmPShq2pZcnXpEfpsNcEK3mHhBgeFV\nN9HsKsg9RcNWE2+7QFrbax8Wv4LwGhZqo6GTeTOfKp0+3b1DJJ2G7wVuJJjz\nwg59j2Gg4AfFku0fn0fveaD4mQB7WpdxBdew/nfhljoiTWsIRVoC/IzVNPMk\nyc2+qSQTggPqXwlex/OYrn3mngzbgRYSt/jqV/uzo189YfhQmGWzxpwPAlcP\n7HSUilqd2hFgdCujrIeMGUuYBvJJDYFp+5ULYxyG5g3LpCcGfX7OltXmGz18\nc1OBhnj+DmgJwL/Bl5davzwTJzm2wao9H0Vj+LBuMmoEQNhRodb8cEeFB/DY\nSjxMQcXaHmIrjmpDhjXwFe9KlCRKxtvasjLDs2OLBi5jsUeIO5AuFWv92Wou\nzeqddOcI7OOhE4x2QR4j5Nlp59RXLqpNaW6mslqBSFSlD092pxq7L8VZQ/NK\n/RIs\r\n=sOUx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.35a32aaea.0_1584734336962_0.5919339854314325","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/typography","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.e75deb854.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c836afb7d2ede5d2d56927d84be5dd2654e811","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.e75deb854.0.tgz","fileCount":20,"integrity":"sha512-9sZHztyIqHWfTPKQTc1Sb6dE0eT1F1CBJ8uLso7UtRoABXEp/IDW6s5cwhQrt2jOMJiWM1z9oJjaXSvx7HsB5Q==","signatures":[{"sig":"MEYCIQD0s57IOHHoXJghTayjv5hw2Yu4us7UV0SsLH5uX6TxowIhAJvRGPTjk6LQdIPARJm/rCWhn4RAqEICyh/Gz72d0kez","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBoCRA9TVsSAnZWagAAFXEP/iLVjcxtjEDa8B2bi6sP\nisnaWmOJJlu1ZU4BgDnStdbWas6rlSTMXmwS1hX5a3nw0xleANi6dLOXcwIT\nOT7cawfSPTYHY7Iu4ZtOPD5ICchmZCsG0EnjNWyNYRSiPAuGB4MXRf1NZwGd\nOf7HLPPHE5R47J4L3TQoq9yQVbOyGHUj3LX/bBWy5I/UYWkNjTFPYeYCG3cq\nqsNCr5foBY3VO32cm+czxVsge6tWhLSkzg4NE2YvZEiuDPHU2fDeh6Lhly4y\nLaGVXP2fNjFF4Fi4xsihFp7StAh++Zh+RBx32xsbRczidlvlNui5Ql/pXmfJ\nCIPByyIlApYjUWCwEyupiwKiJe7NTsjb/A6rVJYqRlZBIb9BZ7bgtzBFgA38\nZXeUf4zwNlMJGq2fLhxAH0d8t4C5LtWHIeSsFCC7rnXHLpK5iUrbLOvxfDOd\nyWTUEJoWWqQWgv4Yl5dJI1IYjNTZIQQaQ8lxO9RHOYUiOeXjQ2VEMgCJCkoJ\nQDgHbwPjwJrQ300o/7nX3oAe2XeQCeyiWJd3FezmMNZmZaOg7ITCNNQW3WfB\nkP+h82KAbOGGyEoqo7mafNw5kn2oNR/PNgD2D/AaRDzs6/TKexuowRHHMrRv\nb+dbNgxDS7VPiKfagHhJuMFrFr/aSehnR7Ag84rwPqkhY+qAFWf79FMX9q1V\nbvzT\r\n=ew5v\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.e75deb854.0_1584742502595_0.9881037583547412","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/typography","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bc0cbe9e2450a9b4f3e2dad7e85a57ea14613aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.2cc6966f6.0.tgz","fileCount":20,"integrity":"sha512-bwLPC71rAMZoXzRjqzbwSOTldksH9B4lKDIOV1+QUeL5fnD29Gp6THfceoyW3EZ7769lohEga0vV2mCjZSBiXA==","signatures":[{"sig":"MEUCIBr2EgtYHdfUF91KLCqHG28l438zhQvGPDTfGMi8J9J1AiEAvmjCfJNP7EG5W1EAI7tNEhLQ1LxEB0GsyLdcqFmKGB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTGCRA9TVsSAnZWagAAdpwQAJ2w15LJE8i/9Rd1h1gF\ncqbexD2OtQbNOTHRhIhoG17GUZdog/ltE1lpMh/vAmNj1Gh61ERz//YxNZop\nJD3y6oyoRVTBcF0/66EUNDFw4DAKHEpZ+xod2MdmWnKVMV73QhSqtXyzH2Mc\nq1e8xwj/TpdpclplCKdHVlU1rnotdS3Mf/41HS96Q/OY76dMkmN/4HnuLk2b\noIdRbqD1i3RLzoN40pFvuax3J/wbj6tOPW82cLVST9CKMLhoaJX+Udg8SGP7\nAn+bXzEmyCdSUJLisrtLRXVCK8fbJ4Qakd3jRGBuFe4GqSFpHOsBTuKkQtFn\n1om0knhMhZ1+qr6ycdGJaSmQdiRm6EhGJ4GbE38EcHa2Gep9Sxbbdm5DNvu6\nXPNMGEw/4pZeDid1fS7RCQwQ0WxbTw18VuQJ6IbvIXQTy0Z7d/4gvQ+EsQ0R\nSZITeptzRn0WeSK8IzOUGnLWTgWIIEQiUjBkQtXrxD5+pBfhGo3wal+UtOwY\nBJsSbbiySXUmdGjWmO6t+USkgc8m7wDmjDJigdCeyV3QD1Bck/Pz1Fw26WJF\nHBsQlzLd2OjEoMoxbRTK2ysduJSFYO4j7epZQ0m+XEClYYt4LDDuq8pQV44a\nSRtIQmFwkt5ZikDkYoCUVx8PqXOPPeiunQ/KbqtbbRpU1Fq8wDvMMTWcvT8v\n85/Z\r\n=jJJc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.2cc6966f6.0_1585075397735_0.13942804915654072","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/typography","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.8707953b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71402585542356dc3497d3b7eec9fb2f9acc7205","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.8707953b6.0.tgz","fileCount":20,"integrity":"sha512-7bEylM8vhP80CjYRu8xtNwHcNVcN+pezDr0V5iUTTsfaKVhGGsaMUFTCnndbA5MwT5J6GTzhUoBosqpfqhogeg==","signatures":[{"sig":"MEUCIQDZHaq0nDYnKxLv63Os17djOQne3fk4WZZeXeH/9kSqSgIgEU6HIiFD32Z6mZA/ZlHKuXTx+40V4NatP2KfKs2WrwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWhCRA9TVsSAnZWagAASosP/3jIOGAmJ7tZwppFWygF\nPRmXhWVXwwqgKOMF6h3JsT8K5RhwOkFdVQ7tXdTFFSpy7nOMga+j9d7SVkTi\n+bKjrQq9YpWWWtKGaauiOSdl6chvCSdeN9T610Mk++EgrNqzsG4BfweRhX4q\nrVQ3tMCiKpSdyPrhnf3OXF8+25stj1xgLHpNnlVLklBP4PiC08jCuZI396OP\n4NRMYXyZWkfo7wqFgZslULKLjDZcjNlPK2yBYJosA9Z6yuwHk9Hd9AfHeHq1\nNNOIuNQKybKJKA+vyqEvdRbgvQtJEwOt6t5+yOh4ahqvcKzjWUFWEakr/T9g\nuWhCd0r2h2k92C3wl47EMkF7JR8MkPxTRVWkVqE5BrkoRRJFBsUBDRKuZUVc\nTfbea2jLk+VnD9Pi2EDxky2nwMyRWxvKSpcucIACvbBi3+rKIIBGKFwEm2Y4\nKPoKXH8PtWbI44uT79+LboqbQmf5CD6gTZ35NjTUR00yhGj8AUEwKP853s11\n4ukblq1+Uno+van3UsrBnuAJg66wzFF1QkDlVBz928lY92JDB0jOe+TfCWI7\n16n3WOGxtOfEwUFr12YXtHsxWBV57+yRdr2K03eLC5L86+aAfrl3+vsZ1OAl\nFFJY2E+ARkJPu2EQ0k6Uzv4Q6s61zC/SxzJ3KUDnNMN06xxaLmqy0wzZCeTb\nkbst\r\n=GNHS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.8707953b6.0_1585075616620_0.8131782413788275","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/typography","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8da3930bc18eea2d73cfa091b7732263373273e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.10af6cf39.0.tgz","fileCount":20,"integrity":"sha512-j4cgUPP4uR8NDNWNqmc/8IY/rNLqy3hEQ96ytXBC9aeOHBJsUhslgtHSMoxbwUX6CJi2x+BvLcVVN0GY6HsJSg==","signatures":[{"sig":"MEUCIQDsxJevRrwc1nQ8negiGGjIy+maHk3E04ie+ka/ONFOagIgNsIyyggd4YC+K3Z3xNpxUqpx6pvJN50UMHqCr852sbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BnCRA9TVsSAnZWagAAlWsP/i0N+LVKK+LV28f1jIeD\nzJNpWNOeAGjKMGGUKNZdukrcbrxsRAG0N0+vyEmjp4MbKHTH9f5CCoPqwWKc\nOJo2LZaMbmOMCDYMcoj0IvDlciBa6Gs2CqETzfnB0BBdTXwdGcO7YB9C7fIo\n88UWSWGrz6X+4X5768qXjtxZ+CM6dVfnIvchxlwH/C4c6lvZ/1P51DzYeojw\nod25PnSaUo+GJq9KntfWab64lvF9HxmyFkScXavhifQ0mp/0d4VB3SGtrqZV\nlCPvcf2rmos6LdXktUl328KNVveNN/M8XLheGHpzwMZXZ/1BJMyJm0lMFqOq\nvK+6QiRoo4Hlrj5NkwMVEsPR7FfRc7AKOECDESPUbuyMwqDVsGSPyxhwxKPW\n8YKIki/vl6eVspKHJLx53hUcc+a472EdaKrc0LbVyWhhtOOQPoQmhOFENAfA\nB0Wt390MPvmo5DfrNS25V6J7iLYyC1jF5oA2itwr20Ee/fHmLOdnmU5U8sEx\ntZjjMkVk8m6B89HRcnGmDgD/fXX4KHRJvEecP4TwEv2Fzp3g3vY9hCWwrdOC\niBMob6gEKbDiQFrDbTrB/76N34tc+Mqlu8TDVDwbVVQlxYXF3zGF984Th1K9\nxxrgu6oonqzxy9gQ4tAMQDLqmnZsiVslDNdR5q0p5QpXDZi+DJe7LJVTkdZj\n9/Qf\r\n=8nkS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.10af6cf39.0_1585160294663_0.9490335605398168","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/typography","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a56abca05bd24dbf0fcfbd782e225995d6c1a6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":20,"integrity":"sha512-7gW4q6ax38D2g6II/epdXr18Q2IEiXRbN5Wk6TuibS3my5QHq0OUapYCgBwiIaxuK+N/X8tJAIMTnqvuzMiztg==","signatures":[{"sig":"MEUCIQC/Z0bphbE1Nc5SUAVIqBbg1j17Nt9iHOD6DE4+PJFtmAIgb8/h1o3a/RjAGho/379bvfhFF6+5AqExHE22BWVTfYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBBCRA9TVsSAnZWagAA5YUP/R+PdMotHd5jn/9bbFgW\nQoJ5JedgVLmV7e2RIwvYA9ZTZQjBwjRlo8SEbTCvmi79myINI4/Yq2W6Y7OK\nsGJMf68kCTSQFsffMvm9iPB/0D0ug1KV1mA9ZQ4EhuecAX1UpLC/nZeswDBq\nOUIH+R2L5RrAu6i/aL3/PEdPahS75iWKS1HIeW+w9ap11yoYOKyaQsRraDgu\nEeCu3rcDXr1CU3AUlvuigcmuXM3Ocrmdl4T7t7YCfzuR9vXmxl7IhIaTzL88\nEuX99nLcJaUonFguTqGyj1TKzDzG74cNH46JS7WoDeGR0f/XoaVi2nEaumhA\nd5hTg3gQLLLdgN2tIXx4neZ8Khx8DZKm6BljCG6GNSHD0cX4jo2cI6F2ULie\ncOLk9eUuuXBbXpPfWURS8dnGNRMoj22vQKdZgP1FMiQTQmN1sdztt5JD9R4A\nSDagwDN/uPjfaWAhMddF56b/lrWjbQL1JOM/cEcaU0O1oEqIInwNfOWgAsqk\nwBcYxoRH5S5mKZWyrPgqxC9VN1hIasUzi75Ezjbz5vIDRo4YOZwu9TMqVt96\nSJBCQisZqfJO1Na44dpmftlPGF6QNxKNu6n4FHN+u5RQgPPax98jax4lT2ne\nqvB0aOwllATIcuMkqqIPpdWjhTB3SKjP7hKASSHrmIrcZf2FcUTS8sVdHXzi\nLvUN\r\n=06Ns\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.7d8f9c8d7.0_1585332289405_0.747186312774585","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/typography","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91822f29a667648f48820d8c3fc4a135941992d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.d6315efe2.0.tgz","fileCount":20,"integrity":"sha512-sfz/9nyTxwDa4YWt2HY9jw/kp6cev+KIU+1Uup7J5zctA8D6tgbi/d/PuQ0VZzndC14nEvTWZLt8jee6E9LV5w==","signatures":[{"sig":"MEUCIQDwyMfZlM45VKxjK6Aa+uCOwMfu9qCtOESUPPfiHMi17gIgQtEPiNhjq6kzUnYhFMNGWkXq9BI1fDgqrdOzaKb60nU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflplCRA9TVsSAnZWagAAUjUP/Ro2L8kZD+ZnuFjYkN54\n80I9tf8Hd7eoFzJ+S3xwZJYL4xJ+kYAMpMkHxznEMdvFql6p4VSV/uPTibIQ\niTNN67d3gK2nFPIBfQf3No22zYd+MfN6r0sRn6K23xlSKk8qJBwQ1bvaheg4\nc0AKieT/W6nnp5rsv23gkReLoZPK1gbsVa295ibnaJC88amKkfb+c0Jo+h/B\nsPISjufAkLvjhassqD8//uCPxeLFjpB/5heGi/goWTgCbctl77CwBOU5fV4B\nkvmKZzpmvx5MCYpIgeMstCewOxficlL3MDVxyGjXjA/AZGxaDvUwUsZx7xRl\nzqCGMOwNpfS1qW/C2KHsyr1wgR3i8s0BYJ2/RIN3FTkmgNzjnqZ9b0i+Srgy\nEmxCz3NgWmC5XBPq82PKBetYSgh9Dphzmqo9cDhW7bqOEUcPOpKodtJwq30P\nQkUKw8gkVkOVCkXO9562aRleKCOawEeiBdHuI2HnYX/OLmxRieIjLSqu67Mr\noPXqaKZCrUNAbJUkOgbsMSjiBNkj9Kn6B1+NwLT/SWPbFMI9FhX68xT+dltt\nXNx929tvehWh7WhQwi3Tkc467/hyNTOZuH05i0wRoZd7n08LjXHpkGbkzcKZ\n4vpIMQ7KvFPfyszb99DmLXeGqgvn3ZSXCdmBgjBzmdZ5qSGMhCAN/NPOFLcB\n6n/s\r\n=+cdb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.d6315efe2.0_1585338980844_0.48194441746377614","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/typography","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.a3016368d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c89d70dae0a8d984b361c7e71c517f57c842f810","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.a3016368d.0.tgz","fileCount":20,"integrity":"sha512-2p0QMEZe2IjvragBHTx1auDJomszypqC5ELJK6NDen2eMND4WcLHNzh63lJsCE17SekDE88JFgkvBcGIIB9YJw==","signatures":[{"sig":"MEUCIQDbI0P5TloXJnyoKoBafx8CYekYKbqiqP+FVbbToq+3WAIgZmm/OZ8Pv8DgrbDWJ8HIAeu2dODDfeengI1OPgsUAKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3dCRA9TVsSAnZWagAAN2gP/1ICFIliGMXxEgoFEF1Y\ne6hHbIl0vLLXI7IzefgycWlsJ5SKU163puhuE9ffZCR12y01i4+R7WmMMG+i\nyeqA+DGItLbMrOt0W4Yg0tB/pAru0lp9u3YZ7c8hM2mNyTo2Yaomla2SBEX+\ng9yivLZbtZnafJiw9yvvzEU91ogS6DTJEU+2KkRISs0p5DBbNKI8axm+jE42\n6cEHb+N3VfdhbdSLg0X2FLtE3k0PlXTJfa/QPOn5LSmmrnZEVa3QyPajA3mg\niCtKUlDel040ilwC43BwvbVx9cZlR4bHHuLScSUKIHYl8D/RWSqfz9ux9fw/\nIvItUuJmY85l4Fu7gjSuZkxs87/n2kHGUvHX3o955SEMEW1DKz0ajA+P6pPC\n/TwSgf1DCErUUj0M/ZvC43dfH/yVL8KLud3lCUsMicBayRnZxa7dS+/8nUd8\nqQD5Y4SFGsNfdHi+Fk4+UT5xoEoI+WEaQTWBrsgIvFeO9n/BPD2pBW3tj3zs\nbgNxIVqLIfrq6tPN6RzJs1t+Im5NfqxzbHoY8JzWpqR7TUkgxVQEJEkx3Q09\nb4CntqDFK8LbTcO684aR4iIXLCml1rRX4UjcdJdQ2HrXLQUPTmijG+6hQQLN\nznqUvXgtIUmyqQgqMkKtH++yFU4KR1pPzChGI8Pcjiozi0gtobZDUr7btRzU\ns6Yk\r\n=usmB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.a3016368d.0_1585343965289_0.8862288300241994","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/typography","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dbf75a0436b127795a18c2b011f6f3e9db549a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.4b45b6620.0.tgz","fileCount":20,"integrity":"sha512-cekbNG+YfbcKGIwpS8CM+nCUStqxZCW9B3NKd9lGR/Y/VeVPvwHmZ3KpHb5QFaD7D4FjwLzDkQO6euFyxA/8FQ==","signatures":[{"sig":"MEUCIQCjXTauioy5KWQ1w3TxZmmmxf6lp79oai2B6+9OKjtRFAIgXDMm/jbXTasDPWj/Y/4yudhlL1boq3ZyiyhM1ZZrE3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gaCRA9TVsSAnZWagAAGg4QAJORG0F3DufA3gRwfG5I\nEYn7M3cAHcOLn6vTY0bj0/2+4jLAhvZi3LSHgGbJ5pZrGlYX0Ja3qwpFiheI\nITPB5rFjFnw9oPDmgXhQIDMqP+NehKeGkFMzT24RhTHsWIjHijybOkzSMCe0\najfF4DiAPydw9shPdNICa0cObzxbEABNIjOFl4W1XoCaHHj2xhBNksS9YXXh\nMRNMoTTG37+qxYzQ5sJUFGLxKoOUNewK5pl98vAFye2P6cEFyHCSJ6T9Ldnx\n0WGeIrP14e+3nUkscTLRae4nH47xlcS9nL8KSqipBcmFGNvyR22A6R5zN/j/\nACwr+MNYgFDHhzhYGoW09Qoaz2h9D/paU3jGj0iFbXVGzda9NwUCo6RBWLmd\nU1kPsRjiwTyZgv6tprcdwvwb5S0W7A9g03Ff38YVilmGbzqO2bCuc/2jw7hm\nRsrZUFgY3dXTQ/oDH3kQXX4FTGtO7ljmpTGCCmTtiszAEoLbfayVAmrXZi1B\nO+t0AIxE+sbl4T+e1iNrRi+m8XvVXCjXPVVv6bNyLkQz1P1+BbKWRcUO75EE\nsKu714pz70FrRnbhe2Wi+3EDDAjlnAUXwqrS7LpaVhiXp1iy9/SFtKtn3L3Y\nv1vHkyj3yPlVQEFbnatBxwR5k9UTsRFJAyFN6Wo2h9tLGTkX01FiNDUlyCUr\nrZgn\r\n=9/5o\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.4b45b6620.0_1585670169525_0.6577580143539481","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/typography","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f4429ed33fd91540e2c7d6cd14d27e6e5f5b680","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.e84b9c8.0.tgz","fileCount":20,"integrity":"sha512-yo6d6xnj7hieqv8ubBtigVhWM5LQ9NwIw3L/kglE1yL3mCs2V7xHkhP8VuSH+nFR3kBlz+/Nd8ap7fktJVSipQ==","signatures":[{"sig":"MEQCICraJHJ9Y+8A8bbcK1vy8qI9icSDoGtT36YuMJFzMo0jAiBus6AvcwwO6O6aDqGgbeBezf34n8EmAo7Tg+AhtK24eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeWCRA9TVsSAnZWagAA9bUP/RI60xNSHVkI5gKcbkh4\n7f1U9WHoZRgkLCTBDcXcOFveE0WVnuuYDNxagUiI7tsSTVOw0bEy1+WPqx47\nr4M6GwsYZ+fSuh4zaSXOgEJ9ZKBz5mYmZCj+4XuHRwv7lbPEWjzi1KGlnCRp\nY3F4lkKYyY+3W8Bjh9kyV5dSusgzdPLxV+uXUoqY0vWxRXBp3uFdS15ZfDuJ\nAR3UJ1RNXfy/UAPsixMs3nMChgLQbVPim/Vk6vVJzNgZ30/KgwEE8iRiDqNn\nCgDIqxt8wYqAUCtnCTvM4O5gUvrTY9KaylHF4OIbeOzhLIU9cBSXqDtiHDfl\nxKy2pa4lDn0M7KJpk8xjwh+a03Rf3NxuxqpwizKI2jolYifsnCz+5w/jqaXs\nT/bGbAIABxktuPuffxPcdvRXGnAeM1R/SSmNsP5vHzkN8VrKla6hcuogZvKN\nBdn0eBrjc6A65AKIbpwKWbi4yZCao0ko2FiwjJO0QYSKdQT3mXu6d08qJIlh\noU9dDFVPwGoAFVUFWcVxOIdJF51rq003u6Xc3XSS0SB6bd0TcGBnKv0nilW2\ni2N4scuc0FFLLcVUyq4rCNl7sfb6D37VDsUkeAxRs0bEXnMqiLpElGPRMZsG\nKaiTj6krFdk1ZK9DGSGtaFh4VIc23vRBhEjQYEnfMNpccpEVQo909nrld0SA\nLqhR\r\n=nsZb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.e84b9c8.0_1585760150184_0.7923008516187788","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/typography","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.e33c49e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a7f6667a2f83f7b00884672b02025a11fe3087c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.e33c49e.0.tgz","fileCount":20,"integrity":"sha512-aO4y/VUgDQ49mHOQ+awmsmxbwENN5CN6o+BUgDAG2aBv9EKn+4Pw3gGAPRr+MzStGCYxyWwrW1rxwv9ga5INgw==","signatures":[{"sig":"MEUCIQD39SrTxAYjUEEKWyUMtpjS63IZVisxf6lp9xLdoy9CzQIgZC2ehfBwyOCH0CdOM3JZY56lNIrBX9kRtOVSFa6n22k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0xCRA9TVsSAnZWagAA9CcQAJ0yiFcS1WHh0kBPGMJT\nRZ6r+ylOTKB3Ga/N8t7aEHR+hKutTbCivK7EXD3LxdB3KMmgpa5IdQNgHlV1\njIJdOip5w87PG4ESwIT7WY2Itxf2pus2RUCo8XvmXvCcslGxEnn0B3PZinWW\nfvtr4V2hfo8+DRc9WMR6Hh/6wrChztbd4aDk71lBNw5mOcRUCa/WPAt6mkRa\nLXbZpMebNV5Nn3WZD3i0eecLq1x1YnmWx1XW3zCZ/vqUIyNz/gl6ZzhX5+T+\nL0inD+3PlHhsGAIl7DQGux7gE7CW7CKpkCGcf5ByROaVDLJzEG5VmqthAxnz\nMNkw85Tkg7FG/HeZNpDfhkDPwPOEzSpJNDFqShiKkAqMdnwucfqS/P2AA6WJ\nbR7rukyih+jOzzUxjaLT/gozrNgRUGB5BHDPcwT7/wuC4BmXycfgNHoYHOJE\nXrssmjNowJBDCloQ6ODLPlCBK/7RkKvMv/RRw+ckDLUveaq+IrECvv2zkZXx\nNObJWxb5pNkIXgfgw50hFCU9AE0tXPpOsAoDzxNnRd6K8gGEvM3a1aBjqjc/\nyhB4p+SZQp85tadBXyK+ZxzCbPWvCcZB03qluRc6dmkdDIa1MNXvz9P4GyBf\nlWPAB+NgMzY2lY71mfr6p3jpvU93XDiHvkE+FiGHcLQHH6dgASj09S1/9qYe\nUqrS\r\n=RtOy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.e33c49e.0_1585786160714_0.016314284624634467","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/typography","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"605d13552b9c7f7abf3f2f3601a4d1057f534242","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.f1f8e60.0.tgz","fileCount":20,"integrity":"sha512-vuRfu32+2WCmgFTHDRvhip0Kxu73Z1UrPqb8TtZrc4Ff9qsLKYj2w4mXpIDtGfTjOjmapMZkkhlaTOYx7olRKg==","signatures":[{"sig":"MEQCIFZcOkQAKClD9UfaHiQ2+sy+AOMOil7up/9xcVffwVPkAiAgKsl2VhJovTGlb0mMOpxHkd5yKfu9h+IPQx5UYM2bkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlkCRA9TVsSAnZWagAASvEP/Rh9NPUqg6wrOfcnpBhu\ncfgZ5WxkkO7n/pcDgwYK0EVVglPAXHe5gdWwdQbBh7RM6Mb8DaTZu8rfe+Td\nkL7FlHDn3I6aHL8vmys/HZ99xTbZqP/qoOxeGea4V5qWdXoMz+ObHWaGsWAq\nnaqWScpLAv9Ql1cyGvR1ETuImBl2HGrBfjxTwR99F27+VZR/nQ7tDyGzjw1i\nbPOaFmMTWke+xwu4XBYZmZLbTij3aS4rg/q6nTXDOBe1cbGZlMH+yv8LQLOa\njeC+PoAxCjkwnNyK4Y4TmMVjRYNUzTd1eyyinv4ceKl6al1kGDylo3g9jIpb\n4K7iN8Q4qQrDU2DrWe47yaVf6WOaKxIFGaJO4fmvXOxdveHj6txKVoLCsbsL\nUnyCus6elzLxRNn5mmKyj5cGnjYmEHACtIJr76naqtORS3mmSkyPkS+wqjN7\nG2I0sdty0bsNoI6afgDp8cD4wK4uD9wGEE2xvrhdYDwUxLJyzidGFXtsYJ88\nIRG363PWgf2BB2zj4vKImBimW55Lz7/HDvqu6aUC9O4ul8E+TtikoEaLdK4Y\n0InZCGm3+SqTiLr8xCfuGsFxTHm/DVtmcrWqrsNIL71YbYhixMuK12rj5WJv\n2l5oAhT4yQs/PXxTzqgtS+yV5nFIRoTf4CbfnA1R9qtXK6bEc+cU+SkMpXIr\nzWl+\r\n=QfQj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.f1f8e60.0_1585854820058_0.2746982341266091","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/typography","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18cb63024471652de8f97fd5c32deb5c7ccf1d25","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.1e17c49b3.0.tgz","fileCount":20,"integrity":"sha512-MQeiMCHwifVuJ/AIWEVLcCwB/O+vQpwCdQOS6HHKsWyygRw/94KHf+MeS9LLlFqj4bzSGK1DugBA6Z+uhmZg5g==","signatures":[{"sig":"MEUCIQDVkfDyx2HQ5RsvwXIEl8MFLBMTrK0x3/vpGq3yVITZdgIgUbeGZkY6M+lNebznVWRpMxmnPkTohQ+V14IkjR8TEkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qDCRA9TVsSAnZWagAAEVgP/R/7PCX5ZsfRArO1ykHR\nozfy+1EQUDFzqzLaXHXVanwRpHEzu/QS84CuAWgm8Q3kNsaewe4MyEOgdwdO\naMYQF+2TyGAxFcTm22pyrt+Aw1/36uYKDEGIJhlZH8XZM9JBkHD12aYuDz9x\n0Mw1fRLEP2ip8rY0sKbOWH/6nrgxEwW+yrkGxKDczZBT8PS1ZavGoxsbT9Q4\naw0t4ElYOcfpXv39AFObGCV9qHNuJI+EM15cqW0oTKYqulgZcd9dx98SZI+Q\nq/usHtLQD6XZ4gVmfm/b7lNFNjjvkLemMenH+bI5a+11Ay2dhNB8fqiD/5on\nz8jCroXid0alIxrglvEjAcBcKRfxfAp4aRBMbtVT2d78fbYqDTZhdKJkcfHx\nnvOM5ua7/aSxNs6bXdL+r8o+zr19LhjYT/xkULTzzyJASqI9CHgsIXeMMQ9b\nJtI4T9zGlZAYlteCG8H87ReYd0oi2Yvj48zC97uR8j4XZ5hTbzBZ8s+PNdnF\ndYQjPZuaU0y8jEaaarTI8lPejrHB5xeZwk2EB7lJQrPGsfm7fcXtHEymcJV6\nh4ENWo5T2V64BX2Ewi1dyXfwPoap0LUN9OTYIy9oiOXGM7FOs9m+tXEaoiqf\nYHlBQ3+EgnVp5Mw/4pvL/mDWV3mU2rvWyFVmP2uC5IdwHjSjWiXamxzXPNDh\nfiIX\r\n=mwvK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.1e17c49b3.0_1585937026783_0.41795134038446924","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/typography","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45116cfd983295d43565cdf4bb51b440fe19b06e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.6a40ef217.0.tgz","fileCount":20,"integrity":"sha512-k3U1dnFMU6JThkx+XTqy44Zh3DXy6LF5pUAAVALNgscKN9V88DtQHe9er5oeBbqKCeYoJd/sjUh7N0Hw8aU6UA==","signatures":[{"sig":"MEUCIQCUgbig/sR04lZQc6rSkrO7Mbks8dCjqPmCVxKULuPpNgIgQSwPAvF289Elj+zFmK9u0zWmFseti4TB9NWx0ceqHa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41yCRA9TVsSAnZWagAAtsEP/0m1fNMb1CmaQsQ6lTgW\nSUXSHDF0l07N8lwjwZVRE4EP9h8HugIfnXVinPyfRweaw1uQNE3alQsHP3wb\nucVkslmKMM8qc8KLEyjZIl2/68WE/Dbj7NY3OqYUifuMJxlUuCNRpIbW5ADK\nIkZmVDkfKApWKlxofYWe9gutMWG/646BpOtJILbCYjPLxL/SeAHoaFVKABSJ\nBxOM47d2VaNetfV3UjnRYLoYxIrdQ3AWH3FC6xaKaPMvi0EfhKKVnfNArBed\ncV6HVcRNnajFln3lTP+kj29Hh5p9PTga+IwXmwgK6Rndp1yG8WXXBsXe7wI9\nGrjlLlLcJ1iw77pwuZ6zYXXPjeTztNS5N3/rKRqcDYzv6pi6feJ87LgyblFE\n8rpZfvSOD3y9TvGR5bi64RIxQrGIlSAR1f9IR1HEPHxncnqcisxQhocXrUZb\nkhtt8r93byHZ/J0cz1uEvQZ6RCba4t6uQYnL06tnF/A8+/FZapZTTGXxNtbu\nWZumKzk0KaF4lj8UDldLJ3w+QoxXhm645QdV2EEjhhUg3jVQmxTjsaPf0nY9\naIUlIzmmdQcqf6xDfiZPBzJVKzN2GwLIUZUYIJV4Xpg1AspURmM5QlHoMMcl\nQf78kcG5eHTQHk5WuQ6OPbvEDq9GYU9iYt16rom7kvd45C57dFg8kTniGDYO\nENvM\r\n=dFid\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.6a40ef217.0_1585941873587_0.36807900770118973","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/typography","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f201fbc3ec3da61a645a3be99f954edf3e25ac46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.5f24faacb.0.tgz","fileCount":20,"integrity":"sha512-KebVJcjFvSfoV1wqijKbieY8wBcHaCQXBxK/N7wIu1s9osSQ2cMoAmchPXbixGrX0hzFl/ZOxQHWAUHdRfspAA==","signatures":[{"sig":"MEQCIB2Upb2NGyW7Nz0+3EgC5PBTxfr5vKRFKMJbNWt/QGNgAiAvgqYNsC7zPLbrEVhPLD+Ck/kjUKN/t2pClNLXbcrfbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9hCRA9TVsSAnZWagAA86YP/0R3a3yzuoQYSYQ0ppo9\nqJBEkyyQ7rtV3wruYZF8YfqNzlmKq3jvGtedpyldrlfYDB4aHdDvBh++Z4Ue\nUQxJ3UmdS0YdT+QuY6OZxlp6Ws2N1IIoC5+k35/b5vzj2n/iMxvkMudnUV8u\nJeSbSQdMrbqlcBYHLebMV8tVZp7GR+IPhJ1ExkAjWkMIXlN6C+CXsAAaiExB\nbsbBFj0Q/65xCiC/IRgdRb+JMxa99oM21ien+BVz4C099xHfFKpJre79ovWd\nfWBHw3d0garFcaLrtUYWeQehR+3YCsLVxcav3HieMyfNoDgLjrj8a4gI0Ih1\nWoAofgMzxmEugeYk8QIE7pCQwEkS2ikVmt5mfT1riq5ozshVNPdj2dTvI3Vf\n+C41ngNp3N9okcMnMTcdb8qMO0nvzkSQHiTC9oejsgSFiPJOYJplvVuuKeZv\naw0zX+n3yFY+k9OhPEI9AJYe/FhSz6Z2OoFSprer3LuaHVo2j+sc2H6/Uhr1\nADr8CaFj1BjjkwQdgnokEHSTwdYtM3HNX5xbHDf8akpwAMSu+ghf1RZa5GEc\nqYjUKQscizGjtIand3oyFySot74ZPEuJ7VAXkRWUg22nnCFn88z64TGUPA13\nJzec+vZud976FDwfR0Vgtum7tT1U/H3Ri4VT+RWKvxTubSMtQNqaF5YvSpMf\nu3Wz\r\n=440O\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.5f24faacb.0_1586360160383_0.8603582410085633","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/typography","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b70fd22cf7812d27d2d6d36784b113d3f0b270d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.82fa986b9.0.tgz","fileCount":20,"integrity":"sha512-9SDH+dlyvnyg64T/WsDEKNPV9tRxgo9+M23Txltb223CRNhjfEzAQCI0uY5cR6Sf53ZsRnwypl9nmXl5ZzjwtA==","signatures":[{"sig":"MEQCIFtmvUm5vej8jyfBCGAmoExz3KTRPhGgax5UWTPcrqBxAiBzAiGkVBHIlp6fz5NMB90gwVtTwGAJsGJBvYeC5fe1ZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfCxCRA9TVsSAnZWagAA6E4P/A3SB0qcEmvdXVxAqEXM\nC580kvwGNrdD9QhH1jMlbZRLhN+rNNSiBjOGZ5fPijzVfLr6WIEOxWV/7RyT\nZs56ze4H9Sh5yuemU2pwK53FFs17nyZawF1WUvITnIJ1EsqjCIudh0zfyO/J\nwRhxcfu2rQWk+i/KUSkAnfsmHvf0PVExi7H1JudFIsek6TIjVzftcB0RJq/1\naEM1CtGQb/NNXQjC6EuZCqnwnL2OfEH2WAySX0B1nBwJceIdJcLXmM4B5gx/\nQiKK++ivUXFgHYRL3R/43qcvpgee4tyeOmaOijzCMCO1xG7cJhMgOCo1yhQI\nibgAGgoIYeJh6M94zbF1867qacMQ2d8fIoqsOfrn1JLh76OFO2AIQdQuQkDR\n7Nab4Qhb92tjOL8rHFcKXec65B9YAK0xVtsAL5ReU3kPGMKvtSeAFoHS+gj6\nzW5sqTVWXdz8zywgFmi39aVK0LFUGEPB8iRkm5mzSlc6qKz+fIVFGA5c8YBR\nHcma3lpXIKKU9lJ++M9mPYaewKz7hJh+pqS5fQbtcPyb3N3bQVn8uqlg6BI3\nYr2dn0c9qkLogWLQ0HsmcVFFU0DeOEL+TBx4OY0JTE5uHPKOVUzkJt32VdRT\nvSuN4TU+ryzMKVuQvPgU8FHehtOMY1qlUizKnpDTBdUfEfZvKTStypocT1oK\nyk73\r\n=Ybwp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.19.0","dependencies":{"@material/theme":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.82fa986b9.0_1586360497145_0.5652577544904653","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/typography","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"870457b56079fd7ddaaf7d8d2a7f270dc1e7ccb3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.9930d9cc5.0.tgz","fileCount":20,"integrity":"sha512-DRQJmnhS/MhBxFL274QKh0uoevEXES5oNazLrkjcACvFvV+jg9iVjm7kacyvWDnW93g3QBt7Mt46LN4KiEQUuQ==","signatures":[{"sig":"MEQCIHop+GSbvknI5UtI5LrI9OuqiAzcl+HItRPdxoIbH83eAiAjXYaaniZNotN60C0oPE8VAy3LUGtdFAbEM+jfwLUXLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibHCRA9TVsSAnZWagAAOhsP/iRdGJgkVf6+NudJ8JvJ\nwB2U3mKLDWUacX2ZPdzIfMFRD35m9nPX8UGKq6BbRFEmB7D6KSczw3eehufL\n4X7XsJBUYs9hgngP2PdAsns517+xDbPPV+MwHwFmrU6cHUMZRXu9wYMalJCD\nsbjUSMwXLq4wjV42VEVk81MjXlW7uubjv6L4Ssszpxj+AsL0tOcAmPFCEDzX\nvjBSuOWXyd9/e3vF33lafO75oqb5NzZpT/CMF+Bp206d1Bb0bLJxqDmmMOc2\nd+ooqBqx71Rbq7SZJtFw+PsocC+N+2018X9UpEl38BUcTWTBA/knThUGEwxK\nink4xfeNDeJ0LqUL/FZNFBwe/jT6yojFohOMFVNLlUp/r4EYlUcZnyTeEvKR\nCOqyEhW5u+QVqv6gmB2Bil3Z5US0uF2ukA7KD7F5RBXwPY6Bz9xn4GWCaT/V\ngDnFX8K1hrRIEW7G0S4+JlEMbrrihmyY5RJweAm1atwFCjFH+SrNr8yQqGDs\n0IQj0sW+aD1AyPHLC59R9qgXcfNSs8ZgFMP3QzzOFFurkVVgavtV6ffdm/bC\noflP2QTXIyt3g2uCSPczjZGthZdXaRDXd5U+Zjvg1YHd3jN6Ujoe7hx2ZbXN\nnQGRImSJA3vksPcsE0zZmMIQDnSJYcBzAl72QwjYujEXMsLCnw6Ub+9CIM7b\n4WA2\r\n=wvb9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.9930d9cc5.0_1586374342377_0.19363200615601817","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/typography","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.6601d24af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37022768d7198b59d493aff33cc5ca42d29eba44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.6601d24af.0.tgz","fileCount":20,"integrity":"sha512-EOyryo080Jsx97MI0Rw8SdDR77zF5Va0s/3qQLoiI/pmvOB9Taa6z0BZYKTa158EI6zFv6w463cXYVHsWYZVYQ==","signatures":[{"sig":"MEUCIQC2E1acchnu6s94tKfyAKFuo9vHOTA6wPVAYs28PNTm8AIgF7XNVgTvwUhlzX2bOUQnQd62VApN57v1nuS8q/sDbj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmx9CRA9TVsSAnZWagAA/ooP+QCgKqOfPDrMhC6jYaN9\nrrEj0qVO8ZEbEHnBihfMm7ZFtVWbZndlVqjUaZdMjijRCSnwD7r2tjrlWlfg\nna8dXIRkm8LX21DaHsSLgaTHXRIrec7iJf8KtYwFAd+4LdvdNNo/AUX2M6O3\ns1UziW50YuX8I8hYqjO2/D5n5iYoPyJlFGA2xsi0beaksVB69sqahtsSUerk\nHANxS22R1UBREoAL0Czba7GJncjddrvp4YiT0Poxx5I6AAKVqVy0guH80Zl5\nk7V1plaentQUBhBcloiltpS5cB2w12oYN2rLSxrcox2CnVghbRVFW1pFRD44\nh1d3p4F07CToJN++Y9+wNiz0c5igoddfDLVvDqH1QGNSpRgExyQWxVizHbjh\nnG8rGTlroev2vGHwrxDvZ/c6lZqHR9kuFjaTmzHxjqiQ4i5TRnAD+UAV442c\npRMhPIKEQr3gjifhsUOqMV1FCO+r+2QxkvaGWsOo1xcYgsTIQiwrSUS5kRkr\nhbp5+A8Ci2Qto9EhSZMTkgPJrJFHtXYpoZebD8RuTVVybs9IpuOhYvn8wGyh\n2dI5q86KUu1bRYG0kw6lzcRp2CgmuWH9mFk8XzKG90yG+LSTh5w+URuVYkm7\nrqvUZEvPO+P62nxjcHrIkBJS13Zr8Vumy2LqJXs6FQS2VZiwRTbpZnBKIQJY\n+mFv\r\n=oien\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.6601d24af.0_1586392188493_0.37312321428429507","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/typography","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abf28bf2c2c608035096b4d6330f67cefbd1f35f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.05f5e1583.0.tgz","fileCount":20,"integrity":"sha512-QLvVlyIcS70NM/HqqYxz5kDhhdxhZFGDSVz7gOkTIiTjgoC5REfRh1H6IAE9znFJQQ4iYXCB2fnrKau9wlHD8Q==","signatures":[{"sig":"MEYCIQCryQzkvq9ChtKAY0bol5ZZzL72SVb+uHzJKEe82gCWYwIhANB9BwGU3QQS2j6S2BwNzt5Pg9eY33cwOYWWZPLd2MIb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCQCRA9TVsSAnZWagAA700P/2MvY0BOLhDNb32/ZUkD\nTsMVAxLwHTlLiz0AWFBIViXtXLKV6t6evlSRSaOmqXVOuQYnYyQPGuUQaFM1\n4rw79wpAGNH7rvheqXOD1ezn6vMZEs1zo1rfXCNAd1cm+Vcw4rqvSyFvUIlJ\nkUP6Z5rY29Xo0OXJ3HN0BYgQC9Prwvg36reqHCLmbBZN8QUjaR4Wz8sjS+wM\nJpZNEHdc7mmd6xjPRrsK+5dMOqI4F2yj+BbnGAdSHZyVxA42GxWVfzLs6UF6\n+tCYrdjCxvnRd6bLnLviqRIlPyUrKcDZ14gS9eO/rQC80eEpVXDxsHyuCkGK\nvFvuVqmqbzWcGcFI/XkjWpRlj7FeNFFMK4eS38jOiXXbq0OPZYn8KEzxJpnP\nSrAHBk3et5oIc/xeIxOftNAsgW9RMwdPkkH3Ef9nSVTQGfuQVwwNmFMDu3te\nRHv21D2tP9DD+Nuzu/EAiykIPPpB3pJZ/NvalFbv6hUTkyMKunJ/qgayIH7P\nrU4F1xlpxQs4x5xHqf7tH43+fKZx9ZKp0eapCxb8WT0fUKIdxV62HM9Wkqe3\n2q21c0DMTyQRbTInx1kztPKV5zsfzWoqeHY+NyGrDkTeVlJBWrXg+IkGLDLh\nSP/TmAa2ArFNozhMxRvHArR1rAA8v7LSazL0siLc3BcMxYfimBSTOaBVpRPf\nCcR+\r\n=grhi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.05f5e1583.0_1586393231536_0.6127510043099165","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/typography","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.bce00e186.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"204a0a6f6b7d1f033d4b34c0e3b5824f26ca9e15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.bce00e186.0.tgz","fileCount":20,"integrity":"sha512-FVqYDp5znZZOVed/D5gfSw0e29riZyIUqwexoSUnJBgrVP4k1EJiH+gCj8IdRYGp7IDk0fCXiTq6Hhu1sRsA9g==","signatures":[{"sig":"MEYCIQCgEILt47TcW7x0m+toMGgeoWAD49xcLLuRb+8HNMFinAIhAM2JhyVazBRIbvKF95jUkiOWPcFLeRVEG/E2ZlTCa7B6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz27CRA9TVsSAnZWagAAZEMQAJbRy8isKefmQJW1e4FF\nVO6vgGTtAgXsVUMHnDPC/DR095fBABYMsaXpsna3KJ3gHL7WW8Z946GuWy0m\nSIWYs6mzSikXKzWZpTS0rCscK95AD/L3z/pHCqNeaQrFrqgdhbOI/qjW4Vuq\n7+WQy8zIagssUj3vmeoQfo0r0d5z3Rf+0S0iCP3To68HpQ7zWSHAIzD9aU6p\nKtzpMtuw/RzuKxOvMpWinQUZNwTQnyKk1U8FJQmeK25KnCZ0iJJNL729c9vz\njXRVQv8rpR1GuP5BcGIHo2DMclTLVaMUBP3vRakv6pN2KmFH48Gfu6M5nIp5\nuNR1oMq4zuFnBTrq1rlDuT4ZgbNXQpW/PsHhwOhbX2Wu5ntYoh5P5avrz37y\naluQ/ass14/GTnYEwMOtoiojCtPBBuht9FqJsxYZyJ6GX4FM/W7wfnEYtcYk\n7Bgnc5ld+J9JXTBFF3KmudSYE+2yPtLojpQqDF/jqUYjKC/RO9cK66I6GQTH\nm71zCtqvy0jIUortCPyRik/iJ7QoLp4KYlNd1xh0xRts+yVMAmqZ1AzHkKu/\nz7KTMVNWLO3s6UesujReUV0f2jzZhyQQZRoxMhgB+H1HVHUY7LuLyBPULxyD\nqm+plzf9ZCUDqImuJb8YNXNNfqx1zxkCKmWaBeppwCIEArHwLV6sN/zP6tgC\nTPH5\r\n=ev5g\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.bce00e186.0_1586445754410_0.23563449875596176","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/typography","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.927fa902c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f2e3d5b4bd01428b701f2b642a94129a3efd28c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.927fa902c.0.tgz","fileCount":20,"integrity":"sha512-RhR0UWsYDQMZ+kroovm+sdeSx8csQMd8ijzQXrqJb+mTbGGNa+HArfmaqLr5P4n6Y1DYqcf4U6vKD4HmMwzECQ==","signatures":[{"sig":"MEUCIQDuYcsbIrVXZ29w4unr8DrXtNUpw1aBIcXXyMkneCFgBAIgG/sa//zZ9NwDNz4OrwxytWtf4328sugvdbrIogqSqQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej21+CRA9TVsSAnZWagAA+aMQAJd8DMTDsRmO2PFMRQqA\njDMRSPr5cKfSUQ0jz91l7UVR1e5poquIS8e1C/H66WE1ncmDEtJiLH2xepMx\n+SvDGrq0G2hLUMVqrywcxnQ35ZoAjlEuEZ5e2kN1tYzjph9+VbOr2tdpHeeu\nWBSc4HB6ACPtxptO8r7GbQV53rAtjEmockiTMauuEDCtPIGSZfmq3iJ09kQp\nG5XooBOyn3ETz8zYa0qgKJVczIeDyC6QwrlB4SvBHMzxik7wcF3rAujDpyX8\nqrN9CCEuJ15ZL5um0wRgN0ECFgFo0sEd8KsgO5gak/TLxZ7q/ZsJCuKtjmKh\nET8d3wZ7+6GhNw7+h2K+B4COcTAZXtqjIWZ+eKKlvYWsuIiSa1AVmX6aPbe0\nQPv3zXQyts9Iq6IOb05kegRYWW3tyOGzeV8bacxGflEBFad4FjgWJPGniUYV\nst6dHL/VaEpLKald5MYX6bVFI7R8FTE0Wfnbjd+eqEKZHDbREFBeBxj1QK4O\n3GlcVt2wrqEuanoOAylR/7ip32E8B7H8LHpJWi5FzwfNnUcxYZA5h3a32Tcy\nwGnn8HKk5fdyIWTzJZQv5DjDz+s33kgckscxvFB83TXRO7oQV9ciBfd0lBxb\n+w0qDxdaUppri1yWxBrUMcRnap51jD3hdEzS7BY0D+zSGJUxNod32Gr98FZe\nWXI9\r\n=rXav\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.927fa902c.0_1586457981859_0.7649957017356073","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/typography","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d5811c096ca0056470f0eec4bc1eedd4ec1783a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":20,"integrity":"sha512-V8sEytKeDYLDMRjdavhxfyoIL3uINRs05wHklsrPEYMQfv9sXJLFjWs65w5ONjYNt/oYQKpsZ9n7fJbtrrDSIw==","signatures":[{"sig":"MEYCIQCNlbL4DF9Zf5PxLR16m8Jw24RLAhut3Y05+6SVLuoJLwIhAON55m+FDowJaGh6cO8G5PcL2gJ5Ir1/Lh2EoqjDG/0r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMltCRA9TVsSAnZWagAAQH0P+gML6sQL9bt10pydCusb\nnYZjLI710w7hZj/jGOigH9auF6FRIo+Z3k2KQ8R9jsIOokviIWVIvWdbAVxv\nNZ6gWRXiQal68LakG4ijyHc3NLPFZXQKC8fzD/xYOTswzli/odDvXm2HvOCj\nxfH4r5bvTaNBzWsOLhS3MkMgYtGESEp7glxAetAJwYCLRStWC1XPo9VmiIA9\nJXbnu7TY00pz+6/NHoHKKDmqnoUrEK8sdFXYUvO6kSVncrE1W80PbQEt1yDr\nv5h1bB4X953voqoz/VWD1CVk8VwU44Fo0NnYb5o8P1SYowHdpuCl83qs3dJ0\ncmJadNl61iavJjL/QXLlIvN377y0ZubFWVUnIQXJ6xL6ZBIBA2d0a/OZS0p+\nG2x1OliVdYg70Ei7ptttm4HoQlXczmggqXU7La+2I6lA21xHH6IBH0t6A3Pv\nZbLFbTUubbEaM5BATMOToYUlJkJoJXBpwnx4TYvKOTkzBEtP1nPoKnl0LiTC\nk/tn4j3hwNYz9SfyCp1Y9QKY+maTHgzDVynzKyQ0z46zYd0bQZSQAyoN4CWx\nXcySU+N1tMQYBsSln9J6kw2/la0kUGIqMPGguZoPWIJyMGA0pxDeHWu9hI5C\nQdDyCBeWjuYJcj1Cg8uCei6tDFeTChlNlIjhBN8P94I55h8ZEnoW6JjpuUmY\npu/8\r\n=YSfi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.eb28b6ecc.0_1586547053319_0.7006087997771626","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/typography","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.816a43b42.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"716d8698f428dbeb07675029482ff4a0f795c030","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.816a43b42.0.tgz","fileCount":20,"integrity":"sha512-TWjNyqQsUftJM1Z7u1/LSUmZcEa5CvORxXtZPYqr7rpocR3aU5RK61GPSrwcy/v5nX0XEspD7WZ4I3E2Mq+Y7Q==","signatures":[{"sig":"MEUCIQDDojtHwmcnle6T1oRTvkNGNPleK/a1twbFlIzaR7CO1AIgOgpgatIUhbOvKEz26OX7KmgcI4lQ1OeiQH+RT9q+0B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyVCRA9TVsSAnZWagAAWd8P/1W9Psl2FWjGLUuuaeai\niFsY3BU4f/VfkDo4lQsFBxGpy+PVYRu8l5nzPZMyTl1Kjl3yHFv/m2kaAfSk\nxLPFCyB2FnMSHouP9PqCQEUD4ncfqzhKqPO5uTjNjK7xwrQLKUMKeHXo5obj\nayQQNS5BfpA1HzALuiEmolhTJMdkh5eXh++yKrP5xd/wIeDOqL/mRwk8mEh+\ntFG7uvp/uq+u0q3UTC1UHaNVx8xAPxKwRqIsEEXGeY4sXiZcMzeEKh3fK5oj\nCBdO8DH5upV8yrBnnJccOMFk7uNTYex7ukyi/tPWnrBa8Sw+uDlv48fQlMRr\nOG9WFJEbu38TBvTlDyVE0ttmiKvm1+3uq9rawiKRWSd29UyCWUNRm+0P1fZM\nyKqeYWN0u5MzRwpjroi/B0+6XsvqXeIeiKr3yW2/rL2F/rHcCF+pFTOYAJw2\nW3gn2KzmjeR1KUSKNTrS0CwpFhTgr78FGRRT7WApd3xKkTeM1iezZFo7nDNi\nrnGsuCyueZONRxx5k5K2uARP1KiKXYVy4IIcu0xmdeNv5Y/TzEATLDaB0mwo\nWcVFYFczkatsQO16H14rVzd9Pjs6xD5POO4cFepONGaBEuJ1GyhuE0LfNy18\nPRvQYCicIPEJjxAwjsSBwpvlcUB3L5aMPwzqutdfFYuG8D0JEo10/2TpdCl7\nk/8P\r\n=MckA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.0","dependencies":{"@material/theme":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.816a43b42.0_1586551957429_0.8155095273351325","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/typography","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.008c4d319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e83195b86439f748af48884e1e612db8ca41a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.008c4d319.0.tgz","fileCount":20,"integrity":"sha512-p2SgqZCaGpVygEx1vaXAcb1kyBtuj5vauIFktE5a82F8PhiNXzQ8/aw/ilvG6aDHpvddWILrMuD+cAQcY6Bajw==","signatures":[{"sig":"MEUCIQCAgFuOLpoJixD74N6xLhTsOqwHooK8RHEMKra7JrNhNwIgQ+bgWTa2ec1Smi5ex+94xTgY8lyYYSYfOrQLGBZaw+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRvCRA9TVsSAnZWagAA96UP/i9WSxVQFK83wiwfn77n\nS8UiKBH/Yv+ZOn1AIyisG0317dbyBV3zfff9kw94aSg7AwUf6+Qj4DSI7msB\nlVcKA2FEiNnd9d/3H7RLy3HIs3jd22lAlMfbZikM9Fmd0rgWdRO9S/ObN5sl\nf2wQXjxy49QqXAvaG7r7Vj8S5We4RAhSHqCH0Xnm3LRnW3vSsO9j2mIrugOr\n1ANZxzqgKaWh1+fImxBjILVoyoQDcstYUFo8qzMziqE5Ezf+5z2fRFnqdfXd\nVNzmmik3n1taUx62hGjd9cD4f/RmEkgqOt/9IlM84W25r/BvqgL+XeEILFzk\nnPVXmsUTSWT/u2yVIEDSda5LHYYvZxYCmczP5vK1TKZmS20pcbLSDGIPDWJM\njLMI1KZSUXNNcuEXER3jeE2FehXl34ggZm9h/CUCAvkydPaqF0usHcaRqoKM\nzihZbS3FCIW5D2ROItFwxfEcWwnzprReJIfNYP9PtL+a938C1l8gLtX5S4pf\ncXVmIxDYy/TmhfNg/BYH5jc7D/0mx1Fz7ZZMxOesJ1p3qNxVQPC2snI2VA63\nIyhPkFNzkq5dAA5xROZCqpUMcCY5G0BNwOvTSzqJxNCgAZaSJP+PF0suXV9f\nFunbysLHd309sFok/6+N3NP5DvsliBBTgihJ1Ay6niI5JjC5c7xzxfCDoI73\nbYG4\r\n=eOPh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.008c4d319.0_1586795630702_0.010653898451186139","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/typography","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce34e0ccf8592afc62e741679b647bbf92fccae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":20,"integrity":"sha512-2/ZZIGBmRBO9ETFDhv6P97QieVGtql6kH4uT1pMzyYW83TINB1UaNn4s7f+wcNIxaRIjWzYwDFB8YB3DZaM2fQ==","signatures":[{"sig":"MEYCIQD075EhIRxpL79Kxs19DpPYzcdkmBbTD+5RGm50BEAG+wIhAOIwfY+GmMwozCkXM0M3w03Kv08DJSika3IFVhrIb6vM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUSzCRA9TVsSAnZWagAANfUQAIPOGA9IAPRi4k2pRK1n\n406WHpaoRnZU93s5ifzN5nG4Ush7nQfhe2GpAxNNkiRvbkSbQPQwohftM10L\nIlpXCmD02xSEu5+LmX6y2siTo0ruW9IGtPVzFiuytcricZctHU1M0f9Pi+pv\nLFpRswUD61maPq9vQRX0pS+SHu9RdBSHmS5vfdFiVaFbdwgG0RCIxkI04csB\n3oy0EISorj1HBotaR+QVmD4w0a4DZNj8MyBpC3UkuMybJAK3X3eDQcK01GSE\ncWdVrOqpN6YdotOb5icfw+BPxQrNauDE7o+JYH5R5pS9GG4LvsjGZDbtojBG\n9DAYQu+4tHoznzWqcclbPktnzry1Tko68PA1cn0eNZWb7Ain6wjCNcBWu3gD\nqCKHZb7VcKjvGFgOuGVRv8CEdOGfkOb8QHK4v4lIAInsUu5/lF4WYVbmOcPI\nN5utRpKP55EDqaWCzd2uMUJSg0Uhd/JoRYmzNRfIebz79VQ2xcfXHo5mfWR+\nkaAzpEVQwrAW3ivkXwR383vwA2X+UG0LyBCNLD+EN6AyPJlAaAktePWmm/0l\nIu3070ugW+a5mpYN2woW/QkJmgqmxdV0feMW3VpU7ChWuS0AFEtxT0PzAAcC\n6tRklKxUHJlm2zlaTyDo9ZmU3Sn5KtD3Pwf8acv7n6Q6a+PDxVbSlwE0ev6v\nDrLG\r\n=Px6V\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.cbb3f28ca.0_1586840754696_0.5842485068225916","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/typography","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36f08474388cd97111f7d3849ce39b29bd4095e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.f172b0f90.0.tgz","fileCount":20,"integrity":"sha512-DjiJOZmSDKH4qCOIYkep0mB4zWqf5YOAA5TfdvjMfeJG3MXw2oUtNupPulAneGsH5xzkT5UCL9bAGznSgP57+g==","signatures":[{"sig":"MEUCIC13pHwpggzO4YKkW/OCAfu0MiG3+6OnjQyMFh+e+b2UAiEAtF4t/eLk2Y6g1Ru0+wFu/swouwTcbNPzPrjRCYtpnpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLbCRA9TVsSAnZWagAAqxQP/3DQLu1UDIBKK/mEXkvQ\nQVSmtEKPujo6QNitMQVrf5JOulm/8O8eP5nZukTgsyNCeBxcEiHM6ZCcCXam\nn6hfyPMBDLECHYx5s498Qejl3rZZxYN04DEW6+ho6dljF8dKCltnXUmzcQs3\nRLEkEWTqlv5z7BZ27GSLFPIHOi3SN0R5TbmdEp/D1BWQADjOuFTZYx/zWOcV\nfZDFmTBld04RnapH7atDIeWVt4H2hxLIxaCFDuS8axaKu+mNAbLiglC/rhJ2\nqLIFR1chTrAcfndDCwg4f440bvEUTKX9KR5nCCSA1BUbaL/yXBPX1XTgZgrO\nY8dGycUpegPN1PqNcquHxnWaXgCeNR+8CAUn8+JcIgnJBjwLKXL7ZDL7aXCr\n9OQ12oNF4NKyKUSh93kTu1f4VWSrXcnofeJCtttgKKWDzN5D6uTFN3NfFXVX\nWtA/Yh4b+WwH6w8hlW0ws5vyazr3tzQfPBunGGCavHOvq9qYfcUqy94yHsdC\nhJVi3Kau1Jnt7tQ1CSSfIiwB/L0J0NpIfAkCL+acXkIBNQyz0BYPtVCSkqY1\nR/6E0NKxrNDmIN255EB+HaELErwHIOGPuxizbpWCnPiPK0I5LcC74OOlPbSY\ns2K5iDFDRzAVfO3cR75U0H/jwyNZxHwo0tKLLr4MMwT05EtRmimwgGwXBpo/\nkS0U\r\n=Lchg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.f172b0f90.0_1586905818788_0.8637703477741057","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/typography","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.c02642273.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f2c9eb6c3c7c6eab05a4a7684207394fa32e4d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.c02642273.0.tgz","fileCount":20,"integrity":"sha512-W/72uikhxl2phzHfsmX0PmUdUeXLZYCa+9jHMsLQwH/kpLZSsS8CjCwSz1G6Xtyjw+bQw7ZwCeoC8/jrTfLIhw==","signatures":[{"sig":"MEQCIFNIEh/0cZjV2JpaM7aqaUwo1ssUYMg337N1zu0NAfXEAiA2EPs/ZM2BlZD4DCWROmIKaCEy3kWbbUBdANkJsjtB/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOPCRA9TVsSAnZWagAAQyYP/0n2Y/O8gD9wVKMzo+02\n8e3u/IkM77dbrwFzdWH54vhqjYZHGQmg7lDodXCkDDA6HcrUcSQtxeSBF2XB\ne5p+4pGKnm0ItV/4G5XLyguLYnR+gtT/RkmZj2vDonRxorNO4IrHNyW0xvem\nHe9b7fTEMN0xikeJMw1IBK5cS07KKGeSpIfKPlJqYt/tA2v6NSjHirIPiSP4\nPKZ4TsQ+f1r2pSFT1HL6+KBPHTpTsgOGxKCbXL2tQGMaO1NybwHh5bqZgpei\nSjHu0Pimap3PJvgbvbznGsT6DfZcbpCErlMZvayw5Yp4kaKoRV4wdaw7rpcT\nQdQn+TbcoQrxarANcvjKsVk3kdjzSevKnB6L0sy61LkzncYoXaVIjmpCZntt\n1nEqElA0MeGFmAom4ECm7Pgl5a5TM/8+5tEjJwZEAetD/Aw0yNpp07YUDUqM\nSbvRSBffTfGQfSj3oq8MoZz6oZJ4suPwMAgieRobqDTRJoEqtNDZoZiyyVMf\nK8FOVD2XTufts0/8/q2ivuIEZxMf2EM7ZtAOq23fSEv92UqUwy17STx6k7WN\nUu+wFmQruRy53uD8+LQ3zKrDs09JGTbLiKNY8smEzK+oE3sfgY82j9hbwm4X\n9Ddu/KF8bVWJM8lt2ZnVi3biB20iqxfSlBK+ML0Pj49qRtIftstqE7QIw2MU\nscHv\r\n=AbHg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.c02642273.0_1586967438776_0.9064677620024504","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/typography","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.8a299b568.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d2f1bc8a659c9cf9290729e2359cb1ad192a27b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.8a299b568.0.tgz","fileCount":20,"integrity":"sha512-19mVzt4TFYo4+vUgB0OhBmfiZ2VKvlfhlrJmik96fPUVyFDXGiU2jvseL4X/c4Cq1ovUn6jmpPng8xqNWL8lVQ==","signatures":[{"sig":"MEUCIQCty0z7OQppYVTLa+4NE2QggyqZFm/8MnDcHl3cDk1TFwIgZ6zQqDkNPcoe2K1FUL9XGElkBgqqtL7KQ+AnLX3KkxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44ECRA9TVsSAnZWagAAKYEP/Rb8/j2WtEk8PR3jG8Kp\nTXe6ZTV+Ne2qKqOvbUyy6tKzFDg/9ZplgjkWTXydEyFQ1aamlSIY1tcuSECN\nwBYzL1d9xddiEZRpKyH2CR03m/iFr3oK4lwLJrNSZZYdAIPS4bHpixNUrvD8\nY+4JMIJWr979Am+JcDnmakU4ExOBy8qP/wjxAbrnB8PX4ZmpwYOMmWqv/Vvd\nhj5N3TIBgooPQlqPL6fV5Lq43HScw+tpjvIaeRS1994HwjHPe3bUia5lx3B0\n+tqtBj+AjtfgBhF1CLPqn7yjPNvUWIj8gvFuXNwkudlpNwILaga8boF/0WgN\n6YTdU3ZOIAsyj/xDFyNP947+mfdSTv1tpDUcJD3MnmN3WzoaVT/icOPd1f+A\nhZO3z9kAvyOpOP1YVtJKfJq0Z1E93xJ5yQkgzSBMoY/b5zM5BNRsZQ/hVANh\nKWVL9jDfmgJL+EFt98CmIQRLS4A8xOsPmVoJ6YxqJlIKBz3jzH5HDvLFL71o\nimqVztgBxWfgl2Lr9/AYHSvfJg8xX3/lnaLO+bdZZLUuTmMkbmBvIOQmk7KT\nG+DjiAk68pHJ++4Y2vZ7oLwyZGMbh8ifX7HMekmApILjMPZxP3IjWDhY95c9\ndyR/f84l7G916xRSLTsxMeOKASRpDoPAo5PD7ZkzRP7WAIQtHK2Suy5r2f35\nUr5Y\r\n=y6uC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.8a299b568.0_1586990595917_0.17496332660108593","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/typography","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de2609b9fab407cabc111ac30b3d14db45f5468b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.490fbdc09.0.tgz","fileCount":20,"integrity":"sha512-gFp+Zadi8e2iTJPPuamLe3c5TOHMjhDi8UkkWUTpoxRehGrXyN+N0pE8O6ApZ09FW88Fs7uF0hP4vGqsYiReLQ==","signatures":[{"sig":"MEQCIB+ok0d6YL3FdiIadWi2KjZIUpcShQAh0ErHIujGeNhwAiArCd9WCee8vE9rElOKcyFa1mKjCAJRFUVWufynlkkkAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RPCRA9TVsSAnZWagAAd7cP/378KAx9XGah+e3YH96Q\nXQKEKFrIjBasrvAcIrCAtmdA5TbpPUQP4iV7VMsm04qgP9xssZ/wwFSI4bmA\n2M6COxTN0HZ3ZIZxQPdmC+FqSLD1IjbmPEM5TlwtSv3rW+tqX5x7njIM5P+1\n1ZHto87qjZvYsfKPT39hopexoIwvALMjyh9V3VORGpvk7Y4LLUJVlwNlIeAe\nd4ruTUlQu/GNwO2wsC+wJe4NaVp1jnOJKlIJyMkxHSjTeUXAMGw/gbnOhFhB\noWlQPlxtft37yrHEb7Y0l6c57qC7mSxAYP3NUAGIX/7gInbyAbYrw8yaAz+D\n+UCWnaQKivsnQ4w0g4n5BlReBW/GNd+DSMObjoaVODr3UJ2J7jLGCYFwtYX+\nFZXYLS5lYfUrcHgd7BdVQJIvRU1t2PoCyCRsEcrYaT2UJxjiFkpWAWeU0I1g\nTHq+T2ICUkHV7DqLgKd5de++bMgATbBkS1JRHkuBvJGsilWlXGvALcchTVSi\n7Zug9ERAryAUu5qUQTlZxy++NyTYYpziVea9mDbtWDEXLKWLlPCsZbTPOMMo\nofM1OesTKmqoAOevvpZe9vvtlfduDvclbSm/HkU01LIwMUF/70Jhp+/0Zj/l\ny76r4p7h4RA0yGlaXBz8RbVSeLIlv+VXATFmLnPiViC1HhqcQiq8VDROf0ke\ndTc7\r\n=eyu2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.490fbdc09.0_1587016782976_0.04607654281016971","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/typography","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c09296668311118e0888a0f249bb35889ae386b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.f838c6e55.0.tgz","fileCount":20,"integrity":"sha512-YKDMw6eH01g+4T6SjWLGNQJ/kKWdn+nvWxOQbM3ZSbOyJ8s8W/5sBDp7r025OlIusBedWGa4FqoB5RghRMWEpA==","signatures":[{"sig":"MEUCIG5ZDMpg9wPJx919NALUAm347AMZGAOpi14UCZJ1oqzNAiEAzrlbzzn1MQw88K6AFm+lk66IayNEkTaaqOjH2q0W6go=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGscCRA9TVsSAnZWagAAt0MP/1vHLSF0YoAHkAWOm517\nYM/EVT32wAEg7vG/9w5wtom77JQLQXLDj+crrDLkt9TpxmzEdnjlj/oyLQfQ\ngeTjg3++yL7WPjCtkRet6FXIiChEtsVlFvWGeSAkQkttyo5C4j/omIZ5Lceu\nect8rAhnQoz1RaguIekcxpSfub0Wf2eCL7e7YEX3rv6Wwl6Rr7u1M+GPxBRT\nf4u43zCq3n89DORz8yErybJQ9WujUL7i3oPHDvSL2Lwl/Q5IhUM4T3XL/3cd\nXldUO5l1/ilmeIUPi4L/TT3sZaq7MYwLwRP4tPEVeJKzfy4ODr8nPX+J/bD6\nbzh+pLSlmPJXZxsXFayCA73pKu78flLBZTpDOo+Aukl0n7MdaXWvP75906Nd\n5IoyYPBh+ggtRRKe7S61Ago9UA76/yYmCYTb+nu7L+KZ2l0H6Tu+SsAoOnfQ\njonlSkWHcU5CiCsyJ3b/AlhN8hAaIdMqdpiJFcaVSYsAYduX7vG47Ogza3kK\nPLAom/ux9rv4M3wub2bxWX0Dz4nDa+s2UyqDoWP64KGD8qQzfahz+nYp3sRS\n0m1kNZv4PDCBAWz/FEYCtBMtF6AyJPz530cA08VzwRhHiQUKTFUXHcIRxjgz\n5qjdmycz5mM8WhMYDAY2pwDJSsTTB74HmPezUzfQb18Ro3SnxnsmuGQJNAHs\nCYjo\r\n=BDoB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.f838c6e55.0_1587047195832_0.7136524366100478","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/typography","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6268c1027839409b680f6b890b46afcc62a426b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.ce6cb7024.0.tgz","fileCount":20,"integrity":"sha512-MMfK4mtNdcUvU0F1n1YTHU3X0Fn/QQSJUFTthg+Sb7z29Wx1QjTaqW0v69B4frfjqH43CG0TzrTeg/rms5Hmhw==","signatures":[{"sig":"MEYCIQDW1Po9Y6RN/fGAH04MlB9YJuSFJZ2/G80Jlcd9gd5ihQIhAJV5EA1K9VlPQiKVpSSKVnKpd63Vv3aySVi3S1tEZggQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOJCRA9TVsSAnZWagAA4yoP/A4rrv84BEuQ/F/oLPCx\n5ZzYQUbCIXibzT4sMIEZeYx9IvKgut4N6mcKXch4qbczFcuO0S0AedG43hTk\ntKJ1ayRgW5N2QzwN0nuIlrDn5ff3IhdhCa+YlY2eUIP9VL5LuPca1xlsy4VE\nYQef8f5O5ug047Z0XjWYzrjSHg8JA6WNEMqgdvcoHR9+Lxi5rtLQ6IGdWiMG\nE/+CBUoWptij3NPoPgLTYL6Sn1RSvWf521p1IgM8VQ0FQ55D/nSpN0jGRts0\ngMMDmeoDsbCPDlADoV4G1HRRws8JA9N5XgJG9rrSCgLt5B8dv+xZK15OjorO\nmhHWY+oI4RAhpKhkoPaKri6/Cmj9Az3WrSFQdWZM4u7+IoFx8dFW3HJoY/X+\n3rF1b6Ontb+EODoAhuyFiyvr5R+Kn75K4OHnIy35X5jl3SKtqUvIkE/YeOTE\nKvfjW01KsRk/YDyVyIa85A3V5h0FZzdaCxYMhEhBygF3Uxvzh6CNxR6sj7fI\nP8KfzvzT8M1C+MWA39Us47I6uF9UeH+zPYylvcqrkvhWq7qUAhaRPFRQ35jp\n9MnmGWDYD3PcFpB7g9qw/3Qj8JN90um6eNrQeFfEtgPJIA8sWfQH/AVFHwns\nWR0qUohA0CYEaEHN2pfJ3p7pD31wlDHAyDhiJGDGh/3dK1zslyZIzeOVLb3j\ngBiF\r\n=YGTG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.ce6cb7024.0_1587057544655_0.013127107563674745","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/typography","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5413e680a60b53886890d76259b27ac162dedeba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.0ab62a65b.0.tgz","fileCount":20,"integrity":"sha512-6XMfv+/sglefoB773lk+yyaPSP+FoUi2cqKxZXyauQMbWB8A4vfqk+sdKzjpP6g5dG4PanYaJyZ/MjaA+avxLg==","signatures":[{"sig":"MEQCIFhtMy7zwgkBOhz2GRP6J0rwscA7Rpq+v9L64VwRZURkAiBeWOh4DP6BLTTKUvNd8qsnfmi3Tn7Hv3lexALS0Ajepw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKndCRA9TVsSAnZWagAA3AcP/0lMP443Sl3UjHNRWm2K\n7NApfds6ish7qygoTU6RR/qIo9L3IRF1oD8iTwLviPRf+b0HG4JU/0AdEonO\nk1w0/ngHjxXoLo5WL4i57JATnWnXZA9PpStvQ+/h/WimUyxQ0yImYb5qqsLY\nsTFSMs8Y24M+jz/ehkysFpDnQbrrPybvg7DTZuYWd2ICZJYxmjaHlWjnk5t6\ncouHNSoKhOcQWIQjRwHajwJAxHNPO5fV/MJnN7DNt4EsaHmruWwwb8gv4OGr\nBK51kdKNxe56/hkONaqgz4vhNAjEwIdSV8SuAUGrDfkbPSuifAkMS/vzLHK1\nwTM/sU9wbIKPvODvzqOM6OOu2OrYuhVxsKyuaRsjLMiUyJfS39wk+1k6ga4x\nesUoYKnrkx0qKBwl84Yz2+bvoDDZCe5QWbfKYLGzkosJRuN84O3JXU/fefG7\n+h+4jvKOdl4GtW01H6AcOQ4ZFgsJ7q2Xe2oUsxV93dMk2Idct74ZT5sA2a7Y\nuptkor0Ef2xiwFcTjd0nDui3tNWHKO8uQ6Em7W9MBUDLIa8a6OetyoizZu+9\n/0hVBk0oezc123ChlTKcO7gPeXB8dOwOLChDiBOv1vK0g6ZhMtgjoWjPHIuZ\nk+el0NvRHNDm+6t15UF6iC5rf9/qeu1qLWcEFlaX+XnaW5wjGYHA1R4UqJ9y\nRGUz\r\n=KgvY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.0ab62a65b.0_1587063260881_0.4868574762047351","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/typography","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fa3cbca7219d39a74880593c7f81f07d23c124e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.ca61b656f.0.tgz","fileCount":20,"integrity":"sha512-3kCc2t24OTxkVB2m4AJ8cqNzUmsay3HWcHXc+j5mzTlElsBAyHCIRiJBOcGeicUJqxKiZDPPxf1Q5MKbd4FO/A==","signatures":[{"sig":"MEUCIQDgho4LgZIAqMPl1zEqmZCww+0v2nKWpN2BfIAlplpoAgIgfcE9FKZOEEhGu31d9JoGVdwzA9OGVJkpNYe53nrE/g0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLk8CRA9TVsSAnZWagAASi4P/jZZ4cEnLezThvswbZBm\nsO3g+iDSU95QykV7SMFPQMC2hOZ8PxsLYjHhGgAMiO9QqT7BtLHKLDKpNhi/\nYhcI+8M/o0rqnWfCmcDJT+QvyXwzRurTPxKgzWtMAtJdGi8lNQsvCwdAKYkD\ns8gpBFS8A62OOJwTYkRwp25I9q0WsQ0UIhjhH9b/VaHrKoRMmqLTUTBK61o2\n4pXkI4nM33FrtLuAfHg29LrC4f97TmplDk++QXCDie+RRFrhNz9mWcR/E/Zk\nmJzScIqtvzmVjq9MVicelWh5EqXCfhkyMT5xEWqpQ2rCMo3T8kVQMqD7DDqB\nR6rG1TQAnozIi5ufvpL7zeeRjIwzTSYerJSaNtR0JzxiCdKvFvrsKpxRib2j\naRFPkt2DQmsdCX0cBrqq3z8ndfttHsKWP4UfeOLWWYImEw4/xin/eTc/Z0KV\nfAWtXXrQvJ6SGibaC+MXMPsf0G+OLIWj14S1NRuQFVNGM+JH5U1MwCzg4gg3\nPVtyi/wDpV9EHqerOXM0VxBAFS/XbrDCi6tHbIvs5v2DQDWOa23A8381wt4B\nRlIJSUAiP7JinAYWyk5m9jcBt38oTZFDLOrTLTdQSm8m2L0wt9Cmg9gDgb7J\neHuIzV+osfXY38Dm9gj+laEj5gldX9GQzSp3REbdNXWNkrvDokqCFuyBRA2w\nYAJJ\r\n=4Uyy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.ca61b656f.0_1587067196108_0.2784421038245135","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/typography","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a581088d0db969ae26377d967f87add9531fc759","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.45a6615e3.0.tgz","fileCount":20,"integrity":"sha512-xZN9COvkbkAVGdkKHQ3DgLb1WhMfOMfYnGeLUIxGtoZa1Yck2GvPMV6TKYYA2sjjV0/qnlMB+6IKrc7iLTpZtw==","signatures":[{"sig":"MEYCIQD6lVHQZIpMd/9Ui/+6DnV0SgZzA9rtfzxmf/Uk9tClXwIhALqCjb9ZGMYeSMxMw2GLcAbm5CERJo0LXHwfOI8ik2eB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMD0CRA9TVsSAnZWagAAH5cP/R2PmnWu8l7UNIMh1v3E\nBtyh04ZxwshtLvi6bNjtdoCkSGwFxk+6UE6f9ZQs4nJdBvsjStbVV24UHVfW\n8NYSte2PIMfVaR4re8IEjWpjy9J9uyMmiTjYbZ2hEBKmf96Ls/QSywNkbJ9Z\njM+rVwuRfjbuxjVqGHIdjthoaxnqh+YE2hSxl34JTkWgI6LM6LswZT9ajhBW\nqC3HQkWwyXePu2GS0cPUROiJMbikITcX4M1hccAxz7B3UgFG2M//KKjy11NJ\nFlPOG/Af6gKXxPX0a84ShWHW8m1w3uFzQYLrMSvNljtgxr4TGsdzQw8KORB/\nEmqqOqP4Yrnibubyjvy7VASfsNWbt/iMtkokH5B7MkZfxfihIyRw4QsmWx0c\n2wbtrQLf3C1bOOVLg9AidTO0GZm5pf5O8lD55z1dhSfeJxj4oYbR3cbsg8bH\nRYbeuH/zPE/WhJB2kDj/qsI4IqwX/wSj3QuglYfS4bRj0++0R/ONS7zEDC5h\nVzRno1Jy5yIHw6IVjQrLB9p5BxND1sjyS4B31gvITyMfI8EQRdzWQq8iZiCb\n59klz8qbMJcbGGi00OL/mxN4TQ/cWk+XzdADzlgvAyk8CtJJ44ik8SquWR/x\ncAuwACSs+vx3kKyTpe9tHq0+qZADP/C/V+AKwMZ+Iev1i+XeWiTdw/+wZQEA\n5aJU\r\n=+nSb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.45a6615e3.0_1587069171900_0.8098865741069046","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/typography","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd78b2c78cd81ca39e24062c050c6dda7c450a8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":20,"integrity":"sha512-m9QZYkzHaeKHbqa2mSI37pDVkDuOVsi3vNW56hOpuynZl4x+PnTdya4HrUon3+jL/v9ofPBGQHnAj2VOG9dcnA==","signatures":[{"sig":"MEYCIQCTs4vwr1weJmDlUjxXPuOHptDF4ms2Bbo9lsCTM7X/OgIhALiyPxV+cpJxaxJlb3iToOYzcL9lPs06K1v4EI556JWD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeouCRA9TVsSAnZWagAApkoP/RYCHl33MD79ESBqQ5vG\nZp7xp8KfSn1aq3G/RuKrXFh1OpZdR+8YnsZvwg9nkMG2kWYBljKquIw5zT5R\n6QLmKAQt6vLKl7tzZHQRSxbjfwNH2GXGlEnMRCtusN7UN5fErt+/lscqsIdF\nP2CiMEjHe418mSTrvGYaT9jWE+pEwnbKChRJtTPhZKKQmZ3KUcU9VkHve/RI\n89ikkIh8DOGsXvt+mm2ryjzdswTPElvQLqBRissFaQ8uV1L9Cw4dsm7Ti5cB\nfC9yAw1cbymCYb1wzW7r4nWftejYuAL28bZz7DSZxsHfBXYgBbO1O4fJoWto\nPWZTj+BEccHXi/H62C0C7WhAhHu0RDbrU5xW5YkypsO2r8f7+cGauOz3XnhA\njyUWysClbjHN+nQwvNVv57zrlr4knD2eNcxoNi1IWJ00MkvLhziPxv7P1LsF\nsVicStJ5uGwOTbDiLOe+dyC1/LlsFAZY8kvBmc7ajs9PDIOzZeo8seTkpPPS\n2yMdWg3p6ChoPofSs2cz54/rJW3e/ZqfjLUTlo2UGwIdAtX3HDZwDTu2vUd1\noDCyJMEG6ki/XYXfRLDoR25Ybuj+Kn5Rh5otPjKGEYol1fZGJmXOGKTkgx06\nWw4Ry8Hl8I6LiOBCNIwgP/CkvP+dqGySGaEhpXqjCK+5oUn09SSVyCGotKze\nwR/O\r\n=N+7d\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.4b04cdb0f.0_1587145262440_0.7717225859457257","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/typography","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.b273afa93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82c0d83c674de10feeef767bf99df771ece624ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.b273afa93.0.tgz","fileCount":20,"integrity":"sha512-p4HjJw2/0bMBBhxbyh50LmekJ+rR/m9/2EKkJlHWw2a3o/K5h1dRbHAPxNpvMaIpPCkXtBWNfIjtnrac77TfKA==","signatures":[{"sig":"MEQCIAk3pXi6fn6SlKhZd6uN4h9HzQRLROb/bF0Y9C72j/2mAiANjUyfHVBL0Np9/6G/MOZ1xZLg0aRJP/3PptZMnSD6Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWdCRA9TVsSAnZWagAAyxAP/jZ994QMacp4mAbOLLck\nn14VTmmobCNd44ugxQ3Vneg19HSJ1V4n2Hvw/YYGvDYUUr6qMOau4yev1tOj\n5D7DK3GTepWkKR/ABapdaO1+hzixeQNvs8A28qSoGolU4FDOUtt/2rjGWf35\nqP3nhYGNvL4ZlRJ+NMBbs35EHHLcqWRELTv8WXLaVP/+AqOjPv4HK87xtwse\nE/VheKjGNVipWWpqBfmNcIgCJRV/lIEZnG8qJvsKdiJCaiLQswcb4ghtg7ea\nZiF/JXe3XrihEojpk6RgFzTVba96v5BxtM4h4I//nncOARFejUlhEaEqbAhy\nsK4OkzUdRajaU/Ds6E72jxZHL/HJSfGlglvrVz/Le4XN/7XQfTMoBGXGdeJ9\nKHbfOwcczO5aaQyCSrCIeQlpQIBfqoFGiPHCbxaq2odjHC0tQtMGPZjk+8XP\n/sjDySCdm3EDGoXTaA8ZM1ugWHLPjiV39jWB8pfnCgkpJ4yrd1BQKWgjcOky\nI2mAgZQFcoamcjDPYN5EK3zWJ63548qLUqYA8oWBbBerFj0R/n5pKTXm9cTu\nH+51gQ8BM/uetoru0rqPcJTmCYYmkgkzBmIgEGTjpIeLWSKIO7OStLqRJVSi\neF5Lppkg1jVe/5TT4g2sjjzpjQsNeqbq+gRyIFfTDeW90pXOH59sCDbF/qgO\nJEhw\r\n=ysDz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.b273afa93.0_1587164572897_0.9816805252645009","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/typography","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c18f665a1609e2917f345793dc0ad1214b657fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.b70bc601e.0.tgz","fileCount":20,"integrity":"sha512-BY2ofAvupBfs4HrCQju+DGUSs8tEOdnv+LFnJ8mKZcvGZVZDWtjK+P18CEpcBk809IubnE44f54lg5DnPCj1hQ==","signatures":[{"sig":"MEUCIQDAO9ui30/kih4DHK59p6KbVhIrSW76pmWbbQLJ0smfzAIgJY1Pb8HCgR/OKySonpAJ3jV9/147s/xT5y/iUnzIq+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjn3CRA9TVsSAnZWagAAIyQQAJqLiWl/waPL7FIwMPiK\n9dIsvYcavg2Oo9L2yaOSJG6HtVNqusDuvfCDBbnAIQcXXDzrQa2FutiJWG3G\nRa8rZqPIN8K0Zh7QhkUshK9no7Le5JpQZFgctHCy4s8wWPxG8sPm1dWfpWVu\nLaALnY5ONU+8AZM8h4QVYhzg2GiHXJzUGbW8KH7+iS0QStryc1LUVa5NS5uM\nUsCy44JPdI2BAy7+u/O44m5MwJHQ/g1URHWa0tk6Vmu9WjP43LTyry+cjjxs\nKgr+IIasxSnZ24sVbqTSBtvos+zmfHavCOvmCv2/7GfHsJCd1ATiqhUW0h6D\ntsnZ7iCKZedswdQJW1Fcov93YC4KFqisONLIKi6s5Lt4H35IyqinupMAsczi\nakdGSdp9zkIPrYmNhxRvBOv/j6kquK+ih/s4MCC7re5QAA/x2BV6wmKrrt3j\nMvIh+Hkq4ud1+r6iRycMLKasQ7fe8nXqen2xZPOjDYXMUBJ/D7yFZlv0q4ec\nTGHeGXAmHyBXIB4EQIPQSrve/Pgu+W/zCZoLNGq5CQy2UCSehb78I1upbaiI\nPnDpaRRdP0HLbeq0zhQzxTBtrT+WRPvakCTTX6wUel9vGYxPdR+kCUMGGEo4\nUuIDGUgYlohJwHmfb8WX72tHi8fqWqrE/dQO4lFvMHxoDwIwv1OAPtXOH8Tz\neyJ5\r\n=J1+P\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.b70bc601e.0_1587165687345_0.23974901740288557","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/typography","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98212f32270c2babf728dcfeab349f6d798c1f21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.c4b4bba96.0.tgz","fileCount":20,"integrity":"sha512-SEbwOnA6hX1RCIXW49ObWgKuoxROjJxhH9rlkPxDwTeOZYSPEwi8QfeSm4q+FTQTSqff+aYDo0l20tPJB/bvQQ==","signatures":[{"sig":"MEUCICaM2TQNpW4c+k0xWPp6EUcVxZ6kc7vq628ePkdbV0PTAiEA/U8KAxsxM4GYmloG3v8vCozD5OXNDrdsWT5x9u1/IWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkc0CRA9TVsSAnZWagAA8A4P/0eUc3hreMwe7n6fKvAU\npDhxpmliA1W2HW0RQ+Gl6MLR+KQJ+rpghoLfp0UMr9tM069IZ5uB/82FTgtK\nA1m48Yzy22BImzgdQ3UImoW6pc1gRIGClBg59ucKraDJGF5cVBAWOwFYtMBu\nrhdqW53pL0QmvEe5JRK4UIO9NTmj30bbimW8Qkb+kwWwcecyOXUc51kiosp2\nB4pV0M2JAfyDQI7i64BB8RwJHkVrFrHFsubNWhBfbkE3gmkf+l36JFHyOerl\nSWlnaZN3I/+I6rfp77XgK8cEoYB4VkVOqPX3QRy4gps7k+KOmBj9mu5bhbv6\naWEeK2BsKKbV3V5/SkyUnu0RU21+yGOgX3XHCRUw7h95u/pH6sBoYZe3zUpH\nBCAZyPZRhqSscF8aPISlwV4aZ4KDhdqGx+cVY5lI6/Kp9Pl6a4YXnrJx+eKx\nRHdoQ8SaPcJjDl1SXVYM7Iy8L6opZsPdOuF5G8eIv377F7LqjtQhQB0fvqyo\n9MecheLEzA749M1yh5gUwtxGiKOpCHEG3Q8iRXxsQZsFSkAg4GBjY8AmTIk/\nTSqcIo5I74pMggQ+pecZWxGQ+qQiZFBdboUWjKGFApb6LvUtvuUZQfs/fv64\njuTLbKn5XJpPTocAes/Nz9ZtuUNf+vt03khbLdryemRfT9C3E0qzdZQS25Lm\n3E+o\r\n=ySRn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.c4b4bba96.0_1587169075476_0.2126931893825741","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/typography","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"229b413e0e1fe60e124f3f604f587e5d79d82c2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.6c1ebc721.0.tgz","fileCount":20,"integrity":"sha512-KtVYOgaEOjveEFg1VbQ8WGjuESoF2k/sN1oGxzlPjKfbPinUvB1UoYVK0EzLYy79In/4m8ld83+GD5mSlJDgsg==","signatures":[{"sig":"MEYCIQCPdLSk+bw2wdFkGC/mo3RQL6Mr4z6fmj3gr7Dhp/lnjwIhAJ3e3a+x3iIjJurojWX30IieU/Rq+lmT70XdDECY6AFh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7aCRA9TVsSAnZWagAAbDMP/0O4Worpolh6ddyCKg/c\nQSXe+BivuF1HwG5B6gwkmplojEmj05cVSNyOxt3SIv04ZKUd1gvQNIgYV4cQ\nzwybTTounEF3KxcsZwtdxKvRvM4iqnuSkgxAvj58Z6w+EfnUhQAM0Xdn7dKw\nTH4K7E1ezgy4eh5fanDr6gN/xDIQ+ERaB38abv36wreJI9U6Ja1B5THEMewg\n3vJITh6uJnUpRVLdMxAwhYjv4I5ub0R1hdj75vrPgieDgJ2msJscgER9X2A8\n7XS+VQYqdefh7FVd0iDWYKGi+gH87oDKolqSOp94plam7PyRGTJ07J2MGmpJ\nBHi1SHhawaedh3r2CmaV4jfGJ04VjjBJf+5VFCs+At7j3YYuoRt/6haCLn9B\nw5KnqTWgeC/7bEHSc8BNL9zPgIuut3Xh+YThPZ48I9oFt8ojVcifSuYQFo77\nPmFc2DBgCyBJEiAwlMXbYd516tjEVL9lKRPT+5JvNMEWSWCfN6hLnLj3cF5e\n4Sj0fKt0zmArp04g5ZfgYpPuMFHTSyFOfrQYdjyvFkR1NftDe46Q+QaZQ25v\nJ+KSUi+FZYOnIIniz+xXukOmg6XYtf5UQ6Qllo/fiw1SWpKVyEHvS+26vUhT\nwxJX9geL0GSqpcU690yh7vT84/KP5Sf9SUG908BXdLeTZuDXxDIsBjQivYIW\nf427\r\n=pVmR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.6c1ebc721.0_1587412697709_0.3904276775414983","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/typography","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0009f1e67352196791272a8d3fe5486ba9185bb1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.9cff4318f.0.tgz","fileCount":20,"integrity":"sha512-PLb1k1C+88CiU6ueH2si80aB9AHhURh3Jvx2UPjZO7ISr+3/xUgJvv/gcqqtuUTkPHrnhfkmvigch/o83WRyTQ==","signatures":[{"sig":"MEQCIHyWWc625ohxjzBhs1sJpfbYMt6JebY6oiJn4SvXcKn/AiBuyFpJalU1OvXXz43jNW8NaEatcsSn4eSHHlSMbLXIzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxWCRA9TVsSAnZWagAAd9cP/2ak0Mx2cvMJdtP2TZ4Y\nokiHwgrU/ZC/ono/dozlIt9itf4Bm/pN189Fv7iS6izbPKIPzltmR7V67lEf\nUk6GzL69oZB7vvS6o9mQv3L39++Qw7RfjRDazJdIfrxm+b2fF9I+Jb7VkkpG\nxF9ocqXI2cg5zztARamMJMAjx3CTk4KpFD+mHuo2CNFyZai1RoZSgWUqk6e1\njhdPOHlTDgDcLjP9rUAaTHVIOssvlnaO5E2eWrRsvHzp1HQKtH3TnJJQ1ax2\n/65GduPgoNxpiWjpPvG1mUplzNVkru7yNdBr4vvQWgBYmZXfxY4lnoIdmFVG\n1UfRdBd13F0aI/WG1it2lbQiLz1I/af8YjsTgsaz1S+noRZ8KcRaFcC95fMo\nooDFYpSJQlV7ZzuDoAMFhihRun30zYJCHnZBCbB2UVLDwXG4DbGr0X5UuGQ+\nrY29UZDyCzTmVj/F7BgAUkehmcE/aW3cB1Og9OfQ1aujMNI8QG4+GlPw6o6B\nKcIbumqqTiFQozfNMWQ+Ge+zAYuLIhOF9Lyr5r27KD1GFI34JTicQXB3NbS5\nxZ8soxwzgvYQUMbD4VItrlgfoibhqdBXX2/h1I2PdxSupligWIpWcCqHYG9R\nYV0M/WUvnhAXdu+EpE6Ry0AOPBDHkm0rudoGkK2LYROEoE9kewDYahI/ZP/8\nUFuJ\r\n=Phge\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.9cff4318f.0_1587416149770_0.13517980275749641","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/typography","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.7b4482402.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd3adb29e43b4a76a13074c1cbbd6b21fbc49d12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.7b4482402.0.tgz","fileCount":20,"integrity":"sha512-HzHn7RR45qKGfWS5B0iPMn++lAWZg0GgRIhQ4YTeB4HyVzT/MR2EG74iEn2ERb8n3L+zxfBO+J09HmK+Qwrm9A==","signatures":[{"sig":"MEYCIQCegkNo6DmSPf9FKZyaMeunYGEUVydMqxGEii8wPHnK0AIhANYQVL7nmQu7akhXFgJX5rXDJnTs6ZSRlOqSpK1cyCtE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAaCRA9TVsSAnZWagAA+s4P/ja46ywg71yRxny7U16j\ndnyDt9D7JfyduBCeMwjYYBMOweowYDGWy0ZrJC4Oln9XNlebOby2Wpz6QVPJ\n6Yuz1lpT8hPS9D/Dst2uRr8Wc69TIFe9d1bEzKXYzm253rczo1PMaqw/nC3y\nCgvYsZZ6vZNx0sc++CBEJkFwLT7et7F7Q2oROo+wWh0mjjfMDJnqvs+jT80y\nMPq+4St4dbLZ0o4vEok9hd3tKa/eN/7TFKpEkQaAx2HWjin8KUIEdfcUDlq3\ny55uIzTuYN3FdNFs4+DTZTPdlVg3SBbHuW49+1i25906H1pt833YPRjVxhh6\njkD53gItiL6YIopMeEn9AEWpp9jBXyKHNKiHao30nCwQdwrCJBFjnCWHGivo\nZDCgwRBzWyU8Foui9zXIA68v4/UsQ10ZvEefzBrM1l9FFe0/aceUVafhBtuc\nu7I7lxS/NdLVEENM0ATsRZ+EbvGycvqoouLLAmoX5we1y+KypZH2s2TKu6ll\n8ug4eLSj28TGuff6U9vTB99rD0xvSuU8XXuRvUhxkFV3osk8FAQXsoAkHwNA\nRz8C6zOzeyJq079xU32n1dcv65hdjJZxVK+iifBYmIJilLNoNm52RsTA1imv\ntLWBZuoqaxK8kxwsn19PgXL/dXzdut7SOrK5UOF92+zumlq8I0IUvWxKH8ed\nZmFv\r\n=GNxH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.7b4482402.0_1587421209939_0.5449065719765096","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/typography","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"122b927a8fd84862bfcdd7a0ecabc871be208759","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.deda86d8c.0.tgz","fileCount":20,"integrity":"sha512-d3gGQXt/rJlEde1+838cejtQg+fxnqlryW6cfQ69Kb0Vcb9og/yTV0N8Qs69wy1kVdCVVEJ/pDRJHb+bftkWmw==","signatures":[{"sig":"MEUCIQD/v9QKKO81M2DWAPpkHimroyRADEqvbqMUkxpWEt0VYAIgMHlhF+NwtfMPVe2+lREBojIlhgpbJA4RlKBTh5D7WaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkHCRA9TVsSAnZWagAAa6YP/iiEeeRqh8JQyKAAGczC\nQ9Vdg2afM+NhKxxVwAXRYvBJJOuzs9JbYZd/mwbg+dTG+H2HXqQvD1AaGzio\nHJ+u48fvQ+BQHTH8OvgYgVT/i2fmruw8bHgxgb5FgGxtmSWO1IUmqWoGyrPm\nQN+5PTu93SSkIJKr60qK0p/DOtCavcVrAmyO0Ylidh/Xf8iGRcVSVCXsOPJc\n2EUkdGWldA6ME6LoCAYUvNzuYDy+T72n2l6lKzZFQYi9wLum6kqXKMMa36C4\nzarx+Q61LGOy5Jy46qePCqqH5jYiCYFkcVjMF6TgO3tP2vAdBJVLXCY+afc2\nYws9J/ETaXnZqxzujti2biWisaGecLx+rDvyLdqJeTK4KVLb9qPrJO6XMaui\nJ55gstljJ1uL5r0lvUr/47WT6dl1UBwEVmjLpkzuTa0Y9t47Hc87W5YoUXQ8\nvVlPY1p2tw8EDqCTZ0iYawVF+BqeljiM8alEjijrKEd/nBsyDMqlv4DSr6Q0\ngOBJT5DAwRpuOMCO5+MvNHPAGlXuTXUarqFE0k8xW3QQUB9YRh0K24x4yqBa\np7MUhfODTtdeNdWQhMufbcGYEfTYSOE8w6e4qBpRV1mrNlN/cKE+as/F4FTh\niZLoA0OsQnX+7nCzZu75xSozKkq6mzjoZ0CqAK4ePjlsBe0ClPZPj9Z+4P44\n0omV\r\n=I7la\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.deda86d8c.0_1587431686750_0.8563476703298543","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/typography","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88b491c329dd3f8b5b3ec438f5d6e027508a9295","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.d10412cb2.0.tgz","fileCount":20,"integrity":"sha512-0fpjWnO8KhWvMcfs4a+B5BiB6jH7T/zLZfFOIcLPTyPPBDYwFOrp08U0lp9baZdQU7gW0DicrfGNGmzdtqvjtw==","signatures":[{"sig":"MEQCIAOJhlNKn3SPgBJ44QpmRJOI34texb0f1QQP6oUQM9XDAiBelzt//Xx3vKUMoRRZijS+7qMFXRnjmBG7FnfILLZ1Zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjwCRA9TVsSAnZWagAAPq0P/j+QusR7wJeCyETpwh5S\n+sShCLzX2+/cMJ3zwIwtDYa/ffzsXlZsh20Q09OEpV/w2sJFNsnVAehisp5H\nJVQb9VRrVqWoVC1YmCoxbRY3bO5p8NyIehIFVEePeRWAaTJClNmPgmSyl5jL\nLHfnbuFgZ0SI/gMY7piD5sR+0gwi2+0dkklkbW8BFFicQWlkLYQ1yCk0afbh\nNf0Kx9F4HvYmdG2NN53j6ta8Z94hdHr2rYFi9324kbnhG0j0gjSz3rwu2pOu\nzzcinmCvCz+EZUThZ+Yqv3fdIytTjD8QQHm+68NgWzvSDcREs5XpZ7BBnEpv\nisqHDqNgcAX5sQA/XpvMnSnMSLNE6wbso/FMLlhf3GZH6H7EHsXG2+mrZ9ZI\nymvMapyody6UHzsWLrYhnbZR++GdFXPxzVryvB1FIi6o/r8MJWJQCCzvfp9k\n2S7WHhaMPqaHYxBQmhgzikPiFR6Nq5gyAb33XVTR91XV+hxmWSNsAP2/V+dO\nBqVpcUsLUMyC1gyJQVJ55nqcVem7vsups4r35kgt3+cXf+CzyqX0ifu0S8lh\ntsZ3KKyYnqJHoakYidLfWAZwbZ1cTa5pJP9G0yh9ZbnGvWDICzn7mH2IwRDY\nv8m3ViS8CsyTnPyVNUcBZc7pPLOIghS7JGkL7dQk4P6H5ewrxS7EhPgy3Leu\n51Gy\r\n=3zVg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.d10412cb2.0_1587493103962_0.19002581290299148","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/typography","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.c141801d5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d620b4f39f22373b8e1bf75f8a1b5b9a452c555a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.c141801d5.0.tgz","fileCount":20,"integrity":"sha512-UPA9RXkaMGUvPrFboiNaiEHiWZIihgFDG0YuoKZboZIJd2i+xbVaij4sisAa3judlsj9l+HJPBKnet3T5YNurQ==","signatures":[{"sig":"MEQCIAxjhaaanNqgRAIOsKk/nZ1Y32aDZ+vAWfGzwwKC4xIDAiAz6W1vTAO+t0LpLOnbP/vtSWxXFOqsZSO0pvFhT7j0Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0yBCRA9TVsSAnZWagAA9Y4P+QC8GjJw31aPIjvm8Eib\njN+n2jQi6dRYyvqy/MjjgZ8Sdb+e9MJgkcSd/dvumTNlzQjiOVdapa1RZGo/\nU1byN2ZKUDqF2yMZGDmpq3yYBmueDLOwITUj/SiB7GC7WqyWB7XlHR6HNMg9\nSnX1v1MhksLu3+3jxZ9cA1HED5dw99PaxXjCwKPd3WrIYQNvq2xQUlKoIZRO\nsAyA1uIvN0lCwJFoTSdOjTkLjDrqS3G433OX4/X8nDreAmaIqs92twNHoj1w\nfipBWCmNv7J999ODT+1yHBmuQUcdyMStq1UBAWBQpep3SVn+DXPSyShxdynF\nAPoDfhg84H8CbcYV8KFbgQTC8+Hymg+xaBFjBuwABAR3izakO181nQtkbOon\nL6vvkL4Tp4zHWaTrrE97GsGRTLdKCQAFWzNHgeeOzVmOc+HOg8Q4nBzoOYC1\npaSrQH2rSUVMtQA8ZxZ3S48BTSMytVUgbgQTBAm2N+1ILDCEBUjNnqyzMLwA\ngSAXccU7MF58qOYuSnv4f7H3w2OTfB7HVjPWttsR4/fLaKSTCdq3mIXO81pN\nTUgbmt0yEDrxkPozWJmviVYa+AslR7p7wJvIcA+vz8CYg8uv1DLKhCsK0HSb\nGkU/rAiK33bacFqNb1Vk2jQXwhrReLWZVi6YknV97SSngUx+b1IhQenrdcF5\n6ht7\r\n=Bxd+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.c141801d5.0_1587498113336_0.47002225237327133","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/typography","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a9a153fb1163552d1322d736cde99c0f783fb2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0-canary.28d10a96e.0.tgz","fileCount":20,"integrity":"sha512-J528pfpf62LSNcl3wuOP96AGniYUs38c1zFijjuIPb6YnS+LBDbgqvQfTGj7mx7T+z1Qi2/ruDHla9/5Wg3Qpg==","signatures":[{"sig":"MEUCIGjC1C3tk1nkzilnjaph0w4TKcQUQ4VEZ7PsF2n+PLE5AiEA2btSJmO813CQWFSY2puah7CMM5K1qUqnfFs1VF04JF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAOCRA9TVsSAnZWagAAd34P/R1LHuIFt0eB9K1Wa0XJ\nVXHyqcbS/zzK8UWu1ojpqWqXULvBgwtzLF8CdrnJX1ZeRZbMF0nXgDgGkzF1\nFzL/RkRRNNqZ8hM69DurNvdo/uG/wkrvM4DOz2ctCcqbF2sDRmL/0LaypfRE\nONEwdhtltq38E9Kdi00kmFSVPTr7K/8cMe56jCDuZCCHBabiXCrR1K47Nqxv\nbasV5Yrt78O4Ms8sBz1jtQUQBrmWm25FTToNqH8gc0WF5DdE5b4KmzYx9+E/\nSvHugWscIBcMmbZon3T1Ltnm4tHE3SvkgZYL1TGXcyU9UdAmccM+KsTr3pTC\npnAIv41gx1RPQDaENNCO+8DM8xcVwZQMfYcSAWF4GuAIz2sBfHDJFZYCypQ7\ny/9D96KQFrNTHuxwxdN04Q+BeuoyADKEOJ6Fj8YNCLhMOYpTTSRnxeyVPZDQ\nc1KLOoWaOw8Y4WDW1eN2hyPGL9ABRV7c0f3YF55VXQSYIq57g+eMrTdJQ/Sx\neyijL11QBkoKoP95PmSZC1vspnT11FOkKD3W21qtFWI4DyTrvlOCm6x+jlTR\nM5SWWif50MQMpZofNZbcHSVSxHWM4AfufHnKSUHKfTowB1iXbdJdv/5moU3+\nHjaMT5QdsNohHTRJgFyo0GbBuAo+pl2PkvOfcU9oDEmkVUtEi/TY+sal+c6f\nia7W\r\n=jK+L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0-canary.28d10a96e.0_1587593230331_0.36846920048467835","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/typography","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8540808be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b716dd85d6309e2a87f2568fe323ebccc610e236","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8540808be.0.tgz","fileCount":20,"integrity":"sha512-UmM4C9QR8yq1EBbXTK53RJVD8uuf+7N4FmInwHfJ3uc+ywVoRfKayBAcan3sE+/6cWCgtrJsBJ/V9cI4tWayig==","signatures":[{"sig":"MEYCIQCgYDkkdKQl7d1FIiseDk6kbm9VAZiIa5xw8BSdr5yEIwIhAN5YuZ/LTnrYHFwLi6QVEWjYOFm9GaNokUVdIVyZfm13","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":85746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+mCRA9TVsSAnZWagAArGsQAIj6OSdScUTPpZkpqNG1\nsI28w9arkw0xtfIfYCfNzZgYmF0+Wfvik+UTka6LHYrGYVCPmayzOGESuHE9\nxJFwP7EGeQxGBc9FrnHtwxD9Xj6DWcvooxXrYC12cDL6HGJoqC6Kl8KfnEaZ\nWuyE21Oj6EZkhlW/uJrXMxA1uRNx/Boko2aK5w0G5klP3wcOgbp6AN+qP6bf\nuKqZUdkBHUM+dPhS8gtckoDlMqcFwnev7w8h9M7OfvH04AEVJx6/a0HqjcVj\nnEdOYP6Iu+FGB09GuAuXeDXbkqQ82WAWVJv72O68apCjEEJMvknEXnwlYd4n\nxN+3v5EyNQYlvvTPhsGfRBXZR0g6NXLuU2+9260xNH9RIXQ+QQldeTS8MquO\nUnh8vZgYE/ZNqlyYN2WdKxJBRIljCAyBdGmHqrHRUd0SWQai2IbdXrz6qYyP\nnhRgsKSPAveR/GsDO1badJQXMo9mYtrQMePbuW/hmq5+aPzSAgQsu0m7rfUv\nlzYX1ix1UMw47WGPSVtTPUslXCTvifh7m+5PuvobiVGYN3Mqu7Um0rWhOaKD\nLBomCQbY6+VyranyLjGXfKlGDCzIoNSiUH99lieTIdJhccWWQwQjPW7Cogrv\nJuzZzS2UV44b/9hu01F3ZK1+Q1oJj3+h45xsmtD7vi/XIJx7aTtp49tQROHd\n48pi\r\n=XfKj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8540808be.0_1587662758035_0.1684824829591176","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/typography","version":"6.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@6.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01e3f7aa9b98acdee911479de45c7386b7334da7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-6.0.0.tgz","fileCount":19,"integrity":"sha512-+4UUEYOxINMRUdyAltd1HFydjAy+MeXqUkFUXXNVsi5nFlpGTpMrxriwVaeL++XlGgvziJjDzaOe6S7zkwYxOQ==","signatures":[{"sig":"MEYCIQCXnwciK8qohbkOhs/jd7Rwl4x9mVXZkFK2mE3SOVh1VQIhAPAUvhC0G1pAmUtbgy8y4Jm9/zAuP7OIupouJlXVLC7O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/DCRA9TVsSAnZWagAAD6kP/AjML4Dc7wGH0S6hobfD\nqmHylAZ2I8y0/1lgicjbnnBoJ6pVw2KT4zhclByV8/wmUdwuhk0Fk+0SzkpX\n12dJCFVegBaC94IbrxVWoxddrujcag+eFCexAgs/xZiVXOjIvufj08cpWOs1\nI1zWQpi7LKQy+fA2ZeE+yn6EriGqHNLPxJhf5tDfgG3a49i9oNQbGsRmqIcy\nF2qyZFo8QFo3sN2D/HRIn9Pv8DB1C5kFM6cE++b+sZqFEHM9MyEXJ036q7y/\nfVENEhAvsmMo0DUS5arbWuNOsjT089fzfdXfGPbgBRYyjhPgGWVOHgNmkis1\npGM+kQawkySWGV9CX4Rcfdg1FE4wNsf00V+j+RpHkeTiMT/jjr0X0fINTL4U\nFQn6YsnbV+sYTrAyFZf//5oYcG+oVqZjvo2jJ3sIV3MYrjdXtH3+hiGXDqm7\niK1JylzrTXoOWVoak+7bnfqQVLglT4qmf0fpqkYHIGRcbu53zK3J1t8ubkoc\nbNrF2dEQ1ocSHUkwYgzRSHWm1N/CA5NQnQpyxeu1u+FoZcGxxexdyfUVpcO/\n76au6pze4Bq3ylh4pOHbi4Wl77uhLxesNfKVD4vFj7EbW4F1CsD9iQC3N5Wc\nLPygTFsqdc29+VnxosnG2Q3FVi5hg3swJiVofixeqITKFAPPuCiXx2T+Zgzc\neUcs\r\n=CCXQ\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_6.0.0_1587662786677_0.5173526327452911","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/typography","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2673adb74.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"062d65de9c4b9e5f3a1ec89088151cd48db6b84e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2673adb74.0.tgz","fileCount":20,"integrity":"sha512-lHgVMRy5ZPr+thRT25OzrU6ZbCrzxFQUKxxTzo59BRKmE5ibEd7Aqua7BruxhTHKDi8bxfDHUvbClk3hJnNYEw==","signatures":[{"sig":"MEYCIQDNTHXXUJ2pFkZz7Jrj/mBBilCHTS9ciyoNA9rz5C7+UQIhAOYnacI2ZCMQ0m8hTKqYtMIkbbRJgsZEpZQb1l7ToCMk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqSCRA9TVsSAnZWagAAXbkP/2cAdJn+uZIYnoSkgeMG\nec61CsyIa0P2Z0tZD8YkMk34eXc+CyBi35bYcz+hfL3WuJqOtS7NY+x4HOlE\ngy7pjuREvZ0mr3BmWezXZOAXWu9jbLtwj3LyLMuIiBpzQWyPNkFTJerUjt/s\nMVoa4XfX0JF2IqY/kQK4eIMDZCugxyMMa8GkiZ71J0vuzIjZLnFj7Iiy2hHf\nLG4lntLF8222Sgy/RiZgPAPBFv5GGnd25eD3a/18C6z+VyHolnEIPEzr1laL\nu6/NNoh5AVVJwJjm3ST4OS09DSxfuYOToVC1w2R8B7d0CFYXDOGXZ82XsChB\nKI9Bbubmxa/3NBkuDUhrx7JyyWiRpKe00PArBJ0lgJBTF6yIxtH4a0N+1viA\narY2WB3PyqtbKU9R8l8JGi5SaJesFSx6lVvzshw7I1QcPqO2UV3Yv//iIehN\nmDc4UvYbLUoNRhRwaPXjrzh5nsoBa/6JbCfkRkdKEwrkH8Y2NIAFDzXAtHQz\nk5M/nnqfVOSjNcmHhkVpQWjFMgTgkqlu5/Xt97baEOXnc9LgtcrfSCpb0vQ3\nav2AwOB2pBgJB4sKEIXeVS5nhsAL4G75Drc5IN1bfoUXSpfo0u80NuN5NpAI\nxepqkSX8/D32bEDsxEMxhMhDnWsfHGbZywEb9Uvj+zp36KbyAOEknqqnhaf3\nevAh\r\n=f5wq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2673adb74.0_1587681938191_0.06070880724736316","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/typography","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee504f542838b5a0a4eb734f8fdb197a7f84c5bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":20,"integrity":"sha512-iR9assmpUIliikcmeGTX8PrepN10ro63vH0LQIoHw6/seIwiR71IsX8DMvwZNUGag6LZhiZIW4A6+tbGHOjvJA==","signatures":[{"sig":"MEUCIFH96c649Klz5Gx2W0OFYWHTXoaQ31QhQF1AEi9FABJXAiEAjTyXIkaP3hwO+/oa4yfNHWB7FsNcZg1Rxqk+O9QXkqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDyCRA9TVsSAnZWagAAdFIP/32EW0Kur+Fwa3G2kyoD\nJmDeqOD6Vh1j1H6BjCCohCbi1QjPTcudvLG7kmGcl6JMgqzexNzveQNnITWJ\nxFeGMtcolaM9tvJgVgInNEK515JxdDYub/Nnkpk5moh8siO2qUXSX+uPKt+r\n5JZfvS+XjYueDgXCIFUh7jK95MTTIZ4wml7QoDyM5sawX4EB0fn2L4nayTT6\n2a2luduN1m1w2MdfcfsKCTavHfDz3LM+q0o9THjzkriavG5s+C2YNaFH8m6L\nO5L/k3qENmvzppHzS9S2vJuCZcMgfBZP8n8ON3boDrnvx+wKKK0dCO7Ix/63\nIy8JdsyLPFzlG1Ypiy/33HPqMrZOIXB/NIBKU/QlK5SBEV/pgRoveNPhY3Hd\ne3kTE0u+4HtsUWakrCsYuQAT+prdn5A3awhu3A16wP4sRj40wIfp/QYec/1S\nHMdnCzkC9Lc11jgLuVRt/H/NhMvp4+1CoRBPQA1BMzq8a6XaD5o/T4ln1O/9\nw8E8K4WlF2DjBt32cg9Lf0kkH8ZrufIUhjJnDLNtT9FFlt2C/TujewmzsuXP\no4w8UK7VNcSYjzrZPrRi05QV8ZZ3LL/glFWFgxrw0cFNeWu+8AlFRS5mj9Jq\np3nywLnoBXW+D5FatQp1Tb/4dqFoG3BzM2j8Al0EerQarGE/tHfuCj5zum08\n9DHs\r\n=nbFs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b10d0d7f1.0_1587687665501_0.2080464911956641","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/typography","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1a5b7385e6dd13f428c722d29333ce8848c68ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":20,"integrity":"sha512-9LS+AIXG2VIK2HyVRJ6iNm2GImgbqxgNFaTlx4pLfg++0An1yAADmsDc9Y1bU0frnwtbzoZA7EXmWT1JcDlJtw==","signatures":[{"sig":"MEUCIQD7cnCB2MzZdCw6+8J+WTi6y+er+wZxe3U2pP4GgdDU1gIgGXOTgug64GU+UQT8sZvsG8uNm10xJ9H+fLzdcm+hjHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1S5CRA9TVsSAnZWagAAwi8P/RWd3h+ZlpkaG/NwmQL8\nKa5rdBOZq7+TDN2ooXtjccGZTPaVkA+cxBO39ylJS3eUG7o4p8xzgtdEIx1p\nl+ZQZs834vSca4BJIL0w0lQzi8rrIRPIEu13ZkX5SLDEcQcPa/pNSMOkDPaZ\nfgEN/mjrgz/q0mWyGil1riohjGaIzVx7pNv0VLZk/HLyjUDl/4PJq0gGF6sG\nMQvnu8dIVhbFFlkMDwJNHMvxP56PUwbrza/bxD/Z7bK+g+dM2ZE0dOMI5MdD\nlRoSGHwy+0EqwSv4RKrHkXMm1Lsi76rKTRXNLnJacL5hpMzSXLl/zFiSc34t\nCTx5MPLdErws3Ztc+mC00ZohkMZokr4AsbHV88DoPCBMYRq1RPxuh7xdGXFr\n2aXqnR6LkgARYqsRfcJUohjKbBhT8z6Z8MfbDhGYXjGMhhhhty/pEENFwvBW\nbBdgVixuKPIKyy9OYCag7+ZTamsLmCntGjvdcums1fmnxeTt8t3AGUo4I+2L\npaub0D2piExZk/NhDZDdjqV/ybnFL3M2S4keVq/WsmcXRJlj23Q/6K0DfMU+\nzcdl97f+ZQ0OpypL37kvlI6reYpWjDfnjEHMCpVzF9c2wxsZp1k8ceXoHdHa\nMBCfVVd+U9EyDNOBl7rnjA1y6reRq/1jyb0dK2a+FO+XN/gRcoTCjObsEmWJ\nbwYX\r\n=wu31\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.3bd8c1bac.0_1587762361362_0.5175635817507436","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/typography","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3808f2a031f7bdc72a8f88c15564ef5f79dee332","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b83c8dc22.0.tgz","fileCount":20,"integrity":"sha512-xCTxEwbpiJSHepQW7r1OmhW8cteOQPVnMZDh2uk+aVuFQHmQSLmKvSH/P/Z4FSNpeTjVjC4XmnKeLQEM+nN3GA==","signatures":[{"sig":"MEYCIQDXpxsmhyofrQTRn8XM+ziBMb9f9rQbujJEDKFHvDYCGgIhANHY+ap+QYuQs8FIcJoJ/OZDAGqJn5EthhHoDELSsLF+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1e4CRA9TVsSAnZWagAASIUP/2RNhZjkgRufX+mrPzuu\nChUSVQccsR+4OGn3kgFeBs/dyWc7lQl96ZP41PPWpW+FCj2dmtDUWOUNBj2c\nKCRFc1qyFYzWiz//0VAtC+JbPLwNPczr4f7c7YxWPs3RoYAWMkEnlYzXoDfj\nHdndDZY+3xyhJZjdw69XPCFEimxCsmYKTOZxfcezUxHATDZaLcsRrxsRN2kG\nYxXN7lQMQyyk3kBXyZH6W7LmpbaIxX+hToU8/fp1C6wasLQnI05R2LGu5ok7\n80fWCFZI+myBicU1iUTvfEJslP/q8vEvSoal6kFaQDAOsmlelc6oCS0ifxxr\nYV2JyrCE94s5OGZMsXgVrQ31/mVxFCKQbx+/ZQnKswm8lSWqvNuOvXDyPB5Q\nb5tRLNNv0pl7kq5kQuaiqBwLFeZ9z/c9cRUn1sFLxAtQAexRm0Hvq4DB27HY\nZFevvL6V8FFZCBw6m/41988jwRIOIgQQVmaDBbH4UpJdu0eGmjQLVkBkVkK/\nPE2DnxK2DdT4Nx80KTBfLUqtp1XiN7+OwtKnvtP43FLVKRMT5/Pf5yaVw9Cv\nuqy0/2wj3Fu6FmV0XAY4WiIUTyyC5Tpu2x7BY3tE6iMBEjcvz6af2ZaSxRCr\nsHDnHOQPfYENvVMZGhdb8RkghQ0hujYPqKvjyCicxP29vs/qHPy+g3JEBCm2\nuyK7\r\n=/evY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b83c8dc22.0_1587763127821_0.7396385920954074","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/typography","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65f6bac8bdec6a634838689bc7276e46b2369b7b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.1b3dd846d.0.tgz","fileCount":20,"integrity":"sha512-6bNfrPuLFrUF0Ntw8BAiUGHBdCRubdmjvoUqwzVi7XcWqfROvLgwe89zR+qjCz+V5gjNTQg9LRQAvx8sgHc99Q==","signatures":[{"sig":"MEQCIFQzeiQiMzL7UEglVFy6ctdb/7BkK3UPPcOeC21evhrgAiAQVrWyP+SKZlMAjvMZVpdjO+WoSInc6jJthhpWjg8qWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fJCRA9TVsSAnZWagAAOKEQAJxacpTGfPuSqcNTJMOY\nUk2Ev4CNp+IyMlZHI4aUVTBcVJiWyV6PbdujzNvHURc1UIEqTMF7YEtDDyyr\nGUMgxUKP2wBCgblGwhCMXZ93DHTfNVnbve0+oB3YuMrA2Q04YVZJhnWT5PDA\nL6YjJ2cspEkr2u44JxrIWy5bX4XDKT8z+mjkk7NPa9vCGZceLLNbJofYOuCh\nrOoLL3nBUoBYXmsnq6OpJO7NQPTf0kynpExoiZMaCrKLRV8vGD1AfUe+SQQ2\ngPaKIZlVXQT57gsyqpoEYYTd5Vv07x+cd1w/5VBHr7hgJ8JO6YfFNoU3j7Qv\nAaUJh5y9h/Yj+vv84dg5tXqhHWL80jZ5Zv5nBKnUaD/PQUZ98Ju7+QWg1pVg\nExOKMxevHnN7/Iyg9i1JW7W8afGjMOZ0Fa06eO/LP0CycPZo62uS8NyiWnD5\n4menCaUoAIuB3SZBlE771Xq7aobh7gwVUe4bKY03HCPmjHpyAlg9NLif3w2L\n3nlRYEtUTkkhKw4LaTwPGUTfycUNaI4r8mgY1/t1LkKTeY+XpEw/oS0OCEMT\n7A2XFdUVfNlgh/MlXcHKe+uvM2T7ooW86Fyo2B30BN1+L2s/R63h5R82/Wc7\nwcPwborfZE8XryzzJxiWDlxq+ulN2FZN0jsIlyqpxvWOb51xBmg4IWe1syr6\npS9V\r\n=vvrV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.1b3dd846d.0_1587775433268_0.21337048435751504","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/typography","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.29debfea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab77f9947f61e22eae6e7598387001800bbb193","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.29debfea7.0.tgz","fileCount":20,"integrity":"sha512-xu6LevCHO8B/Zi/NFMMugSkibSm83NZaoLtPU0t4/4C7jczYjCYxsNF+Lv0v1gzq850gUfImEBICj6DChOe3fg==","signatures":[{"sig":"MEQCICejZrYDykkOZBCCy1xH6/l63uERFDBPE9vRnbdp0Iu8AiA1UyzRCEUvab72WeMqWEoRPtM9QPoMuJOj0n/nVYRm7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDJCRA9TVsSAnZWagAAtpcP/j+2Hwh/9U1n3cRf4col\nmFTMDIyipJO0PVRBkvOXydTFvAMK8a2lNjwOKjGD/dw2ccsW6zcCBVh0/z4l\nVh+K6Mw8uW6TFXO3EHKDHusQfS1yBJgWKm/4HCFyx5yJJphGKvN+rsMi9Btd\n8TVnr/9BZuK94NamtXhOhp1Ar+bAeD143Q21GIZF/rPsRzbi87L3vFphlNww\n4rQfFP+qHulegDbWR4IfQSdnPxpsCU4DMwUkEHzDq8FwQAQyEbxYpn+E50xv\nvCKTava2Ag8T0cjI80HvKfIrfbKREXiNG+GSXaCi5/qvu54/If2S4g592IGM\n3AZaDD6A+yq3QYI9ja3cuD3Cq+NMuqFv8cQBotCZiSRfEvtr6KUCC5vJCymk\n8OUgW2wmlxTb2zw70GvC9clWBA8wXPt3YuljKCxubGJxgZrZatniWNFLV6Af\n0qC7nuBJHYOYnGWGjdEWpfkv9KdOwGiT8xQOOslXp9idG9y97UkjiaSb5+PC\nlB3goJ9tzaHak2+PyCJ+Y+yg7aqMihHWdjhsNyxXw6soqbEotHTwsI6xj+Zs\n9iaveDJlh50ccXs2bFa/s2XfBasgobfv4KO3j9ttklAkEF37OdPXa+qy4dAQ\nhOihBIS6ZS+CHuGI6I+oKPQWK2uECSMrY6QthWzXaFzRaW9zY1nUanOy7vaK\naGpC\r\n=YdrS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.29debfea7.0_1587990729244_0.6364168603635705","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/typography","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad636693616f734103776113a69407912d2bca04","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.28d32f8e0.0.tgz","fileCount":20,"integrity":"sha512-6prgvByZX22E2AT71tt1WopZmipL6BHIKnc+Me7mcMy+tdftZnIlGBIZB1BBEO++Yr/NsZqBLJM7gjbJgfVJDg==","signatures":[{"sig":"MEUCIQDBVvYRrfzou08qpqZGNcbcI28yxFg9zhP9RzD+QifcpgIgDHXD7X2uqGYpwYtZnYg28t46/2Wa1/MqpUgywG/7ThM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepub5CRA9TVsSAnZWagAAIxwP/3yRH0Yt5RyoixJfvHf1\nAe8mU4mQSJjAx14/TM59xQfUXWkcIsKGxkxrvdSH3TekVxDIq5vsjojRgzpR\nS2rOBDsuKFdiO8lk7CO+di+uVF7QYfFMADbN5f8wk1VAeejdN+vNSi5rot2Z\nBAK4kCDSjVIfqbcsGeL7SazDZvj8E3uPo8QVeKHy1W0jqfA+fIWfrgP8oli5\n/VrXU248wN0o/NtTQuw7mUd35sp3Cto4Xq4JBlihsw6KwbNS1mS40gUVn8Oy\nv+piTfOZ0uRQD6ZDHXalLjfAZfBo6bCxr5ktbdf5EATNX+klqNCblJImvZ4k\nbaPZ6tI4AZ9yB0PyeFjZRuOH3VXRNOtJbu4ptbgnYsrNcq3iMeK37bCSCMSL\n08GSQtPYx8RTlfl/X4fDMKsil+IliSN8vDg3wNyT7y+x3p0z7kUMM38eERkQ\n9r9Es01hA5cwVu8WXbs0KPQH5WZNp57iIbYzVotFORuoGqhUL6rYmL23Tmn0\n0xrAo9A7E5D51MhfESMbBW6OnMD2w1FpCyf/64AGTpSpi36jm+qGRKWIcj2a\nBknj1LKnFwEahUh0DlXLQbAKOK3Icq7N3F2fLLqOBy85vOR0m1uBfZrxDM8s\npzD7eaq+4nE4j6yi5ag7vLdk86YU0Pbu9JR9ngASYJt27muf7Rkzuz286/zC\nEcWf\r\n=f9Ad\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.28d32f8e0.0_1587996408721_0.7669465010977847","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/typography","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00a794eee8b5a8d182a57826d6788aac9e7dfd6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.af71cfdd6.0.tgz","fileCount":20,"integrity":"sha512-25UiFDtXBW/ABRwgDKxE6s1Tha/z+pXKlUQckzW2a5/GLNVCGq81DEqLNu2aoVix0Uckxus9gJgra6dt6kWQlA==","signatures":[{"sig":"MEUCIAE0xYeZspRvxl/stgKXFsHGbqS0HQfP9Kza+Wo6Yc4YAiEA+pQ7MgVb0UOvVUIo01cvFQvHupRc43hIyzHp6jSDO4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmGCRA9TVsSAnZWagAAD+QP/3dFlZKpCtXtNJ9/CyAx\nUScK3iwzk+zMUAPptVXL3iFVQJhDkUh9RV03keMFSRb6wZV+1uv6tY1pU3Aa\noDoFiHZjvFMpl1RSa9k0MMmDQg+sQYv3xT0Pzm7SOJ+nrrUVpwtiF724bqfK\nmaJfR4gQO79xCU2TG7eP291gzCS3NQ1oZFfEtxC4N3JJ2FIg3KtZxnTNUbON\nhnaz08/M7yqhXDr7pC2M0DFHdvQ9gDSE3Z6l6BIkgqMKujIiBD27qLoqAaAv\nBlPYorfYC0CiE8Q0OBZ36qC9Gzv+///AhUkx12A6O+SRtsMO4JiSDpQCAjCX\n38ZiLIzQvdHLojRwP/OaBF5nFyLYJOUmwKchcyCberL65yYR6Kg7IoW30S4O\n5xHcUKfn+nPzbikeUd/rzS61vEiKyphIEMdr/Zj8MSCbc7sVZiwH+Hm4wMek\nEIKejlq6XcbFbn+26tDYisZz6K8De9OEBchkzCdLTm8JyJGMkwfn9lEhmsy0\nv2iQsz4ggw/2QQ6C7bDQPvZUG4PWnIZ1rKTrr3G+9xu8aCU/z62Eg3ek7a+Z\nVyWImKq92iIdreu41/CyJXiHP+u+bYmFdTpo1edPRh6NtltrCAODyRsd/kAk\nWmSv/w35Ryb5uNyehcyX0FVny5FtrRHPgOt/o15sGWVEhQIX7TvCRjwZWXMS\nsKjS\r\n=OX4h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.af71cfdd6.0_1588115846414_0.787057789014844","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/typography","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ba6cbcd68fff252d4e023a6dd014498e486541","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.99d2fc961.0.tgz","fileCount":20,"integrity":"sha512-j6prYxmRGyZyl4OFnn0gc0jBaHFkMdS8Am58R448gPcZOn51QytwiCPRijFOVw+rQyFi6CTVZEd9ujeNbp6+2w==","signatures":[{"sig":"MEUCIQD5kH6eb7DBDdP4c8hZiNZRcDCvwuRSb7qnq+5kv6jKyAIgM2GPNr4JBmPudxZMw/QgSN+ImwpnU4R3Tt9bH82RH0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpqCRA9TVsSAnZWagAAwyYP/iPl5Jkz08CV2E04IF5z\nDe9r7G5vRZVVelbubmAF7fsFMSq1YyX3qzo0IvrRznb9X1N/gfdA1uqjiEXD\nqc1Liha48WTfu7/7VAEPlvS1d27AmS0WeUxCuzSizcspeVuorAg6Onkc+/aj\nhHrxY6r28FqET6G3zJZOADkoq1D6D+4AtVbu2hhcVhj39Jzy64YIEnXFhwUn\nirfny+a/5Rr5dX4byW6Ju0PT5qXUWip2F7Q2ffV6ld0uFmBbCI7vcb2rBkPO\nzyuOnEufUeyI78zNkJLmBVJ0CXz+Mdy0AIJQw0kNIHYACBH9DgKiDP7oaI7o\n4sp1cBYAtkqGz4isfRlI6pcmRY3UDrUWFFpDh745vxy2Mz8veyqR0Gh12CH/\nufsFTfkNtMyzk5MEeP4Qp9Af5Ex3ZfFdK6pAgOfaq3/CTvSWuZNoICjT5fPB\nFuBSjmISh8V6VNtHeHWWoBK1r30u6+yHCSCfEkWmQuu4VKs3MtFSm7YpFzhQ\nOG6BRNehqukvt7euovxH0NgmaNjdAsmvYUvROSXHrdoOD3l7OjmDKxGMZWyM\nEDXhZcsOuZdF2zS6bpsSCtgEIfNR7eWOa3Cdw7Ms0MnnQOpxlQ9DNc/skbbw\nqUSYM8jPK4yfIQSOdPCP5gtVN31LDTD5nz1uN0j2dmM0e6SaJ2YenQv55nht\nk4VC\r\n=og4g\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.99d2fc961.0_1588157033975_0.48085669791745955","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/typography","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98f9edc65589c01ec9930c20eec3ee5d62da6578","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.0e052b24f.0.tgz","fileCount":20,"integrity":"sha512-NydlMw5XIVmHq4l6QMTSCoJMyrfMAVYUOXqPxwo43p+8tSnHuVO7GTzCl8mVzsbEmCzR/Ek+g6DYzX6RXjs/dg==","signatures":[{"sig":"MEUCIQClh8ly4Sioh7Jsfl7XRrOqqODJpV5OR0ARD3WxEThD+AIgZLwlMUF9uK/Rpev8jL1quX9fFzFE1eX2I8oPNh1hOeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqin9CRA9TVsSAnZWagAA0S8P/jgvqg/yyN/lbE3XvdHf\nCb5UsDFJqTwxSvl6fM5CUAAtfP5wKI+Dwq0dw+8hRcXmK2FVIVK7Wt9u/QmO\n6X41xkzaa86wxkJkUEedkGrD5AqIk3xRKVxqXJOa/qN6FB9Otw4glNEKPjmE\nnSx1X6IpIOfvBqjoL+9/PvLqIPwqvQ4ZONVetv5Qo+k0JgH4EScmjxnHWt2P\nwx75+l9ZqAbF0sT2gqDzAsbESGbshK8xiQ1KMDdQmgBTe7q0tgxGZwRPnhtm\nmcYw9R7M8QddatzoyDqZgNnMU60mDPDo7PkxRgIBcuJ07blipnzNMEHOZ4ir\n1qG/ZeSlmG/AI5VfXoP28MO1nebzkmQFmZBh2cB1B1Q4252DmmXDbArSTUpP\nYEYrIw2Ekkoy2LvPQXjJPR6pTStLfvFVQ8Ot08LAa7vbw9dmTP4a5y4MF5Iz\nn500V4t9p9yRw1oBNbj+Fc423HrHtEt/JvePQoEgIhxuuOKZS0Yv5edD9hJb\nAcio9o7Xn/iZ/ngVjXF3wpGX52/KcRhDgQLNTSAZA2JXY6thctnS/h2BD6r9\nDJSr3dtHTNL/fRXHpMSzwkX1yDBPAkaqaN/3zJ6RpXACxxBL3WtFilAEmqFh\nVgzRHLShx1cqovjAkcEW2r3DDgt2ox6BbYn8EGv4/3B7rMUMXDcKRwheyn+j\nhxBm\r\n=8frJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.0e052b24f.0_1588210172539_0.42997285229892235","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/typography","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2971da8ac2d1d6eab36f92c9e7ec1de3700a7d11","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ff4bc632a.0.tgz","fileCount":20,"integrity":"sha512-r2KJqt/l6rVp40NZobGaKvH9KHx6JYCY5KeRY+bUCCceCRe+Bmfxa9K7que+AF5ptZpZFuOixWNHANMd+8Q3jg==","signatures":[{"sig":"MEUCIGKtD/lauk74bYTqP1GbcQE8fqQ109EnJMqLnemw8SH5AiEA02Xs2MuevXcRtXGGRWYd9PqnfktKQqgsrzzPs8Lur2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowECRA9TVsSAnZWagAAAF8P/1LNaFX11I52WFKBiSPB\n3O5Bc7gCaNxrifD1M7RRlqWDW0a8qw5pH4NIv9Wip4r0h698UqJk4Sqcw3EB\naumILcvIOteNgFs/S6TVWUPrhkLjST2lUwbTUv9V+MGHrKbC9OFt3s/SVbxp\nWATSotzWeuFSxJ1I7xxVesP6G35MbWRUNzHMHjN5XReC7bcy/4dR4bc2sRaC\nip6v3AVhwO1a8448Qq/MuJQHQPCvgJf9UD6k5E3pZhopYwHob0Ptjrd8VsNI\ndWzn6OFShsPMslvYyir9d/aGZ4dIFsWVUAUJuvVvOfBUdlUM5YbfiH0EPYta\ndUVOcq51v29YPVa+09pgqxlPIYT2NThJqKp61HIJLGV+S665tyAYAp1AwfsO\nhBQuB4E6BRM6S06cVJXdEHQONGW0RfhKEKs6Q4TmFAGipuXN8f6VbO4Q/+De\n9FMiOQ9+0UvHWoFRoPDWJ2qht1pixK+ZoPPEoYgcKfX7lYGqtBzHUIIt7l5H\nR6mXj4DDIh3XTksqtwgev470A1HEk17Z7aLNO4nJMc2lRVpyygHK/swrWP3z\naF3LZ4RTaWjgPT0VgyPtPvXlYFcT0f5j89kW3LP8N9JcP1anKfM3fJUFjS//\n5YS4fCpf0ZAwnu2DcYokprHdkyW3pvLjhc0Y1Bh6hwRhOCHFv+pqWxednFYa\nPcQF\r\n=pFcB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ff4bc632a.0_1588235268014_0.22728404278016456","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/typography","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e916df5436d56a7147907c2adb4c25bef67c98e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":20,"integrity":"sha512-dQwT7uHjB2GUFZlfKhqu1yU6psRPmFfuvcCx9s812hAjoUwQsexEb/QrR+0LStnNByptAfj/NbcBz/nDM3vtoQ==","signatures":[{"sig":"MEUCIQD7y5QM6QaZ1BmQOBEs1Sxh0KhZiL0lB+4BVEjBBpJlPwIgYRuopCPsy8uMu/oSUvnMbZu10MILxC9JiuBGEKsOoa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGFCRA9TVsSAnZWagAAW3YP/30vJ58Xi/8dnmREAGFC\nriT/sg74Gfu8xyCCb2y4E1aORnCg1o9pZj/lhJYoe2HdE50q3VWQ0P4Q6pXq\nUH/N+Yj5V7x9sw8yKq7qKQm9umaE48Ti2AWnYWUlSWx5fpqEKKAKADVMKL93\n8enKJxWI3KQ5ustE5EPzpWbadjfa2bSe2a4jQb6h87Qkz2YOVnnLJ9nHdlQc\nUK5DHiRxLvDyNVZnRD3UxEG5vF6pkyHqBhrs3LjzK/DGhaPVehP43RnbL9Q9\n0wZpE2ePYowgqHcr0lbEQ9Ul1qSCDkEUG8dPZPKwec6Q8lCiBZLtu1X7LYf2\nS+ED8pVwT7vydd/jymvpAPaFXqkO9odWoInOSVsMYXuOXxXX0jxgTf/aPKQE\nwMaoFSxQ5TFdkeSUB1xunGdtuTIKrW2lGt15UejR/x3/7MvwlB+axsmbn/OI\nUDsTLs9YzNdkuZDxA1shpZuI6PV1goWzLR0XQ5aSlcnuL2FgMa+rxSwVjOit\nnJdkf3mZo2HhCHz90O4CcYpbr/fVSnbQud0PYYnQxt1YexeL2cZIvvq+enzC\n1z3m08rBNG0/mCxdgbEA9kuxIqXBxeKp1MSsjOxHa/fuYdbT7jvnSib3j8il\nCBSBdOa3RG9XA9OV4E4kSuFryQH8/BKSz9sptuqHowzfyQraWjXbeuGd88vt\nVJFP\r\n=fQ7A\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b0f83d2fd.0_1588257157392_0.00855655222205165","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/typography","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.e59906a57.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2204b8e751bf7432a8adfecf48d2a9a30ed5b35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.e59906a57.0.tgz","fileCount":20,"integrity":"sha512-HlHfX0374p53P8Ge6kC17LG+G1ebLPBeWIIcRw9V3ImJcLD9si3ey+WWnqQVg3l3YThyEkInajHUs6xkje9t8A==","signatures":[{"sig":"MEYCIQCdvuSQ9+Olwx1IXYksvvWShpDRcSmd7eF9Rp4z1qES3QIhAL6Q6U15sUtUcT0Bz6FEqmpDiYlBpWXvcDnZF5zCKrsq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84912,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENWCRA9TVsSAnZWagAAUeYQAIiQYpH2U8Ij8nK9TTa7\nnvnDU4eHC5nlyqNAFebBfeD9d88cuRCT8CRnLehSYy9yussnxo9pA7dkhLd7\nS1QuBFtAzfBRoq3pedZIkjCqAaGnoG8yU5D1EN4ziLne6qzV1WSQxON+UfQc\nGch2pok+9lUQ33yRXstjeO9BPYEYj3r1mKA1XABfedBLV0FqJ2lAjZoe1PQi\nwqX/SrZa7BNLcLMM8tLhSOC2DVyFVDUl5hcG27v5ouyIqf+yfYlHCAsH4s+I\n/86cBsBkmrmkcnIAfKlLTxzSl9pAR2MnP+HQSPbFl4d11IBI7fKCPM/ELn5H\nsgDE+9Dlry5mrgW8yITrM7HZNp83GW8t8/Gf1pkY10DPl+i8h2CQjMQGfif6\nD+0laSqxntmzIAy8De6ZLHReSv18FF21w3C5mTdhWjCBAzYL/WuRx0yoSwwq\noy2xFGf0oixkDoXH8mXKi17vQj6YxIH//zzCewSs4S6kkokac+1K/GoPf+yP\nbliY0ftCc13TWsH3kdH3Q0TAj0Xqb4jC0sgqys1Tgmckyh5o3QfQ1TvmH/wP\nRNbg58MUwUH0+a5Z8a5SqFywB8TY5msKS4mf+8Q7+4LmyiRH40p0pGqCSrEx\nirQStGB3+A4Q7w1napsR/xxefyVd0YvN9zQ9ZGjj7UzT4cwUXU4Vkmb+KjbK\ndXLW\r\n=Ljnf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.e59906a57.0_1588347734215_0.8659726257414984","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/typography","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.c02712b59.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa85b3e85da61ae45a2d6846b1ff26c3d80816cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.c02712b59.0.tgz","fileCount":20,"integrity":"sha512-wCE7+YDQK/kc9zOtbkb/xacOWEPjpTDv+sP2R3yKjh8053y2rKH9w2SpKP4eJ7WEaCKeKRNr5SpvO4VD0eikpA==","signatures":[{"sig":"MEUCIFNwZ/iP1i5z5L7XEzR75vXUTproN9C90HcqumcHHxBaAiEAgrVyAgrwk6uv78KUD5YE7ROLsaCDwFi6EABSYcr360k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmmCRA9TVsSAnZWagAAoeMQAKB9kUF6ATqVEfNoZqz9\nOi/6hxw88o8YB0gtiv013lxWojf/erbUkwNxO8tjUK15JdTEtASk3Tkj0UBb\nwEMvcQaz6QhWiNNkpnxjLmM8ETEVTvke9ZEBGDSyWUnWdmxPfNkhcciqItb6\nAGV5DYi491t7yX2zvuhEVGZeRDeX6cAkfy0oL83ZD7V0L4H9ufBW4RzyHp1T\nygrCJSLBb4MfimxzXLrcKMtRbyHG+71EPyROgYMqrt/ok7bRE7VztLstXgDM\nQlNKV6AYYRJuY1vFpoP3/oYHhNH8ygrmx4qsDRUOZVU4r2IAWNmO3Slz41j0\nXNUiUAwt+UJghvx6EFT7mRnoOcmop5xC/5fj59bFyTptUGSZlLmg27SmQIAm\nwjMO1NaWgAQWhDYWv3VAEAU9mBt8m7UIrnHUgJFLxU1YHVXfG8ozKkN4QXm/\nPXOLHnnZ/9/VIMiwfUz+UEw49zjY2LMeeO9wu6Mh6AJCFuyKU34GNKNMeHDK\ndFQaj5ZPio22zRsn5LEUJBP1XQCP/fVZsQW+pGX9R5BrE66Ze+EaD6EIgeXA\n7LRYMSx6tSIuRwT1wXghSzy1dT7iYZYsWlMp7kro7Pw2DF8G9Od02ak8E5Dr\nMpLM1DzxhTUOaNjRxoO408lvQcqKvDDeuG0llckqStf9l+LtMkICqsiCtvGB\nRYKi\r\n=bVBt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.c02712b59.0_1588357542157_0.23673892320331436","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/typography","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.15d65448e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce8207996137acd247252a028ec024c5c3c1014e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.15d65448e.0.tgz","fileCount":20,"integrity":"sha512-OSq0v7ebm4v0e7NwzDGoPAex0iV8wx+owHywa3Va5E/KMPYy0OKml5lR9uiS5ZgDZecTs5n0X6+ytMP/EBV8ag==","signatures":[{"sig":"MEUCIAxFiwX4H29nkcpQyl5tkgXb9Nn2zvsxaPP54tylX1xLAiEAjFYCfdKmQ3A+lS4kCQo4n9sIOJ05XCSzU4/f4aVRK3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHb1CRA9TVsSAnZWagAAyhEP/25WVtnR+wQNIKPD6oRM\nCLVnaCntA3LQhoMuwYvN8kNLx5j0QtqlmzUmhft4l2aSD6jypxE4wCPLwnMu\nkdysBNIUQneKPnH89B3Unc99MmkiDGavUx/9CI/L8utcDZqE1CtNQD3Dxm8z\nJ6PbIBYrBTQMhvpxX7KCtTcNSw6oQpPngLuvnGUpTLp/uFqUKxAx4G3/rG0w\ntKCC1udIPuVNUz/137VrwEt7hhT5hVNWisUihXrwn7bGcABZI5kcEEVUCkIY\n9L7zWZdFjjcp08arKW79uyzJ4X7P+RxxsSJNkH7a7sscTEhC2iqzVqJ62pwB\nZqH0mmtr3hEmFaVgSXxZNVJ+jSU3iw5/s7CD/kwvnuyQ9afnBbNfA3NorjwS\nMyYaQOh5yVFai3Du7FbfZKRz095r36LmVxOtEkMRtcMz2/LujaYqhj1KjPpZ\nFKxohxaTVInups+a3EPv0U7gWxs/9Wm2vGErrGmHuhCohy3VyGLLtlqy9KPS\nano+awZfzvm68GkR4eNihGRjDH705q0G3d8pyqubiA7D7YOOyH3cOzg0UIPm\nTIggbyTIlqvAsjwNsANDcLFPW7iv5ZyAcSI4iNr4+Kp36DCDq8UuAQ/oPBj/\nTIgid7CoR/Vha8vF+gW8hcR9QRefITAuzk0oqP7x9s7rkQ4TbeGUey9jK26E\nEYWN\r\n=VUQe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.15d65448e.0_1588360949121_0.48158246239361135","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/typography","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.142b1549e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d204f040b2b0a88083c997096e67d8e06d0f3bb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.142b1549e.0.tgz","fileCount":20,"integrity":"sha512-f2chBLrkSOZFW2czXGkGFc3ooiRHwCVMdPSNeDOC4EYcXmcWAF2yfztFyTa3PYBvZHXtcFNfkg8PxwFgHtAy3w==","signatures":[{"sig":"MEQCIAoRK7DrW+pUAPs6ckNz8rOj69SBO20Jqdl+XdrC4x1YAiBFNUihknk00kXEfPK+1QS/xDlGLQnIuZ+qw7iONPIPpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRDCRA9TVsSAnZWagAAXAEP/iC1XOMpJUSrLKJA5iLV\nEUgJlIxNryL9ycOHVoBckEFhE2HnmZjarII0Mdbf7YhI4+roc/gZJEpjdbo7\n4VSXZiATB76zGKVNlyuTWFCZaOwfqO9uJ5GB+inw9M73BzWPqd7n1+4f2IbH\nOkT1ptcXbcR0zt4aWrol/p9ypuZo73LpVk+Kait1zgE2r5/soVqjHOLrsvKB\nP6/x4HvvR1clOAvh4c6ZBleI6BjR4HO1PEn4GgR+YKoFPA3+XIIye+ZynSkd\n/VpwCnoBKmW/Lxgcgcl14ZX8XOXYxH64jltIJWToxZqDkd9o2506X900ksGn\n4+WfMgN3oQIHVr6lYlpL/liQS197FLSW0gANMFZeCkuQ6E26yVf10wkkuzVa\n+D7ydgT7bRNF0kCkVNNEFoP3B4X7hFpHD4BAfbKfhYNDfq1udMPnNub4ht5F\nxEdpe+yU7TAQ8w9mODcDnXared6IFM86o2svRDVOix3FzeD8/Q7B2HdWFQqg\nFK5jhUySi2vi3+zx2GJwEop5U3rWyEHzabL/NI3bVWchWvUfOapnm2kRsk41\nBS/YZZPFXia/SlakmcLDvQcqRJO0HQwo4j12AlYfWFQ9ESgceLUgC3hMLhKG\nJqULn3U5YZ5lsB+o+TOQ9LpDwqBfuIp56z9heOpxt5hBBYyn2auIMcqrrAaH\ncGDX\r\n=FVSl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.142b1549e.0_1588372546944_0.4303771659334039","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/typography","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.524b7b812.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c40149a8633256f7fc14b91e8be8d3280324df8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.524b7b812.0.tgz","fileCount":20,"integrity":"sha512-5Sj9YbqeLxEO+PvKGo983TszzJHtlYlprrfEqVC3IZNhOXrxw9WSz4HJrW4gFURkRV6FCFjacZv4N/mOlPU0Kw==","signatures":[{"sig":"MEUCIHRjFO++Q7LKYa3hE6eaJ90DzoMWaV942la5nJOV4UvPAiEA4jdBSMec4bMVk3Zf5nSkCAWR4N1LrfV7pfzh/jHReeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3kCRA9TVsSAnZWagAAooEQAIO0ERdeGFEJQNobjYlz\ntep87DcUrs+XtmnkXdYDsXY0mmVNn3CY6CB9GDlNRojMmiQXcXMleDjunZFv\neN4d+l0jcWijFIb6gRuVA0sbXFJHCfph7xS7gEvC4bazU79JicA4PJf1Yt03\ndUgwU8VFZeCxtOwLcuxzVPpGAEP8XgcE6/dY+m8K2P1lnVORg8M1DipPf5fJ\n7SnHfxXYrQ9DNG5CMs6S6VxqkIk8G0W+SYW2XPWtZc10Y5C/DEz0GmOMPgYA\nKYtjJi/XTNnlJdJjGUqf9t7nQONzVXQGZVlsHz3WFVJH6ozVtuVgGREVtunS\n1WWStyrQRaclEiDxrhUuvecjItB6WOu4/rc9lEYX0zbFfP6CtYNQT7XGmMrs\nUD+8Pd8HV94h52uJjCV/DU0NkNW8XUCrcxKLB7iS67jrS8SnQYB25TSoEazv\nULXPVsnSRmXz7RqYwX9T+5OM8Z9t2esRwr7FDHPkpYacLuZ6lRBvKh0+fWzR\nUncs8utbFWG0hGJoRaqxiW4nbwa5b24FjnAoDTvYCMS4KNvo1KWPBaFF+R4+\napMJd5VnSxsRGH3tBo40Q9iR3bfKn77m7X3zYCF/Ko6Vr9J8XKWLRUZIVFE0\nYao+cn3feYrrOrEGnAqcEndgG8PvZM+NSn4s9JYXh7YtV+HNj+nfS2yrPkXU\nmsQV\r\n=Snxp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.524b7b812.0_1588538851811_0.46000403411977353","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/typography","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68e32916e55e91be173ed9a6c7ecf80cdc61a5cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.bd8ca9678.0.tgz","fileCount":20,"integrity":"sha512-0nHa5ZLBejymALs0V2jlyt7lHeIJMgRS5/qHlkT1JMmstwvILZuCD8EF9H+DupLv+nZUQxO2ljb2qO66xHlGag==","signatures":[{"sig":"MEUCIQCZRihI26/o5S/Sx7BsTsU9qP1Z6DRV6t3D+QLb6JrD2gIgPyl/Agh2ggqXYEcWZBhxDcn84mXzTxJ6ev6FgqJUcds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6DCRA9TVsSAnZWagAAtkQP/2LVMGJHHOzd+D0YQvJF\nqAn1NHz91gN0LMQ0lcscDPX2YEtgwVf2NaCC3JQR3uqgAwKnbVjgY5Q3EmsS\n9mDENo3BbvSlUhtWS0/SPgeqaP9uBE14sBZ+oC1o8j/Aj+BzMzkY8wEnd+S/\nnj6i485hQmOA3RxPG+mV9IcLtoNOhfFdEP8okt4LOdC9EsWAQ8AGEMKh3ksY\njte7CP2YK0CTNeDERNkDonognkUJRN1e37b12IAAy7RDgRDztji5Lif0+4ka\nnrhYW7Vt9365qTdx2GFQH0EYtO1W9kctIgWjg0vSv7Mv1bVbMkSMIPEhzi7C\nsiaducPiU2ttlAryfJQHuVPjdI58SIeIhDdq53uDlngyjbokrmEC0fpf0z+P\nhOmbpjduytEQPkKaRBBItilJ8dFh1HjR0byQP1gyXEWqttwa2W2YTBt3j9h/\npgb9ztFIuXqmr4EcRo7/pJXmL/4SecOSt93PEOm+nVFjf4hjeW9AzHygIyiT\nKgx1hPlBmJy7G3gLjNoajuHWj2xD0XbX3loLFrtHxo/HjsU7lObeJ/1m1wd4\nj5Z/yiJ3WkeaDouxhnae+y/KrXtWgSrtRf1LsmwkGuK19+ujxC5lgCw/a9dW\n70J2k9rt10T+tGn0vjYO9WuJRoOyromS1oghObF+kkYmdbiRtZhDONchZvqg\nMAUJ\r\n=K5hb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.bd8ca9678.0_1588612738925_0.5463943975130221","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/typography","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddcd7f6ed702ace696e6bb9fb5b2d2bdd0fccbb0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2553e86fe.0.tgz","fileCount":20,"integrity":"sha512-y6mZl9s7crR4sv7d+9luapzxGcmleQtadKH9Qi6qc3IqIZ5OgfYfhDQUCAssU0gEa4in0GwJZL3fNtcjlGE/BQ==","signatures":[{"sig":"MEUCIQDwOVdMPbxwsMI585+X1XbpFDXc01jx0ZBQ/M4YyNvvBgIgActMjv8HwI2res8VqDYUeZ2/L696uRYcrXsX/QhYRn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":84984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFVCRA9TVsSAnZWagAAZjoP/3v9ZpBc4MKMSLPsYvM+\na2yJ6iN2Mv5ELO3sHBfynwLgzlvrmibu1FvN7h3IZ2xlfWwu1vMm0/XkRVx4\nQmZdK+z29NVWhinKzGF1ioobTsLUiRXLeHwjO20TrnciqvPIUo16u6B6OpuF\nxMoSj6Gs0t2ndEnzAOaqBARHEkYbs0zPoTHwdXswJcljtb0E9l6eQED4qj6A\no39MhQGcR0h+sL5EhEGu0z5Rp6sxNZBRHg0bbHhPOqXAKC1Wp+mUMLtNAA0s\n8FzWmlTbElDSRuOX15tzXo/xM3kna+kRDlM1TMOjvGxEQz7TS/2yypZAWYmt\nUpm/sgZIq8xEoQbUdHtf0cN9hjWKiET1wIFjq4bQEhqdZzYCk5nUamFv0iGn\nFv7CckUKig4Uwe2GSxsB2JwpYUkYlQVtYFgtyrPXhewjMxbe3WWuLG2ShwIn\n9lK/AePMbDg/5A5Q0hlg/72oo8BZnPguNW73qR39lGnls06G5gvJwkmdvqOx\nuZCxjyYFyQ5B1H0/levfbR/fRH6VrlZH89zQ2jOgVwXS81NEuMAG+fVIci/P\nwbmBrk7FAyCocpjESGFbVGMtmJjqzEDmS8UzrYdpbx07KiSRGIHZQ8su1sn+\n1td1w8HnhSp5M5NIsLDIkm998JO5Onj5amt0TX1mVbSA0H0iZJIVGFaibc6K\n66St\r\n=GF6J\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2553e86fe.0_1588613460726_0.05109752577539983","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/typography","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.03dec929e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eae3414e1755f22c853f241aaefbbfb8427e738c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.03dec929e.0.tgz","fileCount":20,"integrity":"sha512-B0OFiPBwNHfNjqeRcTLLHJi6CmiI/mgi4Xzo16n+mQl7Ut4n3WuxBJOCYnyt4+Czx7IO4vAK0w+zIhjpFx2VkQ==","signatures":[{"sig":"MEYCIQCPzktByKQ8KisbW61/m3Etew7dqnYAM384+18/pKw77gIhAJ4ArSSsFo73pS4RQdvmVVj3ZtUpf2KT6WCeuequQWsA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZeCRA9TVsSAnZWagAAJBcQAJbNWTcnsbyE17rRcXzk\nckycpr7v6O8JUcCl8VO0CI10L2Kh+n9DNvMxiF8iwSH1n2SGd9I4d5G7RWva\nv2o7xjUI4tAZ5H6ViA9tUVNroDJE49HO0sPwfrYPGRSXBG0VcIa0LGo4Y7V1\nMOPaY2GCgKq1vYyGepgykRskKb1BFYraBrFHhxM+hIo2lTUAHQBTnSuqZ/3f\nTHRJXdUiyXfB3J41tkbSqkQeVIjFaRr3k4nLuFfUureyKgZ0yIcp7g+pd46J\nRgdVtaKzd1Rn4desLgJaF0PkZDzmL4UI0zjs6QpmkZo+EnyNxzcR+VrnQDmo\nMAuvJCUgaxrmhDfGv2QvzWrAq/yUNgVuimOgKlwbVsc60B/lmIrn6c7Rq9hi\nwvScgh4J2ptUhk59yP/bpvp+CfAVutQUw1sJe79gIKRToHftDcAwdA2W7lP9\njKy/AkaCNHC7FgLypBiV0sczPAD5YjDCKo6zrP5IFBjEXPskoqScWQg5Is+O\nBBRLxIN9OkGVX1e3y+2C8Tojllnww6JEfvVMTxNjGeC6tOZQIBYlfvSOhki8\nPEeCO1esXjVvFl8a1TZQHemr/6rhLVDNItaMDIj7/iG29mYU5XbV/sxc1y5d\nL9fHNbrYrDJAki9IXpoy8z1Pe5ETj8Oj8a6OkfTCJ/9SbvjUeZFKHNvjXK1V\nXBLo\r\n=PHzr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.03dec929e.0_1588635230306_0.0030578194198083164","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/typography","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5523b743ed8a86156627264f2546f32c000538bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d92d8c93e.0.tgz","fileCount":20,"integrity":"sha512-R7oAH4hi8EASn3Vetl+ZYIZkYQ6Cq2zVEE5zb1Iy6ELtwEL63lcb2oXEkvnTTYrS/XkQA7o4bs/HUAM+ojWECA==","signatures":[{"sig":"MEYCIQD9inIXq4AvvXS/vPWZjmJm8Q0gX+4KP2LiBhDDcjLEfAIhALZjFq8BWF3HaMhLfZ2Dpl9jlarkkoaPS9UxQtgM9HP7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtTCRA9TVsSAnZWagAAJa4P/1w+4WCHxVF/2rrfn/U+\ndBvpeUR5aZiMrCXjysvgdSfoDcKCmWpkRValmNTp4al00E2r8CYGUk23SZdH\nsPYT1WRwJCRI7DQY4NrvcDH6wK+zEOomnSAslksTs5jGmicejSODn8Sb1Pi8\nAKQRaLZkMp/QuBtYAd7JpQCmzyPJ5UAfAwuYtKyryoQ133CDC7TqwECzHazc\nN5U0C2PyNXvjv8DXDRGJ/CR8vJflifWhPGIL7OFDsGhkMb7Wrx+1Kj1nCFd/\nWenXXl8sGNFKMXRu5Ok26bcoJWOSP2YLte2/8jhHOBTJovgiISRHP94rPxDC\nZKkzWGBXKgZEO9v1yHHOcj4IgWOQdlktBFYCjqYNuEDAhe7GHULxiZFB8GJL\nWnZ8iArbSTDVbzXb5UJ+5E6BAvTN1460f1WNiNB8yhmnFFBAZyUJKg+t0DX6\ndnffTlusOTBRYlhUKE9SdpFlKCiGyRRm+5fnZE9XjHu72QHfhvTEkQ+8H72V\nm/IlAkj97yHRXImPYMXksklWHn+LixiCTmK1QaeeDkCDonn7tqhOsh0jX0m5\n4f+XZUwTwUBUQ4qT6aXAc9UlRCBX1B/1VEYHgv5KVA1CylqnVfbfSmW3Cqmr\nuUIJ39q5dIhm8nP8iHTYnfoKF6DltKQKuy0+EQVVkndoR2DlBHXqbZQxFQ9N\n5Dp4\r\n=pkse\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d92d8c93e.0_1588697939302_0.2946179809418259","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/typography","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.09f591967.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c73d4a5e4052f259e977b29bf6e9112d19cbb4aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.09f591967.0.tgz","fileCount":20,"integrity":"sha512-nZl1bn2jCjclq1sTHe2vOYpe+n5TfEohifZcrKvsypXj2iHVhGsx2S4lCbBIy5nU28RiHMbAOEwv28eb8+0pcg==","signatures":[{"sig":"MEQCIGH0hi5xzFz+MPFF4ZFCl7a1HmjTH6ieYcOyOy9X2ibEAiAxrX0iBcI+/C87H6p40d48u4YR0Rb14imuI5Ix6TVzdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTUCRA9TVsSAnZWagAANzEP/0jVURLt4Bkb4fJOswSH\nCN87QB1g2djFgtwiLG50EuR9ucKNrA3fY0ygrE2ABjNMOJmP6DZVagRS8ouG\nohCih8nxEGIas81kbfeh+NwtLszAxPihqD49ylc+XuL+ZqNQKou9fh+kAnOb\n648GIPssvkpZ7bd/sdjxcyC85gS9dn7WnwPdZbxnunD4hav596k2kyPnxO1f\nOC9AuYKIj22xMZZO7AyzWqYzqF0OjbB5nFHl2gL+uqhpI2kcxZfmrJgDZkew\n6RYzAuiif4GzLxzvWTfbQmHSjJJJYzezmKQp/BCR3CJQEruWuzkVS7lQCr+S\nmaC8Oefl0sa9PvIjdGwb+M7rja44FWh4F8bkdC1GURwkhGir9OGHfLRa9/Kz\ne1Ib+p0sAanO6BbgBDRHU55FXeBCHeeel7uOyGXr7sEbhymka7xLu/1J5VNW\n3JubxtHvNYvPQ1T14if3+7DFlgTIKjwQoCLWOerfZLLCj2Yh+Qjelr2zSXBr\ni0KPS8DO9l1Rmdk+H1RvLDJ+aps1PYpvtL+0OQnbK98WaN+VtAFESwNMXl9O\nuPhOqh/J3Xv8pmtV73aVHxgJ0nQdCgWtLO5z+10MLZssCJjsEwMD7UspFG0L\n85BBafu5hkAxzJJTduV3itqqdgdxgYqocG9XSQvrx7CtFINVTbP66KQTwiDw\n8STI\r\n=rsCq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.09f591967.0_1588712659674_0.6607592015418848","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/typography","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.3846ce311.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d22ce319d7ecc226cab121ae63a37ea080690d6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.3846ce311.0.tgz","fileCount":20,"integrity":"sha512-/jfrC319Io04dnIZbq/cikimYKOpTqlYVpe/PSc3F738TpZLX6aL1kn1vXcRegoMY/cicKSjDWangdsn61y0aw==","signatures":[{"sig":"MEYCIQCJf1LhkLgYwg2WBVT2EJ+LY6j7iXsQjR9SeHt1IxuvdQIhAPk/iSIJfK4UVn1RgHdHiwkwf4w4aAUHXjHPkRKpXSXJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUUCRA9TVsSAnZWagAAa0IP/A8n8kWTPTmlcRUT5d/r\nIMqB2aEcGbjokYPMJlff3Z6F+Oauwd6Qx/NFAVANlTPEATy2K6bOCJ6mHOFh\nxrmYmVxPz/1Xz8gSiih0zMmkIWNdwMdB6ZJ39Gy5r6az6Md+VWvr/6UNVGC0\nR9rDBtmMqUw/L0MY8v1IiHa85nNtcwOPk4o/0i59N251bPxUQfJ3nV3ws5l3\n5z+ZOKHmf5iXsVeze1Q3WNs98YANAan2H8vpwv6b2jJFfhMuwYF2n5edcx3R\nPwv2evtfpiaG6vxqdVG6lV5kv5bvhGXizrSvXZErl8Ik0BkPSO8H7JvtrLtT\n/I57rTAg6riQJDIgVqLybQc9qGchcq65YxJ4vN8ZPPsAxX+CKckKi5MBnFg3\nrwhaZa3smxyZq9e0zsbLvKMB6d1O97OuWkTBXvx/ouwYl7BhDsDrf3KpyFrG\n0OZnjy3IPrePOFQ/7OtLy0cP2wKcnOnLpvjz5TEQ7l0Gt8NOVXxeJl2qtbEp\nm3nW4mIm5A/23MSr826HD57S2Or6WXU/nOWbbIvKJvXd09HRmkSAKO7mI5MO\n/37aThfhZSigarQn8SLhBIA5a/JEv7jSeRm6EodBvoiBJWk6guTIcDkOSetW\nkIckKbl+WTjdxPu7k8+9WAlMqxUqHCXuK/kmVgz0b5D6ib9OX9cCdvcTg8Vg\nE+3t\r\n=Tt2a\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.3846ce311.0_1588774163906_0.29290772032370094","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/typography","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68f84bd99c5fde6c1c9cc35dcc95be6ea1dfa3e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ed7f32463.0.tgz","fileCount":20,"integrity":"sha512-7rUOr08VLC+6sE8uce6UrpFY4ZSmt8mRK3oUXxo46VIo+prQWvTf90UTAbplXsFzrnJq+dTJ9s01HDHYZVpm6g==","signatures":[{"sig":"MEQCIHdLzUS88jIqjg+mSeuLIxhAnEVqqoqDjPQyYhhVRuW/AiAxWb4DgvT0x3vaTdGI3rtoThHcLVUt/Sg8cwqYe6q+Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDUCRA9TVsSAnZWagAApZEP/R0M4IpOcF4G+4sbTDZJ\n8O93mjM9pYT8VwT1N2Xyra6p5mfD5MRa0bVPw2m9PUeHkpvrgELS9BoPt08Z\nvvjNKWUGiw24H6ylBWlBk7JJewo+QZVxS/SNW8t7gj5Eu4lsAfrBYMp2+355\ns1PYlMGRXl1Qlb+vCihNGxrxtMwZj5bow1Nb9E1oGePoCfKIOW/+pz62F8n3\n4CA+j6eWM8rOCmX8EUif10QBupPMvxqpM+qpRVA4o2OUBZ5zGgdRD/KS0Q3H\n1du/nLYwJDZlwnHWJuPf7KVThErf0FGGGZ4ZJfiRCqJrf2P5m0/b924NsTFx\nNtbhdTUORxzsib94iUQfutd+BV7x/a1rEYDDpyyf4rR9l4Z2+Y0aYCUMjI/j\n86aB1HhshsixVCfxDL88BLuNMnEgDXK/8X7vcGT6lkAAhKHRN3S21ThaPFrW\nVQfCnPV0DHmtzWXrVPRl77G86AIi+qOWTt+YXoi/3PcMlVXJs27KJf9RJlYe\nrfKeh7jQ+sl85ftOj9a8mpAQ95nmwBnP821GUCgBkonjzNSd4zwtd4W43iCd\nc1gicffIe3KwlZx8D28slg9bzMJurdGX+aDEkLE9jicv9qpuHLimqd/WM0Yg\nJ05ZwrWciYBdg0ovmlPfm43jUMNB+e0KrU2RWBwdVqJXr3dWezTWqGURslCB\neFHK\r\n=b5NP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ed7f32463.0_1588781267780_0.40071673702225485","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/typography","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8135cc085.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5eb9c6dc5b3f84ae814acc4968e56f39d6e2ce3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8135cc085.0.tgz","fileCount":20,"integrity":"sha512-hgYHdeRwkIYdH12jVtU76hC7lb58DtURRISpIh/8fFYWszaFn5+oXbDC755yxz18xMXbOUorXNXGd6Zm2Mm8ZA==","signatures":[{"sig":"MEQCIDZFTmpFtUUGwtOfAbEhYLa60xakM3RLOuqLscxfQzm0AiAfVEdZWQ9xF9knW/Ka79swNVYzYzc316ZH3CMgC/Bxdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYYCRA9TVsSAnZWagAAsj8QAJuTM5v+nQaPDO98S34P\n59GzOXxsZlb4kH0SM2eS1xWSDOHsicvqC3DH4L2rhW9RS50KSKSnWMCc/JcZ\n8MT6mlbMtxx2AiTn1txKLKrxLFZUxc2Q6H9i43u4Dwh/oxGxTGnRBD3gCQS0\nb0xGTKo838kGNsn86nEjn+JA9TEUEdxTLDj6eV4LshL3lk9ZFnf6XRnOe8ax\nu8Jvc92ssDGmj6SjqfYa4XQvQXHnrIxWoD9jY2EnyKT8w0aiUUYID3oP5Lpo\nUoP/CpMdRql6yox4smZTOKj+8jKf1W7jGeJh6CiFKlOmIjYj0wRE368Sc0wB\nI11wafUxHWctEHlI2KEahfLV1G5upiSuw8mZyV28O32H2PtXedyRP4+JpAvi\nm7HsK+1NIxG/jykreceBTmSALwb2VDd+GccD5Zq+/ifBYfkd9CQK8q3PEueR\njlHWTRe3QYFo8fZpAhWO+UPdWnUeBaYDtjbbHot44/QtFttjnzJLFMZalnQR\n10XK/fEHcVZ3cstzGBrwz7r/jcCNRoectW8A5A/XaB7WxgKT7l3QeIb+c/lu\n2AjNlBWQx/CAok2qeljVTb5zfRCM9ICC2NutjyrJX7ahcWulpoxm2VgjNpaH\n30607autuUqmOKHE+o0EZjpQB6Btfxu8bwm+vWbmhI1nJi2493BQhe26vqn0\nsajs\r\n=Lp/G\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8135cc085.0_1588794903474_0.28241073839792685","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/typography","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.deb212de4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9ac9f1e739adaf933c8852876f77b5ad9148eff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.deb212de4.0.tgz","fileCount":20,"integrity":"sha512-ll6BY34rVFRXw/WvVCU9t+yLc08iTTQ63rFmu61LPv7yrBn2eSU31y5+RW+m0Tz60KRCQtp1KgACQZzzFRbBzQ==","signatures":[{"sig":"MEYCIQCVoP+mgQMOHFjT4Eu26VFahjnaxMxFRrW+pC4p6Ek1EAIhAOwem+vPr5QSPlpUv/7feHU345ce1tCxa+cZEd0veJxx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesze/CRA9TVsSAnZWagAAiNcP/3rHguovjAEIb5hxGCrR\nCqTUEeIdAiB+asvlgbQw8MK4NpII1bcsjApprvADZKhMArn52JCuk5HY160A\n7TRRl6oqqtXNxQwAdDE0xQNJoim8MbpLj6+q36dmpacuWRb9rKTAmURFRTJp\n3RB9mGtqQ0rrMEZ3ZDl0abYomYZcRQYc2xU23CsETjJEE7KOz7UiZ5k7IcgJ\nq4p5T+uG8sAahieevpWQmWFsNUqfzlS2aX3NNekWiJukNhubmWGT9CQZHaZV\nS1YmJoX/ous/b9sDR8ToaXJD2vMpy0p3UqD66+HfNuNFDLFZaLQs6JuHFsMp\nSuziXoc4KM4U4pqTaSkiA1D75poOFsGb6FjfQEXVzrxV+WfapA9YYdvIY2fg\ncxXdNUUfWXOTHTFXkg6f76O28q02Wv6RkJTvKE30Xm9TBHp0ULd+jg0Hfa1d\nhBl15q46liKJQJajnf+mfumDc0PNQOza0Y8slyK16cSY7TRMglS81k3SAWtQ\n/4qxWI25O5uzSRN++2FZg6RTALXqHRc7jMzEtt8kF0W4eUNPiQI7uJ0ND727\nAeWntwFqlsRmLsmL1nsF45Tm2SpMgAQleh+6IPMASgPDUyFe9s9+aGxECmfa\n/f6Bo8ghxxo6SB4K9veLxHTChY1pag1865w+79+jldzYv3LsVm/8LGXo5Kep\njW4B\r\n=dH5g\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.deb212de4.0_1588803518181_0.8118181749326936","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/typography","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.f83e00898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2ff705bc13189c796ef14052aefe5baf23d800d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.f83e00898.0.tgz","fileCount":20,"integrity":"sha512-ODJESkFdJEiAvqBt8L4lyB4hJmLlCotHM+pWQ5R76RKgxXBx5NA85j4G2wFgwsWjOEM/PpnBp8SWAnh7EmYj5Q==","signatures":[{"sig":"MEYCIQCw9ceZQC6mPPxhzQhl396f8I9C5KBDLFtnEb94+S+JnQIhAMBu1EknUiYQjESdQJ1DChILp4nqEzzJ595OLUpmN6AJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwTCRA9TVsSAnZWagAAJdkP/0XnGV0FO/kYlbHk3Wjm\nsv8uqfN2YuC58PSqjJwqZczfNKvVYuS9XXPN8foNL06XdFmRMS8OZF+HhUpJ\nhAyg9y3zH37rVedZtV2sDPage9XvAVE5O3+k9ZiNWnbabffl38lXmGupA/aT\nquqoEya3Xz5nGc58uX/dusEtq/Ar1Q0OvbzoaMf2vnl1AZp0mMAkkxDHK59m\np1RVC0yZO/eFzLrUFrFSY2K3Nc3TR+EtKM0sRgh/OqYcfLOxsvsUejXl3wrk\nGIOcBcB0mJ2xPFzfBwAEgZ69OXIThySKR+hv/s2tBUpraikPt2ken3u5LB+r\nGm1CfK1tKRakzWKdhLW7R4ERdLw+Qk7d4595kD5C2e0lIjH2CFMRvSAyZd0q\nuClHUyECWjvbX2kT/bK5NlESbwhkVG0ZGkbCj4FeS1Q1SVMtq9+aM+3ZEMHk\nca8MGUYDxsod9Kb4j4bW3CspawGaIC0IriYCqF0W2ed5Mi04JNx33BVnRzpv\niqNjR7R1ZvIOIeiOKR/NjLEV9OoXAPSUccorTWiwJXx7cc6o3Aa/c2dFRPGy\nUBSBNEVfdgIUCUD4psb6t6DKbys2eZb63ueQ5f298+TIAcOEV7Ln7PrxFGRi\nIPMu4WWeyNPsmZMRj+VCrxWLrvQH37uD2mwGRZ51uk+odIpAXNvEwz/P7VfB\nkUUO\r\n=gwDU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.f83e00898.0_1588870163272_0.0839833990587977","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/typography","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.047e6b337.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77d74a5af718a5e7a2251d8456e68873999629be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.047e6b337.0.tgz","fileCount":20,"integrity":"sha512-mx6e8W5Va2+m0Ej702EIUmK5eXfRPxXOJKA2hw/mSbPjg56LbrAGGDz48VhM6irmOElxriT4Tj9EhDNaX7QLeg==","signatures":[{"sig":"MEUCIQDQfZ1x5NVbulYO3TF8akm1fZojVeSzSs586s89pgVtVAIgXIenPfO5+qRkXtl7QG4CS3gULP6gTHJCIDY6vzisxGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacaCRA9TVsSAnZWagAAcJ8P/idRzn8gi+rR5W/BM4tF\nAECzzM8NYGG7HndnA7qREXElVyIPvSNP8Q7yRyzQyyTi/DaZzloa1IgeXE9I\nRHiSuUXKZ04w6aFvLrVEYZIEoGkm3Pmp0Y/5ApbVyxi5GzwdhnrNFEBvLR92\ni6wrRcCU81JSbQ9k5A0f40CvGx4bu/WsgZuXj8mLzenBzLypTD5IB5ULGRTX\nr708+9lnz1b0v3ebAFsMmhGDsDeEMCIVL90Y+oxGfGjezi55m7O7iotiXnQf\nZCxQ7AsVSX6zmgXYCy18RUMjmhFYb7VcPPgrNT+1FmIs7j8Jpx5bQ9xuJsKz\nYxp+xUQAV52T2LS3kLpwDy3d3dboKeZolWAIyo8bI6SINr6bzjnKts8YL/Gp\n05s3kJnaw+X+Fic4RId3oqtXKT3dgYk1+Kg6gD+hVzFQ89CTzeqapjuFjoze\npllB2pS1YRSEn075qTI/hDI2PbNGEcpjkM3qc6STHHdD6jsVGMcPL4BAcqGp\n8gCTaTGrNy9/H7pN5WJmOw73n0inMtR0eqPaMEDQweONl7PtNU+7AB5090Zj\n7R+ljh9a03SognZugpufeiChbIeWtjxH1Schii42o5zWrjXvc2gIKzRct8xd\n040Ewy8J9cGE6RKhkbPPNN5Xas8Al607tG3unpZWi9yZXVnKNe/5S5MMBzb9\n6rgV\r\n=mA+L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.047e6b337.0_1588963097988_0.9296705397193854","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/typography","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.119e21426.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70762341116942bfb6a65e5ab0d5a6c28beb912a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.119e21426.0.tgz","fileCount":20,"integrity":"sha512-FCjOtQnc3rruHm8WTdpsE3XbRph7DPhBjXGA3Z9hD8Ghi+MGegG2Zau18ySOisxyPfx6gvmx9HnAINee/aSXAA==","signatures":[{"sig":"MEUCIC8o6XNnSjOiZQuNyeQ4oIFyFXDEc4P9VYglw2eX/DMJAiEAlcW8h9h+EcJSktQm0DeI62L6p74KlWMDKaZkvq4gnB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb9+CRA9TVsSAnZWagAAElgP/1TUke3DTNrTgOihB3C1\nCU8Duo4/3jOQeqKicSh9bHKmzDodJTLpqWVbiw8gxxww+TXqVgrw9ZimqajF\nUwNEjbdHCxNBG1g950s1E2MjNu7sttmEN8o8sP3DbIN9zuybKtS9D7Jd5ZVS\nTbcd15pqtHz4iekWOQjvF9OkA+aiC1x5wmvE5MR2RJ3TUnH8Wt9RP8czFOJn\n4UW9jOKqC/MHzFXMjehP6lY0AExRQiKcI8EsSP7xw3mQTLYe1bZVV2JA5d6d\nAI2dGoMWGp7askiZG+vgOMFa6g6N07im9LOygcBRR5gZaAsTp8CrlekVrn07\nF1Wm72y5Otm/R43gps313NXLZs9iBAUPLNoTm++W65rxqm+TFjFMvj6AvxEm\n2foZzPD3NcM28yntTZZkmU3x2XmQTmp8YUmWNYe180NkhNM5n1+PSprdnREc\n1FMn7/5aigFVbHCgvq2Wc0jOVDErPFs1KgukAZYWp6sl2wvbLFyft2EkdEPW\nw4aso+1p65tmG71mTYIy5cNR8/lr6gvMZZfaofNoaSXECiGeQuwPyoLmKyu4\naujbJlykme9NtIRwMkReFJ8cXmTc8OnXFd+8nvCPcDiou5+dAU/VK6E+E4jy\nFZuPro4sPUkH6nm3KAtsYpxg9AX/j7dQ68ho+PrZnpG6Pgy43yHcGu/oiU14\n+fSw\r\n=VC97\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.119e21426.0_1588969341641_0.7136609891071053","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/typography","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2f052d824.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7d63626f25c9e2110cc0b15453d534765a018cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2f052d824.0.tgz","fileCount":20,"integrity":"sha512-Oc6kKVOZCNnfK3wh4vZ9SDlhXykA3Z5RV9k1mvoGNhfEVkQGeC/1z4EU36X162nmKk4zCixWxqnkrl+8OLgkWA==","signatures":[{"sig":"MEUCIBebcDNPMq0I9Z2XD0blY96eRC3Fs+j3i1iTfu2MVwVtAiEA1qeIMGtVCh7e3+jatm47ZlkNCz/Ls02cMRuf/gBwTD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcoDCRA9TVsSAnZWagAAVGMP/1Qpqh16SXIrjEatO+np\nI6z2cOIPwKlQRIYeZAXA7LNy+pjgOK4rU3GwjLfMNUHRCt0pdbluIEbagnrE\nVAnNfyA7hDjD82ytDBwPKIGxJwVXNL1uxYDWToOBJXtv3MyVMEHoIray9dtw\nTroX+D0wb5iTP7gf7t2n4LjWsjx9r1263gY7TXwFUmW8uXG8lhrBxLhWWfPx\nrnasFcsRWsc9jLMlC6L5SGhO/sLZ/XhSXVYvAtC7RMlCTTJxzNus/WqsX+xR\nqT0SY18596JUeFtlFbdcwb5iR4+NY3OctGz/h9BAqv+cVPTGDlVllyQjH+cY\nfOFjLL4N1sbsbJZINGXXAE2lc3FQqX9TCBZS4y/SKmTUr8XZAvC/HbAEGwDG\nHe6E6rtaHyAZ/dZ+rDHzS2+v8MarkrWS5/kivmgwlDCzYZwY1JDmyLTNGD7G\nlFLtFZXFJWgwdGpJQd3Q50p9X1EGFZMP6rWJaBnf6QkTor2tT8hsVlXsIZdv\n+L6uNH2kgterkBXTYU/TvcyrRZOMDFBr397CoW6zS6B3QDCKwNxXdJFjqRKv\nyW1KxpLMw8D/rjkGk7GCgKYj/sIvOJ2QmI4TQ3rcfUwWOtwknqxvnEbFVgyI\nq4ZO2l3s+nIu/xMzIXMnAU3adZTa/cA8SLL/L04h/wJ6Zsq7VURoy5sY0uZd\nV/pQ\r\n=LB0H\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2f052d824.0_1588972034220_0.4764567721872457","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/typography","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.e84444387.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"215ec54c84383f6aeda96a9b02ec58d901f7e49a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.e84444387.0.tgz","fileCount":20,"integrity":"sha512-jAzIK7yAhOV+i8H1UuPUxxCwECzcejU+eqbkYylD20J4Ux5CGnQH96pGjQyGkoMBiS636WYPUqBmaGvk2KJqcg==","signatures":[{"sig":"MEUCIFteHoB5bg2Ibw8bgHJbOFJR7wVKUvfwbdVc+I9flEa9AiEA7DcAj6+zYaaog0cTMrjOsBTPPJH+RfIqel1mKptWfoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+yCRA9TVsSAnZWagAAIcYP/iT3zepa8LMaCfLKkXbZ\nY+xJCBY6WvgEKIyB5n0EEGlhO0TNYhMpWeJaeH0ozmS4JWofrozMwBGHBNx7\nHU3Ae1sn9BvA+KjFPwisDTRiTApP23KWO9qHgJAqV2Bam7x2q+nfhb5LDgJm\nLebjryPIamy5b4QSMGtoEUyMPwVnl4Vu0iRPzNhAVbrLqyZVPZQM5JM+QaHj\nj4lfNmYhmXoFr3w0aDYrRR1l9nSDJVEsF9Gz5Iv3KTj7cgiuqoQJgHcfkvGb\nmdbxRk40BOdUHz+IAQxaK3MYLOZIbqjwLI+1bQzrRsFwjx3gDikkETD4YLmY\nM4S/H8oBzc6EBO72HyU/X9+e8CvZ8v0XVFbR0WAtf3Wwi9gvUslhe/B7SKHu\nNR6UBNmt+nDjUo7ZecTPpf8agzsnMWU8zKFcAvom0jXkbu+b25vss+viHIaC\n4ABJ37oxDthIUfiznvzgp0NWZt4g1tnsHL38hyDWc2pSmj3OYVK7dR8jsYAr\nUAkRfA0098kIY4x2SBdqywbDhxiWFr3yAugwEyhxAQyq7yaXXt4p+RB3C3W2\nGqlqKJmROat5IETTEDDLRZdQwoIhrHk5Ps7MBwaYM7Uln9fvUbP+JBmxBtp7\n1znKPDLf5RcuNVDezX7xQxgT4+GkqT1T2xQadUeIvR0lFt/YaacitUHlmbbD\nav7M\r\n=ZY4B\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.e84444387.0_1588973490045_0.4013894475266906","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/typography","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.893eb1876.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b491f65376aa7b53394142607cb2b234e751cfe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.893eb1876.0.tgz","fileCount":20,"integrity":"sha512-dOxbJGiHvE3NarrsEAhMSuoaO5kJ55vybTw4EDX34h2lXbq3ZlMDCxcDOcnoPvfqCauEO6ac8oZXV5xe3XkRKA==","signatures":[{"sig":"MEYCIQDLbX56OWdfg2j9QlenrWHyCZpv064W5KIAPK1ZonFVaQIhAPrrUCVzff6SUC56d9o1hWCZjxJr/HFF/XIPnJ9EygIA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1vCRA9TVsSAnZWagAAmlQP/jTXO1GxSIqVH7erUmXo\nWC3b981A3Bxm5T4GtZtRX4Z28ofQu+NOMz+mx2Rzdqg/1+7JsOl9Fo8YaYaz\naegch6OsxtnDfCg/rkHugpTObCHS8cG3qt1FpOsA7CQcNBFoKfpnmrUjffSs\nFEpcxTfHmUC8LuMcH2T71P4DFwp335zOO+ccBg6WrB37ZUEBbAEqlYDF9kJK\nylWsqZFYyYpdQN4npJhgd6wruB7P5KlZ+NbMoezrOfMwfpsMS8OuN5P2Fl+W\nMd/R9EX7SabxQlniZ6Toa5YAUXy6XTVUOjOuWfETQRNhNe0dHhPpmXWopObv\nX4zqrhYbsdmtMQFDGOW1PqfnbRFi0omtYPx4AE10w5e9nN12IntWU0dfjdQl\ng8hfCCRXKx/+pDYO9iUWl+XwFdzE8V2GH9xLpoO3SvwPgjAiYDagPIx5Ousn\nD5Yys/Hz544scqhOs5hb1K2XDGd+ckpQuHlHR+4Wt4twRphZWxAssw2XmwrK\nV415i4RAuWjMd+G6B2IBHRhIjECFPq6LZUqMdZP2DRnnyM2sR/t1XWwG8ILZ\nYnVRSjfZdh1HEdEZfkgN8f15vLvr9oGCl+4kmrLivAYz/ATOBLGP9pZ3smaY\nUzKjDRlJ11CBVPZ5+9S/h/KL1j+ImoO3HJXLY3jdxdIHxQ+KiuelCoyp8c/A\nILgt\r\n=wo/q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.893eb1876.0_1589206382546_0.5518063760285452","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/typography","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5face844c78680b9e428abf1d7232382b50c05d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.a5aeb3001.0.tgz","fileCount":20,"integrity":"sha512-GDZ0vYAUIOInJ6/1jx6r7YMgcoC47nSa0SqRbdB6vmTRHhKCjs3pM4QoCkkmjhQBoqk2VXgzCsqQnuVsl6qiow==","signatures":[{"sig":"MEUCIAufZh1/WIWV+p0CZRizyOYcOMPjLHR5sNpiOr6ak/Q5AiEA8bDMnxbfNPA6Ix7FOKBUV/npK6ROwsGt55qqyC+oh6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWEkCRA9TVsSAnZWagAAsGQP/1LegbfgqMRIsFn5+5ck\nVHPGiwgpKERoK6Bktg9Kq39ZWLl4jpaWrhldOY+zh2IxNjThE2GW3GcFhpYg\nkUBsYtI41Z/hZAJ+wShhmf0SqMbNwFgRVb4wEuMljK38dFnBdgRj8r8V2UbY\nci9N/ToRocf6gpGZYpxkFpcmdBcCkdCYfAH6Rgw68c67jnbY2TY9+zIl7A5l\ndh4stcUrXohOo/v3OMisVGE3yCdg1RAHUn8py7V7iiH+ORqm0CaAFfedtZVo\n1R5VGRxQ68XO23rI80K7yUOBDyl2+91uToUdGPI+2pBrJ6+lnS7pEwjdMq4s\nEif4M71TQGMqcni92e6gkpRarIPRmoFOM+tcVW3n2taRZFSgOdR1qT1sjJ0A\ncfyRDt8iO1618NZEf5B+1sgkVY/Yt2ojl0VCCRMdAmubDZYP3vBmEU+xDpvE\nl3pc12/oKpTHcFPE2AVKB4UozjdhzHzZrcOrgWdCBVBfOlIwZhnFnXwpqgoV\n40kpcy03PTDNjYS3WWmRvd8bwzGASGwJbDqmq+tPwECiFyPwjkyQgmeU0pai\nk1YKCyJfl1Jk6pp0gFyyIVUtvg4PG75Bo0rLtdJLTREWwcJdIGR14f+2Ri7Y\nb1g+5NgqF7VYQ1KZKeg3YTOR5GXFViaG60Lpgg+YutFk6arYMB/UxYhoXwfC\nqduh\r\n=I1Mt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.a5aeb3001.0_1589207332033_0.4770558086512906","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/typography","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.610c68d97.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1275e1b1068753dd262fffd75fd8b0acde40c74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.610c68d97.0.tgz","fileCount":20,"integrity":"sha512-dD2+s755u9qI7MGd+TZCva2Rra16Togb3Bo5ie9gtEnVv0jzYXkklDBcabBOiGLE/7E9zHQudfg/+t/aCmptEw==","signatures":[{"sig":"MEUCIQCJGb6oMDEfeHO9acic2yaTb1XskBuhD0+LFNdqM3LJdQIgf1vtSIViFOFNdSDoUmu1oQjjtrVxWSsRcVEi9Ia52hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahICRA9TVsSAnZWagAAGboP/A9rv6p7KWRY1v63Kafp\n39AcO5dt91NI551GZSi0JKdn+kHVs0fk9BQ/1TP1OE6AV40DqwBYodKCku7g\nw8bh+TLrWc2aLsUxktGlQuKcXiPgQyW68nXv1FLCMLbNM0B5Ik8KlAKWXHOL\nO+RAm/N+ry8Dwt+gHB/FAGJs242FSrWNoweXVAqL78vQar4R5YGeUSQ7aFAw\nbjppSP9SJgBeQ/BWQoq+SfpdgtPGSCEmS4LUiSchtBTGUSMnzN8ydwFqShBD\nb4ygLjwW89qlbItG3IFSNzE8nefYLD7dd/+uY0oMWKUz0PWN1bV8lcq1Vsaj\n5eTA+mGlDWFosnVMzWCp7Rnt7GNlm7qzrpPZsWb/YQATT2Ynuz2FiLoeSK+y\nbGJpKmwq7hcJJUMJ/FWFXPsTgJ4MvES29YKpE1SqR7/r+xJuxKwFxvEdZ9/c\nN3Ii/rUXhH67wh7TyFcW+02kifQwbeh5vxiHffwf1flkEqdfK13CSCeGXSvy\nhVREjwqP2sRdEIHXUHkpIU7a2UfCUMpW9IPltjMh0vZ83cvdaqCSb7RCV47B\nhhyS/4/6Jd3ZdmHV0cLdyfaMAmyJRcXsXykbN5lIV4lxBHtfKIFo33w6HD4F\n+J0xpzZYBsdiGk4PZWcURqqavcfuNp2qqAJf9LaynQ5qA34ew+PnWg5DiNop\nHQhg\r\n=6/nl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.610c68d97.0_1589225543980_0.9307709202084051","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/typography","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ed52af767.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1914a905cfcab8b11c3889580fa2364368fc2393","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ed52af767.0.tgz","fileCount":20,"integrity":"sha512-WWLIRyn0hHwvtUpD4TgZYRF+ELh9eov8UnUqQKGl412YUWjBJldyW4vYmyjc4+HxCfKScjrG2HWaAvw5URwzjA==","signatures":[{"sig":"MEYCIQCruWAvlbZVMrS4AxP4L33ajPZ53+NzwZeR5ZuFOB6TNwIhAN41ZG7p7/55kBvLtyujszzIn8oRI3AxqZBc7G1ipAPI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUcCRA9TVsSAnZWagAARGoP/02VfdqUKlflhYLatp+l\npHdDqDeHYmNgQWZC/G6lhBR0fwbifK6oPbUIuHRsMGDiY5CH+oDodkfcSCKk\ntvDZUPTuGJR+b2q2TC2SJ1uIwEVL4nwL/kFrHNZSUt+hfPHWf+qNj9F+54U9\nwBMTPFoj/xWsoPWKehpmbbqQbpgJ5pYpmKJ2tpSTxKZkcRz2om62tA0EBqH2\nUWQu4hgb+q7NrsqUW9oktW2X2pzem+IbJoFnmvu1EPGBkRwd+IEh69+7gYmt\nwpNGMHEa9WzDjlEhTar1SjXNkvf9OHEX/MLDx63fpjSj8GmIALA/9eD5cRvE\nteehrTCyxMIlf7TpBSPj6gKgeACwQ2erpNm/7yqiuyrL5xbDEHPOOc0bJS8D\nTbUDLEW3OTaZdLzMNoamwa6bc1AaUUbGjZhnce6WXvBR7bgellh8q766aIz4\n+oKdfMZ/SO1no4/jpln4qx0fu/E26X4cFYphCh+zZBo6CYdOBssWwoTNReAJ\nnF0NOa1xhTBrGh52rx06nq/oiRDA0rYKxz93CKA4BAneVK3dddfuk6ShRatF\n+irh1H7i34yCusk6R7Muw8iPAPSP5sV5Pyjsy/YWXGs0aSExAjP4hZBsdBEx\nuUfhXA3KarSKF3To0IFMtJvN6AOZQRAGBSQMNnn7YPh+V67XqkfKrMGb4a3q\nUb18\r\n=CSJ2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ed52af767.0_1589228827992_0.298097769139964","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/typography","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c273dbbff857963fd8f09fdbf503628ba9bbc0f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.058cfd23c.0.tgz","fileCount":20,"integrity":"sha512-CE16nNL4WaT+5EnF1+ZuvLBam7HIMdfXTj3ofRMLBFdJHorXQzP2gzCyJyBZyWX73RyKG0484MAhnFECRHzOJw==","signatures":[{"sig":"MEYCIQCSDNvWl0UekkBBWOqn6BO5FQlS/Q5VkXYXscp97s3K0wIhAPYJOVlx6kQ9a5eIx9auh579bINDRTbfa5NKWRalfF8P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKsCRA9TVsSAnZWagAAy68QAJRpvwcwN1sOdd4Y6Cwn\nui+CyU9GEcGs/nAoufVEQtTddcEXfsK+C48xrhbWdh7dwDW9MO+/N2VkAD2Q\nGkcUuiEdd/vX3msSSfuBJ+ultydSjsDY2f29sEL+/a6ObCjzf0bEU5xfm0ZK\nFktIFxawfJKb/rW9o2ZtnFXM24sJHaNIuEqVvwXU0QD7PAVPqj52K8vFSiE+\nKrD+v9VRP4+nBVk7gGbGvxTo296HVoQhIP9DvUjpFOm4QxMWxYgdBAc2bw1E\njDMG0DSJZHfVtUwDQU6WS4ZqFCr049CDvzhp6DxGV9s94H9MZLscZ/s8Hc4n\nggi4wS1FF8p8VqgQhL5c671BkgSpkHqLnJMCBXoDt2/5P07R+axqvIxuLgJk\nqpZpFYwbU2MPQMCGOISwJXqOJ58T+cErrdGVES0ibUdvbaArgoQ0xLOvLRDK\nMSVut9LVCIzH5Y8HCww/BWY5Lknul8N8B8oaKcntRGYU2TIl2hxpzU67bjeT\nWvmMklUXzuudjx8IGlsQ9FB/blK548wseosCMztHmeehz6gdlbrhkQ1QuVzS\nkHLzhKlwedAUKi1ffx6IErW9efog7alMjhjqfTGlQkg8cN9LNh7+1Np2Ke70\nes2RbtZTAjpCf9aQkvNM3eVuI8VfFC40nexKqiAG2vDudJtH7tkP6/5MZY8i\n/ngN\r\n=YMxQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.058cfd23c.0_1589232299989_0.6517399069633676","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/typography","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db9da9e6e09f8cf98a479a4d65e28668a5a30dac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.0a371b4fe.0.tgz","fileCount":20,"integrity":"sha512-EqtQH5VXPjmS3q1jTZuYOfNatFZQgYldQ8x8aARshk7N8cAX3NCFEZjq6kQDtxKfq5KN/qpHaNto2AUZMF0NVw==","signatures":[{"sig":"MEUCIQCfvhnG1viuRbw1yQNdP7kyC96EcH41P6+rVm1/vdWzbAIgCe84WnzXEo940pd1yXDXDg8UQN1JXmSFuL+mzinm9Ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6pCRA9TVsSAnZWagAAmykP/j+NvpvbqVEymFfRcU9K\njt+Wpfnm62ThoYymyvYxRURLLVUKD8GC7CgQq+K010tSkYk09hRQWQUqcnMx\n0LpyXw7DlRYoXTc9fOk5ssXIqc7RU5hoxpDtmhbhyU9LgCVLVQsxEsMeRNB5\nbtQ5Nt1Kzn9QYCzleyfDql4NIKmJt3+hSDPEQKB6eQMVg9zjKm3ptpq+s7MY\n3E1nHbIIlZgrw8tkzKoSUUXgHzN+ViU4zNMh+ooVgZ2TqMa36kKIRyfOEPx6\nLz+rnHlNBvaWa/kfKOG4fQUT2gGLBntCFLZ0EgRSpEx45HDurJ1ZhHDZ926u\ncTz9pNBiShprm4SKngjOYyhByeXG84bo1tRCtzoUyK9mvFodgNNHMV4MaqNL\n5s9GJ9Eyf5SbyumdbfG/RcEHq4fdlYNgvkacSJVqzV4VRnFzhcG6jXaSbULK\nJ91ZguDJkkqeri0bbQV+xjoAS5QIDPedb2XCim9juzDUZtkt2r7Q5xp9uvtC\nCBv08EHidjCfw0mgbwNKlHhvojlVah+8CV9KwqX5DAXpju5fqpdBNDh9TEWe\nryAG0yng4fHZQine8LH6dLBaNv0/bYyiDKySH8G8K5qamG8q+x3nzvkgh5UF\n7F91R7bUpgU6rFd7Zg/GmUSTbHNnHEvxBfe4U1ndU/1DSuRFLR/y8E9xN2V8\nbctT\r\n=n1LL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.0a371b4fe.0_1589325480683_0.775271515192111","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/typography","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2139200b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e173e4f207d64be3b473842a7643b3c7b42741ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2139200b3.0.tgz","fileCount":20,"integrity":"sha512-PYolc91w9h2UNW+xTGkx1aFgc1Ev7bobXxwDDVLhtulZBROph/BnNT9Z/ClfZnqAC7kTiu0FjiR7XWLlgXe4ug==","signatures":[{"sig":"MEYCIQD7RyZYRg4ZC15pFoNM+l9Yd2eco7A4zV337Zk8a//4sgIhAM5Qpb7YfQkuX5NSreKfchVF1AgZHya0YJWf0fyOum4D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhtCRA9TVsSAnZWagAAv6UQAIXPkNnziK8g3l252Ld6\nrFvK6Ubp9aQfV0IjgTfTDCZTscG/99t+EVprmKq9M7LGEEkHVdbls0WIJdPl\nmCv/8ZhQrfjLTVWvQVIUCom5j+qA4OyflFtIF6LQ/lMjKACyp7yqFdCV77W4\n/t1Ir/I3lsK0UjYkn1WcDd5rfbGGsze2Auj+AbO55qKkXRwKP18URc3N1DxF\nOxMMeezgP+dYu4SlxkXI+cZp4iuYq+moKAdqxS2SFjhuRirovjGQo6DJ0ALZ\noXY0xtNfSYmn/A0JTiIxE63thdNU8dw4gJKzetuD0Z0vfD9O/5zAszb5+Lp0\nYUm7NlpkzOf9P98kHcDV+4rTF9fawmYmi3cBasKviO325KL1PSReqEarwbQD\nzQptLo74bKsDdTfpHgyX+/G1qW0XgMKnHpx4SUN2xSyGSh1TIAW+2cruxSjB\nJuDNZF6c76EjmX0dzs8gn8moeAMZRID+qlS261hrwtkvwm1m7OKU/4gAY2r0\nSypZ+QKSHcue+4jaZt4AIRaz3YUOww0q0E8MyVAa924DeXLiR7OJjwW9v9z2\n4U61phe37k38pYN8S1h0IhxMitcQOtmQGRQcJTfohVEGwaR2CVghQQheK18y\nCNns5li4+5SssaKGe+7iAXyvfdQFEfOpssvncgZP6ro8U6aoONNh09DEbTcA\nCQUh\r\n=VxHZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2139200b3.0_1589381229030_0.19165490736800095","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/typography","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.744d751a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51b75bc56ce279e5c2a7c6802c690db37549f04c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.744d751a0.0.tgz","fileCount":20,"integrity":"sha512-DfXOjJIeNc2K/hdvfymOKKH/uYEV2pAiktChBOP2qkRxTDDQXJLfqCTFPhS9j9/Qkr5QmYYlf+AwtZTSe2CkRA==","signatures":[{"sig":"MEUCIHx2kkVrrGb95Kzpm24nXS30GCr5LKf5XblZ6XKPWYbbAiEA+69X2pKT8ZcninxwB6DzkpE/y2pbyisOxwedpnWFvsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxACRA9TVsSAnZWagAAlJkP/iA3BKRK4z5g1e8jni/y\nutWCFGbdRNYC4C8B+5mbpRk8PcG8LEQqiWzHA9PR5fxoAOsHY80k8bGV20oN\noHRDYRh1tRbBIY/BHNf7Ze2w6tP3+7Fa+Ty1sMIUzIWSg+6bypED+7Ktczlr\nw3AgMW1rrIAyaijl/fuOlTgodj7v0ld20QpmZmSMOWonsgB0fwGJPgGJeF/e\nFHhGycFiHqpAgqwiavpWPXWhyhKR8eYnnF+j7AaaxtPWlmrAuMskeFXYY0xZ\n6s9BShF0M9ohMyfMi2kDcO37ir6N2gr7h7GTWd2eyY2/2U9oLI84cLVaUtNv\nXv3V002PwNEBmwdCsmoDLqyKHRsr4YhH50H0shQpNd7Ch/JwpZISMVe0GUHl\nfhb2wgxsMkec0PDVPWVInrbzhrcVVDKalsWQiGkFJlBa2B5mBltP8+nqm8m9\ngr2nU2yjfDoZMjVjQI2PDKIVgi+CeNBwpMt1whZe7IfdOvVvLcFWEAY3NAgr\ntrfu/8x9gK22Ok59g8ncYDYyflDFFXu+kPGmLTrzeFVRj8epFiFLQ0j9UAIG\nMNCErsp96ktn4FDkYmyQzo7ULwRNjNQ2HwWONae0mXtEcGKYWGumMyQAVwMS\nbeLE8fyuNSUFkNJu6508aMXPh1g7PIW/2iA/ZbNzyy3Rrv3d8pyMqar48y6F\n34Ia\r\n=6ZPb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.744d751a0.0_1589431360443_0.971241702141223","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/typography","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"701fd49451a21df70a784c874dcdc8a9fc3410aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ad0c0c103.0.tgz","fileCount":20,"integrity":"sha512-d8oFGRtlN/62qyBsKcC/yp1f64uADq4Ikn08zLHsqHvZBmnPNhvQHmsJPmnxzXtvme/qXp0CwOAfaQQpWBgacQ==","signatures":[{"sig":"MEUCIDy2tzDjL+Z43M1CSQhaf2DT9pibUvKwwdEnT6M4NOTFAiEAr089BG4wgUP7YJa3+SSnM8vCg0dZcdhmreW/meVQ1KU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVrrCRA9TVsSAnZWagAA0J4QAJpo8aruSwQcIHbmjFrb\nQRY9CdTWIlAV5mf/6VMrACRzd8hu01xs7R1NiARiD8l+RUKhcBXyySliCm7w\nNELrdQg3/qZl+nKre/AjpSeBeA4RDA2AcW2LvDv6Yb3mWizsBw4KfANUYHAx\nx5G5cHuLrZo41bWZJG9RQHQetlVi2QZvKtJoDxPiIUN7SbAsT2h2oGISc07v\nxdGfG4q0OgNX7wKacq+yQUmzJilKRu4dQbnh/1Y18W+Lr5XIJNFO3/oga0hm\nqmRWt1KBRuSeLeaNbfPTW8d77nHHByqfgfUE1d9F60MgarKS9pBwtK3ar1gJ\nqsbGx1CRA6z3e9kERaD2AiXCofGIzmQP0i5WptvQaYblqBuH2bflHjBRqy/m\nqdDyiEy4rwKS8Avs3a4CYBtx4vzrgSTC++oPlKD76sCVCkWpNbHHFoWKNPs/\nw3oxqkU/SbRwfJAkX5kglkh5a8qBBaAIc5We1vu3S4X8Wr2zHf7nYpsCihBg\nMsDqnUYJKcaJfM54aQ52rp8M9GAtVoJdic6BGRiha6g/k0xhy+72zPI4cCGn\nVqoj+tGBvRYbwan7uEoNB7q54GfPjWlWjeWsstAhM6njj2+TMRZXlBpA+die\nsVd32Clp2V9vrRd1Rm8DmaF+5qUdOvjW+u2HtIbKh7tqp/m3qbBbEZZAt5fV\nF6v6\r\n=1Gv6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ad0c0c103.0_1589467883248_0.6728297962515657","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/typography","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b188e434b57b6211e05c0dcfc76bc57089885e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":20,"integrity":"sha512-itpcVevqb+Kv6ks0rIEe+GPGgL/aWvMe1dUSesR0OQTwUdxHjCGjydVFdE1E8WJ9tT/XlE/t+XKtq0tXhTLJCQ==","signatures":[{"sig":"MEYCIQD2mTFTSJB5ruyH8frJxZVyPGdfoUnpib4vkAAau+NzkAIhAJ2MtoFOQ4TewmhApzFOeCPTTTjtZpynnkI3kGceAfzl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsucCRA9TVsSAnZWagAA+UsP/iZIoS7VgGBs+29AwSbl\nZ6bM/bufpvjzKY8zHS4sF6zgPCYwFL6RA/U6jskaee3cC7OBNdLqb4ygdjye\nPVBMUIpaE8Kb8g/Gu3usf0tVJCbKbT0y/dZUfxmhz5C4b5LUzQcVciiQRxZD\nhSWf68eFrESxwfYV/Ffwe0gDxqFVynyQSgu1AZuFfLUFDkwy2yw75j994Zkx\ni4kan4a16c7q+gum8PCdlf5wMYsE91lpX9/MbuvqUHGaj9og45xipDpg3jsc\nJBRsmvC0xwwkO8gb1AnArMnuf+q4OzRfDsupW0pjoeC0il/IraO2d+m70pC2\ns3gyj6rhNx+UbaktRGEthp7Iah17GGM4UuMBWmouJI4dJKhq6B/ACvKP+zyY\neTOdiqO4CFmsczEJ6qMDFsLJWrId+HKkfrJynLbIsn1975QZ5Yvd8CWgyHcJ\nzjGqFtwjKuYOSY7ZYz/lgPDwfdHH0kEnq1Aqm5lrBlFjv2P76hLjUfO0+pNZ\nqpUZbPYFSPwQ1OLWpTfGVt87VFbW8Bg0/ocsSsf6ZffbIH6EXRalgoYimRNW\nDxDo+nOmHH2THei6qyI43V7LJ0j2MeuaGzhEmq7kR75SFNmF9zgMi5al1oKW\nc1Ou+rDaUsFDdBx0lYcG2TqYHj0NzfhTLxZ2UTZy8bJPP9f2MbF7YOCLEmRX\nUuTC\r\n=Uy+q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.fd8f8f2b7.0_1589824412285_0.7015736950845699","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/typography","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.730920fbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"789f80b26caed07a77a3e91f600e745339e177c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.730920fbb.0.tgz","fileCount":20,"integrity":"sha512-QSlfdXkUW9gXInz+YldBfZ5tMhEgoyHrPeEt3TmxGOGOtu2hjhipfQbnh+WyohpDrYrlYev65KnnXXBSFl36WA==","signatures":[{"sig":"MEYCIQCTL7cwYaY4fIdzjGsZLCxmmdLc7M4yAvQ/yDSG5FxNUgIhAM7V1O4o4iIHhm58X+KRLlxOw77KPUrbhUYJPugs4xPo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuV+CRA9TVsSAnZWagAAUQUP/1gLjIFmBHhtHc4NhyNv\n8W/F5ghpYMIsMo1uw4nDY6gskWSlDx2BtaoDxIFeKh6FZG0D+434fcmDru2A\n5OAnPe/WmKen1YMHAO2tV8m06dLZBZE6867wbJ1PAvS+8vXqQiKYbdhuHbR6\n8KD+y7zOPxBaqqdN983mMuxQ+YFQTaJWhadAziDQVjAgfVkEp41PeCrZXCr3\nr2488T7o55I0KCY88nVpzwaZCc6Hka/NcvnzcpMM1p8W1y8MRMMnHFu7ZIFW\nv//+w/3iEcSh+nQ1/aIX5obY+HSPvcAKYPaSHFkzKeUTht1Fn/TPo8HaKnjK\nOjSYF93Klte38AnSlf7m9OeRyKmaMhC0/0eFnMDttE8spkjRUW7Xa+N3KPPy\n0WQttKRSk6t9gD2WNkeryNuTg6sz2Y92lY/1wQiwykaKCizjySKVt4j/+mn3\n9TRyj50aAuEq9Ev9A/iohGalV/e0xmrk9ld3m9o3GfiY8bDrJneSFx3V24gE\nR5//ovcuylGdtWT19pCKIMH9PapDgwandc6U4VbCBE2mJbzotD/EYyF41o7u\nYpHFs2rrhKEAVhxAdjtXF3gcl3W5JssjbkbQmmwuGmJdYsU58epZyzs5Dg1B\nSDRMWOhA8RJSyIaWQDFXFz6txb0fa9bpnL+d30aUGyR+S35yebKEIyyHmO4k\nzPIO\r\n=NJos\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.730920fbb.0_1589831037836_0.879004557546774","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/typography","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21539725cffc0c3573d943144dfec7b927b15540","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.bcdad99bb.0.tgz","fileCount":20,"integrity":"sha512-cxpNFZZLApsK/c+lfN8FusauBKYU4x234aoTVcmE/nNe4u63NqPefsRBULVE3a+pwg8Av8VqWV0iq35raMTojA==","signatures":[{"sig":"MEUCIQDZGaWxo3OHq+LVrq2MSXFuLx+a1Xf8smheZKh3WmQWqQIgLK6tapzxTt7/UQ/4m/s3xBoN2GkXaU6CvZq+RoK4MTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/kCRA9TVsSAnZWagAAUn4P/jLupBXDTnmOUT4GGdFb\nc8an5fnBT5tqYZ1sgpl+4kclAIKWCnLeqEorNG6iM93cUU7HFQIUZu8z1fU8\n/S5dJqxUn9JP2Nxo2XBskcGX0i1pCHnCBzBm3bvOGsXv5G4kx1wYVX7PaETB\nOxLvsIi3boMcdDmOelwGFOGC28R+to9dBomfHCpCSzZX9smWldI86ofv6jkn\nWOiXa6uIt9DK/Mso8yqdmcNEZpCF9OZu/v4N//6TaXpgo7uxHNTt8QFN9SBv\nE4t/9OogWT01s8WcUfTb7OvGHdqPKKuvMr4PP0qfVSqV8d3cFHwjr3lNkONF\n2PvGvV4FpP9InIUjgCLfC5l6NfezMDlXIsdHvsdjTPHTyeu/RyW5L2KMtq4w\nlTmy+cywzb2m0W4IviWOqfWeIqmOdCl7FhuLuq4vDK4SY1fvnKNV6kYUCxTL\nRf2HYkedDmIOCRJvElfNIn7CpudARNqCrZkTplUMQ15Cbe0So0EgCC5lqQ+8\nNrWAR430Sq2MdQ+5wbFSKE8AVzaoyUO1TbqEZStuxnNyXch00cGX390ght+T\ngZuuUEjNMeMI5i+xj8unWS847+6OplkBjVJ7kxSUP5e6FCnS/bkkLvHqHxiX\nbB0KPMeD18Au5WeZG2BrNGENYaJp9UWOXRn6Znpy5ambKHkd1EUmUS518T12\nf8bV\r\n=y321\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.bcdad99bb.0_1589858276346_0.7110913888206882","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/typography","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53e16368dd0b6311574be2a59d50761533e5c795","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.4497b86ed.0.tgz","fileCount":20,"integrity":"sha512-5lOlqhXJD37erxhibq2gZV6eKTQN3CJrO40CLiRCuq0EEM44WnVnFv6f49YXt3y1U8usSeVYlv7muDTUzLnSBQ==","signatures":[{"sig":"MEQCIGwG1VW86efrgCjDgSNUOAN/8M+A6Uq1WMW/Y7944j8CAiBQXOMzNrrL+DsY4FqgJ5CKY4JB/NcJVdE3F0wXtM5W2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eRCRA9TVsSAnZWagAAphUP/jGslTJifzlUyvs3gO8z\nQSkL+Myv8tKHy1Z3A0oH5dULVMj7KfSCOUz+med+u5wi/2paYkjb71MO3Tfy\nQWprB3AeJSugqztPJWu3dvuIlVnHqG2q9HIcMsF+VLoO2lSrz/olvrBhV8kn\nVDkShXVIrRC5zbKtao/kpEC3Daq75ebdqqCR22b72l13zj9zc6om1qWrgAwL\n6RwIM2ZTIZkPq6rtuDpmRlGx7basJUK9iRLFS7EhySxSkpB5Z2cxbB38Y6UF\nIoah/iuPCTyo/5bh7qgcAyYppPPMhgubv6nPmBjnKSEUTu2hi1Z1wMz+xKgT\ntJzzskgQbC6WYzv8ObhLzIMiN26n41+L4hbzgCUbM4f9YKoeXB114zYHavPb\nXltAN1mRH5xaQLUY5JUAWw7AUk1CRCj5fjvxFJLTd2976yfTYRcqqPqpJ9Y9\nPe1Jp8QsQrpyXJb5trtI+hURplmlkpIkfXmtG0AUBndxyanMxry46gvztCIl\nX2A1m3f+fPj7ftL8jq4n98OPLgiS7asp6ksFO0pUrmNAp7uO+YArBvoPIm3h\nJ0j61V8WAgQyVtLuita5Sk0oqvugI2na9rBKuoW5aG2ESA7PfEaluoR/dO8N\nbPk5+06XQhdeklfqRvzoYxQ1Ro16GqMvdjE2fR1jdXr7tIZf9FU8/c+PngG1\nHiuh\r\n=tRFz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.4497b86ed.0_1589860241155_0.8362538840271563","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/typography","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2e60575da.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a2d0f1db76841c7fee45bd5e2d865f94fe6ef97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2e60575da.0.tgz","fileCount":20,"integrity":"sha512-nUDtG5t3JWs1EV2yHTkXDgh0GXf4kjPoWM564rjBNYqy7DLAHOZKLQlMMA4xZ4QF1aGy3qQhwi5xVeN/TdMSGw==","signatures":[{"sig":"MEUCIQD6sAe2SCTIr2Dc2+zRLnqIXTGc5JSFK77pDBwVaUwDTQIgA1xqEFDpfOTSA7faPiQHpRNFI8qUObuMSWsaCOperLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexASnCRA9TVsSAnZWagAAjBMP/3M3NQaXLBbLg5kt5ENN\ntHjMNJcLwDUuZTuQnYoauWnThcYkLX01wxu+qMH3kjqn4exDJiuHMmPjHomV\nBX4rceIiDoZiQj9guxn/4ZEyECUHciH4/vFz/D4Dpzffgxl9u1tuaLuWZK1t\nZTyvk3uLtAMsz8US16dxNZUwYr4hVxNqgvYgg2XXDUHOqwWoTjpSyx4K1xr9\njSzNnPEHx5qpBUWzUC1iQJ0QihF8311rq5OWxGjLQx09wJ3Re+yj4ZHn0jMH\nQgxWuT0ue5loRtiPyI9ZLR7ffYCzSdTn7a6OMP5hHggv4SCgFq4uSKHSgisR\nC5ucihbS6zeMSl+m5MCU7xYzeloW4tILAgOkRW+EHSQ1EoO/2/bkWnjN9NUh\nYcOYPyMMmCBkxHIq2H2JbU2a1awH4rfFu6rucczcsZQpuq7SW060SClbwwKc\nESjBY4vDrZlASktMi33RwRvqMrPtLlYYP1cZnrJo83CbPAxC8lbo84IEuBoI\nER/GEDiVdaLVnkQ5AU3a8exnVQs+rJWB6tnCqD+OhwCIkOndZUak1XlLePrq\nPrwba+hk1BtZaaWPOlsP4hlwmb47WEAstYvWgk66aNFcWy0T/5LzDWJqQoj4\nqrbBntFs3mDDIzZR9DHbnvV321pYu62r68KVjJzYXM+AnU3sO+pfP40+3mT5\nZXtD\r\n=/br/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2e60575da.0_1589904551382_0.44494689015450994","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/typography","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f9fac62f1de50d63739feaf4d45942d9b8fa4db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.e3eacefcc.0.tgz","fileCount":20,"integrity":"sha512-lXpreOlWgktPu6Uo0GN11KvY/CmAxrSqUTSKYyDCeaIcdKzC0H1kaxFtp45oL9Rq1BObJPIU+wril/adhpavcw==","signatures":[{"sig":"MEUCICN6YcPDnwXVNIyKyOQNgcb7/Cew/G1DDfO5d15agWwvAiEAlWvu6Y6UN+Ql6uydQ4L+etUqYNwp4rw9Qupby4T6M5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBl6CRA9TVsSAnZWagAA8wcP/2jqu/grZxRBYS0GGYvP\nMWbcldetIpVkbRurHO60NCG2QfDUGsgxe8+wcHbbjSvBImXDQprm6vPalguA\n8eXvo/ygKWmQT4QPM/vHeN8yJtMJVzpgRxy5004MuX08+57kZUjLxNkHusdA\n2BulDoDxNuO//94mHXyPGeDZOc/5XX2AMKt0wdMhPEg2dKHnNPb4sjiZKwQg\nAfPClo9fAqZTkrKRYiI+Tuwy0S0KftGNvkMrTb9cCdFjqUpiJWL8+h01lGvS\nW0VzyoATY/ZzpxwMnfryJf1T/9iLLnqo0d5kLB71/uVsQ/ZkbVu3xUjzODZZ\niTIPaXIOkPfNaXBUQxBjvy8WNP4sygktlKeCOc1hAZd0DhPvYoPtmEf7mchM\nZyFr7VdYs7aKucSW7fk4XrkwMQReuTAvMCyGrABj4eoDm5G+3VwIFkQ6qbXX\nS57Uf5Cth7z2a+qixsSTZIsktYyLu/rMtZYlFh3P5PImx/mXpZiPyyDC1f5b\nOKHSAlIKC+zk9exouUArhbJ5BWuMmjuixLDisE5XopZau32dCQ2XyHhNWMku\nVmnm8evbzSJ4gEolaRYVrzGPoixziM9GqxXPVPiwdZOKEXSL+a4HNxgR34Gv\n2VvTWLaZOJtQb59mU4BwVXV7NNjaMuihoSqCYbntDhSp9jTU++9Kz0ze9GYf\nRonf\r\n=VUSg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.e3eacefcc.0_1589909881922_0.8801520554288027","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/typography","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68afd3995f91cebbffcb34fdaf956985ba112e46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b065a4d2b.0.tgz","fileCount":20,"integrity":"sha512-u0HELJDXiAhECQixUlTcSCrB/5HFqUGrz3LQ17HPjXAxhr3vbTzThmoSazC7Hw746WvYX1VN80xX5LEXgfV5zA==","signatures":[{"sig":"MEUCIQDUudqTAv6pcXYJ2tqpi7vIjH4lk5i02KqGj0fACCwfhAIgQK4uZ+zIi+dhVaMP4HjA2u45S6LkMmnXOsR5Xj9J6m4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBqCRA9TVsSAnZWagAAjkgP/jIKDDBEF+KA1OqnrAFs\nhAfqN28ABMVee6Rrv15XOAjveDPknz+H1K2Nu+33JlHwvzAcMrwRSM4MMPWL\nRHljb71ZYhRlpJlfrYS4H3SPp7YjEz1nCKvxPtHvh8BpT4f7F26QmiuCtlu8\nXb98WwrtFr+pjS5PprWGs+W52PV1OUrkTP3xgv7lpVS3qvK7bKtvuqR7J75E\ny/PvnAJYTokouP8a+nvbbZ58tJBnzSwbxJVopUcVFMdfSaZxG3HnXMl216K7\n5aQsHLlSAOQyqJbO9DiXjpF9TQkLkZ+rDfvNWSIwElLhveY3Yd+OFlG9hte3\nSwqDsYylndQ6xCfq6irDjO/daef8wW0F1ndu1G/D6fiKIQXnzWAEQN1wdTKT\nb3rjgnIWwgeUIHOgJO3jtv67J/eyVkNr8uCT4ArrsAJSwWt6cKbLruu1unYL\nBTS1EXVGioZ5u9G2NzIrjTqWmDFmbF1IC5wkQVlGSYerXbwgdxZVciXmaiyM\nbwcAqvIRi/J7xNO6DGXoB6IueUsHbPk+S9lZsjXhDAc/OKb+N29wu9N5S4p4\niFnbQIYzB6RbCIxXAba/5TEmJ0yvSajUsJi6aQlJ4HQfYcMwWFq3B2vjXIZx\nSYD9ygGlsxdX0HSG/f07dmQZYq3PtVPmfDYG1JR/C5KTIZZQQBhgIrZPd8a5\nZuZa\r\n=vFry\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b065a4d2b.0_1589985385994_0.8664289254461999","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/typography","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87d49180a5cc0da7e2e0cdc6a993b32e3bb585d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.4ebce8d78.0.tgz","fileCount":20,"integrity":"sha512-H5xDSIZbtf5owI1p5cXdKoqTNzM8ucBER70BRRt6UHgFyulYa6oevvxYGY4K1ui3ftbEEbKpwZHyluuEwDFjmQ==","signatures":[{"sig":"MEUCIQCCUUJl8i5NOQMOLW+adXM9eNUeJGcQugEIvds1LE9p6AIgAVr6gzo/FrRN6v801lcPQe2BZBAmbFuKMZxxr7traMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgTCRA9TVsSAnZWagAARyIP/2A47ox5Tq/B0NduzJ1V\nFqOnT4ZyVc9MrUQZSGIC6OHyQJySm1AlN6xtej3lc8/KbNcrGhIM0DB88Igv\nraDHTfa0/ioaxMbXA1k5XoLKL+fThf7Q4D9EwER6RdSCcfx1j+P/8fz+155E\n5qYnkvndAsERlGhB35yvhHXs1ETyIBjXh/FLAWmjlNv8owJzikkBbaG8nsCN\n49EZOEpBFqqQBV4aeL1fBlq+fotOhuPTXhubHBYcP5RHO7bJdUd87AK5XcHr\n405LepfLZandVgYW2wyD+5n39fZnus0o/TZ3L3JmzZDpAAVDWgHhz9Ws1qVg\nIOQeFRuj6whd4L7FlxSUTQbg55HvJHavmL22zsidRMFRADncQnDvntTKgYjx\nZaWMgLsvxU7COM7aOiNyUjVSSChiiMWz/9sYJO+ml5tfIsmIg1vS4iOGNZRq\neGhrSb7llD96ClGiWA232kG0BLzi+qQI0eW4r94Cj+ea9TDDiuL+8s6Xq7OF\nvVnWK/IEMWkEONjzHHgcxu31bNjri/HjQV9qv5FGZJosJP4qA8DNUkJVAPaD\neXfGiGPtzlFsbK9sTiQ2aSO/zQDD8jvfjE/JQEa/UhaL//4SU2+bMYbJlz10\nnh5sWX5me2ZTWWdqUV8PuS1CBS0Pf7bPiX1X+KRbZ/Si8YecVa0OKBpC/PLk\nc5WH\r\n=0utc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.4ebce8d78.0_1590007827313_0.617004222516595","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/typography","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b155a48e782fac2cc24da5a41b8f4aa22a1d707e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b0fdca492.0.tgz","fileCount":20,"integrity":"sha512-d5NRyESHE1MdbUsdYdu9/bMWaNi6n0hlkzNqVbaMO/DRonihnMuLCoSQG0Pu4BsZNFKMJUtO5idGv38ZI7kQ7Q==","signatures":[{"sig":"MEUCIQCT/HWV1ORPqXX4gntwMxRP8sfY2VxGg3XOlWV6r9GqmgIgEy0j+iNL/VJtcdXMH2Wg1slsJwavRIH1D32gWw5V9Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcSCRA9TVsSAnZWagAAi9QP/iyoVPx4EERhQct5GC9b\nBX1Mt5N3J2NGKfazw73z4YLRUmJoFlOt6DuOPDNOFMp5bLBci9ffbiFLsgXJ\nuAWAha+1Yh37o3iEYiRjM3+etrBznrF6795IrL0oScr4jEA55gfWCpyOU4nk\neu/kZ8ene0I01/kKV80gIBG5TEhsrApGogG6GVDOgMc49ZEmzlMUn5ibufTu\nMrJ7mBGKT6mORhPi1eF4HlGF9dbz7+sc9KUTcCuWs+rmQReSdnlkMMAVOS9u\nJ8AStatoi3gYjr51u9fW+mbMkM6OoIYE8YiEjB06kMaHBiFQDeq8+rhKbqs+\nN/7EYSoWGQjghU2XreyZ/sd0Qpm2Gsm5Nc0eiLmYN+f9Y53JKlMFLXVT/qjA\ntzgWKCLjaJXVLEcy6EI6AC3V0ZOw5A2/F884/szndgoIDdS2/LGZUp3swLl7\nGEYHQYdcIei0HFebNAs0GyF6HMr5s9OUgXpkzUk6PJKX7L4FUFtk94K4R+Jr\n6FAp8+KEBNSfZKgnf1ysA60kuWvg+EDiR5OMPClFhC9akrqBNbqgZtp5/icp\nQiw6Mcf+EBCyaAF7Dn+b22h3OydlFZ4qwTjnu+T2X/J4HuzaHkZImYlXVxsn\nZEXkbTQGF6jMqFD9DpHMQLVTFc6NcJa1v4Tojbt6rNwBoVAjhTixyOLZmADE\nTHiw\r\n=kHud\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b0fdca492.0_1590015762307_0.1360903656960959","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/typography","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19d33273455d23e88ccb63c5f36860c99200207c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.c67667e8e.0.tgz","fileCount":20,"integrity":"sha512-GzWW5vsQZXHRociLH23ao9DV7RBViKalCS+JVHBBEAaIJkEd03K74kmAjf2OhN2AGi3hKzizhkoEnw8erx4iMg==","signatures":[{"sig":"MEUCIQD6LaPYpQxPaJ9qzqo9dsGeTbJT20H55jCfRtB4WXRdjwIgZG+Rt/7dB8WWkA6POJyQibC+NwdsdpevBz6mCHx3zG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxUCRA9TVsSAnZWagAACW8P/0Igv2pBKLtnn+m6xq6k\nVPr7USXt1YCkKPQaGoNyoRr5Wo4L03OcKSBp1LGkhB76VkMEpOc5kRgbj3Dl\nD5XOZL6xd8SEtFkoIJcaSTIRpwDCmSrrtgiskxFpe4S1Xo+KaWlOhwOmFNmN\n3ZmZDPxpJgmAogpwI9wUkvnkvpSSMETfmPkFEZtleVWHcnuHH21OdfhGygkC\niOPRQ8s4qzRI96JOJd71FrwZewYo1BjmiipKJhs2oZzEssLrC0hF2LngoY9m\nQnL/6Bywls5dSy3DMh6gd//Xoy47OzCgv6dW6oF5ctSmoQhHuWXd1ZL6xfsu\n16o3ajXGdQa27UpSJAdTz3qbpQSXa9fRihySmLzE3uIWifpdl9Mqwzcsr9m7\np5IzhgGbgOpov8UJs/3F9iWaK4sWc963oaR3mja4Flk1Mt7tWT1lDe62VnOc\nq4oaq0omOJmOmJeagSepJ6GBY4SJ3mZmOr78e43RUWiK973p84jCAHhuyaSD\nucDyHITwX/E8UmSavHNUZJ6IDzXccPQhqN23tkQdI9aNLqeAnfSIUhQ8KHls\niA1SlCbe8qfzeUlbh7YPu8RO5vwuM6SFIfbB8lyJ87y44XJ9Uq9CKK/v0wmh\ntnd7OJHTo7ZyzXIgTOgu1bg7lO195JrG9iSh5XVgHG3Q2budCo+ozxX29aT2\ndrsM\r\n=6Vm3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.c67667e8e.0_1590070356285_0.09548302373545736","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/typography","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b09ef46a1e1f6e8ba9717c5f30ab719c9a7aa40d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.62b5f37db.0.tgz","fileCount":20,"integrity":"sha512-27gOQpWCCmQpWtgSb+x3BDapkmNcnCjVP5Vu67+tIJ7hS6gnPxWwo3Mpy7Hz+nZbGfaLS381L36NKHySGBcbOg==","signatures":[{"sig":"MEUCIFtoX9OGSr/ETtioU642hWFT6hMp2uTLiGwNme82bpKrAiEApMjIUogI7Lct5VanAfndA6y/LPWYQFzFtVXJ8Fm1Bp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8iCRA9TVsSAnZWagAAC1UQAJVmclC4Tib4a5Uc4Xn5\nnGFZD9zYRvjN6ejdFDfMq+w4jPAz0mpOS6+fyu4bL/fXjDHr+KnxrPtWY76K\nnOyxYktzgKzvI+pIMpOvJvV5sU5sipd7I7QuzvpQ61x1vfxqYonRDzcWDOUN\n9kRlbIrKBmEfafdNDoq5+7/flXEUh0j6uZ4UHidzT+EOsjtRib0AmW5ZRbuB\nhQE/FUfGT/RDIsYrBkulO6iT7sPplG8OK9b9AiyBl5POylMErvZd12Ox8dxF\nbIf3ldNPOmNhyFvMO6MDHXOoDpDgG4GBdbKnOmGoTLMIhPNJc4MJXpzA9gr8\neL+uA7CmIumKuO+gxbqn3/Db5GtNYVfZjVBb/zzHF1EPomADd1Y/qmlIeTgJ\n/f+/4JLaiDoD+ZxfHaLYmN8RJAGF4ysX+GP6L//1zSvEqbvTxTgaFkxvgkDa\n8z+zPupe3x062b45Bx62+xwHcS7DX4g9f6vKRo6GrIUxXVxE/qjRp5+m4vAv\n5wiHnGsGnRpduLq393hD7ZqN+xNavTzPXz5ollmRVkZcXdXGvD2FUdkEiyJ8\nbKVm3zVXtgE2YCrzOLt0y2FLbBA78mOzL+fpboItv5j0qKxqC+5DUAyLQbdP\ndsS9P/dv74iZzRlOo4I81wOLrtCv92p1XmB+44AmT4qzqqd/dBg9j2DSl6O2\nccZv\r\n=UIsD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.62b5f37db.0_1590079266278_0.6653312303327563","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/typography","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d381ad132a702c348729d05854d1da11f86c4046","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2e218dbf8.0.tgz","fileCount":20,"integrity":"sha512-5qQGzYzPSkShlKlrVnNcb8kezf/xQwGlLfub767N9BaUmjMbCIpLZ4KWsGc5GiUSeDgzjcVK34ENNG010gLEkw==","signatures":[{"sig":"MEYCIQD2to5Nv/muGrgdz3pwb40ZnRU4MVl1C5iOCdD6b2dszAIhAIEalHpdJCa1ysltet9TKeF7Chqh00wCWK7yFeeNDs9o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQGCRA9TVsSAnZWagAABmkP/235AIxxMIqpY8VpLlpl\n5Di7vCFWtjh5xsRi3Lj6gdsWZfQtmNHpoUIwyF9nAdp5zrK4pRY1rtIC+Ayi\nGw8Wg8c/UpnTl6SsS4P60CY/8iLgECHa+WeLyhA9B9gQfEaJIDrdHIn9KLQC\nGYgnEd/fTwIsWPgr0ec3YwFTuoKseD9VOa4hDKceTguF050XzwUQaaIYuqav\nvtiwiLkloywOrySOzan4tUsgdBfHuCcvW5BsAKEUXkpQ4HmY9x+eY21FvrSE\n6RXtXcORu06yS40irV64vG+szKhXkl4DUT8mTO1u+gZInWIhefUNqSks9sFt\n3GD02pA2fU7tocS0VEIobNLg1vsU3OEaFMB1p/LE9RX1eRUDRl/48qN52v1t\nCiPw+sArghqrOqU2zb/ebO6jsmT+6iSVQjZYS0NJZuVxHIBZJTZdQwXBV5sD\nyGDXiKcUq/CT79C9FBEgDjyQfbrZCg4rh9zkKYhwc3NPkVRHJNdg7v+gelpw\nd7Iw4W1CEpaLAMAsNZEmSONs2APg2t8P6Iu+nzCFKUJRAC2B+JspY/K6Y0Yd\nLEfwCNh0kmPcMFvoLh9BPAtxN2buAjQHGPp96KLzofSjPKtfyTHFQh/XK6rp\n7AMr9+WuxzYldFLbArl0g0d7PmEdQlLW3QgEezURgLs6lgiiVAbGnR+RIyQy\nSa6k\r\n=MDUt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2e218dbf8.0_1590080518336_0.7157487815581183","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/typography","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46dd124dc5f76105d30c026406eeb5aec6fcd0f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.7fd792bb9.0.tgz","fileCount":20,"integrity":"sha512-ApIhVl95HICBS42pCDgKwjYYQKDc/r+CzcDYndWdeh0pJb7DjbpIY6EYS9eBgLEBxJGItciqZ8UFuQCWIlT6Ug==","signatures":[{"sig":"MEUCIQDn0eg0txor1+HpVkKU6+JkVRR7/nLCguBwwJJXDW1M4QIgUmCg/qEXDH7f3rYo/isywetwh7rJOQlNJNgjMkfHYgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrbzCRA9TVsSAnZWagAAmaMP/j1u2SE9McUxoz1jlyHL\nUkdKKXBt1CNVWl6Te1ZIXkHDJlU1cD2oBWcWMqbE0DYi7d6YMwY4VmxWNTho\nRdCc5raNTvhkO/zBXsbTRQz5unmUpFVLnfrPP+w/aXJVTXIDdV6a9oInbRv5\nvovoJiNPpxv1gXG8hybkik7YxkUQGk1P/OIgMeXFsU2oQDOA9hmnnrhERgNL\ns6uRXN3AZjF9bNVU6PWtum8vzP2gz/J8PgFEqv4ahgZMaUtrO4ooDc8keFGE\nZD82XsydNpvFBOh+I/y2PAhRuSBQYG0IllGFRTJUhJCja4bwVZJpLuvwTc9j\nGKQCZ0ylPWrB+K7b5nSbHKu5AqUH37d0QxnMJLgRMRI3QOa9zazMeV0xaYIj\n569vh66BbM8KXy1Veg+iajKrU62841d6tz4V+k3AnYB1SmQWxLLjZYckFdKU\nhQJEAIapH+otV5hcxxBU8xCYPcISkzPqE03q7URQFp+TD6cqMsIc3P/vLujS\nazlPuZuSQOd61jLCiFcVWwCtzkaMy66KUJgtQidt2KwJdcwtXkwRdZ3ofxs3\n5T42uyYv71T6DICbgeS+slDWHoWgWYTwKWg3K259HUZnAijrp6fkxIVm6iP6\nAABsk0ntOCMjR0nh8XS/y7eg8eykquv6VwPl8kBk5VvHmbkBrQsL+IDUjnjj\n2KQE\r\n=nicm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.7fd792bb9.0_1590081266730_0.3675734960276642","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/typography","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cede2bfe9b187b7755d3ee4a414e9b73389322f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.a66493cd8.0.tgz","fileCount":20,"integrity":"sha512-4Qn4o2tbLCRfgKb5N00/1j+oh27pEIM6hBSnb/QP9GqDPEvhW4UsQifGKl4Harh75kTw52mR7O1lbECPFASElQ==","signatures":[{"sig":"MEQCIGIbsBGldQba2U2flVmtkb5yvQEw8GgK6FZ9KKOKGomVAiB4jdicI5AP0AGT3qRd5PmrTRkAKSSO25rSkizs/eMBbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfNCRA9TVsSAnZWagAAfqEP/0jO4IWYiNZghn115/kW\n1azpZtxKiN3xRb0r24EukMQqnphSqo6KPPNQcdncogFrerILu7SuNFmjDaT5\nJqmkoi7tYuAEF8GpqR5XVC2GGCkTNoQcMp49nTuUzTOWZrEDCQDovoXI4OwN\nz7aMPtcglRts8oZFi5AlYXboDiYd8Hl26z2iKoFIvvcJvksqpB9BGMXDM8Of\ngoIjcMDEeXXBWHkXNGbihvLLqWBHkRjPTwyD7T7bw24O8f0IfNnhSSJm1xWf\n3y2XGWpkyXMQlnEOVzDOuBb7u6Rrt1XldHJl/qqgf78qSMc6YTZiv/48HJ6G\nYR4Z7Qr93BoHEIG6UNWhH1BSszB1usrDjQRHdCMvl3bHiA8yLMsN1FHVkw1q\nc7HNm9s2nt2SFvGzLDULvJPPQtwjtUy51LY8+EdGNfyN8ac3px1ZQD3gcVGG\ncQLpHSbYayt6gGSruRlFMzOn4eJw72Sf2uoHGaC2JH33zlwR7+tYvOB7gD5B\nRLx779+aORLRICYrelicnG5CFWwhSzHD8lu/K3WnJttDNq65VT60/bC97/IU\nvmp+AQEDtIf8h9WKwfc40k9kxfvCy+ox0gitcpA+5ZdmVxCn/L2dLGTJ5Qfn\nfWu5z2ZPuYJcOkQnqHljCBJkS7v9Txglho9Em3fXXT3I7GwooIOTeokqr5lQ\n4kji\r\n=YBya\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.a66493cd8.0_1590081485297_0.8850305437217478","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/typography","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc3bb98f70406005e6e971fed74046045b5dfa2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.da05f66e1.0.tgz","fileCount":20,"integrity":"sha512-KlR+6y6f13MaLCBzVF07UOJCiEyshOPaGujPoZwlosMpMsnKxq9gCh16NCNb9BInse8ZJYN2S4I0Jk73UpzB/g==","signatures":[{"sig":"MEYCIQCbQ8TJv6VXUjpDaJITcFftswkIYU2MXNfNzZ5Cts8eVQIhAICQAt+vfmIfWO5Hifshk1v5JiUUlJEQK8dxABXH5aia","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrg5CRA9TVsSAnZWagAAP/cQAJ57F4rBZ8K2TZNfMxwn\nn8lqDIBQskwoTg/4NSeE3Wk5/n9chhZCn+WBWdhENogJ7yRbh3j5tWksY8Pv\n500hMuHDnCPpqXQoM4WszqxHzmhZ7fHa7DTTYo3drH8Bs1FMJdfunN+/3sYA\n8LQqUOHqyuRxPeWBouTgPqFLvS8PQKd2AtD1nEFyUPkEUwU8xhEG5+v8/j2m\nvIqmoeEcMpjiItYfy47hqwZAx0Rp+GSmmisTOBLq2PM15Gc/+/EJyg7WBIte\n3G+6RSyadCOV7s6yBRinrnfUj91tH+V9etELOC1t2Cr+bYNFpwBjHfVNqgZp\n1KWn/DjjIbsihKqxUFx12j+xguOWf9I/PkOXuxMl78eDuYcR6NEq0A8ghAUX\nCZvZsRi5xFs/b5MKxT4vWHw2LzQoFnohtrDEqXkAMcx8jkUaY1eXzbIunlwn\nGzxaWj7q0Bq4RMSPmhz2C2qI3ZoB6qsL25nZJ331RJ/Shoprc3Lo97gu/Nlx\nF/EJ+EhIGSqNRpKptbJSm7TPirG6v7OFsAL/TUOR1MjRBC4EdmJIkCO+8+Af\nNcHjrgmvfDajU/bsWwwMnsMhMSWDbs1RnPbC/G5lEbsHytA9iUbh1qQZsESF\ntlNNf4POT6Ca/nI649uEaDSDTrG4vQ64MtMXRm4hjyOZbSIumUqhX/ru0486\n4YUy\r\n=z/QN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.da05f66e1.0_1590081593119_0.6756835733267481","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/typography","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.740860e78.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a51e3f9c51f6e448c31aea93a2edb41a4977b4d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.740860e78.0.tgz","fileCount":20,"integrity":"sha512-xkWpQW30ijgWNfpGh70mjOxqImyIJLDFUNZ5U+xAQYCyNcvZvLe6IIV3IGxt0YKcnejz1U0wTFwZkP789gi6pQ==","signatures":[{"sig":"MEUCIQDXS9G1/LN5a5V2VEGjHx1iHRssxhnPXoA0zIzeinddKwIgERK0bizvvwvs72MbXjarFMsXSPYNtLcvpe4fNO1GwoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnNCRA9TVsSAnZWagAAnGAP+QEidKVjpceFb86xG3NE\nL0MUt/2/tGwumTux00SAhGpH/zBlTOXIKQSCpvgIiwBlFNKm0GSEZgOA87XF\nvie7RMUAZ0nH7Cyu1G1icCHW5iQ0/rnn+RCjUUf4Jt12JJR1LuZ1ayRKCPCK\nDIcvfg+lN3+njXBtDl21eyYl34vZUod+R1DVoScxQsvhIbtRGVRJ5P6mBClH\n3xqSNfFILoRb0W3hCvd2mrgF2ej0HweGb/p1gKJcs0GWBMErkAa4Gi9T29jQ\nhe6bgxByPoyYAzzmiBoKgbYCIRBhL5aPAyv+5iRp5O4U1lO43VbOdJQDie2J\nB5nmwGv1kwvydEBjB49sKVCsYl9nftYYbZ/03DMToEg9sTLJd5OONbQKbDzL\nTamWyPwVv530jhn7db/2lvpHQEzhR2nLIgWLHo31TLQQXA0C7edytM5K+Aw4\nM5PHrQj8Nej2DM8OJ/8DLEsuoFHTP9Y9Z52hRkSDEEVamcz0pomzjuXWZDXy\n4d3K8AnUW1/PgEXz/Bz8wA9wfpUGF8d2IcGkxZdhNYYwpaFU8vwP+l8VLCPE\nzb+VoLsswlFRYhNz8mVnzZt4ihEMW0cjZriC13amaseeHYTH7oHpHI8XsZn/\n35XNY7bdb78NlbvBLE5e08CZh37WJaTRzliUPPPH5+6cZ034GrQVin/kcGaX\nUlOT\r\n=+fFo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.740860e78.0_1590081997063_0.37656856001002126","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/typography","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"944a4f58483f2969d6102129d1e4c8116ec5135a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.5cea2610f.0.tgz","fileCount":20,"integrity":"sha512-Q99o37CfvZTQ0HF7/s4j2RxzaNT6ilxC6mGwa3XV/doJQzcCQzQrL0qRnczNaeUovVbX3SphNaD2eAU+XsmLIA==","signatures":[{"sig":"MEUCIQDYX4izNge45zShFRml6Q5P00ZXjdd6ceDjYujxtZBkOgIgS7Db9fECDVCyCR0rZXks3gu9tUTRZkdxSpqfOTuMLfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpGCRA9TVsSAnZWagAAS/8QAJXKCLJHBDTFOhfBqZk5\nAh7Xs1POI15U38BUhXu5XLdx3xeaaybgQn5rvqPwTcyqTPs2arui7s5DiIw6\nIt+hRQOHMJMX911a1iyVvASANSLHSkxCYm9pIQ2iDRo629YgzmC5DRnHjgzV\njLD1v33bHBKHdo5JbuboaP1T3YY7W3MlrcAjzfcTUp8YClQ1RuGIaFD2wrU2\nq4Q7LdhYbKjkWV/b3eCHbYgYO2UcOO9XdSRphBZjak66OCNYyp5ma+rGeSR3\n3Y7BYK+PShwyxSTXld/1BCU6UVnh3rrO1aTbdnFsqF06sKXoCQwu1Y6ZwF6s\nPX8o355HgOJCbVMbgqBPT0hz9wzyUGmng4TdNFfXXzoXBXK+jB7eCQgCQCD6\nkBGVHtVaoACBXwYstsqlVvlct91DyQFnytpXLoyl9uqWp9A/PTINyAOvLezu\nrDcWokqxkqmm15/yfcNnooGMIRTM07OK2My7FsaeEnK+h0HtPjPp6tcLHb5b\n9qK7UoxwSH4kakbY0c0bPSZcBTZoXP9TCiM6FclJ0p2aCtTwfQC9g+Zl2NTH\nqi8+CmDjYxvSFTdaDmRbMBQeDFweyMPBv11XMrx13BlfLaGLqrwqjQ4VBALQ\nwvYbT8q04zdgnaEgffNJ5X5D8nN/xC8O3XKlDtRgYo8JpcXhq5OPv2W/AGQf\nQLnW\r\n=YHqd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.5cea2610f.0_1590082117833_0.24406129524376619","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/typography","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39358be464aa131d09b980b1dd487f1ec3a977c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.cf7747ef7.0.tgz","fileCount":20,"integrity":"sha512-ZkB2DSLjCugLquPGYJ8+NdYrpBchPqSPF8A3yr0xhPAp/AXWkKNJoj6C1jLq3XY0FNzHmQiHv0OPno22+Bi/ag==","signatures":[{"sig":"MEUCIFDYmtX7mdmK7DZCDpcz+TyOqZbkoPBn8aHhDsH2ct9yAiEAlUCp8yd/kFhb70b3piHc4QgMVCjSHymu3QgEeywskl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpaCRA9TVsSAnZWagAA4/MP/iYHikgsrHvM7fAHiVSl\n9N5KY8Hs4uH9/+KZku7veyIVzGH+z15ZwdYfeM6kr4xdeeG8Sxz9M3TRQ3wl\n8bkIiqIN0HtfedqX4jUx7f8hQBDzWTF4bPk8mlbGkLlHRMCgV2ADOIwswu75\ne6SbTQ2/Yz9hnd7/HVnhwolFXtqH2zxHWu5ZTaNxSdfaTjx8u8TfiYK8vksB\nCaQZhBNQoYQBUoIvQdX0o+30GvsSeKP1+ji23AndsrhZ9BqjMZDqu0/zp4dk\nVh7w4GUsxXDv1aYIty4bClHAIR4fYvNON4owQOCh/qF7lE2WKESf7hT8ObIS\ngqe2EqbIiR9YTD81OonO3egJgGUuJhMffoHqfeiKr/ZSrVWnTJAOEp8W/n9w\nv+MXcaKEsNfu36swyAQP3TSv9ZjPUmEgLhgxmdV2oPTd5j0P2oaKD/eX/idb\nELbmbv1S2zx13WfWuhNKwiDW3gXVjMMWUfnDUFcPEiPbjE4dJFoAHCODhCds\nBAdJhqNL3xTemZIA/XoqSI2J9IeRodBA7qmgdFMhDlIoITRFWXRdacId7jyz\nU/LR+1YL6vYmIx4ihqcY44qQyvX96MrsxLs2NewTgosq2qH8oHtqqEHBe/0I\nXnq7XmfqMJAtQrIuC5fPMY9Px7L5NJ4dzATJvtg0QJVyAE3urqRZcyecTFIS\nyH73\r\n=zEUd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.cf7747ef7.0_1590082137385_0.2920896227832741","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/typography","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3861fdec0608d1f0293319dab19257823814e513","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.862d0d7bc.0.tgz","fileCount":20,"integrity":"sha512-/Hyd6yfmodV6QjN7X1Cp6iTwfwwpGMORSDllxCsOR+tMRUnN7Hi/Eqywi56Es+TuQQcTYgULj5tS43utlTDlfw==","signatures":[{"sig":"MEUCIQCZgH4LgHNwGdKwhiXGN5kGXjDTtzLSrIvb8paTbyNlCwIgSpR7MpCJz0hjvm5B4yDkxLv6rHIds5Q+/HZ4Pgt/AN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrr6CRA9TVsSAnZWagAAc9UP/0m6AWNaccSRN8YXBmDo\nKLsV884RiUFMEflZCwQPBgLZbgpc7AnsjsyStaUtAFU0xMak8w3RYcNiy+st\nz8U6C4bXk0XKXJ3RMYvEeiA+R1m9E/FwtPiJuu9F1yQEx9NhaBEbY5TfsHwJ\nNFAn+xRasAAHgmo0w4sPJkmO1hU2dvZj/Z22SK+xGJtOz9OLinpcjRtOCOni\nN8C27w36MOg2J1tFQpXC0d3CyeqCENhTIWMUJY+6BCqG89n03T81LDitk1In\n/aO8/4mxO/EQPXEoI7h9FyGOXFTkImDR30u9EFqtjJu6tYWn5zjCNOp8yrgI\nbuxaM5YBPnOidq0EBatqKDhmi8wLSU5N2C3DU3sE32xG9CwGCMTE9TLADpVV\nFmPPPRLYYXEyboQmjBwxlaA54XLHzQj5OQonpU7/PJ800U/5pUdh22DRtLzi\nuqi1z7zVw39pVVW28hitJOsvn0Zxx2d8A2rj6DYqQ9z0ETIY520qoevB8soe\nFmSzsCEr016rTaQa0q3jo654STwhp5YvxG7kPKPNfQoOra3c4Cv5sJES6Ld0\n9urjqF0OERl0Xgk4I9Ez8HfsWUqJ2sOzJYfBi9LW5bIge+i8MfqiGG5fLAGE\n0pv93Q/4aW1XqTW+p0EqIXnjQuTjdw/CE6E6/Z7AbYoq2GuTAwGTD7HEgVS5\nrUz8\r\n=cxCF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.862d0d7bc.0_1590082296969_0.7089154030709626","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/typography","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b6a06bffceb21881cd534252dea4956531d4d27","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.0008c8a91.0.tgz","fileCount":20,"integrity":"sha512-MS2Bqqtuq4hCYLFofuXfQyFs9F+9edNOdra7nTzajM1yB5snPVv6Gcm8KUXv/LQlmyz4TNRqsEbXE0teerQ5tg==","signatures":[{"sig":"MEUCICNRo5LA/kijwwQGbbSvqPKY+JbtXyTYalToy5P+pMP1AiEAzNlXKkbKATez2eHlqA4xeGLyzvhGldiLLQIKVhP3CCk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdsCRA9TVsSAnZWagAA7nMP/3LpOwPbEIbCeO22pMp8\nREQGFQTsalYBrKvi9E+hlHkFwvc1Hi6l7Z4KkB97OBClcAXctlqo7Jqfm+Ef\nqlK/SgdUp7gnkHDU44FoCZeR5my0PXp9z97Vx7iAjAwUJZKdPaysCJIsyLCG\ndrVBaO59glQQTzz0mYCTiP/7vnSjAJvHqK5MLwg+TThXhK9jYV63umF2ky0I\nC6sNlxOj6cshCO/CEO27K1lFl/EjlZkPfcGQffaZYOq0iQr+MleE7ChFKbc5\nmTdNT7qMzdi6pf8aicG/2Z0pjH1nuVJ6KXwszDy16EunhPp9bEsH7vlFQZj2\nm96ku0rzk8E596d0jLF00N2s4Dg1VsmIDf4Sk+f1fQF5tC0B5M1Lx6K25ERW\nlb/ffatWjtFAKIFXhZagxAPmScUbPlPpaL7Pn3U+NR32ZRPf1cqWirGXZhmr\nqcuITSwLXfaIVI6Mpmk1s5chEdyNF986+wHuyGCRNc8SIaR+yLn+JJ/Iz0Tn\ngAIoFURV+lECj/hAmJcaW6vo8YXnIE8Z8O2nIYHDoMny3gwcd+t53mI9KZMr\nZZDQ7qqWoW5O6PVCpoLL5WesRG2ajQuzErFnVvGFaiipszH6F0e6r61CKRo2\n3YMqVxbx1huRtGRT6zKbLdNKui/crm4N1OsEVXgdmM6k8BWMSxb+IJR+YaVq\nhvBv\r\n=zOf7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.0008c8a91.0_1590089580341_0.44215439284041946","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/typography","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.541638fa2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1057a8ca2c8d3b64f6a2cca83a157320f94f9d7b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.541638fa2.0.tgz","fileCount":20,"integrity":"sha512-EgNB64QfXeOKvaYptYOUi0wT9Dv/A7FK9WXa/e5ixPPUKEu7FqTkuq3OKC788qSVm7c88DEixLpcR827TyWPsQ==","signatures":[{"sig":"MEUCICI+a5sgSDZjCFivsEPkuJi+d/i5Af+xZpx6yfXEh+sGAiEA/aoCxpnu3OjIAMKd3orp5WkimTX247nRdeXsDmHP684=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextrtCRA9TVsSAnZWagAAKGsP+gJ4aVwgbAp26iC/RUSx\nCsHm9LmgKC3zjzyuShxiDk9lb4qMyi9R4nVel+2JswzXMTO1U0j6UpVc+nUK\ncQM+PTCTflSNzWrylXNAIhsHtU5qVkl/AWZPJD+Pr+RlXdm9SIolxG9jX5/Y\niWHqZIvApllaij9dlNrawzvpXKW13s5j0Wmg8sPpyXkd/skzySkqCIzVmbZV\nm5rRsD9D/LNMHph1cS+aj5VnnBssPqZRonf6NDfcENo0AW0pmQKnOVD92Bo2\nqq6PrPwq9x1oDVugtt6i/xb4XxKbaDeGUUdjf/4J4Or4lwN8Gjozta+dmCa9\nb3obWpzyVcYr1Ca6oPiICqlBuomA7vft6QckzNew6Gp1PSN1N0kEYeUqc+jN\nw5lbfARMhK7CFg9FKDXOi6WBLmJ3rfPOKOUyEd3G5TyKJNtbqPTz/kZuoDWF\nJysrrmJKCqDKfklZn6AB8j6Imf6TjnBLDPwX62MdWcA8p3ZK0u9CahG31313\nPL3/Vk959hGpNmclos6SIerzmZPg2d9t+7dzeq6cFFrZmRzrms2xYiSHRKuX\nwvqVEKtKfTGF8vLEvJ+JglnxcZO+atQFOf4th+HE/yPkiq9nwNuXbrAOG8pD\n9KyBDelS360GMPviZyUAovOcfs0svEZV1BtYsLyilpu0sYhzWblLUbt1a7tI\num3y\r\n=EZjo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.541638fa2.0_1590090476426_0.06875380539415588","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/typography","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.6167cd075.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49703802aefbfb422cbe9a085d32b5b862655cd4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.6167cd075.0.tgz","fileCount":20,"integrity":"sha512-uYUIQreXBkQbAUy44G1TegNlUGRjDU30X9u+IDxSVJEByRN7umYYhoOPON5XFmPvDLowGEkr7q3JhMpX72XSzA==","signatures":[{"sig":"MEUCIH8T8FLcJpklUSn+8lAyxe6sYDg5H6OaW3F/G4zJMKGMAiEA5x/MbZpZXmyfoBA4WSnesPDQpTOZQemLWeQgzfLxnCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKpCRA9TVsSAnZWagAAk3gQAIJnCOgn+3FKQQW9vpB0\nEoiJaPwYvC+YVKcxPTLExpJhWTrkqbcAijxzUt78HJSF7zn1AER/2PAx2mAj\nTns6ANdDoQyybxKUmLhZtkunN40A4aS3AFyVujYQvc3I+JGADt11pVkrwk8M\nlHMs9OmKZeKYnVuxRvi+U0bCsWDLfcH++6uYHP3LPmm7Zieb3Nyc9bA5d+b2\nodkeWAWj/Ko70B7IGv9+fuIY44/DyXu9TP66BoSvpZy1Cdd1nQOo//3sDkI7\nHxcXAJGq43TyegTXunKviH81cWfAXpnsH+RrlKN89Y+hDQedhDjBVyzJeAjF\nBxhTgg+6NkyNkYFv0pU4S9XVcHTfkQEat33/7cPQOrne85KO9NtK5tIPqtZU\nS6TcnBejU4LLRhc0rT3EI31Zv/iI+BmnrA+5IzqkF6o6O7sFYkS4FC5XqB6O\nVpZOOSRYKoq6/Bo/dLTBubKkvC8wLm21TdAeQGJeSfRKuU8rtqDrFof0kGgD\nynKGbZzwodY4DkVr3VADQ14YHeHJ9s+ONpIvuDqlDNW20YWzp4Z7NYfBynsW\n7CtEMhc2j2Zj1zq9HCXm26BfwNC6CN/s7SecZwP4rleDjLJGeJTi/LL2KLOn\nFfprsh7ik6HrY56ceIH04xUairvfm16U8XEwQ7QyqDWmz/6TQQodlIxjsJpl\nJBmK\r\n=AvtK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.6167cd075.0_1590092456522_0.3275201742295597","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/typography","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae7a578e7c165ad103a5626c60bc839e337b7805","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.863ac1b0f.0.tgz","fileCount":20,"integrity":"sha512-rtNDXlvfeK2SU4U+wYxuMy1EK6FeULye8ElTAOrEu9S7yx891f4pZHlFPmZhHHjcfItdzgd3Sd4vY2TFVHuhkw==","signatures":[{"sig":"MEQCIE9O4jO4Aoevi2OBVwwfXlpWFuCrF6NTcqPVqS4qA/NvAiBASMSYhnclzPAYxRW+n5Xp/nsToBw76jGUiDjGCf61oQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvACRA9TVsSAnZWagAAfzQQAKDb/SS/c0SsUKZHbRv6\nJxsuno1BykRC+pmRVLawfd5atTpxZu1GpfkAKYj5Qah7BOCa+JR3Zoc5F2xM\n8eszpd4Cqn8rt9+1TEiowIQv+eHZFU/mragkBKXS/h3fLJS58dJju4a6Cbgy\nAtYdV88HpGUniSKmmXQkJLCA/dpPNu8Qq2sXEgkYmWIzlulKSCtjEPdrjT6I\nSu9Hn8qaIuBvMACjYApnJ+l267TtWXPQvhxQjC+k0XiTg31NKjg8xyTrabDx\nCdhzkDKgBaiePOoF8iluSZ4JYXPCdPIP9JNRxy0+o02Y1jx6lA2Uqt6tATxl\nmBrJLSiALUHiFjUYGXYSK3RDZ127jyuNoTSl8yZeE9Eg+n2lpsz1WbZbXm8l\nNijx9qHkQhYtfLGDYWD2A+V0ZG16Rwp+cy4ovED0SMEYadqIYMxhkY/5SvXz\nC9Q0+IrRqZFDsIf5U85RjWJUyuB6Sl/qvp0fhiYUEcK+R3sFb+3GpP9E0fXp\nSxhnQcyWF0Qj0X404usrGAfavDvTfj0rE+p6MiyEFIf3H2BpzucH4BnZRLIO\nb7uqfB84kQ1sfVb4Upic865MK1fyd90z5kJsfkKlQO8agz9l/ywVRiUQbEFB\nUggD+wD6zB66qn+UkvWs0ahx9kmCth0mRpLOurfen5E+Pb9cndzKxGP1qA9C\nDhNH\r\n=Ro0E\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.863ac1b0f.0_1590094784142_0.14222468041641445","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/typography","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18eb46adb8a4bda6702b350b9cc0e5866245aa3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d30a214ac.0.tgz","fileCount":20,"integrity":"sha512-Uovj69SXpvdHLBB9JBLEkM6qzd4LQDUM3eARlP8OXUYwMy2tGE2JafiGHWWU5Ifm6YdGzb3Uy4MlgIfrqghioA==","signatures":[{"sig":"MEYCIQD6SDCRQ44RZaQUPNNUe6JctnYIJ0XAAsVaK9QTgk4gfwIhAMBmjDgazlcHVb0Zfjvcd/TPbQy387Lxx//UFPqj4q/v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuy1CRA9TVsSAnZWagAAGo8P/28cnZDDYE+jo58I5tjP\noSYq4PLO+mQIUgzz6D8VR/0NrSAKxbuMpL3GfIB2ZYd59n06QvDMcCDzMTvT\nNJMlWppEoztK+PG95uc0h6d5AHuk4c7z1/q+QXgSIWd2H79IyNN/m2QQhUza\nMy+j1HSiIDFXpxU6BYW/Yo1s0AptUeZSMPbfh07xKSEfYFNM2ZlV7bB26d79\nJXxmlBC7JvQf7MHGula8v/+BoWP3NJRTfUH9iNyjqJRdHpBJssz0YHGN80t5\nIu1GHl3gkL8JEduOfSBn2nmlrE1sej/MfeB1dGoEbamTnAmTlFsgEonRObhx\nseSD78Sm/zjd66kXhgzWuA14/zjPVjL+1K0WTTV+WXmYZ0GbcqAGVUFr2y85\nCiA6KQ87bsbamGjJ8nxclcT94hO6DGiOCGj8XZTQXU8TlrRJ9y4ZeZdYMfnk\nz22HVyjPUQslVgELQs3dqdW8ri9FF2FNcgFn1wz7QuQcYXNuxM4lLppwz8SJ\nDjPSO0OgEQbOEPXLmrGVrD3lBhbdnvEF3mkCIx/jDC0WAnfbumosh966S4LY\ng9E/MyVPZS3LKjrCPGB6D8AH8MO/C8IeqHYGAbNsSwjrfWsQ36OdFEbi3ILv\nNOHqCEWM4TU4/dax7ogt9fF/uwrhXrLFYrm3SUZlDoPh4CEIespcaqhPaB9C\nL8vv\r\n=C754\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d30a214ac.0_1590095028835_0.3434189790281572","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/typography","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"581dfbca8996c4f2d9e5e43e2ed7dfee69f3a688","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.62abbc8d7.0.tgz","fileCount":20,"integrity":"sha512-rDyMYsu7vIFWdj/4srUm5X+mzYCy+BL+S1QG5qteff1aEqSWbR5DMNiVUQMmFUbv1binhopb3L9HslA3PYwZBw==","signatures":[{"sig":"MEQCIFxZpDRaLEGJlzRNGWzkDKdhLw+35nuvC24FZlZCYyY6AiAFOjUvIOAzRRfJ08azNCWczRinCvZBTBFL2/liiI3e0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKACRA9TVsSAnZWagAAf6sP/3FkqnEm84J9Bgq6t1Cj\nNgQjwHZ/N1Hefo16YawmeyEqHyHenRXL22eIi7guJn3bvaDvsLuOL7ZgjPTr\nF9PfU3pmFbIy47vjHeAxRYNYJHzbG+g4QcBsSpVQKuxstTtFN5sqEjw5w/Uz\nGBjAqVkk1RgZufzyNb4pXHSHu+rEb+VwxE12esasDOTSB5ZRhBvNcDSWaX1Y\nyIoD+3jOwrq+zJQ23J/E6fv441ah8AHWsPtNFZz0kqPE6hn+H4T6/IKK03Np\nB1vhV5H5kgEWG26rBAki5PuK+3XwGwO+H7S8Zt9W+7f7DmY59iS+ueHg6x1T\nEV6lNWYIY/SOrqCsQ/WvVo79BOGsqC5ifPaBonpvZa5c1/Hq8a8Iok3IHYVv\nT1ytX4E399npeO0O0Hn3GvkOXCJNcqHkpSPJOBVDr8lgO0tg+kftYpTzrlVU\nrxj7Cc6cNrgcouC/bL0yWQAGtfys/Vj9839hNy5OoxNwolI+m2i7NQBepTj9\nOzZB0H8Njgvpmgfd0MFMMLFb+3MDexz3+OzFFIlMc/BKQvB/rZxKnznrq3sz\n7rmnWDyMNPACdI4XVMVL/ELJZyvcWgvmD3Vh0mZCTdeTd/MsL8iGJ0/e4B6p\ndJVyIdvB2cCeZGTNoZdpVnUu7c6LghkfoxyQMXv5uzLoH03KJnhgKO5Zavpg\nyMKj\r\n=W4zU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.62abbc8d7.0_1590096511454_0.3857153582468531","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/typography","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"910c04930e55ba07d02d8508d8c9a1f820c27f9b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.49bf31d5c.0.tgz","fileCount":20,"integrity":"sha512-VU+mAxnZ+yuSYuGzSHrUnUdmYrl7H5CvK+tPMWSps7uFzyjc75Jd3+mhvHJU7h2a4gtYN+OvYTvffilDGFXqRw==","signatures":[{"sig":"MEQCIBlfTVa4XOb7+WLF7AjV2I3YL73pEdVqT0w+JSU1ZY8JAiBURuz1Kkh9C2f6GkZPV3PNhg+i6Xh4oztVdOePZTrBcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNICRA9TVsSAnZWagAAGqgP/RLfdtcz3dJ0EO5iSJUX\nUdf669IlmmSQAqAGW7KJ0GQrswKN3CXIeGmZW866/SUWWopLiueErZuuLaaQ\nkHePrESwbwGID6cA/9FTUiRpWPrulKgSU0vhAuezCQqhEhRnBdeo+5/HW9dU\nZB51TXtQCevWWRP7cjLskEnsIZhfOsxcjEskioOCyQV3JcDiapnVO//XB+Wd\nMNtTUFI6Itl2maWEYAlHfWKBT7hs7jHtRZED0RtFAi5tVOa7+0YwIwGy/p/0\nuGL8P9m1byaO7Ov3HnTH5uZsWETsqEyUsrNUklEtfGqCnuMEvD3qApLxjdh+\npuGcstFFYMn/++NjstPuvKr35P72XRkENxkGOyapEzfVnB/m+5sSZvWv/FBU\nDcKNbli4O2sON3wLBLNcQVDa1DPwm8qtvDZZ2U3r14QFvaxlX6YdFMPpL9L9\n9EkOJGfIJs/qhWJzi3vPEsk3Zj/697drKWXqZZvVa6DTrsmWUcqlZmi3QaIl\nVhrfIePQi0GWN99iBQ1a5yXXJJkxbGUm/+W54sn64HCgnTzqudJPj6+HB0ir\nOip6dKBQmqrhGc4yAsHucDC+StpABdraPi/dFTlXjCFwl9oOZxIGHAOErEQQ\nsE3dhqnnUPRHycWPCQ2vMYAL+OWSpNiqpajCARkcqM5Siwg8NYSHUT+ctk3F\nWSto\r\n=xKVQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.49bf31d5c.0_1590096711794_0.055655600614610945","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/typography","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c008df21b18df9e3f2401024ecca05b002c53562","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8e17857d0.0.tgz","fileCount":20,"integrity":"sha512-u8u6ZCT5UcIRBf8tek53zvzbxyZ4B1wxTc387Q6YM2APIKMXJoZJast8QJy6hNsbsQYUjiZBsKatAwH+bA3HTg==","signatures":[{"sig":"MEUCIQCzjdV0SgVVwDmTvo2qrcC8UeiwwnpQdxgY77ttYoDyLgIgYf3uawIbGlpfIxwD5mBCEvUepkT0D7uNbJeNyf7e5jE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOCCRA9TVsSAnZWagAAz5cP/RYWpmVSKo7r4wVAoY4+\n3UsL1s1PkeH98ggY1LZ8+O3MneZQbHNMjbMRVIWTzxPir+SgaoP78CVHB1eh\nmB17AXapWxzSqXismzFJ8yqiMlysYkXAjSi4RANMxmo/Ne96waCCYBbGqICC\nwu/4Gw0Sz+Wny8OPa101e/qL2EJYWoMGu9r1280Yri8XFNyI9Il3vyS5WCJc\n1kQ0/kfvF4qo16xwbpefPcQbWXpG8LeGcx9QpmY783XyAQrdjjRQp5ZFbyD9\niujcyM192kfPB1X13kf9y01Nqr6YViqs/Gm/eVZRnMdksRqTOkCu65wdIYWI\nXGKdy5n1Ov3NBKqYPq5oGPiW982psVJqGK5SUfrxDd6U6ZENpHF/HnuBFESk\nqsMNU4XSwYyb2P160C3EBkM+L4f+JZCotUvHIf5v5ulNCrA4RwbK6l40czu1\n7EUa8TMGPGvG8k1+ahdKwAmZiPLva/CYVfB/93OcS8U4SAPl62WwemKktNY7\nXqL+fYa+Ld+PGMVCunq+ZJJ+sTPqMCVOQtLHayAj9baDfzY574t/a0xb6CBh\nHa+EWeXbtX0qF+G+4SO92f6YZrjpAi9dKiS+1GNQfxp9NtbLpPRj6Dv6IF3/\nvBe7U6QKzXm0mXIppyofKnm6pCoZVZ3CKnuxapbb4zEOYT98+VkwvTM2ErTA\nv1Cl\r\n=ICEu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8e17857d0.0_1590096769583_0.7753211306153245","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/typography","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.c113fc942.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66fafec55dd0321401a9f4bb412402a7abe09fae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.c113fc942.0.tgz","fileCount":20,"integrity":"sha512-u04omucDCeFaleUMkhK+Yh7l0HWu3QWTwZJH50xuR9jjgY6wKVevNX5L830Xf1JQQGSyYoy3tAaOxrxpPolfpg==","signatures":[{"sig":"MEUCIGcmhc8nbwBd0pUzc7x1AsGf43gL/rmx8/IIB73JsmppAiEA/fX7hwfjRMjnTG0o4+Ii+aap5/mukHo7HPPt3JcD1O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwS5CRA9TVsSAnZWagAAA0YQAJ1/kfMcE8f0IfYWi+7i\nJ9eMY9nQZFxrX61GaWfo/GtnPs9z8r92BVdARZK3CbLAJjqnX38q5YDsTtYB\nfmkbyF33dfZZZOgnpab8VQlzXJs+ACxeY/Q0jctesNcE50OtoN0D92qebuQQ\n+kPMTQMD5jxfxQXOiwukH5wYvInRvyBjihW7G8V/bK9zGHbMIXhVieozm4Fk\nYXzdkDHnjl1w7M+wUIgXynknurO14WpAGhDo26c/Y6D44tphzTh2ovdqDEw9\n9VLHP0oq1izvSNv016UYWwdqSK8SDIVynV2njAeqd1rd75MrkbdaDFa0815e\nFymVaSpnUwHMFOkFMNeOTfKP0Oni7YcAscKWI5Nvr3FdplwN5athNHaCrgnX\nXLmCDuuN9YI59TH3JFnZ0HCkIZ3DeFC6ueoHlHaY4ZE+QGGuI8vilKhEi39v\nE5coewxaFlOzpebxoo2C96xjMadoQnuAxbZB1bi5JFI9iZvgGuzQ790EMgLE\nlLcRonhHwiXMDR4n+0ROrYRttvSjrVSaeq9I1Nxfn+KLUblDhM32UB29DclK\nhtPQIzolicdoaXa2j4xUCsJJC4g8EUUptIm1vkr2KWHGrAJ9Pu6mjEs0i2eh\n7xrhAFkZm5A/hrtBqyQjr9TkZIQVd5OHg+JtNgBL3pR7j+yeNWoS2k0Zzla2\nm0F1\r\n=w40M\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.c113fc942.0_1590101177045_0.2969724458627969","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/typography","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.912d9021d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ed3575d427949e9ec323e57676f0c8d8bececd4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.912d9021d.0.tgz","fileCount":20,"integrity":"sha512-Q9uVtyS81bVkFP8CiCg1F60pSjT9YSwGqLyfFKW6nzjMlJtFFDMHpds5ohdJYCk0tKE9xrOdxkzJP9/EZASsJw==","signatures":[{"sig":"MEYCIQD/UIWjtqkYBKD/53YI08A2ImUcENvJzUInA0SphX8APwIhAI1iwZkbNeDXU5/Uohv3m+/PGuCmrGawfYTkbXXINX9E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWO3CRA9TVsSAnZWagAAubcP/3DI+/0DFxJVIFrQuUbi\nEB4T026Q9R0nKkeQEsN90S6wl2FERssKKN4hp6nURXLH/6y42Icf8rRdSGwe\n9buyDAOxQnbHPWQXJzEGHF1tga7tQUoCpuDq4c3kj5I0bICLPsJtSnYoy6iC\nmICA7iQbNb8ngGs2fcno7eKKNqafBksCqRx5/0YVW6kcJdRfLI1JRS5v4o9E\n7hoTINGB/VT2WnUgDZhdsubjCnBbjZOzqE1kOXhn82x95XJvTkHwa3Jm+r8r\nTBsnWzcRK5/UR1/B7Iajauh3crPaEkKakGJB8T9HD1trQ7CmSVAHxhGWrkvk\nNVqGKVnndcN9AuhLUqoJAoySkbMmzq4mO6apMWmD2IUsg4mmsmiKvblDXhVQ\ndN38yid6miNU24Hzm2jMWiuWEji3aWR3OzA8KuQyyzCbhz9n9JvdRqHfvocU\nnTACD50DIY1hrXm0NgCbwfNkA1nJRDi7YtSdrLVz/uAGPgK72FL7PAP0JLJM\nV2eE4CibBkmhJhNDhZcJIAAW8tHWnrtkPDlLeY5A5dnE4uNx+eC1s0XA8A75\n5HcJbMJsxQgYaquchE0wRtIM6PIWpkBQaG4S5VlVhXB5BTNEhHX5GJVjexTy\nHGXVo0aGEN3yzXpaOGNSTPqFlJ4ktsSLiRkokccJ8OjuDcQHMyxEI17HMQSw\nLLZ7\r\n=PXuP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.912d9021d.0_1590518711224_0.1773910686357092","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/typography","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.68a2af131.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16feb85cdf133536601bfeab7bcfceeb02378dcd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.68a2af131.0.tgz","fileCount":20,"integrity":"sha512-UzBPTmoeFeBON8/VPE/rvKYdWTL3BtqsS1xpfdludE6n3ysObV1E243S33P5sli31KUookcD66P9YLf5jjjQmg==","signatures":[{"sig":"MEYCIQDHdHGTT+09FFS6QuYt4AOtQLqR1mRwj+SBgd5M5fp5EAIhAKJST3LeR4KRNGRFeqgI03JyWUzK9VY7thOnszlzb94I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWjvCRA9TVsSAnZWagAAVKcP/1rtjW/KghrAmrZZlys4\nPTMbq5dWIJlpKkKKxXunwLQutAFOhLCtcujKkp3DhSWM9u1qDcIgUhSFwILI\npV0YoSMXw7ORckcQJ5gYUDKBBHvSM9+beEvdNpeTkk34KT2Tg7U8VKYKVX4d\n5jdNP+XdRMB/PLjY/2aHG9PlIHY8ZbjSL4ZuPbPPEqQfkPZWJQrmzEfZlbS1\nQBiyBn1IbEY9HJwkE5HKw6J390lOJJBHBHOM+bCQU5hEvnCAL2mTy2JhYF+4\ncXyTcXULqrBOsdiofa9we6h+HND0tVxFwz6Qz6017OPZi040NdZzbUu5EfVh\nAVyFpwxs6ETjXkSYnYqjVvD6hEGVsHwDueU35LCvtJ7O7KoxfBGdukfmxpux\ngHOLQ4eJWLefbn9JUKjtfDweaJrShpORMlcySYMIHjpRJlb1Qjy/tjC1QK95\nuUYIUwLP3NQKSPVBVd+AiwXG2mjihrwSu0jiZ0QZUWRhlhozOyQVGyWA0mm0\n9sPvqSHeyYI2quMKJsUOd1VHaTbjuWHacl0Zo+ru3yjN+LRtcERjtt9jLe93\ncIkyl9j/4UHBHBLBM202OZwXv/qSg8Ck/KibrUwhtlKKlrRex6FAuX3gsEGa\n/ajk3kIuiXtf3pvugtBRQlcvGc0osS3TE5291ki8s85yoK9ycfRK2pYOPv7z\nTKGj\r\n=BRSe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.68a2af131.0_1590520044213_0.7035930297829827","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/typography","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.01de07011.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"938297976d7158fc70ff3dc5179a368c0e73199d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.01de07011.0.tgz","fileCount":20,"integrity":"sha512-PxGJqtAj/xWUuLrU4q/15cEbK5sAMfPBdSNIL9sziCazVOVBMmGDKzj9YojIFl3bj4fFG3JQHne5wReKPmIchw==","signatures":[{"sig":"MEUCIEH/vzAi7ORNmgA+XKWURW2gIupEgg/EihmdXY4024qxAiEAsBDbK4r2RD/1p51ndVcNetaJlcFtSi7LqoSjqC7PQko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXN/CRA9TVsSAnZWagAAmoAP/iAGyTNXw3eqOWQzA8ZI\nOF5oK+49N24rsTDDHQv2F9RVJ3azELpuTn/SSpk+4cXufMyiRdTdvS5RYXft\nZgkrZsAZlXj82OmTArYQ1c/Co7SzZJO+aY1KnB8fXKZis9gmHfMIuqCe7LxE\n9PSxXEn7+/tKNau2uSNVWF5XrfVi+pxelA+AXmdVu4Mm/dctCi9lmuwPs+VR\nVt8lMMRHs2l3Kp6rr+403FNZlJAaZgAu4JOV9crhZ5ejbur3BNjRvZUOhdTz\niknAtXktDYbJgHWdTulCRSN3QQRvue/CcGoJIaZ/NDxRRQjGJlcOsXFRjtPp\nNEzY/MnmFziFxUh4ojlOdGUSKguhDhYDlJUP5CSmSC4KeuDPQq0dpp0cpE2v\ncGWzd21I12BtCKvbM3nHS6lf3xiINCJO/nPJIdXwKSfkSNlDGXdkWpReFtdX\njxGGW4o2dxIPIscGmU6BA4mV8/2goF8Iyyn1t9oujfvLFx8Mb5mhaSKsb29Z\njeA7sFXaniBkJEH9jHMmo4pKGn5PNd8De06k/uB1eXiELkELWhKlbeQT2J5O\n2AA9RgUcsvY4gHaK+6VXAGjhFbdrNM1VxZ9E5hPa8nZC55c32rfJVbT1wl+7\nPZRnuK6Vq+HKLH4eAGaRAqcCBsVCGG5ucZPhqA44L1xbdRfRVDBACQEw68mf\npVoa\r\n=efcJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.01de07011.0_1590522751153_0.10541615844272112","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/typography","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"438162b9a8e819209e33ddd21bda50ea13357565","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.51d4535fe.0.tgz","fileCount":20,"integrity":"sha512-FBm2sKJ7rg3V4xwloSyRDzbSj11+SZpAEEnsLlW8q6g5b3p61pOCGBA7J3G90vqmOWQt7AGyH/daZYdEzpCOUQ==","signatures":[{"sig":"MEUCIDk0JECQ47cqCQZX/n8yQ5Ip8rsIh0ZsvbDB34yVYScsAiEA3Qimj4bLaTPxRMwZHE8l0ApGGgN7DSR8t4sYmYEbxEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYt8CRA9TVsSAnZWagAAINEP+weUQ4lh+zudO7H07z2T\n70otA68O6FRl0fpg0hciDVWIA5F0iWliRHxTqW9vj6bJwJIZGtCh174tD6K5\n/pq0566sH8d4WJ7H8QrhYOjz49eikLHGU8lOepXBl0tkdZFC5JzabKo1sl3c\nRMMdKNvMptPudTSzqFTFGNUJp309c7jn/5bUChvtkVLTu+rtsehuQiEUwQnn\noe36e5Pv/s5bz0dIPc3TbBN7ggIfvmw71L2oiBhV6O+cGTU1S2/fWbySQ7HJ\neGbQeDNNpeWxFkOXbUF97EkuG5Cmm10mIDZAAeOlscAW6tqtzMzJafWWkCxU\nRw1wr0zYgu2TOml8N4mI36l948MK5uOfUh2r5dRkj6yFetiXQvcGSXYD6M5k\n4Qbv227UYw8cZwXorPBqAy5blwKznV8cHDMSB87dIaAqysc0+POwxQJn60c5\nuddsqGCW6DE71TBkOS7dS8gnBDVdvLh+bGv7knMPpetnc73f9P0zdC1QKfZW\nsuidbdIM05IuMqZXXFOoKp4ZEh/9UjOPWIyH1bdKrVRLzQ9tT2vRpROhMWCb\naFHGqzACNU/rsJMpSlsDZQFF+qJBtcnZQdqrIu+QwUgp7BXFeYiOIOUVr+La\n31KmQr30nuoIcpnAVcQfR5G1FAI+4zgPJslA2D/vgKc1Yu7mm68OyHiVWJ20\no3tt\r\n=37JF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.51d4535fe.0_1590528892227_0.8761350607100535","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/typography","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"152d74f9df6e10e724f5e9652d7fefc89f89599a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b86d826b7.0.tgz","fileCount":20,"integrity":"sha512-EgLriwXdqgXorksyt57N2rJLJCrkqtQEvTd1Qe1D2S1eyULmhwpu4p6rkUDxaGrH9J7ZICms2QYgAaF2LLV2Zg==","signatures":[{"sig":"MEUCIHBQ1aTCF6NoLbKU7hjlTzKZrxBOS3D4KkUHimzIk43HAiEArFhu/5cnr8cR6IAqdmzzE3OqNComKHqKIthRZ4IGAF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSRCRA9TVsSAnZWagAAVAYP/3QYMdixWIvhqx7wEokn\nMdIdAygNTrk8FcsfbWUQ+qYurgli8XKZ/UnLR1dOIkRHGQU5HSBVYkY1YFku\nlSvErKnyZxkOctdE+g6ppNda0lhm9VaovQjJGBWGjkiZC79VAIW0NPNyBBPJ\njc9bngHfikbu+yJEDsgDydOvBfNwsT96bfrJ2OrY9rioOwZHgAqpRERFlvfo\nwrummq185cotMBDU0e19fbpOaNswlP7hQRMqx0Fy8kNXwRE1zwM/DADkRZQ0\nrS3tZIPqt5VRcbME/jZ/2oL9h9l9+tvBBGZTabbwY6a2O+k9qpGA1AU6QkGL\n+g8WdwgwgHWu8eg7M2JQ+Nm494rl0HmlEp5AbEUAmmvLV/6tktEhQvq+hwnd\nnBhPpsLoWCcNbCeMFW1oxWygNS5uezBuUl6VDg5eG/TDhAFMKO9xN2pEvXyl\ncOLw/nDKTuPhMmdBKi2yydnOFgq90HfMIguiXS5HbZWXZP0vSMmlfTFUOVtd\njqNXRuoRBQ0mwr3bq95wbmHrXzHogFbB0qBw7nh49uU7wloubrjuSxWCVodH\nkXevkSS30MiG1RaFT8y95Tq/rP4HxoqWLLc8vK9H5a2f908MToT8tVZG+TIr\nS9+WvOkRYeuXlx1bNvw8oAiwcaABVTbTJ6POkINhCQLJX/IHZPDzY6DF6K06\n/A+s\r\n=523X\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b86d826b7.0_1590531216692_0.729160430655478","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/typography","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cff5d19d8f66c48de138c5dd44b3b8ec71c03813","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d91794c7e.0.tgz","fileCount":20,"integrity":"sha512-zkdPgtrRoybuhXjAw/MNY5GW16JPOm0FI+HBSiaTxLtpHTCtCBluSRW5SStNTFP3clu2A8Rq1sURu+405uqebg==","signatures":[{"sig":"MEUCIQCkgVWtjUkraVfeyW8KYyBvuHDgm9jSc4YBW3HtK//X7QIgPfRcE7KLWLELbsjv6shK3bXRprHmcfPRN5gNdnA38OQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxKCRA9TVsSAnZWagAAI5EP/jo35PtFnDoEGn85C/Vu\nRe33cnRbigwqIez6jBGXNYXzjBUAdb9LIC6DtfqsABAYtut8DQAszWo6d+H6\ngcQ+sJ5hCx1NGLjYeGlwot+GifZ6kT+evBrRXreFsWwG3h3fDEDYgunjjcKM\nRuFztv1OyyOrHZFaK9TDRELoXk7eI0sJEMr6e605H3N6rKe50JDLcKpGLw5X\nJGGAE+9vqazcod/qe5RxeQtjNR07iJof78eHlPUplmaMsk5cd1Xf74pGRz9x\nMkSGJ25cu8ahmXAIipDNn5NUZfBsIdt9fdUYxpul64Y1VSHa43/fyC5rIGnF\nwA8R7C20AYFY2DvsyyJzfjchaJJNbH5ugRy3kcnJyL9zgwiwyflF+RYEPkVT\niP01MUFALmTThtmueg/qvtY+KYzT1UDX0AIvpOf4oeYOkQLfWmsjTbkBRrx2\nEcu48e9jOui99zwoALmJNnYXqzRzLPFV1XkORyoTZ4rntfSoIpWdKZVWdgRj\nxlYTAMk3O4qJBp8QPCoYxGNRM2qkv1uVUP+5f+KFzRr6I46/1xbGBHRh4Jph\n1lm9IyuaJSksovrHQM5Tc04ruc46w6mtRWuiRh1Vu5viFojVC7sAeRUhYMwf\nHXY4TfrssqSGTONf63PSU+JqgmoSB0R8ggwu+L3mQIAgudcpcxP3JVeYDCSl\nz73b\r\n=1h40\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d91794c7e.0_1590537289675_0.47526242185491263","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/typography","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"862a88b8dbef08c38ed6280c06b558fb5880fbbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8c6d7e076.0.tgz","fileCount":20,"integrity":"sha512-9lSgKLEMIsJkj/VuzqkTJgLXZzTP+1AdbN3d4m6h58oeoWzsX1uF7Lu2+96lO8dPwW2VUcNhxKPRMi7+m46UeA==","signatures":[{"sig":"MEQCIGAwPAZR/oEhSlY7naVrvwt0wM9F/FQt7aJdnfiXzPIFAiBKQZHbsNjJ2p3URmFZSNjNbDEvjCAGYFEUgYBS2zcEvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriBCRA9TVsSAnZWagAAHaMP/jzBRTT2R9/g9AcTKEHo\nJNyRH1oiBF1zcADSqC+Di2d/42p9edcX78TEUMamxwA8rm9Nr/kjgtIOjXwL\nbdP6zRf0oqQTaniScjeN90ZUeLF6MkSHfYyw+lgAJZYVNMdfc1WOI8x4F6aU\nuMlfWFG33fAyCmPS1pfKGqdEVT35+s06EQQQp+1MIvrJP5JPbJOol5Oj2Wqk\n91fKlf8t9trQYSksp9BrKD25UtVXm67O6vUPMc2kgwf3iFaVTaHw0wcwl7ge\nRjZwCdxrnDkF/kL3Blc8kxBrP0aNPEYp/hJMD2AYp7Vf/6iy/H69PB7Pktfv\nevQhgsv8Hjwt5Aeqdi6piUT2lX6acS3bp+PGXIi6B65xWO/4K2Nyje1sJLHb\ni2R1ztdNUwXOpCI5ZKYmWZCaeZEnhRPx9B3w2kRbEw7Bs6p5Mz35IycSnXuS\n+0A2SXDL/ro24vO5Vb7a0cxXLFRhH5PY/ZCWxIGUvQsr0PsOcCVTEINOTnkS\nz/piV/oDhvdDikic9PLgRxGAyxVEGPJo2DQpv3uDK457OvjfHaoBvKakw5Q5\nujqk8blsCS/iWKEqJlR+7aSQTIGC551DOteJDFGTvxtkECYFbrfGPW36SbcB\nR7tAhnc6ABh4MMHsWGBQXK65tmQn6640oLhCLA5+FdvL6L/etTHUHYGo0Pov\nfary\r\n=jDav\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8c6d7e076.0_1590605953411_0.3388194075810327","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/typography","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b587cf7f17fcd0e86f9379be665003967548381","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.5b5f62f93.0.tgz","fileCount":20,"integrity":"sha512-poj/bU1i15gTD/oB9wTEj55N4x24yGwL+KHWYoE8yBQX/kjDOpdyi3XqC+z1LWoVx7flX+YWUmwGSUZSdUpclA==","signatures":[{"sig":"MEUCIFIhsM68VKfzdBRBXlAO/eDpWDl3+YbZMWrVR2/ZP7GzAiEA3gS4VPDumu6W8Edbob3ZxjxQW2f4Lrs7ByFBaG72WTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrx+CRA9TVsSAnZWagAAgZoP/ii0salYxfCHxBz7p4di\nFNPyCew4vicTLJXiwiw2uBlOFXQpfjTC2rsc82IIMHXJX9CpDsJg+IGuNj9G\nWviYSPz2Kudw5xvZaUcUEMZznS0YB1lw8/p0TTJ8F8D+whsGR4bKnAtWJ1Uy\n3SWAWYmD3MSb1rSeInOjLQpmWFnHnPW15m7oqIA3ecmNzgVZYcXjfZelN8wE\n75GNnbX09mVTc4XQmkPT0VpD/nuKSATJZTmwzHj4Au/1GkLG2/iAVlf+o+ZF\n8FkihWDKANSEZfMV84j0FGHoFhyOk8klCMUYsMWOztiQkXNp/uaUmruZ5GFV\nk10KHskXwwvqA8OyZYYAnw08woWt6WHhDrvehmksyaa4Kie7D8QjCUAv3saz\nir5WcL0wqbvVrIW1TXLniozWvAhpne7nG+EOTVk8eJO2PSUjocuR2D5sCiSK\nGPRo+JzF6zEIIiXeqfGsBtJ+p5UNlD9r+LsxpmqFfpuia3Yxxux4/rH5Wdn4\noZHAXZDgbRXZW6BoXDTwAs8zwHEagE6oUvMnPjv3B+fZv7VGt0gu18TE3kWD\nZNYEFaPgRAakC27YqBBkzQNn/glOxGm+CWgnqBNHfSVlwquEUo/PcwugA38O\nJbChTGlWc/lEykreJwc1Qg/ETLXjcon76njvDOGxR1GUT3cwtCFGZjIn2Jvm\nAwo3\r\n=LPzI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.5b5f62f93.0_1590606974279_0.3887818621778967","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/typography","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0665ce3f6df62458da135b03fe2b8acbcee21b88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d9972abb1.0.tgz","fileCount":20,"integrity":"sha512-lTMHj8d3/a5ZgrXO62qIuYJOpzcVPsmrG77dSinTLEx6jcDTRtEZ5TlwjYPCewCtLJhyx9bA78HzgnhVBcifpg==","signatures":[{"sig":"MEUCIQC9Z2jW0Mint2Pil5QflBQnQZq+Ofl26J6LO0/DfAWueQIgFowbVSAuPa+ato96qBzJAtylfwY7Noe9XZ3mprbToUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsudCRA9TVsSAnZWagAAwbcP/iEqeWfC0T3jnTGCPBPY\nVRrElA8Np2MbjAi/8s7L6eApqM/PLR7uuuZkFSVePQt88O7IOzxdxO/ypYhZ\n672UbUlz8Vz278EVAlrxTcJyTHwRS7XRTkGYO4oWIvO69xbluQZvEf8t0cU1\n8y8EpmJQyAG9ClmOEjyNl2qyTktzCWTf3OrjBuo55EpDbgz4Sj3HkK+nHnhM\nqbT+pdZt39/Zd3liEVHVrWKg2VOa9tpgg3vctidjy4pzXrCSwwfXSxDxpJNr\nDwba+aJUGJizoCJ2lapDrjifUJ0ta1qN3qh7MvqgkZ1dufwqnv3yuNeSEjl4\n9dvEtR8ZREGACpZDjrOL4i4vnGRKDV331zkB3CqdLq3gs8dKQ2bNEaEojPc/\nvo8hIUcO0DpDceQ5vpXz02YuGASmkal94xY+r+zjZWXtmOLAq021uBOH1vF6\ndccwgztdFMwqulefcZ+j97/q3VIM5ewSNDLPkUHqNJDJQFQOIKXZ2RzKEPmL\niOAASUjtHqmTvAIOTyFMM+AA0ySo2W8qH63Ew2NP+SJLjvv+W3xYwFzat8km\nBwz9nx7yHbLxydwpw1oxdOGQuLS/JCh/G+SrfcixkBBcIrQQta47IzKO36us\n97XDvIEGrD5vks/hLBYrZVA2pFzfQDSlmqbJwwGFnNKYjd5L/UeboF/KuhMl\noe3P\r\n=mGn6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d9972abb1.0_1590610845215_0.4220788115410643","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/typography","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40c425a95232655106ff116e4ba5f0f1bca8059f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.6556eda2b.0.tgz","fileCount":20,"integrity":"sha512-VjPvmYIVXVEX3ik6h9YTM2JraNeTqbOUOrOXz5ay1mpnVWH41E0b3Lgy3a+HC7AJozo4fOoynOmQbshOZhYWmg==","signatures":[{"sig":"MEYCIQD7E7YAecOrGxrxYHipJ/ozs1iLU+KjDtz7Gt5Zm1+ZbwIhAPC/qaTm+yIBYJ8lyfrOo3uGUDg3Qp5+Amo306CQ9cTw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3ACRA9TVsSAnZWagAAYnwP/1qac/vSLbWdkuRM4FJS\nMc9750bXldxRWPtfUad847jrTs3mFZz6VqOc1kr1b66JBOgIkVIRvxG5EIRt\nIs3/7TCIcWdmN+VUsZ9LhqD4wn2C9q1JVnuO2bOGoBqK5PEFkkheFK8EDhcL\nGAU9J1Cu4ebLeiFyU2q56WxENMKPMdTtBECGREpcue57q/3CJKBeS8Rk5MqZ\nzWVZQcDI6KZ553c78ndzmxaA8wEcJ2C05zmZdPe7rtADzdurAStO6VLtqVKT\ngKdp/8jKivufOCZTBAvySvu59ueQ10iaakVvvPsLXcEDD6BNsLbMD63n79zj\ng1qwA9/34HsCAgq8DNwbY1bY5eQ0E81kpSbtW/i5RXb8Lj8LfBwUL7FTl0kZ\nl4bCIeoj3N7HsNAYYpJqiqUXHcNf6tEUKwbyZcW0ACxuTTA/7IkCocmPROWI\nyiienHcWGAXT0PBjt9gmkmbReprvXS3KXq5+3DCrbNdnsMvXqQ1eIa0mDYH7\n7CrDdsNcdAIVvmFNctRjNEBe/a6Rjcnuh6RWqe5ffvTC6FMRERULBoRqp9EL\nOjObUkAVqq03luXbb7oS/KiiYJFIXkcU681fv4tfJMSTLlnVLantBGMMWC2N\nQZySVLRUnWoIDJkP8ZErPZ1qCKKicebBk+qSZvtljbT2TuxoReQrPsCdEdQz\nwuOH\r\n=n3jb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.6556eda2b.0_1590611391874_0.9311146693699395","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/typography","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.32aa23641.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10b06976f2cd08d8ab1e29b7c8ca2f838ac1badb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.32aa23641.0.tgz","fileCount":20,"integrity":"sha512-Epfl2QPv9C1eaBMeGm3Df+J0VOIfp+szxkBpZ+K1qUiCmcmDSGRaMRrk1VbFM5mPUeNLetVzuU5YIprnPbwY7A==","signatures":[{"sig":"MEUCIATqe75KBiaBGNdJ/BUHbt76elVKvgCTSMMwLF0U+2tFAiEAiv98q5P/D3tIyvZAX+FlXLEnTEqbPjaTIAqC3p1H0LA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3ACRA9TVsSAnZWagAAEv8P/2jCWNi2GgfZt+/7U1a6\nBSuFda66x/kacHRvZc7cvrO9JNOvCCyA7ERiog4rNcSTiAgG5mFk+L2Oq05w\nObrdaf/2rEurMVUc01e+qYjL24ILOG/6ihnSyF8eJag2K3m8wTlLly5kYv4h\nIfSjqI/zfAUe8uPb+Ir4DyCJC8WYpjQN6AxDbARg5NcNlHQP/2sFpvrOzR1/\nF3585ssvszeesBn/npeWTtmzgvz982JxoTE00/9jM8NTiA7szzQmmZWmdudg\n7C4L/6dSLUJpv7B5OQ0cC9B6jRbx+g/zR14MvsN1Xu4/qX0lnOXUK2Qeith/\nA4ozhV2ieQoq3YQAn9JjGz3nF+ectlHhKNfGIUO1ahqAmmuqmCI6f1YTnDbb\n+v8Az4um1IG3kEzYrulyjryaOKRf3uj9t+XAoSphexLaMGwC8bAlxN5TRC2o\ncNGm0Rzq79iOsr1XC6KY4W6B0Y72GaUuuhYKom2IGymVOSyh8D4ef4CqV0gk\nJE6Y79reAmFxbPWUmy7TW2LfrAPIHWJXBXY6Hm0s0tevTP1REgbHZpbZRxoi\njBJhrt4mKXRKII31Fri0a1GxRoq3WbuJJMaO5PaK2z/OuUngq1IBmM1ddpbB\nNiB0Tol+lRuxNVsg7NxMdI8HGGgjI26C9vHN7kP+yki1r0dpPPnCfzxByy/r\nhAd+\r\n=WmcF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.32aa23641.0_1590615487526_0.962212979894931","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/typography","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.654934dfa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f604ff7264cea8a968665276193d0025e3f240e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.654934dfa.0.tgz","fileCount":20,"integrity":"sha512-o3JWW/9Wx9IXtX1sg/Jxpk2nr5td2dwMZB+H/851FVpoWVtKggsl5YuL46gSYdnK2en4ebTO8lKd9D2WkbRqEA==","signatures":[{"sig":"MEYCIQCyx93BbFrwI64k6NgXnL5ejNXCOQnwb2RN7/GMnTDbnAIhAIQ0FQOubRp8iNsnpqt3CgdD2YEkQVXVUUg0rmWVrTEo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwecCRA9TVsSAnZWagAAB/YP/jD7dySKbAAMpJBi6CTm\ncnumuK0vyx6lHIvFdU+e/dWPTnmUUskJpS38z1htmyHsQVsR39ABO1KLCHB1\nuXNrUJVI4aHaRxAx6nK53tvS7BUSa+sWKHYhfDGItPsPMN/IB533TceUKYyo\nJKeDF2KZ9fsJgTtmT+hRuxMK1wq5fakwpoW9VCcmGjR1534LZGPNLbcB8PYo\nja4PCx7T+KtoxonuOS2SktzLGowWo6tKeJGfOIY+J55FM2edgMrwBnAfeNw1\nlEuU5hH9W6kbg5+7lPJq5srk08iRM5TQYowjDYlLYcoB0OlK9P2iS9gn+N3P\nZQAO4HMzXfRfo5O1YVUmtW9IWVquCPylvkHVGxWXZOe2VIksKodXYGBQ4EJT\nIMcPCxVxUmqgNv3wuDKLJXoqW0Gv+8RnjV0lR5iOTaRMPlU4hJDLgnRu097p\nWrQcwjBIjdZ7klqWNKzx4Cgwt2Uua7sAt8D5u3DArKKl8bWofQUSiIi8/U/J\nmJBwZqy4uP+CjkGliyTiVprGT+8srlmM+f9rd0lYIkr5LNJ9w10c6e9lLcGM\nGT0d5U2D/M4iIEekEdZ5tDaD4Nv2AL/CeryOIRXBFzxAg+U5jll8pOcACqoS\nx+dvywJS9SQ7cYCqVZ7dF9DO5uTb9uEhf8VQdwX4tu4fQIHYyp3AXGQxZHZs\nBcGg\r\n=ZStL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.654934dfa.0_1590626203915_0.9404993204014398","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/typography","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92f3cf5c38004ba854af1b8a216079e769c19f52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.41910b8b8.0.tgz","fileCount":20,"integrity":"sha512-sX4xJj+Nb4QDmF3/AQThcQJjmhom/jF3Xg/SBYpURs1cr+wXBal7mHFAhXqFgTnt7sYo9CMfFd/u1jre1VhTxw==","signatures":[{"sig":"MEYCIQC3DeYgxV328Uk0c5k++ZIYXt6pXCTcni7Zb0aUOBJCLQIhANW6tIcViBof+FKkXLmlsos08OaWbNCc7jV394+Ot+NA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsACRA9TVsSAnZWagAAudcQAJNNV7sMUB8pyenAYwGE\nucnlvGs0woZSh4KcAIr41bCm935WWaeLpx5agPtsAVp6LY+Sw3b5/tzz7+Bb\nKReGoyefTHTVy7gYgJddx3vTCO9UwFQhE3UXB8O58ydpyIDH3M8xOe/fVPrC\n83Bwnt8LmKVdOv/uuxvoLy+VbScgyjhGM+G2LJp9ARMf4dBiDfaGKDeLqWQq\nAELwCrwUOGuGWJD50gb9jjZcV5kytTgbZEQFPT8cESkEvcUYFSAwuM8SjN/G\nZhLR+0NpSiqyMFCeM/IFFEZUKZ1VMmw1U85Ikhr/vGEpAQzjnv6miqOuNN5D\nL/935EAppUHZk9PtpBGQSTWx+LqjkJ/AeY+OLO9cXbTndhzMcewkNFYZzdGD\ncG+IZLh23UjkMVITxrKM02LMqyMhMG9v7f9onlUSxRbMV45M+4ZyMxdi3Bo8\n2AmcxnyBXkVR0wr838SXtHX5BB8o1OIZpKGppPXNovNsQL3EQ2PXyiMLkIJ9\nx9bZ/tdwQMSIqxXdqp2Rr38rmL+AEB2AP7NYrFlu4VgmT/n+h6Uu3botpqTl\ns7Qj+5M0bn3BJCUqADjBgh9KF//sSBnNgp/LdkLGPvcLc1lm8xCyA30RufdR\nVUGLEBeqq+x62SAiSXqlz/SdWg09n2jWHnnFnQgxY0wMWcZ6TjGTuHAVIUNR\nnoCi\r\n=gRNv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.41910b8b8.0_1590627072465_0.6912899581030689","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/typography","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5901d9858fc4353c6a7c725e54011f9277ff844","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d66d22bf9.0.tgz","fileCount":20,"integrity":"sha512-8UD48/xD8lTxs5BJk7B/YsVfmRw7uGJPWy+lnTDiEYUjtH9DOcH7bJAPGLFi0EotUShFnMKmdjv4gRcqWgKBPw==","signatures":[{"sig":"MEYCIQCPvsobZkW3HYF0+Ua5s/KKutSnU/iP+PnUFr8k4ROMqQIhAKPan6cEYBHrFMegopKRkvxyLTwjaOTgWVdlrY2v35rG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcgCRA9TVsSAnZWagAApRIP/1MNB2QbpXIqLSHCAyqV\nZB64JTymqKj0ziZhBy94FQBC+x2ii2Wqm/pU5e8ZImWMQppLIRjHGlf+NRTR\nfAA2YTR0gQNXv+i3nL45LmO2b4NjUru1gs1Fou8TdTzhvqvb8U8o318Omk/8\nI8ZiSh3Vp2ZZkNIr8O2X8BTmfMaoyGug3fLT1dY4uq+omJVFkFvqO+mNwkMF\nCHFRZl1wSLa2DvL2PUGWHP/8drvRFIE6VcM2wYdDLxrNywcpmO52x0Y45Tnr\nC4In4gtbiXyTADVYXlOO36qNZxhg/Qs5ZwTop6BPjhaV2ZxHfA/6HxsUAez0\nYMdTz9KB4VlO+hM6U582be8RYLQ81pv8dV/OyUmb72bNJ2CN+liChcgaau3T\njBiy9GMDLctTk1xqtxEJFETHjmAjsVzDazzDzuoFK7k/StDxgWCnb5Ph6Q1t\n77WQw8iKgJdpFMh+P3pF3eK1UPNi+tdaWrmIs1VFjDa+8GDqPQOCorq0nC50\nR/t9ZsuNgMIafMm2LO7QfOvtOLWEsGneK2OldI7qU4NN0+rv51fdW+4F7vIr\nZxv719a+W7DlzT0eNNrk1PsEM8K4EztI7h/iXJIrmwtt9i+M848br5NUA67V\nbJDpSiVidi3pUB20TyJdqZ1nRPJNekDDg3qahDaa/OIq7euu3CnQunuNieQa\nPIQK\r\n=QooX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d66d22bf9.0_1590695711787_0.9430935235202129","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/typography","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf7869f27d44c8eb90c96e7a069b1e9d385cdb99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8904f3cbe.0.tgz","fileCount":20,"integrity":"sha512-lDCN5cz6S3pwOtOJRf56MXNOdv9rzOWuq12TlHX8LIecs95dhLYOc0tYcCRGcoa9JU2OvoNLcxkgZSJtWFb7LQ==","signatures":[{"sig":"MEUCIB4/tMZSHVPOwgVKp0gNkdTtq4dtc0HXqqh5YqbtY1wlAiEAx70As3cx0l3YfypskibrsMjun1Ae1wGTYx0gzAJOdtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1GCRA9TVsSAnZWagAAj6IP+wYW9lZbQbYkK+93/mzB\nk52hMsTXfGM3uKbXo8bA4P+H20e/ACbXEs2lGKh+tq5iyu9WeicMcoE4cyA2\nf4dCNvghkpvnLTwPKLkYqDBFjnE1wgYqhMRE38471ujyml+YUjC1x1ohUnsy\n5LrFvVaf6LJVOrz2mnglK/P/XszKB95Wg69F2Ub1H2rSzrYh0l62MfpSCNqq\n1rSxbJgT+ljO3Y2CaTBS6msxUqiZ+//Cp0egd8oSvJ+p7gcqL19FHOILDV1C\naaMrgBvyIC/oUxjSlTLOh0T5lfN61nH5sqnDHyz2kbT33RQ7Jmt3PPE9E+hy\nP1PiZVaYJWcJQsVk/iocaqTm38xBUZRxDR4yDEuF8ctvQc3Uv6L91MwDe46u\nbSEIuyV5+A3a7tRpYlHVK025bDMvhl3+kVOR2sQGRoA8ufrdWa8tA44G/CIM\n6oN/wldpxeMFqFs5hJ9DtWdaXhXunWxi05i7aNPKbfu5Esrc9KgCRXbUUHq6\n1l4UNUako/OmSdQwPAgD3Bt6MSEvpufwSqJ+g6YkPBm6H+bA6X0Ng/grEBF7\nlLDXHi831ID+2zR4u8B5vmIgNrJa9nzfajZHv0EdNEod0v7658yG+N6wTlUu\nL5FwdaGDpQM13SsGVWW9cxrtJ8exVNuJQNW2elzJNl0ne0DUTKczOabQ+kWh\nMGV6\r\n=D0fb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8904f3cbe.0_1590771013509_0.4580836622341524","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/typography","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64e37f552cab165fd8d20f747e9a8e2da7b0ebf1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.51512a4ac.0.tgz","fileCount":20,"integrity":"sha512-kMgLd+gJN7FmXut7ZSaACML6XGfLtRbEpNyRHyysUSpA7kbaaGdGa8PYF9VOfHsXJ0m4+9otzEMwbSCeSlY0YQ==","signatures":[{"sig":"MEUCIQDYTCpoxvmN+fxHUR65PIJ/6FO6xSUOkWgKyduuGaXEDwIgaSw/37mX0iuX13q3i7yMdU3uqh18bMhqijEJDE/aRfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V80CRA9TVsSAnZWagAAGCwP/jKUQgOCeXrU4BTDbGiT\nTfFeu1+SH56ojB3D4UlUNGDjCwFHB6vRNhNqE7sgH9N61UPDGMc/C6Qcyhi2\np3qSldmnL5JQnzpCUdbnbMd8IB4eLhNXDJfQYpadogD9G5ATO1LFWL7l7946\n0LklcIcDkb9vwEuciNN8PA7ktBCo8QjinUwUzQXuFNR9GTSrQQ3K1/KtXyFS\nZAHLXRYvY5ZJdeZiBb05CISf9uUzPoKgLw0LXZbtyzTWVcxwnGcVqtOo60TV\n02FWkOagjGegbegoM0sRCW1FiKtO7UXeh8HbFbQ1hoE92GUi5Vjm/R+YWFts\niHW18JNEOMle2AHgBZu6kjGFDEGxTqNAevUcVfP9UjZJ/tC/KnYqtlMrH4At\nIaoRUCxwCnM8jgOz/yZ32+BU91eSMp+CCV+PWuCjLDQ+Bjd3+B5XwXMzNqxx\nFTT4DI4ZJEuKK/L0bxYhnGi2tAweFHdHa5TsBxtJ2W+eAqJ7p5jOGZ1GaA+4\nrJNw4722B3H1QaGEDvW/y6RWtoCjh2lXXB+aLFxoUhaqL0Bn0PTxVJoGYR+u\nkS7HQN8rV6YwiL8HNuFn4NfpcVXdXfxi3rHXS/HBoIT+7Fe7fW61sBLSHWVj\n/pqN4TU2jUDlvTi8E89YD5RvofLTPQWYwwAnqOez1uF2Lx+sqsQuETD5/8u3\nYusX\r\n=uUgZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.51512a4ac.0_1590779699545_0.7042069799372903","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/typography","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.0743288fb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"569a9df8e83d683f5f59d412f55b35c7ba9e4f58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.0743288fb.0.tgz","fileCount":20,"integrity":"sha512-lTnhKocFgfqmvFGte2ShO7vG1+c4la/rB33/HgIWoZ0QX8zkDMLKreMRR4q7nIoQ896YANZEDNkT/AC9HXWpwA==","signatures":[{"sig":"MEUCIQDdIkZuN/Oy1MmBaj7fu8spA0ZU5rK0XDSrfYvOOh1EZQIgbOdQ1bn8lRh2xVnfS+A3l16Zz4nG3J55y0VgQ0PyA18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrnCRA9TVsSAnZWagAAU9YP/jyeWlJzVL0TTCFXrgNQ\nwPBBIeQecEcMx0P8rm8ngV9fxPwZ3DSIYfYnwBmDzUUR9WME0AhBZsSdg6e+\nfnh3sFPiQCzPiDh/WktR3BO8F3R94iIrNWCBlII2HSwtj280n8EhJ4QE2sDE\nGznraX7aK5HrmZlsKB5Moio9qFACAwSDFsi0jRJzD+CsSGEm85mlZo4em6dk\namMZ00i9/+qpJnivBlQqc/5AzcSsWCF5rFFNp2rSrcuFiIl2E/Dfj4CfUMqJ\nHXNDJ2+yhKggmREC5hvZhkngZOFKLnZu92z4tTodWOlIGJgs8Yx8q5QmDqup\naZrGjVVIBnOTMe2I2HinKsGj3MhPtPnLidrp8RoFqUtDOLrCAD0EhJy+R4GP\nl+vy8dvH5aTxzP+0r5QQ7epkuk/+vITAOm3/LgAM0MAaJbw21Qr3Cr5bj5gP\njvmRIjEkDj163Umxqz/VGKUn8fDNo4XAqrIMoWPVBnpIV1uSIcL1/TfikhYP\ngzTHSJwlQt/se0tZr+P15AARrbYy+M5kC6TZKzWcnV7sMo/Q/udXGt/jEvrD\nzGYzKvflKjEBqppqePYpPjUTLOEfjwZbSvIpxX3hd734wDgE4IBnOurro5mE\nZ9dKa60nqqTqdgXU7cWwDHWXwy9j+rnLGrriNJiI1yXmfQx9MzNgJc7cUAux\n7hOF\r\n=AnYI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.0743288fb.0_1590782694938_0.4483559088300546","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/typography","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3703e1145bcc8f8f94d2b364f12281c692a66539","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.06ef147b5.0.tgz","fileCount":20,"integrity":"sha512-ZMgH9l7rFQspS8Muxx90BuN36fYp00S82+ktYM672Y4Wpbiw3KslEOpak/Ohp1SrWNtBNbRLyPyIlnN11Y80sw==","signatures":[{"sig":"MEYCIQCHPi8owgh7h/2bSTcFQaPL9k2EMNkBi4I5sAz4jYhNfAIhAJ9hiEJIRFXHmc0YmZmKSJrGoSyZEESeB9hjJiY1IOs4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNDCRA9TVsSAnZWagAA3NoP/0S4Mm5Xeb6Mp1BzSRLH\nWPfIY3yvEMzYrMvBrcVNgvMOt8NaJxTtLVUvAfYKQzvAK41sl5wLLjuh5gD6\nOkZgRRNFLenoYyoc5GIZIYGC19XiZrIIz4FcZmjNbfLQVH4QFneYR6F3e8fx\nZUZ0HjZ22Z33ry3neour7ZsjjIC/uoEvBRe42T0y2PjbUpcPLkQWj0YsEBRQ\nVReiMzOM/0fedpWwPb7UbfacjaHquBkDYzQz/oHrnG/dyUoly4bi3fPJGomV\nHmxqG9UVVJCIrudW5Y9CgTQ7/Yg1bRtD4aghZKkfUcLXCCd2hKZFj7UDbPTC\nP1fix40AltiCzMmX3Gkr5PnmjJgY12tSrp3hXjnbFvJHHPFmsW/MyQf7UD3B\nTWAuBxVbO1AuYMl0YAdaI7qWerLxRKJsKAmC3ZKcUUIKheVms+h5dAdReqCc\nfHzELnoRr9YUrVpviSKZBvHFo4DHZOTqMVCGxM7cZqgZ4B5VLoQ6lqQRP0J3\nBfhQgENMVy6QcNLu/R8rEIxX6Yt5VoT+aMT1E8eP3VlSOaMjg3U+1X6zGW1p\nxNhSBayW7dHu5vtEEZxiCJYaOZu7ReHAxF41HLo2+jt4oHIK/JVc0oEF8aQM\nzx0A/bERpa+ifMgeeJagnxWSD3JEHh4pi8Pa8qSQ/z65cw1h+NbgJsR4wwh+\nXB1V\r\n=BveX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.06ef147b5.0_1590784834325_0.05770021013269755","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/typography","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7b0e26c6f2722b0b66714a53225703505e755e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8073a20a9.0.tgz","fileCount":20,"integrity":"sha512-lOEOb+jbkLpSWXf4YjVMc5lr6OwOX6GyxcptEWj3kjpdP8MUfPpmUE+ZQSWWaFkpeqZtkdImXFgG/hqhO6LLWQ==","signatures":[{"sig":"MEQCIDu3k/uJRR+YQUJZ9w0K3wddtHwbi5c//7uCYJ5kB23FAiA3AmGMjA3UZcPx4vJFJi28pFnPxUaZX+3gl2z+3p1pqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnmCRA9TVsSAnZWagAAGN0QAI2ATAQ7B/uxpWAnRM5z\nIi3oeQZkW3q9nMyCth9tgFlCWLte+OnqsvXqXtyu5+tmvmS8Mw5gs+e3VUc4\nh78d1b8HYK8d1ZlnBuQJlIYgpshgigDw20CdWgbA7oSNHbhA3TO9b3JMedQH\nzKvyCO6CfVJdk3uU4s9Q9H8sD2tHry+a306pHJ0TiIhxrL6+64u/QlAPgePP\nLfRxmivVkbv1ZdMqXLEUGhjJEs/4AId6CCA3mHgdgaJX8esvQ0qa11Y1E5DG\nmU5jjglGWyBG77IAdaBiElIKTOrLnPRmeBYxHKwdNYJLhp4i4OVe/rgd5JzN\nczbidQ93mqJTL5MM7w2WyC1toO6ua/aRsar6i/bCAEWLAgApuzfCYf4z8mKo\n+zt5J0M8U9UdXIFT/AdD8x1Id/iK5zwvmRBkJ5OK9pn9Fm1qprt+MpxrkJ9h\nafb/t979kZ77HBzqrWLphJXWJf5KmhQw+1J/7jBlMgH6N8s3ajlzq1xlsTHz\nJpkg8EukTtEmdvxa7EpJCVx1Aq3tMLldfBAB/z2sUX5sO7E9eMDpHZaFhh/a\n7cqO0cx6xgblC9pFgOhFPKgc3JKj7weXn1k6H9W9lBFp2DdyWv+9TZF2mE+T\nsFH3zRdYZEwjBVxTmpvS5pnaUYoSgcBXHnh0IdH+CcXHK4IcmbfinaqoooF2\nFrl9\r\n=pHYc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8073a20a9.0_1590794725907_0.6209969581345556","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/typography","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.72ff42330.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc749027c245b36410be87ebabe2c405e6753193","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.72ff42330.0.tgz","fileCount":20,"integrity":"sha512-0xoVDDnF3sPWww7Ej4WMqVX2KuLS7tbzyiLMDBZD0Rq+Gae6Cy4gZqc+yU/2ZUGCeLVnMDP/6S6BR4H1aIOYOg==","signatures":[{"sig":"MEQCIGUu1hkNeX5SVrdHDwMnJEaTHtxOWciL5M/495EhObATAiAgVUMJD/89qsm1HVDcsXWqugujs9g/gaFL5f5RlahU/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBZCRA9TVsSAnZWagAAql0QAIMzKEiEhzmtZxDnXJvh\nwFc1i2NBxARQY6N+LRdMQzuHbPDOSXy/OlfpsOD0X6mLHsGHwIbRH9SRN4WL\nghw5XBlBzsgOfQfeAeZN9pg3uoj/I0A4gMmEDxLIMlyoRxalne6sTZ5XThKt\n/T8xbGc9uCYj6jODMujRH9bod0B4xPTAJCaKCYluUgvN1jyH4Fd5GUGrp2Fg\nV+WqebHxOHdCiEnj6C/xvBGexhkIAbdqv9p29eNeCDvtIptDi8hB9Bx/tTrc\ngBVzg3PGBiyGBE83qnM97FCUj9ODL5lWdKOAtXWBXlw2yYfr0rmfAEbKS+Ge\nzZvrcib1+U3kQgq+nawcOjyf4c4KrTz4u1Li1mReg58bC21hqcadyC2iYagQ\ndyQxzturA9ZBXzskxrDEQ7DNmwJkrCzKSMAvjiL3DxWp3u94hoWhNkM9JFIm\ne6J3IsHwqt2KgAsNR+vsEfrP1DbZusz5uJMDxTm85oQmW4w1uEiXt6iHCXck\ns9++uULq1vkEeZ8o1EskHb4E3i6wzkCo3sc1ysEbQvIAGgt5wB4rrJkrswYr\nNd7jR3rHiR3n65kfzgzar6QisyAoiu5m4hjq1aKH5AFE3QAS8YerGxfpvpOB\nNv7J13v1dWDZtzmA0LQI526Nnaxpaqu3yUCnULWs15u122FWi5YVa/fflmNR\ndyna\r\n=UWTg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.72ff42330.0_1591029848507_0.3612525674486684","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/typography","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994ca29686fd061611c900f2084632bfba74506a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.9ea52070f.0.tgz","fileCount":20,"integrity":"sha512-5PvoNsIADt8l7q1UQHzevd68fWyC1MPZZFurG/jznBwJs444UOlXC3kyEL/MpfVTMKTe5lXfzmkyBT3F9xB9RQ==","signatures":[{"sig":"MEUCIDGvksATPiV63dG83j9A5g8Pg0eqwsJL2HxtfNFzv1ezAiEA540hE2pHIxll5h89k4iWjqnn/JBNM0cGSeoLtmjJYrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TF4CRA9TVsSAnZWagAA1iQP/1LW/DparJsghOyYGwsm\n7vAG3vBChAHENKCxsxpsS1wPS07YDq+qrIoDlQqtBN0Xl7g6HrtEAcz2YlAu\nfdTXzrL9j+WApheLr8rcecHsbLuACrcyV5wgNMstEoZbIGUKYiM4kkbv/JYO\n/SwwqbfjuMhG2mjTBsCfJVeWyT96J9mV8yjL9yRpV6Cht7/nWqr19X+4fzD6\npVuwhlf/X1sSwbul2nr7FeUIsc5BAPyq0QRJ8n98JlFS5rrbeKI7GsClWWXP\n4xpeTdeu9bgve54pHCKqk9xDrhUTZ6mt+pX+b7H1pkc5KvwmQbFTRJzG3g/o\n4yohjG1r0+kz2Dh8N/Cx+gPJVPL89E1IxmaNw8i2L4fOLWSsGAeAUZXl3auN\nLyuvOZZmLL+dFvzIcC2RtMO2e8CFF7yjnmJqPx07XhwwoyvUhb0qfkhFtf9w\nWp93QTGm0hoeHbXTY8QbqByYp3EgO0Pv1lCzHr64ncPvZWm9wIjpf6SrVnNG\n8tOUl3554ZLd2dC/gViOMiHnfzNI5sUllKBpTNvHFLMcTaJFBVuu2iOW58KD\nD0gohXXLKjh2WQGmPsfHMmcPY1g/LYPBTcst9PMTLR3/rZRMgsav7tUIZhOf\nTvhCRiuTxXUto8qL17A2ZzuaYhef28vkC/d9de6Ny2uZOCEVQRHLDBfhAVcX\nh+M8\r\n=UUfB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.9ea52070f.0_1591030136231_0.05823323477804898","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/typography","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0e72a175307a70d0ac76b0fbb7f8a6ca3ad63d6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d86ad3b60.0.tgz","fileCount":20,"integrity":"sha512-BfKMfH5NxMalNW+5gSn5huXdYUkzEGDrtNVCBjYO6cubeMU1hFWB6I2usRemJ3UdQO254AiP682+j5Yd5q5MeA==","signatures":[{"sig":"MEUCIGk8NjRZqpK91hoc/fvacekFhPP7yfIuGHx6ffUjolDSAiEAl2t7J/4Q7iWAJWcH5Eieh7htR1P7tlH8dj0ZOkp1KhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T98CRA9TVsSAnZWagAA9ZYP/R6VKKNCINhQlTnea0vn\nifKB+WxD1jU8AwcsWaIsE4demVmiF3PjwMM8SRI38OavGFmloVcKxg1Q8D99\nTSzSdzy6QrVuNBl6EUlNHKl0tcV2YtJNZOiDlDKqoB69fbHZb3BSqz1/2L0G\nqBEOzhxzqLmFCzER+P3zXQ34tQ0Xr7VlnwglPgyFRVOfJaseUCbDBCbcwpFU\n3h28kZxzZ6yXyrpcNkmNWGj9ZxGoIU6tVf45nJjlx7I5lTQVGMJzE33/sFGr\nOT/7PUkETLcID9igwU/dF6h5VeyYrpXB84Vbe58vksy6PV1f54MTlzN31XF8\n0vUtSxtFf632nfLxNnxemKJljXg6+quMkwncoJb3aU7E/yujs9zrkb2BXjMA\nAQCgOxl81xVcIfN5al/cpiRac3kURHNpxirAmPL+gAEfsW5AwZ/cuSZM0k3n\n9M8pZLEK5pQ/ZF596Z8f/oBhS3rfRPIlnQTitisdV1TqujZVS7XxIj2R+jDs\nzgYce2i53mr6pI5EY7Sju8aphf427Qvq147OB1pZDktdBLSiN6cu6pw0bO2B\noqd7CNQSbrY/T28ZunZTsYJginRLnALKo93yUie0RFtfxJDz6ZTmWoRjE/X1\n0USQucK8hkM9g0UW6VOW4HJv1qyXClvj9x4HSWh12xQHpQgW1GJF9+okZoxW\n8Dft\r\n=g+Ac\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d86ad3b60.0_1591033723719_0.9510650066247384","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/typography","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9167111b100a511acc09dd8e4966cccb7691c71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b9776b1d0.0.tgz","fileCount":20,"integrity":"sha512-kYjU/ose5x9N8G4BsODcYw/F0VmUgpy5WSInICEDLEhg1ZYJJJnBtelUL76zAKn1MBWXsyZU4bzfb3XfuTMgng==","signatures":[{"sig":"MEUCIQC+wb6bzbpeiPyU5PeP7FKptmxQfJ5bIIu2c7NNyLm9QQIgDdeSGBVJC7siKixKMprO1qMyw4waD5gPc1AaYpD6Xlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Ug0CRA9TVsSAnZWagAALwYP/irjo+Es+ZplejAAiRCI\nkju9aVTJ7d2NOPbg58DhWzEERmmTDv99IhBunsDpc8q1fDDfOX7KkRjgoqHo\nBB6Lc8GyGALHUTEdR9mWTXgbWXbGLePHkRiSVmI+QXQCRJLlmCYIXt+ZY7h3\nTCey3FAlX1dfCpBME93VbFyZspic8IX633Y6KtLu+9DiuA49QgBlSeYjm/Cm\naQz96124Xbl0wU/hAgFXRq3AIXNp79ZkF4SJ4prPzAUJKVbmjI+x4cw8lsid\nXzs3INAibdFdIwdkbtZatj5XKt0pgDsd0bVOLC985Dny0QkU3J1LKhOx7uBj\nGl4bPQG4Lc7nBK3KKk62yozIxmjP6h7Ujwh083HNU2rsehdic9/pQlnhhJ70\nwNaHf/SZUIYHmZKw82DUEMk1ddE93XQVWEV3IR5XLZdJr88z5ka1ryLPkI5T\nl/R5Gv/uWbe2NKnQTEMr5SkmLyl0BV56FeTi67Awy/ap04sdZpg1ig9FiYLe\nBUh2mYRaDVqDV2P1Qt0Ppeks7kIuRayZOvrBWKT4B7AUHKGxc7X8dtk89HkC\nACh1bhOU2PmSqzVFgvv4P/FGYZ63q3BgpTZ33uMEic/XT5/P60MezKz6cYny\nNA6bcH2OpDQNfd20VpcxXPg+nryl4o+BiLVPpHP4BMVqSb7aGtocPRaNKwab\nvbJb\r\n=4Q6Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b9776b1d0.0_1591035955889_0.008433715168618239","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/typography","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1341da8facb7bee48a6b1326e439b80edfcd8559","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ba6f7c294.0.tgz","fileCount":20,"integrity":"sha512-ClKPzcX0WO1zbPUKejRtGb9Rx8ClDkPoE9yZaVDArtSCGOjymvuhKYEIqUA3nYSmqf3Mj2pIzuxsvTVYydzICg==","signatures":[{"sig":"MEYCIQCG0JPS4jO5qhxAdz9Vi7w4JUkL7EO9Vv197N6TTdWDnQIhAJyUcL4nvu5ED/ALMQ1SdDF6Jm21OXyp8XxOR7Tqi/oY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYtCRA9TVsSAnZWagAAwd8QAITXZ6PLmvRGODUCjDfp\nofREA6x0x9AtJgO+IhjHa/OMhmv44AO5aYq+aA01E86FcsVv7mlTwb+FJNzJ\nB27LEJTVrh+H+KX8D5s2qSkSUOMdNoFDqh0AI6MILVBBSKonAIrHyHE0Yvvl\nSKlXrwl2fqD1CCSPaJ5eCfeYo690ea9EpavgBkrOV39/VJ/cmkR0hi/GYSFr\nBxM2bg0CwnkxPO2AjjWN4blzXozMCpC9Hq3R+oOI81nTycxYm/BIGiMFeu6F\ncb4lZfI7v6TD+zTUKFc2QKxy09gMLTs5sytxEQiOLpbcltMnFjN8Or8nZ0T2\n9QCGS0JK2Lmm0OO5j+ObYv9iX5SiNZ3J5LmHELGrKvTKaklsuSrEhIbZdOLN\n0OD29dlZDCcfcJbMHmBa7L/V8Fac6DLnfqUshJh6hkmV4+OSgZlW6skWzD60\nQFoxl0YmbkuqFFOU+OL0rYZLL2Vz4XvL52895AvYyQP7fFIFyJfRz+iXrZi5\n07RBscVcZ7NZdI3ZPrwrUo6UmWgzOJcg/Jh8A8S+XIVutqLw0ai/+ZECtCBa\nuJuF6HJp1HJAEvFSPFqnj0dgknou0+NDW7XxQyBxwroAUb0axfHZZzMNE+Zq\nb7r9FsLM3Fosv8dhhzU5SGRPdgOKEVMDk8Q6BuXRDGVvRVGBmzzpfrnp/7Dt\nIFNH\r\n=sAt3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ba6f7c294.0_1591117356578_0.15651548467338694","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/typography","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7eadf4bc0ae7c02e15bb77672fe0db635a871c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.cf3b664ab.0.tgz","fileCount":20,"integrity":"sha512-3+PamLqStQoHqQhSoC8P9k7USLw78B/uhENEhkgkzlOq/rIXmN81Q47iOeSwGejkhO+yWDPtfYKaZOCNTITbFw==","signatures":[{"sig":"MEYCIQDGrL+ZbwmAEP8w4oyYZ7OR1KUCP6Rwte3WsmzVuhGNmgIhAOG3Dj5/3hCHeTIShv4k+3CEPsLIMe2viYFl4lmrGN1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkgCRA9TVsSAnZWagAAlK8QAICs5b55j2Up7Iwu7SR8\ngeGEVO6Mxs0vPYPoDx762ZWr70mLdq8TouEO6r3bAgPwdfcdFpqqPREUUqO8\nS1x5+7J79NY7qHhIcHZcUHtWr/6TAgRuvFKWe+/n3OClQrrBzo/+YRJcxRWn\n7etglxzbtae3bNljHn/A4Hko4jdSfj6bu6M8VYu2c3cK9QN+ar6vYtQ49FVv\npDLAjzR2cui7M1Q86XnbThjWq1Jt5CbHw4vBe5zHo3dgHJdxPVPpbzIZa4sK\nHKP9TlrXTQKzITpvBnOrqJtgbhCMCIzOdK+Fr+1L5HXr70l9a8xszD+qJ2Sk\nHCHF9X8ehQs6SPgzfSLmTPHU92x7RWCYAdntcscZNLoSq/gc7aaeWhBRdsHw\n4FdbUtNCI5+wkSFaq2G3bu1D9p1MweUqQjzWuoz35H3DvgNlXHMeMVXxogV1\nJ2xo4UFMUob1jcnt1YlVRmBhFx1eARilUKbJiRy4cqoHspEkU+7hq7+98g43\nGsa32/vPXcIvm0jzcNlQBckaKq1yxgYt0SAjVTt+WBrz1PEKriaK0bG4T8fO\nb588jX1HILl01ScnAY76B+jDvfR2njsO8OWjSh0l+w5On3U4/PW7jPaixuKJ\nTOCAuoAymWlBc1zaBCxjv2sDIXrFIxxkOipDs3ySjyLxv6UgbZZoTk+oKSDG\nr9l7\r\n=1Izw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.cf3b664ab.0_1591122207968_0.5807814979082222","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/typography","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c357d1c422ad44d76702c1819a147bdeead8934f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":20,"integrity":"sha512-nYlIx1YNNbkR4xgynNMH62zHaedq5KHtZCts0e5yFX4403bRXHaKLbJTHfpC3h6qaPeCswQc5uWeqoeRP3Mvqw==","signatures":[{"sig":"MEUCIQDIyvpHzDRG1SvLSpxfaNOc6dmBuQyW1/vRS2MtElpKNgIgT9mxmWSfQv4t5TeuN92Z+5C1P0D6UDsZyB45qrYfpv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYpCRA9TVsSAnZWagAAwVEQAJjFu/FKeK0zuZxTaWuq\n1ZRT0Jpzax4gG+7NnOjCoSmcVLpeiOp22BXRdJC1SRT8QxdlAhamJ607CwmI\ndkEPyZSuQtDAKcPTjhNdip6NsgBmep/7D4gBn09x/L3aK2SLd1hkEfoHhDBc\nK/T3/Sq9qJcMC3eefftzMwd+1IgtaBrva0Ndsje2jHQ66Hoj4EupfsOzsYBY\nx3uvV31bgd4JyK/61uXDD3ue6DCK2DPA3h+MDF8R1isFwbSqQPdl3PVRCgTg\nw3IOFPG3J+8GhsUUalhRM97YxbHh9Umhfmch9VUgVacuLVrYDcaQ/rlgF5//\nwpiaA6yKj1MPvyyanrMeBYqrpAYB77s4gv5kOBlsr6wGGrAaVnx/7wxEnGBu\nDLVVoPQzF9Kk+YipzB5myOTo+9YHqHvugXAPdhraHgBAH6xRnU49n+THB3+C\n4SLD1qCIeQbMLuMs7GTG/qWBvBrl7PizhP6rWVN6jGvOyKBGWHA0Mv7FbPnH\n0MuLXXUXRKG1celjMC5t1yMrAdv9/yBfmxTgIlgz0VbK1oVb6XwCzvi4P8D8\ncOsucDGzz1ZiihInlmuBzgGaNY/4Ce7QAuBB0UxcJ9dYUsWy/H/H7R5VqHCG\n0q4xX92awOQpa4Xw3126Y71NaZByvX2zR4sXTT+7FMGInH7zEmlRDwt2MB4E\n+6Ng\r\n=W1jZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.4ba3c9a31.0_1591141929072_0.24173074382288928","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/typography","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.388b042c7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c95951ae6d3082dbb41142093187f7d5e3ea494e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.388b042c7.0.tgz","fileCount":20,"integrity":"sha512-EGgl7zf/z1uv1asJebBdO8njYgQYJ3x1QU5+0YWI1JnselPYDRbVcuNnE2A+15rT6AZ5F9pHGWd+CW166Q50jQ==","signatures":[{"sig":"MEQCIAwNzVxT6Iwt/oKhpOUOIA2Y8xb1QWWkLTNoIpn4RJn8AiBXfts60UeCtyompuiOUNf+M+17VXkTGxxHnTj75UIK7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16m3CRA9TVsSAnZWagAAu9MP/3LOEEF95otS7zT+TzZd\nPA+Gh1SUTvl3CcHx5gTE6mLA0NNjVxG3iMbsI3q3U8+xIvBSUHMvCSIRdJ2X\njCgKqzG87lrtJYN4cXXx+/C4+5QxmLC9wey0dmsFziMi8Nw6dKBbXGtfBnnw\n0Au09VgoS68roqX1Mq/DdjhFZbyhLKo8bkv5cC5u10nBnpW55CFMVrzmYfqH\nMn50aYYS9vwIz+Wu5QNnzoOc8S5mCZogM93xssYNZD1pWyK0Uz/7+zHsHyWt\n6Rib6Cdb3TTsed7GLPtqO4kHsa5VQ0xOI+x3O/MpWMyb01wfwypQqSk2fBD+\n78FNufzZBTfc9/O+TqyTNC3hSGurB9/AOsSuEc2x1/98eeh3biKiEAuwF0+v\n04CN+QvAeQ/mGFlaqJTPrXaAOBnI4iRoNWJN/S9laUlHvXcBc7mktma7ujor\nntNc0jKzNOi4eAhFLPN4H7AtZ4d84l4wMG0ds1pR8fok8TrWgWNT4EgwxJN1\nRXmricnFuNBWf2QN6C5Tb3fpYwiuxjr3wfb6rJ+w8zKxpoXKd+uNPS+MGY9N\ndNxZGoA7IatNiuKG54xEK9PKq02KH9T8fem6doz/aJdA9TGq6A5YMw0JJqcb\nEYt1HqL4s9XCZpRccJ+MDmP9otHAErd7MG8pOW4n80xMWqhaforSMS+82Sun\nzRlH\r\n=VmiW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.388b042c7.0_1591191990498_0.6540020864364986","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/typography","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50dcdcde87a6824d61c02d019a5d7abf42fafc7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.cca1ca84d.0.tgz","fileCount":20,"integrity":"sha512-1zkYFe563ESSTCSTCCR/+jx2b5fO7wcEPHoc3k1OI42ey1sFrObryg69kES1/eEirgcmTffYLbQMRr0BEBMDAQ==","signatures":[{"sig":"MEYCIQDruK/4oWCnOkiRmFdch37tSX+W0hgDoysDhPN3U7huDAIhAKQL4dv8IpPmziwxhFLC4We83jTPntujDeCA1wypHMs8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18m3CRA9TVsSAnZWagAAFSwP/i3cb2AkhISZhz1gs+R9\nHyQF1N8sic59M3i4qYTeXXDj2PYpTPIajIs+tluaAEt+9r3oCSHtNqlcgWpp\nXqHagRlN3zvbzXZbPSiOC8dxBeUC89c5cRtNsFQYu79cxXoG9gZUHxcX+PEv\nKPvbqM/q2+Cj52nrnykANqGnULBdIwMaZtUCY/mzJ+iczV7ipS5vgx1nyPbL\n9vOUG8ATslHrkMALve2yhgabuDa2wmxG65h7e/tBHlZdH/2UncRDGbibO/4R\nQRp2FXrkShj69GXAEloisdV0ZzkmzXgKsYv6j1H0JB6voPeOUq5pQSKU27f5\nydGdYzhoN3dKagTU2nn+qIahsJqA65y1kYb84neQCBXNox/FsTy+cI/9jPub\nLwXtat4qPZpsCzlRnF8PmDJ0joPDDpgvL1R/P3UBlDwHpebM0ZThYNBvnT15\nF6gKlqBljokLeaxG/yq7FFvQn2NdipQz7rUcelmPpq6Q6O7BNt02LEWCsFsr\nMEzFNTdqkjZ3VTb3NHaPIuLH8bxCRLlZHIonoETMWYA7aSASny2/IJHpqiXD\n+r74UOI7XMvUIBOTHAkWBWnIb5N9KowIZf8rkuY/bxEsLBD89SYJdzONpXoj\n/0+LT/q0rRy/UzW4OBX2A1nhzu3GgNuuXz5zC8ehecIhrengbhK1jwcMe9H5\nTSeT\r\n=QeBe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.cca1ca84d.0_1591200182027_0.9414718309670154","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/typography","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc55f5f87b5335d8225eb73da2bb1024f7cedd8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":20,"integrity":"sha512-PtDGVp+RQhyqjUCkc9AilGpSBQZAAielIYbNsu2OkTyEeH+MmGhxXA7wVdQwVRk2ZSEf6NOnVbatfGuGA+BGQg==","signatures":[{"sig":"MEUCIGZ3YVZbATahr5wYNJAVENLZirvLRbJisOf23Ft1r4C9AiEAy+I3w/Ej3NXlPE9hzKq//EXUsoilDsUMQLGKTXCcX0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KbCRA9TVsSAnZWagAAlpkP/i9YAMwK5i08j6MEEZsJ\nAL+gj8qSpS+TAh516LWZDfI7rcdiuRpOyOkob8fazJj78f1eXe6UUJBZmypt\nTGeKcFkUYkJpeaMN/AuoBgjLoM9Uj8Apze5EHOUEbHLY/T9xvIfahpv4ycZq\nxb2cjcZYZ2KXIc69s88NkXHe+tXj9M+hFGpxRClb8ucRp/9yFjxtF/Z7NdDs\n80vEDu000CixGMTVKc34wTSPyCkO2kaBI5UaM4sDa0KJ+b7MDbWW1z15npK9\nj6HTirw/65syhu2jSPRxIvFnKuMKzaC0Os1Gc22+sMg55aD97kCLatmamPst\nr3cD92KgxLHmKejXo/rVbHziMZZsLloaZmrT0XITkJHF3wcYTaGHEVyDSBLv\nPBy7Xq9RzVY47jkpHYwn6Galv53KWm/nfQ40diVemnuYqjLN8VWF86twcTC3\nhz3lQAQr7J7DSBYcZIEzhLLgUF6HEoCZhvwnVYD05+HI2PutQ+mDRAf3qDEt\nnS9qXn+Rkn5tGfQ6iPgpp0+mUmSsw+TdbYjnBoQek6/fkeYhnTsDApYsOqIM\nTVvTiGOb/PjUmcpnbHR8SZVISy6Ua/gVNitCTLU7QIcGUUIvwHKcZI2BDEKo\nE2y8OUec1pgmmiZv26xUqNM0TillDxOyilMIWAcW4uCe4MPOwa8VUCKOKvbO\nf9qC\r\n=hg9t\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.9b0b5f2e0.0_1591210650517_0.98117347765984","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/typography","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1466460de3c550e9e989a0867de137eeeb72da1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.0a7895f4d.0.tgz","fileCount":20,"integrity":"sha512-c5tI32dkYkNzQjdPf3fC8RGvV1h7h3fUdmLBG4ouxCosORE2a/Xo+onMKQQeTH4nHSKcmd3VftbwZi2aVGcVLQ==","signatures":[{"sig":"MEYCIQC9pludk7J/Rt3A4eO2ayLIIqO466x0P17LZEbQcdZeVQIhANlJ9NppuPyYBjlEOIo6EuyrfuIN9qESEbWkFgSjaFO+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFqCRA9TVsSAnZWagAAFlQP/3cOoPqWfvh4V9rXmuYe\ny6JEdF116V4SU66PsDGKV17pEVnnoWATQBfjBPDsg5mGV7VZjEHZ1QX2yxP8\nLFs+FoptIhkiFweBIe7GKDdeUv+ADMc9YDHhHmrVvVIs4mmrpN00Ek5CdSGE\nCt6APwHQ2TpSTmRFRuRo6RZ9Bbw5LkS6sKlBeMGK1CeWr6jaCctbCF5mUNVX\nYfu8XvzxDIBPKnsQAqbjA3RLytQlozHmjlWJsChW/FYLlCMpeWij7B0ORx6T\nYs4fYyf4P0WSP3OQHpfWUo26v5V2VmKKcBpL6vy19zFPfc7dgG6fulCq4qSR\nuV9RWFx/0D8QQ760TL8xPn17p6hCajZdNRXdXZC0wlpeLE4v/OoppFaiEZQQ\nOovzgmmwnsJnRPAbFdwBIvGox5OY84/raZZseEi/XIgy+MyCJr/m27Fog8KC\ngL6RUFg0ZTs1i+081CbHugjLqvCU/krkehnLRBSlbSn1436cA4EYCdA5+pdN\n6OR28obcwIefO60LVzorUFeOkBLSmQyiePuwnP9Df/CMhnRkbyN0bOD5rOOd\nVG85SWIqHZM/0wf7phSdDY/4A5b+cVO3CueGroHYDK+bDlp9PoKY/hKNoC+Q\ngtUB6f8nLLWxmgD86/wV3/fapjLIzz2EHfu3di5YYODBPrTYk9s6VD7In8F9\nqrGk\r\n=43vj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.0a7895f4d.0_1591218537707_0.8858881286322529","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/typography","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.7461aad68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f57dfdae95d7df2876c82af0504fdbb17b2575e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.7461aad68.0.tgz","fileCount":20,"integrity":"sha512-9Hlhf/ThltVtgUJPJS2tVF1p7z8EHPdA9GTIKqNK2+G+9uZRPfI5wdNujezZe/fJT15av3CQlilNW35HNS+GhA==","signatures":[{"sig":"MEQCIEqzl5rIR31XmJ2XoP5lJ+A/c8khkW53/w75kOOz7iVNAiBF2DHpdo7lYXST+N+AjjLXZ4sBLOMtUtTxtZY68fGk2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBACRA9TVsSAnZWagAAS5UP/Rlztp2bkBqmx8DfSEeF\n+1L0Vls+Ifr+jtEA/kP1qvpPyJRh3Cw5075u5OgXyB1WOTkP4gjFhkfDu62M\nngjTa6s2FmfA3Hgx/48IqTm4XER4H4sGLhKp3k71h7bX/PHvswym59WaNbSO\nNYWc9wr72UlgpIY4jTeoDh+KsnZ5LviPeLCkhQLuLGq4W/kIrN2a0dyHRt34\nGiFRF4T8rtEAzkHi9+tOkJk/RFLDFKZa/H+cCHvh8/BmxqkdAIYOTMM4zLrj\n5Bx6CnHoNLcUdwaERVEDUCC76zEBZhtfbCdZAvfiTy4SdbhfSJS22FSB+29h\nImTng9H9le3QtoHVwdhKuhgpSYIroW7n2gv0SU4XstAoiu8mIWayK62JM4FF\nNFMAyVOhpyCAjYatjJahb5Yi7OsJvacp92v/QoHVwa7taGfeTm1RkPEGw9FX\nlEhm4GNVlO4/fiM0wEk7NWgg8oFF5gcl3SSnCLPtO1Ddiohz18LWMBeHlpkh\nas07keB3SXS0/7vwnDSTPbMjsCiceA/7cqhsseILWChWnrkOBsO/U2SBsou5\nQcH8QpzpM1bTmCKCuM5n35inZ10/nX2/wMi189hYV2Qy7NIAfHti8z24Fjvo\n35+9sqjOVifpYtkxobZ39yNnitjTQbnL3CwhGKW+dZNH/4ZYQV/rqE/jIBx5\nBxgI\r\n=vXTm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.7461aad68.0_1591222335750_0.8473110375380704","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/typography","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e09fcc32539b93123ee4095b042061b9a17622f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":20,"integrity":"sha512-qhKyJcSYYawQG5ByYygJnamCwjlCXRu3l0rkS8g80QfEuwhlXLjVZnV01u7veI/XY9xFCjRDDWAYWvNRjfd1og==","signatures":[{"sig":"MEYCIQCy9b+LlMyPiItK579ihamxQiP1i5gnEArpk4A19lEN/gIhAPUbd4YRb+6ACVVAvp0tf31gEoWEBDzXdXHKXcufGE4S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQXCRA9TVsSAnZWagAAZmsP/Aw4KM1+N+W7EX3sHS/u\nbt/36HIlCfaTWIex/rF9aTmtVVeE7JgSpuF31hrXtz2eg4yYoJWlb4KOvQuU\nbIT3p4QPgXocYzvax4ZSzCk6DpUEFtAA40MxUWEC+8o/Zx8qgW5SOAfzToAR\nuosMOqo2rWemtizPddxP6krGNnqzwcnXhZfKPrRGDfl+7ASbPif7hyEUDamB\nEI6EPCVViZpGxNPKJ88v82N2/KCATijFM850rQRdB5cJOzxJJ56EtNc1WNHR\nCrLge333uvkypl8Il6nLn44bRl1gwVa5BRKIvwygbFTwoUZXHWIVw6Dwpfyx\nZeW+506kcD27AOCnZwD6UF6kTkzSVZZs8Sh9bdl+T4oDIx7yzcNE1SJbazlt\ncE2172XIAuL58tF4EGGW3X5iiyPxGSLJaqCmMj0xkUuAhBJ+ycsy4T9Mlrmb\nL3lI1HsenDDgwhLGQS4ZGGrcORGjQUd9aCN1G4lBsK1mf6/N/qXrTmqB6QD/\nLjlXAVSeFO0Tb1rRkNIymaiM/NnNpNaCoUiv6ZvpVFmvAKLQvayUB3526bKv\naKpW6V+01C8bSyr7OiBXhQbA5ABzaNvqJjm1u56PweoWpOC/EmL9Y8A+Xsoj\n8PoGi0iM6iVd/pBsB1OiA3svSCeP3+0zxAU/GxIVBVvPrmmXymI432/KM6Zq\n4cLl\r\n=eYHM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.a0dc2b5c4.0_1591305236220_0.11858305199557617","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/typography","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5659c637fb42557ad3add522c18f436367fdd66","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.2b420c5b3.0.tgz","fileCount":20,"integrity":"sha512-DlnIIV0xFtLpUosQHHiGyuPUWbY3UsHaO28hc4HvwrqsvAY5vEu4jWIsTjtbDK6KeyjWh/VG5EGY6QJ4OFobHQ==","signatures":[{"sig":"MEUCIFX/j1KLzR9RiJEFi4U3T7AHBFSQPoXJKO2aN+2b1oS3AiEA4kXXMazgawDvUf8kES+KWtJ43quMyQGs6j65UTICOMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPcCRA9TVsSAnZWagAAchoP/RjCjKecbns/PKIe+XhB\nSwsRyV3WjckjUfLmBAaq9k/pVA8xxDa6vrOaU0MH7WBAJXTum3SOqDK1KoTq\n7tQ0pCEhAp3ZzVXsiHQNCIp5uCxdarWuM2A09pxDXsSx2+G52dqDXXPJTyhC\npn3rVI4DhAB2kBZy9kF4c5Lory4b7ybJF3FD6+fNJY+n6jI9ZwI0GdASTjK2\ntGMXLOexbGQx9Du5lIJTbH+ezHu0vFzp3K2WZy5gSiqCdI3VmE7CrM3Lh603\nFiYHNlEi4iNNR5HhEGvuqiNdpphqKAzQjcgesh0KdirPq6TF3vyAS80dXZth\nHI+z8jlr8cdzdvCvSm0gjl/x/6I5pyxh6jtKpK7AljEAxRCE7LjhuLFljcO5\nkhtLqdkMFCnM7Ehs8Y69Dcmhez/P/yvUF9+nvqhSJZG++GMcsltBbs3oML/V\nmUWUJAkD09k0OXt/BK7wlDTO5Obddi41FTAoyaQn53gio4LQttbsIw8LtZtv\nHQhikdz1ddy8myrXAiLQxFbjOCM3LSeaFVHO39Z2OnSr/UBolZPnXoSYRPpf\n4QKIRTboldpt450KdzL6SVoIAztR7A35mNay0jlBfNBpHqkkpXn8l2o3AU6l\nUZyrKC9KrE2Uz1iTWrlaN6JrmEhRJnM1U/8ree3fR/OpSXiZq6kYGTtBojwE\nYE7G\r\n=p/Ok\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.2b420c5b3.0_1591632860434_0.7735457282376155","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/typography","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8052dd11140029af9f27a53ed992c22f08503cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8fa22aacc.0.tgz","fileCount":20,"integrity":"sha512-VffakdUG4r2l8uCCPfi4V+PyBchyRsSXU+VGmcKemLyhzDBDAyGreSOi/zUMbKKood+XGMelCS3uki4FRtKz/A==","signatures":[{"sig":"MEYCIQDo1unXPWt3JkaX4osJRGR0FAnKyQbkji08widIHE2UVgIhAOBOgdPCVobX9ijCv8vckXH12f9fAW39qlDPURXqenZ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2sCRA9TVsSAnZWagAA21MQAIX9uwEjz27sKpxLULQK\nUbV9//zLOStkc/kR5ay1tMiDA3rsbjwOodc5qOWfbrmmcL7tSOwCuC6AhuqH\nmdHqKn/xOYLWVARR9krCZo6lMVut9xVGS9J6za6Sex0nPmqCdeEm7SxcKowy\naxxRIdqozMf1HjtRWD/0fy35aLu9Z+Z7+OJkqNUSyJp8FEDWma+ijcmZ7oA6\ngFpo7jU4eoCMz0+8FUG5m32S3hR7rrPW58zE6gSGVowMLjBqA1wtrns6SjpN\npVoESiMFTIK7oKSG8cS6a1nuFnH1wiApwArGcxPtHzVeigMymgBUDT1+Tly4\nAWIF7woUsIQWFw+VN/v73R2QD+TwL/a+KLc8uSUCK6JGQu4+qzSf7iit9XgH\nDTfhZtfjXrPAXiH1IK9czaF9Mi589EVmKJNhw9tEug5BtIbo4sRpe3Hlp91X\nlNvWzMTkya1ArA6tpiK9BZQrA8QtYdSG5fdasdXgQxhOHIkbqqvLxlWIN7Sb\nRv+Kwd6D3qMUi7KUjPLsigQTMBaRO5jJItt4ArGlMLLZztV4Sc1jAIJjsiXw\nWEY/l34T+DjBotXrOG3wlMY9x9qJZk5Xgpsrn4JNe2E6mYtTZXgfLOM8w/Gd\nOykPr6mtU9xrwf+nj0wzFC/izAyh7gJDf0dvdjAAEK33ECAAd6qCgctRIubS\n6F9C\r\n=k8w4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8fa22aacc.0_1591639467699_0.6729059585139625","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/typography","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e021e8fbac22ba13a7db1958ba78c573b937ae1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":20,"integrity":"sha512-XYD/sysQZKy1tt+MsRwvATT/P2NjR6H2fdvzVgJyJh07tkgbECAYN+XnM/Ci0TqxQM1JLcnC6vgPQXQcv/iTpw==","signatures":[{"sig":"MEUCIQDGPoPeZ7WPToZeY3CyS4bWNVTeQE2NGwFRQ76Hp64BjQIgaMy79g3dYNrfTYq8TnR5+05hHv1QpPPNTqYWpuCC50w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ob8CRA9TVsSAnZWagAAMPsP/0qU1KwvnhS69q5m3Y3e\nroy1hoigXujR3CYQRyxpQSGrqPPbuwMf+Oi3P4SP0s+ybyBBI2iRKLayUlD2\nTgFJJBS81OC+XZZJxDmepIGJzn6drNeJOZgsbQiXkDclyJMev1MjFKCEWKx+\nSwEodTUdmcdjicyWv5LgzsKdO3nuyPe2piuaFxzOjbt+08NUQahcFymvfU0w\nT1ZIPTwcxQQrw4cEguXKbC+8XbrugkhpUQRHEyb0YSuxxYvVpipcHheFJTG4\nL1qgMz5YyWRfndT2bQS+TNF+y0E31K+6yWrAzgcj0mhBZuFaexVc+u+lNKDs\n/zFX1swniwp9Jp0NiR8BLl0NATrMJmjcGwk1lHKXu2MLVIYR4OLJGGgfN5gg\nrtvKXeLHWIvjtWK/fcco4pZDKfuo4RKQwUwAQJp/LtefueZT18YICOH4y9mb\nGWxbc5PS+QhvVzs/K3jBo7nyPzpNHbSPv++tGvZJWEeRXv9hMP5HsMl2VB/M\n+vvRKZZNO9Bddl+UStMxARDt7gutuHrQ8taXMNuO2NPNQNFinWHEbiDjR0+6\nBAjT/32c6smNLIj+I/4MpKdDmvq99Wt4/h2BbpJZVUbzrxMENRVM1JoAtvvU\nOoVJm8nxAx6zPwQnMaNIfKCEPjqDF6DhVz9Cfr5sHYrMFFd+RZSTWLdg0Qpg\n33/W\r\n=rEqu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.21c4e4ed8.0_1591641852044_0.01955684623822318","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/typography","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.dfde46516.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"703517ef1499847b15b2460f545926ca6386d956","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.dfde46516.0.tgz","fileCount":20,"integrity":"sha512-ILMvniytlpjmzw+5hRmxkOSpQF6kxnGbBm+LxKotqT1bBNzH2aYfQVy0FWo73IWAqwTQaJC5yRe0X6XAHvOwNg==","signatures":[{"sig":"MEUCIFo1J/1/v3pfqv/NhCSABoCvEcPAy1wtPb+78N1Os3+CAiEAp8HpygA39Gf188Z1mZRF7a8XdCYtZtpT/VznYW1oycw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pR8CRA9TVsSAnZWagAA1XIP/2Nbzs40qv8wYJ0RgqI9\nBX5M7xxAz4nVY93opo7jSAKvUwV06HF8PO6l7RNlHyO3sg3OO4+mSXtrrnID\n3/9danZPbu3g8Gsn/aXQiiwxO2QKJPLh5i/5cB1MlWM60kIQfeAzOhZWtgFc\nut1SK5BRdQAzhLeM/tKv7W7nEFzDWLdJVEQvccf6pOATaZjn/58btTPErboN\nW6PhkhouYM4TE5BAW4nxvWUQiVM3l/z9rUOYYuUX8+PqbEHweyY/5jsa4ndR\n1OvLIklBqsXn18mxc3HalsIMmbFdpZGHtoM7zZi1mlNtl0McMsaiAkdKUElN\ny9zBObsXY+CjV2DMGpS2LEw6+NKbPiq/nxbjVOyAbGAGF3LtwIOj62q2LXiF\n/smC0eALbRDtuLK4Wflk5LU9BW9Jxa8rbFhQdrGCVIfTNfH5rmTQWI7QcGCP\nKDlcJ0Q37aIcHTvbraJMW2p5UCk3IDpbmKPwaJHgPzQYig1UpE8E8zksWavS\ngEXLeZJYQB0jF/vYPnGSo12ZxG73GzwNyg18T1HNI+QgEbnVTqIZt70aaVsy\nNZIg1sFJMCKXeIo4psTaiX+D92QEsg8R4fEPKKGsvOYj3gObn9PLprKpdyre\nmzLXCkNdv+Ogop+n5Ylbn7AGGlMC/8cwHhkmoFgl7rSZY11PMUFxo12LFR+E\nQyR5\r\n=0sxV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.dfde46516.0_1591645308387_0.9415918938685301","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/typography","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"342dc18d41479dad74ac44ddc2def64638ee87a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.05cc5c206.0.tgz","fileCount":20,"integrity":"sha512-8Zcea7o7RU+MMlK+1xW46H+th9lAo9r45UW1TCRgjOVbOZkv+MHKwOwrn7x+VRTdz+JppwNCgue/yEDP9uA1LQ==","signatures":[{"sig":"MEYCIQDrz3XlGPrV0LiQ+Z3Tdwa81hImL47e+8sA6QSCc2TGbQIhAIFRat5deDgIRfNv5SfwxwU3ShUwD2xpxIqdm4J2JmgQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qYSCRA9TVsSAnZWagAAQEIP/3ZCpip84XaDx6L4WnhA\nUIXd+w4OqPq7V2F9St587L7j096O/ZKVVlmw7Re53SWBiG0QskDD7yoUTMQK\n+G7JEg+jrwzcleFQPGHcDdnJ+OknkKfgih3PYH4IHfMfDAjavAfYczXmYuPF\nO94KB+OsOVv6D2BnNcWrENBL8xGqzWUMQ3Adr1GyQi8pNR1bpmYYsBmE9kSV\nuBvd59BZPXcSwiiTcbUSDC6sXYA1KCM6Cf2pwF5YwnFSlGx6IiLOb/kqgXMn\nCurbf27NuIvIQatTThjfzMAhdVJouqufD6MP4Ji7jZko0qa8/Tf2okd35Ril\nT6MkrvXRWerxM7N1diSzDNOtM2blV/448+p44tBgxKyEp8NwO2e1e5xury5h\nOSJT76zPgxh2CmbQX/TS5nZAke3N6F+pOW1KzzYN4pNNAxEFzugRI2Tn5o+p\n1iHZ5MmGreCNbDmS4IbXmp+8/xIL9ijGKcGUTI9OXX8mZsFMbvnyiGWsFG9M\nlxZrqs9ZmfqSDoveQf97Fxwc/04fLP2QFAI7H2QLRkCg/HNRzjp5w/SCS/CZ\nIO3WGTJ7wZt3Q+ykCIrX67scmogBefGs8OURJdbXEFjvmrhOJVoMNQnq2nyS\ngRUVk/0T58YKhzSwxLDEBE0mniq7eKEFWJWZ4DLr4RA+Ih5Wp4JUwzTDai6+\nF6Ko\r\n=BQl4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.05cc5c206.0_1591649809461_0.5220652926301337","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/typography","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d919be2e99d2ef15847bfface9603fba405ea1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.3ee488f1c.0.tgz","fileCount":20,"integrity":"sha512-ttGtGbbuw0GmEIZ3jnidYUn5mzjHWHHfThKbUGy6d0/esKZ7aJYgD97ud97OjWAtU5kJppps9em0JOUhCXzOQg==","signatures":[{"sig":"MEUCIQD8Bw8WQH7lgGcWpYYhBNjbzBtraS+RVWmW+hrQmtXZ8gIgHNIcfPoFDuUFHtvrMXRJCUZGC9JZRO2GINq1gPgyvaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KACRA9TVsSAnZWagAABXIQAJYcxHRsTXuZOqrfueJo\nYY1mIOnMOkAcoAWpOw/h28eWkKxnfWnNhzKTPDo9UEtRoDKj9jpsI22M1aSV\n0boTOtWr47NiJukRl5BgGBIVpbU2RZNcCRawXlpySeMwfg1qbwjMwX83D1lz\naUQK11orctV7N25VL9Wym3jFVXvB2orTrJdc7j3vcU64x/LE9wUmybDpVDRY\nByGCMSvZSxYTfQdHduh2imhClcI5DfA6piAEM+21IUbT/0iARSfRU5KnzRLh\n01tgZuj6jJYAE98MEWJI1wzJ7cYVhL4q32q6ecxIgJuTKwGyYLSZViPVfKP3\nueY0mEFRdNsg2JpXN1Zgwnhf53qFxeolTr0x80fRsFT2WJFJOHJLEbAgyzuc\nux+HDbRth7MDGw19zNmpayT7OYNlDIXpZrWfVnNXH1cNn0DIcs1AL90QO9zn\nnIlLqYYRchTnZxp1XozXPDFYCBVa6eAOS7srnOHeN7wsos+KlczdS0TcgF+0\nec3TNKBe9zd4Md6xoW1GTD4fL4hgyDXcykpCjJR8ogvVro0G7413z6miOLRp\nA/EqMO6dTRjUMMggUiv9wHqzivCViDuSNISZnkqp5bmNHfhxLJbV6kDf+IoE\numxSdkvmtLUJ/j1oaYR3633cJmdn8o9UTNK+e6nbcW5du7MjEYNV7h+V1P4s\nymmX\r\n=8MbB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.3ee488f1c.0_1591714432071_0.24110656609368353","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/typography","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68f842674c4251826f26892d428c0dc6e9d20f8b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.b83d720ee.0.tgz","fileCount":20,"integrity":"sha512-hEtIuk+RXIMM9cCDXGwu3DNdNP0fqkzQZ1annIrK2nalXvCCWOa8Umtw6oQ9vjrXcbTdggnYX4FI4ZyNN1WZcg==","signatures":[{"sig":"MEUCIBBia5l4ahotwBdVe5mp7qLCb8QJIdbfxLrcodOLKAQWAiEA2h1ncS4IRbsPVtphOA+V9QPCnKlfhPWNZjFt9nJAenI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38YyCRA9TVsSAnZWagAA5BQP/jdFVL2Ri5XJmnSoj6FV\nxSzHbF84ud3F/UAn5WD95TDes2nU0broKQPCqX0p6oVelr9RBO9B6vIqJt+m\n7Oo/BiA+ZUZVL9dBe2Qc7VdRMCi8IwyoX1BjCM4OjJK2Lau40S/f1KAmZ5ST\nclmkSA5No9lCbSDlWJ1F2W/Os7KQmyAF362hcE621WzZsPeH/H7o4ZR5fjxr\n+wIiW9C78yAoyq+dvo4WqtJo41eYAHXjIb1DQwXDlQFrpXwexpp2EAOKbJtL\n/F6wXk/xDVFFkrup1FdnPkGU3/ygt2mMT6qaDvZeE6vA4ZuXvB5KlTcDIUjs\nbJAfBeX9m1CWtF/amGMv2yuEO7sWk5KSxQJZqkgxUSGhhs5P31NMqH/YeWeP\n6qUiOEZCLJ5yNWSrcK1t8P2oc8gR1Dq3sXg/mhY4rT7A8cugBykScYtOXFXE\nstal/6ZSF5HPz7tQ6VKBoqVW5V0L1631Amc4XV2IZzjAhwFFtYruHOFLS+dl\nGAMQajiRz1UuAQUcz7kHhZ4et5Hv4Ed1yxj9hWVvcMZZfBlTK2RxtJu4k4hF\n4KkSvxvNfnJsDkEVOZSHjYTgWQGv8k4a5xdFwBnAXmLiehuxtH3P/932B/lH\nRjyfpmlLVRc9JNZ1Y+5aMFCAtA69t+1FA9uGCTP424Vrg227xL3Hu7VgtI6p\n3q+A\r\n=78f/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.b83d720ee.0_1591723570096_0.6327888966183206","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/typography","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ba9f71e864b5881746afaccb640f068d8f516d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.afb1c11a9.0.tgz","fileCount":20,"integrity":"sha512-W11USEsJzNzRf4RBqj0OjDOuSIf7jts7jBvqUynhVJvBO9uZCA9f0A9SR94KT9XytgUIzvUZ8pVRMDFK8iVpzg==","signatures":[{"sig":"MEUCIQC6/eM2d0b2uQLe6BTnmwqA8GyPCehfH/zrlXxby3a58QIgFmx5LsYDfZtRTXELdVCA3BBkVqNVJmN1QFQ6iCcz+cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4VCRA9TVsSAnZWagAAh+YP/2C7/3HEDiRcTN2sebsw\ni4Cz6np9zRiMHy4+v8O0i2gnMKXKZ2D74iPnXmdwcng5P3KnGBtQqaZMtmjR\nma2sPp5tP62zXLCA4GyWOMswHfqyWGI1teW0O3WZvpNWaBUndgaVogNXBJt8\n8ZILB+rOuclG5Cxsr2k9ChclPm3WVgjqIvica8dtgV9Z/06WEPZF1o571D9J\nzOQ2OQaC23dSIpKvQEp5kicBqujs+nPcosKRVA4HdnfxgGV3iuwZLoxQZFKr\nExMaIMwbcG4Oj+uWiDKjn0FsD8pn3qpcO8XzzijI/PW18yoAAGMP5l7u+11Z\njsmQadoUkKyVv216+WAx6uTnmFaVC85r2ZEPOUZvQJRI9uY1lBDABIZ4/rIX\nDAFC8RY/QiX+Yqr8cP51x9zfQyzlBIaIFypqNkS0tl8PI4/dX0B/ggjMElRD\niGJ92Plk+ScfB5YIQ3RTU2Hgs5V0rSxl207wTonvlX3VBkvHc8gvTGP/dGnd\nMcrYFucbTcJRF/rw0fCAt6vl/Tw2bzlfIqZWvEbhjY6oZN6YEV40eAVnZXkm\n6INLJJrLpE0idOBXzi7LkNxYCiokm0rBtX1ERD61YCm/UlRQzQ6Y0pfiEewV\nShWtzTfPXSqAJgD9ksJi6Kzcg8VWsUt2EqHmQyb3eGuAx4AWAGpvbB3Zd1sL\nbwkq\r\n=YKzL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.afb1c11a9.0_1591733780538_0.588086893070797","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/typography","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc90991dd96ef7196d84cb3702006f92c72a1026","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.39e6f71e2.0.tgz","fileCount":20,"integrity":"sha512-v120XrVhkMbtD2+iX22bvXnNoqnyFNUWTy/3QAZCkeX6iczOnM563qJkZvWOmrHbEVifOU7GybFrJvPlYgnX2g==","signatures":[{"sig":"MEUCIQC/8uJfsCTcs2jLsaONcS8luBpXy0OIPNdHfbgv6Adr7wIgHH70Nsi2NCQRe8NRRIlhAYAoxQMC8XRk9mBTBtWvzr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B2zCRA9TVsSAnZWagAAE3AP/1/MOccJ210aLdhNrnTk\nfmWJGmZhfZaSJK6xuCyiRmLyqctouxXsi0/4BVRsnbm6yuiazW7lL9Bi0M62\nrqr9dU7jDNCQrGaoviCF35TCJkGDL2WEpKgcwhE+jLAg43cuA8q5yv4kNgjl\nmoZcuvgjqzTSCcUiQi06ZsbWMaxansqlWh2CE+b/B+sf3FJt+sJRjP9X7dS3\nm0+rpoZKGFCQDXOeWaw+3XHRuN5uQgZ2ddX/SA1okWPnALh9oKlbFjmp0G2j\nvEi+TCJFo5BXaDO+d6jyLqLFWw+ExqlUU1QaTf6Z4ygIPAUhMoNP3rOax6p1\n142xN+juEy5y8WbJfQtNAqF8S3VVqjWK4we4G/GiDH4xvYfEXVto3kMJ8MiG\nXD1+Q48LeSU6nhrV5v++7jwQq3cgGxaFZ33jHrVhSP0VmDUI1/6OujWDjdNm\n9+vWJoSK+rn7XhnXIdWMBAwsXhCM5WI5L7GGPYbyypbjvwURj+Dia1rKrMTn\n9KayTjE2rlWmTHSjaaRgMumIDxTXZ7L0Dut+NdgCgpUzMditkqzcZ1HzIn0d\nPnZdrTzl+d+pEmresoTZPfGZIgZ6DZj8nDffBHJW29Hij/5T+WOF/Dx2Pgdp\n0zOx3XocZXPituxnB1AYdOum9TyavJ1g4nTwj2G1eQ4gRt9F5T8A0gmRBAoa\nmOP3\r\n=f2k6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.20.1","dependencies":{"@material/theme":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.39e6f71e2.0_1591745970806_0.775558237419699","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/typography","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"630c8d83bfaf93100dc7333e3d881aa9d8dbb566","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":20,"integrity":"sha512-dGJrAXG9WVnj58SMyMbSZkR+8ZTW0oE6xQ+qR5iv2s0rEp7mycJjq/Y1ipCtUYgYez9wDWUDbEOwFKTOoRINsw==","signatures":[{"sig":"MEQCIACO7zg/U9oK0XbB/td8Julz3gHLzY1e7j+n4GsTtApMAiANFlhDNrVj8/5fMa+Hlix4hB1MB9rLNcqBQkBl762JgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m3ZCRA9TVsSAnZWagAAIToP/1VQXrsL9em3zHskPW3c\nXtBLNLhz5OaBM5xmRHJi4ahts6sUGf2vVlI/6NhXSB4zOCdHxesV9kuEzyaK\nrj5YuPNSV8ctfIEMjZcchK0NoxHuuz4QOIPhYtcyKR5rxTqQs9Dw0vmwuI7P\npFkW4fMxxD/XZ8eT7DPm3Jtlq9bo9s8+i7RDVohe9xEv/wYsgQ5/WyBuU8Qk\ntrwH590yUD2sk5AO+VY20RbNoSQ5pC0Vsc/73UZW4tJQbzouBzHuuauNwud5\nCAwUFYiJlUd/Bc/qlLc9EKLJS6fo83z+3ZRoUpriPOrmeeEyKCG4n/j8fc66\np2ELSJpzf4ZkGx+rvf9OKmWsZfM0tkJpmT43cZ+h1a09nmxyWduRrt+JTgKz\nh1ROewT0wZzqVBM6eTLMvZzAxiDUrfoUDedFYH1Kcd0qhVGycajOeOQ45vSC\neY/UneLCQRQUT40ct3U9UxDWWsUA7Lc7kb09CqRSlWn8QFx29TnH/WJ/O+oE\nU4x/MjdgfowBLiaPwDA/nsQKDLIsgqnZRjaskMTCR29z/YEQmQiHV8z7bOKx\nCfG0SYSMyetewhvzZ2B/Y3/6ayOjez4c8LXsrNANgASa0pHkbs2tjo9+O/9C\niS7WaNqJ4Oy6UH1tlFoTttsXXYsnu//sS4yQdm5ZtrmBX2FyunFccXyoanIJ\nVrSI\r\n=TiBO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d4c66dc7d.0_1591897560450_0.5959202546883648","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/typography","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"235626e57f51f02bb857140a4d65781754688c31","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.be4a19f9f.0.tgz","fileCount":20,"integrity":"sha512-3Ljvr3sA539FLfWdWZukBwmtDaHSPXDFDR8tTy4Pb3j5hvIaVFBaHNfl+Inrq5eihLnvbcJ3XlJCnuKIvWX10g==","signatures":[{"sig":"MEUCICpEyJ0yyT/35y0ahIYN2wGLCVYyddNlzG3ZPqChzAURAiEAzMgLPEChQcjA0jnYzl55E3IJ5DR8fOzZ7jfb3ccumWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvNCRA9TVsSAnZWagAA9UMP/R5bf8AyOkQfTA8TL6I8\nepSDbioLqzhG1881bKcXeGqasbxLCsXLtmbOFx03LfhdZONiGidaVaHjT2KO\n0PGyU8Q6zQDtXEMJikNXvWKaSm9u3TEph5wg1Zu0368pbkYcEqlmNShC6Z2d\nrYHU1WYe9s5HIoVrEip1TWlSC4KkKhOgg5eg/eRHIGAPKY+Oe2jtXBIjvqzN\n9lDYnESdRzahwqbQ+nnL9pMyPjdlmiuZ54hLJWGqSdfABzYGF+LSYYJ/54YI\nUD4eUsHCwy2wMpSV9tVX5rqtPEtxf+4Lu38IysKUwbmYHflmWG4mswz8yF2G\ngh4hkL7ECGmzpvWX1RpeYKYLFx22C4daFdQwmBlgmXd8gs6WPkrF1LJHYWf9\nwstmO95C2Cu+I3jfqFWkYqrID93guikxNGhj9NiS9cNvq58IUxCwLvjYDW6V\nssZGZoXF5kFzYNOLUj1OPRG1/c7WCGDriO626EczbrQV0u4dRWV4RjLqxtcO\nmcs0AplrH1GgPqIICQW7sTKYVofSBazEtyvpGcdU0fLN+L6HRCF3gZQwsChj\nf9cVx8swFB2El19ZuQGyoFw4RUGFbUeQY6I11P0u3ud6UaT/NAzlqi48Gvza\nkWMssjzh9FF3QM3T2SF1tsXq/G62LRiVOdXVS0ftJn3SmtG91EFynTMBEoqe\nMWh0\r\n=F5Ds\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.be4a19f9f.0_1591942092841_0.7927001229905521","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/typography","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"433dc32e9c58401fdee26084458216068ded4c34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.a6ac8f629.0.tgz","fileCount":20,"integrity":"sha512-ko+vkhyshNQ5stJdQvFEer137uWenigQrJOL5EQ6DFFKYhLYncIiBppMqy62hSdjzJBI2DxvIrpz+d2WAhSHNQ==","signatures":[{"sig":"MEYCIQCympiVfnOBWBAV98OPIGLiXvIMODYHl1jDkkOy3dQzDAIhAJ5Q4W/uIbWZtsJJbsqpyJOBfe2OETEQliVgSzV4Vc3N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+h9CRA9TVsSAnZWagAA040P/jYbqXS3RxiJvr2b5nim\nC8xKNKtLrBCOaNc/feZqxo6o/35yefkythGHKgBMyEUqPzEKC+BG8MsRmHdA\nVR/pRyJlCFLJLySDC+/PiZsBInmspAt15mYAfI3FuwSbe1PmhdhGFiESTZyW\nMOi4VjdBb0rXe5PuMUdVdi8Hvzu5CKmpoyiHwYRDCWjoZAOw/7NFzOu02gdh\nfbQrWybfzwvG5HcsmSVxtQTL0ulsDqJOrKXMCm0C8ZDT3vegB3Ph2lpF5eCV\nUsPUAgPnSSJRRTM4YxAnRGCNEdB6HR7lfOq9yhsuvFJyzEDmcgRFK9mhwJ0W\n/ArsZsNNMqNHxDmLoiDBAuG+AQo7+z84qBuUilCIVimW6B3VBh4TbDJUlGez\nsGpqLM9ACKjnkZP4SQ26yFCDLW4pq41l0AYg8+luWIdqoemN31F3LhwKWgZJ\nCmGYACCAiZ8exxBXLvs/to6La5bhL2HIav2fJ5WDrEfdzR98eKUHTIRqJXL2\nbmfO8Nw+C1TfaXk7g3NiofXmRtG3eq93xuW7sy+8WMwZHuhMMgl/GlEazVer\n0f6N/CPGrtmamq/S6uguFIHzthFATSP1q/PxBIbyzDV1njileFPcAOIDuNKf\nlbqhmKtQ0M/yyLMyDHc1P2gSWUAiUGQgDk8wM+JQmyg7HS2MeUkLk+YPzYkC\nC+5V\r\n=WBOu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.a6ac8f629.0_1592256636974_0.9912727223594002","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/typography","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.9833dc287.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6124fa814083fcd67633986ea1368687c26176","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.9833dc287.0.tgz","fileCount":20,"integrity":"sha512-rIxpIYsY8/UeJipHWAMomc8Vk/+G6gLFrCBgMsXPPw55aOpPfqomdZYW+KMCYzt9CsIKqy/Su9hIwALo4jiZdw==","signatures":[{"sig":"MEUCIQDYdtKmoxXQsP85325jx1cyBCPS/7OiCH1JBlaUOYc8AAIgTwoDTkDFgdQ1O4xfu/OGjnd0vZivgHclraNIoOr68RE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SI8CRA9TVsSAnZWagAA2eUP/2knVepBme022rh5jyWM\n3P0mtgarhKeceGEuislcFVecvqtJCzIiWZ2BlXLbxJwky7WriJOHL1gKQc0k\n1ACqBIN6wC28KU6Zb7XHBR/nBZ7PtXGU8KXaEZvXR3tt6kntzJjqe6DbpHbj\nYMicrkrf1y3Rzmq/RcqtB1PMGYY1aAxCxDsRr/zsCq7Ny7vLorUFL4IevnVI\ndaapVJsCPA4Jf9cK8oJP3nJjPaf/d5lWqV+9plLA4t9agBoF+Gpc9TZX2Hve\nM+it6B5qwnIYmIk5IH11jf9cT0dq+ctRKqtnrNrbNsohnhB28/vIV/lCQIdN\n+VObzyntJ1cdjsWhhoj9uaMeWs4nRBJINQ/Psbi7QCwCkZrx/WPifr3KBPdc\npJQ81vPpcM5qZ/6g7rJQGabyRQ7qBo2OEB4L+i4nKtInVvSTXnBsP5FIIKlK\nwBW8fplETDKAV5WGLw+B3ePdlNgfpE5IYruXWQGqKfw/iJ/bZ9lQ4BJBK3A4\nDVBMmm64lLvMERFof1ehyNliz4hrFtSxffGt4scyaInpeuXpZt6PbdnTPPMr\n9cMv/9jUvD17OTQ/fiR2vmb0DAQQtIpKi1oisP06VyZLXgSqmpCwep4ChsKw\nwLWrJ5R/EshmZZyUmVcyFFOMBqjX5FJGsZgLCWNOSesOgqcEYRb5sGJAK/XK\n64A7\r\n=NCHK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.9833dc287.0_1592336956093_0.333488794850636","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/typography","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8387891af998490e6723758933fdec0c1f9e2c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.3aa33998e.0.tgz","fileCount":20,"integrity":"sha512-i419dgWrsFLnsfitbi10Plq2DiiEjC20v3sGuwwJ0aj6cHGoLdwfyZfzkLRDcS28OmQfKvQATxJYOrUiC4CjQw==","signatures":[{"sig":"MEUCIQDxfAp8POmhEEPA1kDn4TrsQ0CaAgbvfrtOCDFe2LDjhAIgHKRAINLyw9qnfbwMwlrBwOOWqY1wsOCrMRRYtw5yAfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SmsCRA9TVsSAnZWagAAXVkP/0L5uD+u48XI7vfFPoAF\ncJAuPPop1NbPH2tySVsO/OyKiuj2u9cNkEnWoZLSlgVOeBaDRKcB1bKl8Fn/\nVUbg6tQxZaEMrzlT6btkxs+iyqFO17z1oQPbKZJ88iCDLnssfWr08z9drce0\n/+By4cqChWgQ1TpJ/1ZXGSX+kgbTixD14j+FOFqLMSzrsnAsCSO2UQzS+sb2\n2zNJQsia3DG5TGaIThlcK2NUtvEiBJ8nVYLouxmR+CGGmLsqXmz8V6DHFBkJ\nTjysItA2uVrp2daeGJroO3QGMwqk/2l6g4amjZ4EZlcUiEeMvIXJ2k8Wskc1\noiJH3EXCFqWQuB6jTnqdu4vPMLxG465ISlmqB7qNtczGJHHsaxiHLlT6Dlco\n3cRxxoxRwwXr3vlwML0TAqXZeVl594lvYEj64Oka4phA2M2eDx+rlFiWPsMP\n6Zz05lPgc5bCZp8hWrSYeeusVaGtjl0gm20jkSjX+hHQ9tiXhf1sQQgNZPvD\nFmvXWIBrCq1T8JIau4k/crA93eCuk/595A5KEpLKhO4WT+x5vb6Ig4bq8fyN\n0DnV5tCcGaqHmrHH6/2e5JzN1R10tHh9t1ZD18UkjOhiRyFrkE7FwqLNQjMH\nx8u0jSizeFALQKP14+oy25p6rilCO8klvjyL3zbNyi+Vk5FgVeocUipj0g6C\nsA/m\r\n=8RuH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.3aa33998e.0_1592338859603_0.6580787286424039","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/typography","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b3bdda769d5cc2707627bb54d1cca807c03a693","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.d2b54d183.0.tgz","fileCount":20,"integrity":"sha512-uV0rWMyYmr2ub92vJfwcjyj1BWBBEVtMGmeZ+G7BAmJKXz8SUhRcUXfPILnQGGb7QzlMbdM67joZ8g0EDxuQAw==","signatures":[{"sig":"MEUCIQD8k4X/rPtQGGARCGayZELJrCkHKYdSfAy+fLXGktAEFAIgQGsGlSxcKaESdMrO6QsbmUuvEEEfEabf6iTAMLXCSHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sA5CRA9TVsSAnZWagAAnf0P/RoFmAwmTWNilg6IOnVU\nZGTqgUFcuM9Dk35ogkyEdLRfHINgxelYukcwwjdsj6bT3AFg/41OiC2h2yiS\nDOza8p5vAvbO4gs2b5RZQORISzRjiMc+Vo2A9/u3zZlWiBb9OisLxMR7EwTG\nrr5dldvNua0iRNoi8w8z5nSgwQvan8wc32rB5NoedkuuGMXLe8I/vVWgmnE2\nA2tG45mF8FZsJ0YfOMIRkCI7RtrQNeSmr7IhC3nCIOdJ4FA0LmfVnAb9dZOU\ns3Au/jbFueoYaB5roe/Hx5H3pn1SozPGDT4Ndt2I+3YPP7iYypqtfTPugwO4\nEU1RP3dyDNEb3+mxvQBPaAMgYb1swd10WAV80PIReH7SExhrOg+S+HrEBSxn\njxrR07fzDr+iA8Yov+LKzEQ0LOhy6yXfShEWThMsLFK//lt4TsBQDwh7d8/G\nZ0BTrcXUGGIITW/2HsdAAG7XbHNz9iiS78EtLy17cVzE6R+nSbMuKg2rIrOo\nJoml8SmiDIwzS9Q1fC9vOdrYABQLPm9x8BqcnHkvV6EZVbnOo1KuuW+25eEH\nad0rBjJ7OtHzR5vp8r5XOgnhLMuCXP7rAerfZ4kdcCBr6BLwz/4kqBEe2Ro0\nyriTY2BoPsWlZteZKRh7E2eFNFk9xUjPJfpiidFL7YC01m1T7y47ZBvXii/5\nUu2H\r\n=rKTO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.d2b54d183.0_1592442936241_0.6078956982801056","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/typography","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8f2d76915a4c5eb99672b012d94397b9786b101","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.f2a488e95.0.tgz","fileCount":20,"integrity":"sha512-L49szfe7UdRJZFiQyRMRDZSjxMRquOXNP8pRtXqLEe6q9ItvSALX9mwlDbD5TFItmeci8i5ZNfd3lz2WHiOjHQ==","signatures":[{"sig":"MEUCID8I4gTsJ4tYa1HZik/cXaFK2mfD1KYgW1R0NhrMu4f/AiEA1HYnFHnDBDg9y73hGR8QoY1pFs+Zw5vrujX1otEZLgE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JoCRA9TVsSAnZWagAABdAQAKMjMJDf95aKQUPyjhxw\ndCvIJY/MYhcjTU4tHjWIpGamTHxY6B8uB+mVmQ36NcndHuZj1LPNa7l4IqBj\nbLuXu++Q/vVFEIGdXM41z326udc4IRFnaR1OGOIxYo4MsFrX7CinnSFuTzTG\nbomlUZM9OaHztirMCGq27j5RxwT03GmyKN7+6jGIuHuvPRGXfqxKZypopErp\nalwR5NGpQSatOhD80XKJIi/7yaDnr8zGfbfztSRr3VIKOvMVNeDR6kFEIilg\nZMeVls+MlzyrJ3B4/vfW4ASSDa/nbdgAOYGGqNkJ8wY9/x8KKSKlD/hYAz5o\nvla15929qtYoH2IMbfE9m0wwN2yxSP8/wpbLJ4wbOtNougN0UT5Q2IHKoBUy\nMLzrBd1hts5kWARE4ww4WuRaST/uzhaTaa86Bgmjzn6knEuTqODkiHf2Q1G1\nXyu5Tv74dTTvct2M/Y8HY5BK9dqU2zKOcXng3pTWkm9vqT/blBvfR57jNXc1\nHCe4tU1JgBCCs0+il7Bw9zzebwNiommYIa3V6t+x4CFpFYvVDy5AzY0n3PuT\nypRdpio7nwojhTFuSLUZ1NTGSaH6L6qVtad2mhihlLX6iJ/OySK0lq4uWIi5\nZ+WQLOApQUaDisWmRTMRsrlMccBOGTHIlvh+rbO7Xgxs6mgAu0RlLZq/q7HQ\nBevR\r\n=UbAy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.f2a488e95.0_1592492648188_0.18749303214499036","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/typography","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"932503e550f2b14964705635f83b8cfdeac4a8fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":20,"integrity":"sha512-htlxJuSDdcvDEgCW0exUmXosjtmdflANhnjAevDoP1pQSyFI1Kw4erSZnDPlgts/u5u3T80VgyKTaC04WhvpZA==","signatures":[{"sig":"MEUCIQCjnvEnxAdA49UtxCQq+GzP10A1R1Hg/AkM3atdi5MulgIgPvvVIlRsrMifkTL/T3nrg0I/05l185uE5TdKmniMFm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64U7CRA9TVsSAnZWagAAPJEP/0hHzipopzL03tU35iok\nRcpo4A2D/LT20Kl0S83FQl/TSa0C88Su+e8Im935/U5jwF30tEv2JTQ12yZ5\ngftjzLRRlcRXDQjl1N4zW8Dr94dG0Vd5ZK4cI5RIKs9ZedZL6lKkngFqM5rz\nlcG7tuCkYuew/SIzuWzuOnvbRsGSCWqpWLvR02Asy0OIsR+KsF/zW5BJlitZ\nn2AyIT0YcbZaVqPtQ32MgBTCkRBa3/RTpDgG+k2WiOr3vG2Narv0IG4dXfxK\nRckP+mUBllwoSaGloVJlHmPgD9xjWeTCZnJ7F1UwndBBdUGVuRR2QqzE8mu+\nqUBlY6J8zRLplDpQu6g43n05png39Ln5LPTJ31JpnZR4RsD9/vrAxfdO9cIU\n+B6Jih2p4nEgKV+Lgip07dihZVHHYGvZFYTkGXgTB47ewv5yXrDihqJ3lHAG\nfK4LZgo8KT1lj8DfWJa6x9idU9zy8/rjGitZ5qgG3X46WryEdE3H1LJhjz62\n1D1SuDdk4wzmeie1vRdrigFOSdSQ0P0kDHZsFO1SX79YHvgujSDD/rDM0BxM\niXSsmQtlav02xfhpuIwQLGIl6oZDKbKiMkAUBsbME5o3+liyl8D5KKMbqh2r\nRuXN7YSLQhCriDXdd2P7vitSNY8tdGCy9M+bm9bAqPMJAvWZbbGhd194Pw7p\n9Y01\r\n=pVJ9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.bd8d1aafa.0_1592493370712_0.689901131383845","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/typography","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.1321eb968.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d99fb21953d011796a46b8511c4b0b8b4b409fc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.1321eb968.0.tgz","fileCount":20,"integrity":"sha512-Nzvg1VTNYCUt6fUmZUNCU4cB4nuNcOERF85Fpfqf1N9C/fuVph/H2V6hOXnPCXGBJ65idKwqRTy1n2KWqAeQnw==","signatures":[{"sig":"MEUCICCy5JfZcUe/A6pvJMXLcgGh8q/5s6SNf37OhynaE4HGAiEAjK2YEluWoKrSQZydOdb6xgZL6ZsBIoYm3uyeR15ngeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RAoCRA9TVsSAnZWagAAnHIQAIU78oRGk6AikE2IPxNr\nnxEOncAvrPX9efZJVQNj3137+he9IE4LPgMwwD7skSsH0Dizb+ymsb1QdkKz\nl3QvnXegtNQgNSoUF+u6j2R9I6iLm7xHfQFF05UzfFlPkiQHDKYpmB1QkgYs\nLHSTVKZKZCuzxzrhuuLl0sM86kvxmtVJ4VgyEIJCqo725IzWKo2ynVMvw0TY\n44RnDv+NcikPzKS3wG22iBD1lOcnzLPeEKl3igJxF7qgRI3hZRRj8qS7A4m/\n8jwx/Ag61a6/9rl/Bdw9YW9NfLfWkaTl7A/JGx9lRaSA4YM5SQDRN8wrYbKg\nDyHn/IW+9PQfciM+7ctovqgQ8HlLm+qjIVnTpv+/jGvTqOJ2PnOtPKNfdB1C\nOXpwdBfDOL1vus4T5PTAGJ4Y/AUJijjhcAVuaL2ZrWhWVvJklluwn2uPD9Fa\nqM6n9WnoQaG9uzoJq7xGvB+Px6ZMK7ZgfhgzM6eJ5I+92zxfPTmb+S+frKRh\n0gCpetASqc60Ts2m/XHLhX8a4hJ0hYlm17x2CS1ZeL5cTwhzjxvKp07D22U+\ntgTYcz/lJaDqgn4KLvesxDij+Ocmq2f1asocZMTaFjMk9W9zTztQXjDIug0s\nQuqW+bfWPpDvW1ygW8ItQaeFpv8zCGAe6h/KnvTTj7ph1r2+jDr1QimSaBys\nPYG0\r\n=lL7w\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.1321eb968.0_1592594471927_0.7094098185390296","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/typography","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e50a51dcade599610893fee0e504a3ccf3fe2d06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.db5cc0382.0.tgz","fileCount":20,"integrity":"sha512-tZRiYjWMB3qeRumLNA5bP355pPl1+Lub02rX3btDnW8x0BQaExFHDwkDTAVqEWJbm/WgR5Vo0PtMWOKiqt15Ag==","signatures":[{"sig":"MEUCIQD+nYV9mhd8D+2RG5ztzahmOTBMTflgxB1DWLspqQs0ogIgAdcENVc6soQBgK+aFzb0asvlp0mkKuVL/7fVTK/SmVc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGoCRA9TVsSAnZWagAAWcoP/2dgXC7ncMn69bspRf/B\nvQysmqkN9pmFMyiX7Uy5IolTqRRUQzmstWCm2fWCxYFiHwxUAQwzEwwzBKvN\nzsvC+oR/BN7GFbIJHHXV8SuzOa9QM0L4t1RWu/ohjJo5qQ9sHFolSdwAU1ci\nclDcFgXZPSil3JKQsagUVP1XIN9gym1ee86HtM1qBmOD785mBZXN9+Gdaj6M\nEF6EpWMhXAltbIDM41kb+iF97IkMsjjLrqyy9sb61QBWAt/ApNjZsMt4rR2A\nhSiDvoy5cGgUTZy3Ntw1XUQ3g6LL6J/2jwTgsrqnau3XVXN2A0V3l/45e9sq\nPwoula/607i8C+UjPIdboBVMp2KKqnsrqY642Ma6Qc5bElqVvycqfZ+QNnkg\nsCLdeYXA4DOh3LzQmsp6B3okSx6p82Q/utj5mp6KrocjqvuMYRyMvQ/dLm4y\n1mfIiXQKILFd4Wi2K+AQVvJzZecdwiXeMbSnB73BjpkLvJ7Vy39gLGJY7hkH\n/uYcg5tsokV0v4dskD6d5iz09f2zBJYyArt4+GPUhzRn+/iy5tNPmSeL+p/C\naFUewHFYIvYXizmAGS+x5f2/7XJ2xVHBN6dStd4/GuA7PZysEkIi1I4PKgvW\nB3DA2S1CsSkus8k3tGNI2K8mXtNhJYTpmi/cZFj7ybNlUH+CKgzVdNPqzzQ3\nPf1s\r\n=BISi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.db5cc0382.0_1592594856518_0.9500879669574553","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/typography","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c135d52ebf41373bbd3b35664d013b14600f66c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.6ac9bf031.0.tgz","fileCount":20,"integrity":"sha512-ESXNHofgTxCqF5nOppGygE22oE7Q5nZjCFfPfAQXT6ufXM3ylcAGbel9EXWBGspm9jrtxmqVRFITNj9URbteRQ==","signatures":[{"sig":"MEUCIQCdE5iGGXn3iQSQKlMLMN4KUOC4XvMr0tLeyeD7PVsu7QIgJhdwvO1+aRN4o9LmsVKzvmI0IistuqlrXr8/UiU/rg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZ0CRA9TVsSAnZWagAAgJ8P/3qRygvs9CU1A9qySxua\nXyKai7I4UebCwBeOyrkb4lnt2naDq7qtO6AdA8zdcyX7LriHV1IJel9c+aT/\nOLGcmBUwhMvXnjYkv2yZInhgNTbmyDKCnG/WGEbFnwH/DPKtRKYpZ95ZnQPm\nd16MNo71dFAQEEAUQsgdr5tGURAYNr2r+Ji3SW67kmXD3iUTrBxUtdWLMCsR\nV4wWHcAbLYmf19Yl94CR39Xg7mkx0HkJbFBZKl7z79FWF0Z+EybAPEDSJedY\n/GjGSBK9nZyVy9PIZy7MSIfHPAQEVJCeHs8lBDurCFwl7GyRaCbMs2IaYGLg\nqEEPPHVwEtK7QaJGksTh3qZr1SZpFT3DHR4odAEL4OLFGso2f5Xplr+eNL5p\nDiphPs3An9oqp18Zz1IYk09BjZVLlX3anf8VFU6CA7kVovDXsvaEkdW16Qzb\ncZ/WNJzu2SFN50NgqSNLjy0iCSFyGJZkNAjUf9lc6pby0N7ijjWYnze4ntfj\nvOZu1lAix8IIjsnN34sxDdShjKQ9yVrUbcAM1ooQveX1U6RrI8Vn+A0ZxFZ1\nmlMO6SFEm+6cNfJFQuHIQE0SpQFpD/Bglj7Cb2Nrs/sPyCncPS52fD/Rn+PK\nT1nCFvCZ9NfLMjA5TgCSw8X47uB3M2ZuSL8PK/o5m95HYI0HrRKvxG0H1MUG\njneT\r\n=+/Tx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.6ac9bf031.0_1592596084129_0.06944972161240481","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/typography","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0d14bdada357fd6b1fa97f611732a8efd7d6717","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.c21b5c367.0.tgz","fileCount":20,"integrity":"sha512-E/ZVrXyU1l1dqYYxlupoF2JU7Na352nWHqKdmOlEz9/evbsIGo2QHGYo8K6oR9FR8zjrb3lCmXlz6958VCt6Fw==","signatures":[{"sig":"MEQCIEcFnD5RMQ02NNhwGZ0nUzbYuewF6dCII2XoR+VQWCJsAiAJ1RAZ/L91Y01ChUBYuBgvr6mnYfKKIMFeojqZ1OnT9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RuyCRA9TVsSAnZWagAAkUIQAJZNztSmo6ItPCpdqcIO\noPIuYgLqiyExdxjiOpIk2yOll2RmrU3rdKP5ynBrIm0Oyget9u/0keew4jpH\n1wf8DjIeHrlL2CwHdz0BcMdWRYJeWjlm6HDFYJzRoYYYcU37w8brLUcie7Ro\nkVCcBWuawww9cUC41wYeIAqInWnYq2HRgt65Ac3RauZ3RGmY+QBvQysmLgqy\nEjgol5HPMlCl8cnYN4sp9V9ELI3U6mrrG9U2Dy0Rik0inXt/VTNu3rlCjtmM\na1ED2rWvLXhHAeTV6HSMW68plX9BQ8j26F0bLuPHlMlNXsqW+Oesq5zeBM8z\nW/FYAUMhulvWWaMxFXrZI0No1b/eM4T0/EILHGRW0wl60hLG0NneKQqrDEoo\nvlykEUzhqYETC07ejxOPSsZIVD9pI2Z+dPcDAG+j5deoDK590pfgEzKJQgfy\neuKDUT/m1rzmF7dnj4COYd/jLtr+VTXJ4MzNns+RPjOt5hQXB97xSIq/c/sK\n1uSpB5eznotfu6sCWM2/PapI3Dtm0BW2tjhSurA6FiR7BqzorCqm0u/8JfsU\nbocY4ZbmHqU99dl/HXJ6wcl+owvIgiWnNn4x+C0mNDI+jdpFpR3HpZEQTILE\nnVqaKynOQMWHfylO2rtphGz7ZJvhGkzAC/NGV6qqik/GkmC0UJAY+gJ5eqf/\nM855\r\n=RAYA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.c21b5c367.0_1592597426087_0.509890939168832","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/typography","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d99258600dac66fa40dec2909998b35e7d16e82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":20,"integrity":"sha512-1D5uzVFIQRLbc7X2oHZryqi67+IX/Tb0sWMWuRmAeyB2WEkjTiVSbneXbSbNghnFlcfVPf8PKfwCgdkuPKYugw==","signatures":[{"sig":"MEYCIQCpWQlOMvpsPZmwjGqmDX+7X40DGfB1o+8VJTFk/HVsuwIhAJ85mMITznyVj74AFIxllBVZ8VugABRj1nYNS9eP+4m1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3kCRA9TVsSAnZWagAA2AkP/0FtgdECV3oPPOP7q//J\nVAElVB0tKrTL8y1GPi6ga1p6F7FEVGwMAnosuuknXWVrtAgr4uYKc3hGgqg/\ncEZoCV3VDt2kKZe9PtH6MnpJM3HLWAZCWXINsBurTucB6iYF+mMrBu4tOxL1\nkiBLLxNYshBYxteS+haglztdaKpbBpEf57yh1NFIYbaBs3CSyQEI4OnlSHAP\nyTBKslxCl+6QK7TzT/2hBd3IZ/bMe204NmbsTjz6YSAJvdsF+sjoAhkfPjcq\nnsSbEqbaQDOAd48+lXBZBzM7DmzUhV269BX8g3rHht4P8NskRkHUzAQZwPEE\nKj6yRiqWXuZPfYqVaR8DJvdiPANZTOkAw4dY45u70jNylQrtAcrVFQ98TKVD\n3Ko8rbvSvYQ0PkWnr1v4yJ1WFxVyJ4LpVhPn0bmsuCwEpOs0tCHw3LqoehAv\nBXI9Elk7fTZOIpoMez3EkUD2cQ1+3/Fk5LP+zBM8lOdu/juKtlGSIsPwoHDT\n4bPpxqq3Z++LvtHVmruz5uNGwxH0riGdibcOzqkM3fxh7wx0Czor+/ddVt/7\nItXD4CfAVpXMajBE1zyBZFwGmZhPM2XhdEdPGvKFJRnr6gpmsJ+dlXNJCErg\n1qpKRvC9/jocVtaOG5KT14bVPQmHVnwZNua1/lZ+/WgDrkHRW845DCkb+XBj\nvY78\r\n=t+H1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.bfdd7fd39.0_1592597987941_0.28201930881423376","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/typography","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.10b505785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"052fc7af9582d36c233a891869a64225c387231b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.10b505785.0.tgz","fileCount":20,"integrity":"sha512-d4ANF4IwyILvzu0NjoEyKNvhQLMV+2P+CUvzRT3OLXxDoodCoIKPQeN6JiUv3x7jkIn3qcAj/u+C5aVfBpTqsg==","signatures":[{"sig":"MEUCIFl9RbH+Eepdhkf2Ekx8MHjC1SYPENGHr1Czhuka8qlhAiEAmeZNiicwp9o0KOYq+MiIdfwjlwWG0HrOgaOXQyhOS6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R48CRA9TVsSAnZWagAAEnAQAIEel/YAr3IgTMFLD4hi\naYXJW1HfPfO1/255gRLsl6AX45xl5IQRckMl5rbaq+wexQdJTTypdyIsjFHh\nidBAwfC+4qAsEiXnE7j+HxxydgD73FC7AQq/agZv/YBvFBCOsC4eFiZBoBjT\nsXnVfZHmAq6xdHZnt08TZWv+DRByoKYc8KlWvKyILJSt+SOlGMPkLxpm+4UC\njJBAbfmYwE2i52yJtCHnPtP8KfOXsybfgoNSrlEmwxCoKhIahEz9xMb9uwLw\nh9t8uNlQG2z44+7jv31E+ANO0cqg88U3oe1pZgToRait4YT67ItOaeYso2eN\neFNyTFFOB/i8fkWdgbcwivhEWIhFzIgzEeVDQxrm/uwFsml3bmo2xmIBO6ZV\ndR+LXskonpOFU9Hs34rpZdAoQIOwI3V5i0dDh+tEtYMuwDLJbUSNpMoXR8as\nL4cIrBCtKM4UYJVPjcNPgGUY3m8OXUlypP0V2YQmJ08mx3QigyyttiWE4ucb\n3j2fscT8UpTc1syA0eLRIEvpfBeXzMBvdUKUDBbs3obxGQpbS8NmNSr+i7ck\n5IFnCSvKMssZD5JFy8DoE5nI/+EmGs8GAAsBbJ8Tw8P95Hd5xM4g001Murfz\n1El7/OTv4Io/8Ojs5LO4q+kVXQoTVKJS8vp43BYmb277wpX4mST0xeV+EXNT\n4oZ6\r\n=rOgg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.10b505785.0_1592598076420_0.21888748521630785","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/typography","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fc50fc442625e0577f653498ae5855bce8b9b18","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.6483d3f44.0.tgz","fileCount":20,"integrity":"sha512-ii1I/+4ZSUqNdFV6NvUprLJyvyYl9lsJ4WDeTCTJWVpm7vsVv8zBnRCNcau7wlQGJch3iQLyER7qn2vqUQgrpA==","signatures":[{"sig":"MEYCIQDEvKvZzlQyUJfexKrehD+ngFXQSzxTVbLj4rHDzJzslgIhAOelj5K7C6wRmRi1P3UxMQj0GZ6LClv8z1Z4pHcW3818","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIICRA9TVsSAnZWagAAUg0P/25rtGgdWbSs74D/xP33\nnXhbNJL+1rHNi/MPzCQbB4kVPjP9gM/+G8iiPHvAM7zOtolhHHmFaC04kbGS\nMKPtI3jtjseha72Ve347/bPgdD+TPwzGpvgT0Pd/52YqxOitGgZKKpdJABXk\nKgmEydYbjvO2EnnnGe8+jp96WgLor8tfWUE4wj1jzAPEobUR94/8TPR/e4nu\nNMgc+20mDwKz2vNewSSY0bMzgZiaYs2bKy88VyMkHHNwK9vIp7S9MS2viDVZ\nkHJyaGXXlQoO3xHuq1YDj1SHIjqNsCP84OCHsjJmnRIzsOFiyV+Q+jbwS4uB\nWL8swFEHxU3CVZKKIfjPjmDfr0ae2QHc9J4LkLnxo0NayQdl08w+QKsr+9XG\nVxPEYZG4Q9bgaUdFNHlRIi4XDrc4gvdCmkv7Mk0I7E7tdE1Gz72y4MU+xI46\nnvhjBxGBFe7U+wj3PJWP+bJADgWXJlRQI/H8G/s8sLPyoqv7bYSp/StIqjN6\n0c62M4nJoT/ck9wcxg7yuMErZMT59zl+WvXuNCnbL4uEXtVnxAk50Jew+cog\n1m0o62UxhK9S5cDhK8tdeoGA0MPXb+Yo7PZ2ZB8KQXXjC3VC4hBZQN3itEeS\nGQeNTIZ5gegWAfXOKShgrYfE2w0huPD9ZHtuHNXYkqvgvcuY+L3wbaCrnGjk\noeDW\r\n=JRJY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.6483d3f44.0_1592599047999_0.5094754038688061","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/typography","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.30a74e921.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d836d52dc977f456cccc35ff7fa44fa7c7efe1e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.30a74e921.0.tgz","fileCount":20,"integrity":"sha512-BauPvIonfzbdkzHeuhkrqxaMZWNTT5EjrgHSyBflS+vd2U8QX9w+AdL9Y4jiKAzDYZ6BSLuya44jNIoxIhiQ4Q==","signatures":[{"sig":"MEYCIQCAXFOd7mwbvUlVRBDgCYpgQYaKgIX8Cjfhfm5jQaOxyQIhAIF5d8PyNqaVAvUu2zj8jyD1wOY5UXGrj9PNX0wweHLA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKQCRA9TVsSAnZWagAAfNQP/3nGwVjYWlbbG7R0KsJd\nrNtAmVDNd4r2JH9Jwc2pGiMCcxzvA9R3UIakC2JrNk2JQi/wNv19Q4dGQwPN\nOBeVsmE074I1qCQCorwZPXMKz0eVDIpZGfc6tP9gu9RGGtrXsQZVMmEzskIC\ntYPQVzWMpTRAa+BkSgKKC9MyvcHzt4BLZdGHKxT0+46jLsLEHn4xkqmT/sjs\nsJEh3bCRWV/u4kBbe2imE7bxNjg3t6AtGZ45vKTIStic0cQfOpG6n6RA0FMw\nemERCsJiRFZ4h8UbrO6Q4xNvXUR+OUGfq25TgCK/+OxsoBL22Rw7WpcEqbSE\nfzlEVzUYvgMLJNLQ34dbrq9h1UaCeyCaFhaxegmyCmy4fo4bc7tqK3qe5kWM\nP+dRqGuud1bKuuZFGpqVDxrjJnEpMTV7q98i5TUGhqWbHtdYBtX7gN+/zOHI\npzPOp1zv+moqLbyBnV720g8c5jTR2WGiNsHkn4xXUlI5YvzxAgHveePGvlKn\ne6dNS5AN2JGzV1VhNN2s4Jd0MZ3UcJnzPbf3GmzDghkwzfVoTOiG7gKBjOED\n5hsU9sX7KL2+D4OItUDCEMk9cgLHhdvqfVQW9F/l2Gia4llgPLQQNgBVz24r\nDkYh2nsBfR79fwUoBRCIlSPn4ZL34OdNPZfzeHvIfaKgMjwqktF+fTGWX33a\nNoqt\r\n=89h7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.30a74e921.0_1592599183689_0.3627500522555993","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/typography","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.c20727498.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c9ba408a369ce74860d46502d35bddd447879dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.c20727498.0.tgz","fileCount":20,"integrity":"sha512-TFoc1Aq0BXHXEIWahJd+stGL8cPabtHEe62JJnWxsYdfqr34WNbxSPRMgMrDIn9DsI2faBeadOVWYRSuFfkIqw==","signatures":[{"sig":"MEUCIQCtENltiFK/xV1l36LrEekY0g9Z+qLml3evSHl+REXOQQIgb/++O/fu3BEEFMIFUPl+cr0g62d+Dh51rmeAc/3yDFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SM/CRA9TVsSAnZWagAAICwP/jPW9nIJfVplyghOFQOM\nfh4MA7dz9mHsdSZlstjDM1OT5JlpE6Ryn9I/XpHZdRBX88Nn3QaqjWFtcEyJ\nX0mRaK4xsEhfHkYPajy0+rHmpyCXO9gMbjjrnpbzS/BlJtopcN8wvRW+Pewj\nkmscICG+RxYMHjzBOcUyKMD+1mTpgAVJQ1lo+0QkBEns5YrVPAcPXtn+tmnG\nBctBJLhiuu5BGpxwQCJuQHYMSxDVZyr2Vc0HYMbef5S4v2NgE0T0q6YJiD9p\nyTw16v8SX6MuBUZK8IhwuAQpBbVJPcmCUQyMUz1ixQ4A/8GPZ7H2TvSL3jNl\nzYerp1fdbyBWaxWN7C6ApEyiJoEvfJXGQOadArCSL53O3fz7wlkvv4L+y5/P\nOR5JoTvRHqShhUPs+0VRGjdJY8sdX9Q4V0pPNLHwfWoukcX0Z1gFMpBb2/dd\nEu29NlikwesXIbTHXgtPSTEpYhOyKn82nI79ofu46fiAgFeRzUGldgFOwoob\n4Osw7gd28M5T2196uYy9S2AZ12EaR9NL4aZy8bH7IB/ewZ9785doxLhP+1TI\nbsOZ2Lvuu207lDCmenEvDC8Q1jZzzao97hQhzr/CFzW0aRad5+tVs2nBW0oA\nfnDInBba5qxK81oCOjteperBbXXQBfVkjaXFbZ52g5RR84pmmi4PVBoccq8N\noirt\r\n=UkKq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.c20727498.0_1592599358310_0.9316747690270157","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/typography","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc88528e933de1982328f17f79113681aa45d6d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.4e360ae94.0.tgz","fileCount":20,"integrity":"sha512-7iASpS4FOaXqtJ7hNb5lOjJAdvGy84U9sQt8HbOfjs3fFoSjHwSmIFeiSIADHoDVmhbc4VUSH/JjC7TXplMBPQ==","signatures":[{"sig":"MEQCIErs0DtCVTvEFIT2yJU7f91CbeGecY+LjtbD4wYMMMB6AiBEGcGMu9uvOUJEght5m8D9+YOBqEeVYUk+nrP9zwhMVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ScpCRA9TVsSAnZWagAAbSIP/jGcrKGsM8M697Fqp0/Z\npTO1aT1Sk1bofA5tFUp935g2Gsgcr5d14XxFjMt91qwD4JyqjT0mA86QR7q+\nyhYuBg+Vr5gdBbn2qJGCKafa9QsUhNNtLHVNmqJwhQrLgG7GAnILBnHu1Tbc\nXWK70UnhDeE4Vl2pj5VXZCmSL1Yk156Qm77YY6QQ2zJDR26evF9y6p5tOqlD\nJorfJxIPMvlwJVa8y56cn4OTus5Em/NIkHgrFD9w5fCGF59UiVugc4N8+dHc\nTmRmfVidwWk1TLOGpidWrLUbkGfcenHBYP/PCo3oiwiBFuLPKdOb7zyxkbi2\ny8X9EEupajPELuucjCLyo0qRwzp9VJ+znb0pFGsXCM7u5BjVurU4OJnKA1TQ\nZWZGIa2q+6YWHpwBY7FGSBFVniEIkZ4R4ykqgmYA3zhzkb0y2gkMK+2XmxKS\nlzPqcg2Rs0jYbZAO968bS7Sj9xsdsJMpRudia0xx2Ez3MwBLOgYvUjAl2GyC\nJ3kqmPHmIqYsyFhFXb5ktTJZTQtvgs6ZqbxSHhXH1ui1L4wfDKfDtsUwgMDz\nmfDSx00fnXbpQnP/fr0eLw1J7f/2OB8euNE1DuRCh9MT6LrqLC41195BYOXR\ntgqcjtmRwlAO6uuUst8h+GOOmw5oxe40+xffrtAs3y0shnzTOqDrlCyzfyrO\nrxgx\r\n=xRoH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.4e360ae94.0_1592600360523_0.23253658833742574","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/typography","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"274d1e33824a7f06adb3707d5f079f25a5fc0996","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8550fa53b.0.tgz","fileCount":20,"integrity":"sha512-NyjIjxa/Zu8dG+NhSle1MAosNaKsOOrqMAc7QrD4gIGkfCmtkoimk2LLDr9hpvCF2lLnrogxss4wfEnQfM+BZg==","signatures":[{"sig":"MEUCIAxjSQPodWiPzktg9OMPiPgMJ6qAniV/FKug2cXLs6XcAiEAmu9rU2oX7sti+uLVvoVnr9YVQsEWLX1k2vsFdt+QC+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Se0CRA9TVsSAnZWagAAjigP/j19Yj761WiMgLymoZK0\nS0aHsTPkMrvL+CrSdrvGNdeuczhXtAQITLGhrfugQWjtYvcXCICEfMYgPWVM\nhZUK3CY5bJUIqmSqQhTJ+eLr5uDqwL0n+8mlr4ICssZIQDzocB3jIAB8cU8f\nOvbWu4uk37fuNNhUllTRoG0dJBx+6b4W7JF/nJJIg9zVKNO5dLVS3McWRpl0\n6L4XdchCmZLgsdfkUDkACUnFCKxYS8TJsVCdAeajtHhUtgOTQ1QmtZIbVW1y\nS/Em2CmRw8z7YPAxWRxSFKejoTZVRfzvS/Y8X9IFt+rKQ+WFyn8lfDkW5uEv\ndX/8TRq16/YXWx4wYoApN406iOSlIcfkHGnfE6OUyU3GEiOEwmeyGB8f5Au6\nyL0l0VOAfwoI8QhtcH242IR6kXcjVIEY22X1SyddyPEK4hg3nAPgBCFeIs6O\n1BgxR6u42RUmLVC3Kt2W4Q4w5P7N3AZvRsL/s1EjZHL3FNyIrXDAKcJibHvI\noCrySd3g2uxDM5t/m5joRCaWgfYer4/gd7fu0dB+e4nGVNZ8XqoNWaNhvYqi\n/zWE4trkMxCoiLFzDK7vy33r/xewbaMvGvTO2rXO0NqsQ2wRpDEDqzoUdttf\nBzJ3UByrxKtEJ//bAzgX7u6ImIaTV9rqXRJJ76P7aKRg5P6prhCGvpSAay6M\nJar/\r\n=Qcyn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8550fa53b.0_1592600499818_0.4402652188719689","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/typography","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.93ade142e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbbdc6bdfadbcd73c053856a8fb9aa69091f045c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.93ade142e.0.tgz","fileCount":20,"integrity":"sha512-KAkIxEwFPxgg8AsnpL6ybuvmSQnqb8Tkx78P5oytH4UfMmPUvYQ25oHodzLjSURna58m7dH73fFcHjgbTMpnrQ==","signatures":[{"sig":"MEQCICqZctVC4in5DaW6kaMbPdHJF27fy0KRB94Htggz1Ap8AiA3iw0xepJUMCkqeQcw7rAurnC0+bfeXYx3qcXEi0xVcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sf4CRA9TVsSAnZWagAAZMEP/RCCEkleOZ18OqDCA2hN\nxelpo6to21G6ltMLo8CvAXCa7g6lBgw+kithqElfWVR9J2I4FK5H5Gp3eBxk\nO8ktxaEjZqetdAxBs7s5ca7IIdwHo4EI1DuMNyiUDIHFzqfYJk1J4cSYZHMj\nP9lwtBwF3GQGxWQlCevrpL94UwueTYlyo9lQOMsACiDp/oFWbhAeM3P0Oihy\nI/fFezuLBfyAgURb6oeRT8vfYpHdNQq8Yo9FPCUNqivPSM+BMYpFlK+AqZa6\n7kYrMwCP1M0xTkwN1YoEKo8nNmbgsn7yEShKivUVQNxZ1MCXUkDZWji2Yp3Z\n2QrGLq1li0Gghe3lBV+4dwt4nA/PSsqzrquoC/jf+OZ+jPHc1r5+/7E4lq4x\nIjR8Y6qFOWrxsr9YgAnlxuDPK2UArRCKeNQzZocSNmhZOJyFTuVnQHnvjj5P\nb6s/iID6nJRlq49YcMaF+alTMnQerqN1y3Y+we4I5J13uQdWd6qILbKUmMT1\naSxzLaL90H9eOROxINhBU554L1nxSOT/IueQasQufjxMpfnFGuj+y0vxgtJk\nKdAPCeUsV1utaPLSOjtrPlALkJ193uAgK42fDRY2buhJuPnQqlLXMMjouDCQ\nu16UJIwXfpoUsTjzaK3JW9UiaKFts4L46ojLlj6BsE/fbX26k0wbtOSGdVWZ\nr4q+\r\n=DnRb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.93ade142e.0_1592600567003_0.5357774497765078","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/typography","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"885d46c475bf19172bd332879b81446b36930122","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.a0032f5bb.0.tgz","fileCount":20,"integrity":"sha512-m/Vde4kbEfkqz2NTi1xZivoYXth8J/URRG2CgwxOQEO4kHLCIJqZo9xjvtdi/VM2ZBwJaZ7VGAuTIL3DMCUqKQ==","signatures":[{"sig":"MEYCIQDkZK4yf58LrcFwTyWIII0jACFI2Q/tNFeKQ7fsY3/MNQIhAIzvwAIQ6AmYVGDggDPoeR8jsQnvMxfLylQBR5s1EFds","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3UCRA9TVsSAnZWagAA6O8P/RuX78NswsHT5Flei5I9\nDHTwIhZzFqsAYcaFZCFMQW5LrGgy5YfWiY0nqwYd19BdOLGTEEedttlWkWrn\ny/P7vAg9dTV2kE2vhMFENHVVr8oKIY4rd3388oT7iXlg6pvds/06ElkgAECf\nYBE6gI3dV/h/S/i2AKOu9voIIFSlL7xknB6pBGxE9r2IJ0BHHanh02+pWWd1\nYjoNXCgw4rSx60VgIt0b6VcyW8Ye2suTDjHzjU+uv1HIceL5NcG/8n1Ezojq\nawbsCIDi527wOGWPai53vjS2avv2Bgpe/SSw4gLzs1FUeDZW6dvrEY62dR+8\nFAtrR/V8SY/xP7YYDgYW6ka4xZkEuIbxgzMhpIFvTmG8h8qcSjTGgnhrX/1P\nqMGiIoH8LPv9mNdOK6k7fiwxUsF2ikXIUydpChj4LBmJ1ZVyE3ipuaR8cBRZ\n+wYcBOBm+DXvINvS0+Ac9/ZRpkIBlZntUetHpizxS9QZeXqJVXosNEgsMbNd\nC7Aa7dIV4q9COk3Aj93y/A4yEm/JQssK39n7Djjo5bxxOzGWtnjjeS3wb5f9\nfNTgJOb/6KfsNvwaWnMCn4Ohyp3ZlrAF+Rn3qC3MfaduZX6tkCabrCX1epw0\nyqqF0WU2rAVbAfRbnVkHBGs8X8UYAPtD/zWnKVPz1b1dhmwexuR8OrxuSRsy\nCcFg\r\n=qoNq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.a0032f5bb.0_1592602068314_0.7015820893510136","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/typography","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.3f342e721.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a86f7b192b383fc740ad5f9f4e0b298b463a14f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.3f342e721.0.tgz","fileCount":20,"integrity":"sha512-4VrHkMj/NRbzSzPvuiLHyGYQLpHM4N2Q4Rlj5/lVq4WnCb9bTyCzv6SflEKXC6G0juTb9Va3pd1LpnyN4EPmRw==","signatures":[{"sig":"MEYCIQCmuAgRmhKQOGaLwLbwfvNOR3un/LPnLpf4e+DspoPifAIhAI6wQeNEum6QE+iUd2Nl1bW6TUh0MQXHr0ciXs2ZKiTL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S5lCRA9TVsSAnZWagAAJYwP/3Ty950jmah40LdRO4hD\n/CmvVljAnlcWfYcJYJFc77XAW8NHlKJUwcQdtyte4BBp0PhdfaCpcalYSF7N\nOWQcrcLWwgzyHcSN7D3q21oIuCHoXNdo+n4XSAKMZd/vQQI01A/RT6qRisUa\nGVsAU+wFGo9CgKjbV0qZQvvrSbUyGWirfF7grhMAt3Nsfp6Q1Rue9TaSriGk\nDF230kYiiqmej+NBWFwiMWxU2U9/zePUxoc6Fg8R6MPBYuB9u/S22xGj8VHP\nj2N4B9YW9QEOL+1M8/jPAZh2V67Ic4UQtgWhrFN38PxrKtqgFnUhc1xb44Rr\n9kRAhw5GyebjLKP5EIU+iA/LdhjrD2l2TYQPhGYuC529LDstQIRdMY8mKfkx\nTeflB23O+PxV/CRwY6h6fksvPOZFUgnBfAle68ypqcrsQNn8wTyOS6Su9EHk\nM94sTj/p5fUWine57qwIysdbhnTU5Sq9Zf0K9rBY6F0U6VTm9zCBdbePrwfr\n6ZqsTA12FFDwnP4H8vU7MgSyxt8ed175fKCcP5C1Rie2C5X2+ugpomqf5pvD\nEjT+uPNSuPI/h5b+2d0N5JyByLPahMvR6Nu9BxsGth1qSKSAUQDNUbmACe2p\nfSfm2+S4vSlBW2ApeT9+dYFz8SWWgx6e5OtKHMcepsJaSo0JDR0dMcUUmo/T\nu7f5\r\n=H5mV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.3f342e721.0_1592602212677_0.08446144207251893","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/typography","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6992869489bc1ece797c17fffd12ab988b035bc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ff89457cc.0.tgz","fileCount":20,"integrity":"sha512-snyJJx/IhO3VdO1nhZrquV6GvzZ2OV/kmh6jhflmt9fPSFbCQARCw4WKuOaKqjpcuGWeN3sz2eXIsLF0LfmbLA==","signatures":[{"sig":"MEQCIG3VtbT9EaZ0dvN/jXAs0UaXTlq8n5U7ENC0xWoa5Hf0AiAJkH/Cv38D0LML5wq0PDIU2xkKEWZeA8r/lL6sznBusQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6fCRA9TVsSAnZWagAA66kP/27e0AuJ75kOlb679t+F\nt038VAePIu2zbwkRB3KmrjnRwvb38wVsl/DLqfRC/PCx1qZnydPUK2YJs3jd\n4ZuNBbhHHA+c4fd/LaPXxL/GJL/yAKN0lNp3o0NzdMd2HzZm1Yk3CrZeEulf\nw/1cJ1bwOdlDPKjvxIVbztLVo7OTw30tzRn2erB9Py6hIKa/Fh4X4EIgpS6L\nakhhHIEeec/ITojDfMhnHUHXpxc9ihojaA/JiJ0EDDdAluSZT+Nn6SkB0w06\nnBi2/E0+koPp3MMc3HlyS7/HbLpQzLrgjTEFsWxg7yaNMH0Tf13943YTYBgD\n4i2PXUXXrONp1wCXLYzKyxLy3r81G5qDDfQDI/i1TgIb4JWLDs+fYNKEINe4\nXVpLGpqDPIZGHoEMQRZ3+d6LtlYlK9aOp1N8wBNrQzxSaHfQovePq4tvQjka\nP/2TWYcHoBJCBXCpK9hZJEy90DCvuf3m0enQznWvwYN8cOr6TF+ascXhEEO0\nWDfptl8MLAGrwIcWmcFaxIrR5R1y3b3JH2ZMZQxi+pufmpuCC57RoPRqnPIT\nR/o/vvjg4EOXry3cKNTP9Cnqu9ZH5MahcnIf6pjK+0ds3Ac26ZF6TE+YnICc\nFkjBlhRRpnpKqgnkbY7m6z48joVYUO8fYxMItsTJgrb2bK1wiAiF1rWvJ+V+\niE26\r\n=jlO3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ff89457cc.0_1592602271021_0.9836012894271899","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/typography","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c21593f29f23f1ce2823173d325c796d37c746c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.4a1855cf8.0.tgz","fileCount":20,"integrity":"sha512-IcMguOAJeFHM6T06UBECXfwF5xvARiu4TekuKfKeDOriKZtK39v+zPS2K0W7uvA0w6QPRFeEq+JLAeOCxP6CTA==","signatures":[{"sig":"MEUCIEqHzQKywJOSqQiQgjHz988fcXnzDEVDeR2JyKLYTxbnAiEAkcv0HMfh+0f9QLpNMjcU6CPnT/Cqke+S3QniVf0OFcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9FCRA9TVsSAnZWagAAgMIP/1k4Xi+l9z+QO+E1kCwi\n2nJ5D+1KIEBTaihYaqKc52UAYn4EH2/H5UgHcCo1yrfioOYwc2B42BUWWh3P\ndD/uMPwWHXiYjyeYDkYU31VAicXHH8sXktI4+GTcLvJlGCLntA/AWmtAeF0L\nHTEQDcA+QAhUiaZbsqgege6cyaAVLG1GFyIHL7w2j5hdbjjXLvYhronX4SYp\nJg3J2XM2KbEV8TpGjC6vTanJfc6MQm+Wo0xLEhbFc7E05CwGwgJfEV2gJKP9\naWFf382v9oA/FwzRuKwor7wDZ1ohAB1brd0brgAEOFYr8vk484nuRk29awfK\nZaJo2ZB9sKQHHc1FeQaeeAYL6dwonnKuJ+LIPzMDu4HqLLsseQx8fvdog95O\nfgh/40qnz1OvaCcP07G6NCrHb9VaUpygo/gs+zI3mgbdcxzJ1jQIseaao5aZ\nqaXspc1futsa4CU4JTTwV7xoA2bquvnKvATWIV6vbia63iXLWUiSSDtVJ8Li\nH+g6VTKsyvPlvY33pvaqeQyCtDloWsBS8VXmkBsfb4B43m+kpXbFl47DvxMC\n62reVQ7GuL6YYWwyLOYnkinB/zYEcunXwhCi0zQ/aB9rWydlCwvENqMf4JOI\ncULsBStk0cy7l54kyKPqn1kxUCVclIXc5sxU6PTssxV4T5LhGWjs0W6kReBc\nGahL\r\n=SQ0J\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.4a1855cf8.0_1592602436863_0.7650286558125616","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/typography","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0f519e73547acb582774c3d82ed1712167b9bc8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.8602f1b4d.0.tgz","fileCount":20,"integrity":"sha512-SfkxaZVYGbTNg9KE8/aAo4PhzAvNUP5+igCZWnga3EoTMjAR56yv1cl72TqmsYIZTIce8+rPFhXjbIGR77IAWA==","signatures":[{"sig":"MEUCID534y2VjcxP+73DDFsFy8Vexi1Es894EYJpgENh9552AiEArUaiAh8t/t5uRS+FVZP7osabjIcgrwKfZGU6RcPBWyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkVCRA9TVsSAnZWagAAoCIP/jhsQ8TX13Oi54OI3oAo\nvysgmkP7Lx29cxCCKoJJ4+RWsgaO4Q0+MXklrO5BIefCwPgzJ2enjmbfuxHE\n0Xhi4BIBemV589vNv6DFl0c0lnxPMBuLLLMrwyb8S+9hyyK9QLGmQOkwl5r1\niDUG8sfC88ReY9xi6zzOCfMqELMKErmgyRQRsC6OnsDANlexhBWkqw/qZh3K\nAWGwxhtr1s3tekenEaXVJiT4uRYuDk6FlbCtlOYX3UTUULiNOk5KeJGA4XQo\nl/fIHdfp6pjx9eELM35xEoq+C0Veeh7tC3OXu8wW4CrvQ8Q26/MhRhusFNEA\nXZGo+6pVO69AMfkCHPnzhxpE4ndU0SvPBBMPokYNz0uIJM2+jAPk+wPYLBq5\nD5b1BfTAIMAOD+7GqPC/5hdf7acRQ6bjGyyoLsl26i3A5y5HPaW6VOr5imZq\nJi8hs8m+piBLBuJu9sfsuGbJIKkVWXVyMTYhhiv/D99gF7DSxmai/VNprjWy\nndC6jLW1Xlf4Jmf3/Svz9M9dwLxApgu0fTfLfgmp+jKfExO37i3j2gsmA4sY\nHRRrBen5GZvf6IEM4chaf037HXTjjgaol2yaL9rJxoWM1Y3fJTqpkEJ2/9GK\ntRSfVFoTlmGfxvNvypYS20evFFAuTEK1Al0xoWHMANY43h6t7HZr5OxSjjGO\np2fa\r\n=LlGH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.8602f1b4d.0_1592846613177_0.7338241955608502","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/typography","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4d0a831dc4d211f4e1db0254b2680a97f62a199","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.69f9f0982.0.tgz","fileCount":20,"integrity":"sha512-qX1Q75kcnTd5MMfPgE9BOPgHLNQRxndvKaOl4XGJNwGJ5PbCdtCt3KIdE7IVZ+eo0uROxhgtrPsL2UiKt7ZXQQ==","signatures":[{"sig":"MEYCIQCPZ/65DGDkZNhE7MP7w+TQYwUt1E3jVt5dr6Dm56r8GQIhAPxvUEwLXy1ujYrhsK/Tq+JCignVMIUGRzJjS2DHmh52","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8oCRA9TVsSAnZWagAAHjMQAJEuqyj5qRlcenO/z8WR\nRQDYIQa1UjpiyNUWBwGpvKGYfz3vI9V1DkaMiVXRh5RWto/3vTZH9MJXYHPQ\nGGf3XLfZIPDn2XoeZNAlX3uz60KtqEv62Ej0ps8uOzv+SqnYgHdRjLxXQOIM\nvRcExpMygqljyMLvySUtcQnb4hIEj0MD4SMXjl5R4MO/KDY2oXnPMYGPgutl\nnnXJckZVyB6fXvIepyiG+lzJo8fmUDEMvEb2s6XDgkJjUAvULeVtRrxZeA6C\nQL4Au7ofD8/MzOseoU1FpQ+EPhx8Z7RKM0O1ZWHkOhoS8Zgz5ff0H/nnnZLs\n32NXA9lMwc7LLYWByCkEIQubyiJd9JAvo/+mJPmmp5o4ZLkwUQd12v4BrB5F\nAMs+oyJBMCdGzchGpI5iZZFLsi0+QVrnFxu4Y1ywwgB6NZTmpkO7CgeVw/kq\nZBi+TwV9ujXKZVYLvVGYeRgE17XQu0Vz2kEqs93QndteqxfeoMvvAzUf7L27\nc5SVYBZRoaTCSEFEhpyhd8455gjBXdeJZI5+fegHU6/JB0HdC2a5m4iX3dkz\nbpxX/9GncVsR0ugh28GmER6jeq8pm40BrLSeMrRyBAxNHCvZTKRAMI6rqqbC\nlYDKkZcvjZmWV4LOgKCK5vl3Neq17wTTw+FHUlq8KwMz+KmFCbxZ113ZE0kq\n54BP\r\n=CPvg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.69f9f0982.0_1592860455808_0.0775219496852515","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/typography","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.369a293f0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e6ca4bcfa087b90a8b613d17a5cbbde3fd152cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.369a293f0.0.tgz","fileCount":20,"integrity":"sha512-Q1Nry8lWtIKXladGTSLm0QpcMOGPG+cSjKpKZCHTNAubPGwApKXFiYcoWV5mAhFABENsG3+XxoExDyXzajEUmg==","signatures":[{"sig":"MEYCIQCfanMHnrlokoG5Jbn5xDigRjdL/PlDP4vfQ6osdASBjwIhANHLYig8IKygrbeAw+nGnOoOo/dMxxbhjhm7y21v1r9j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+zCRA9TVsSAnZWagAAMGEP/1njjC6t233gp8aWUI1a\nHUtzOJQay60nfUImtFJNs/fkQziKKSi++hlMUXuCH1kASavdl+dNfS2GI57E\nq6VR+nf9CKzTfyNTNNlYu06P+0VpKASICNzbaL1lhC2Mx72NS/KPeEn2VVVk\nFhfMGnKeyMCwc05Nc8zxPsY5IMQJlgvu/UgDAzCl4l6XUvI8ItebmQjKAUBD\ny2Kj1y0oc94bUV1RNsVfWnnuWIicQUhgh5vNFPVWAPJeyyrdNVmKnPrt3xl+\nNp0WjftjLpZGxAFwEMidNk45EoL9maeFriAScLzw7RUA46eWq05W9J+CjGIK\nW57i2d0PtURPatpTep0svkgZ1DTKfH1FPluyct5p+xKPBYQxqzs6VdRMvzv+\nmGIafyPd8Jf0bdOyp2QmdaltnLEr9vQPd0EjrC86emsxaruBNkMhJdP3JHop\nadhAFbSgpPhuzWAARqc/GCzgzwI9PsEbX+34B934Kc114NSEwiRf8sPE+ZQr\ntgZQehLEo45c20ck0DCi2uB4/xwq56NaaegFQ/qkkY+qxyPm5LYQtgxXdb+C\nhXV4hSN1yj9D07jvwXMWuuKe+Rw/S0TGAo2hcuBcm4Y9XmatZpJlAmZIenGK\nCiVr2NJvR3kucmJHXqq5ttjyoJC91a7TBEH2GXqXB2L6oNvY5EjJmgZmpHBG\n5V/0\r\n=xwMe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.369a293f0.0_1592860594580_0.016652596446490087","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/typography","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f912c4248a1f7a32fed83a3f5e3a77de8d0750c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.f1432b5c6.0.tgz","fileCount":20,"integrity":"sha512-ytpHDdqE9bZ+G4xIpmoA36SSOYEaddvf9uvwnkeM/dK8KT5LoMb5DBwYxLPYIy24UAzupYOw4LYkFfWg8FIrzQ==","signatures":[{"sig":"MEUCIHdoEQqQ+m/jIjUNv6jyREKxQQww0Qm4HSvcwTg43h7bAiEAu0dfnFiySsbjOICHub7ygQQNha3oIouckQNZk5+4aDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SGyCRA9TVsSAnZWagAAIbwQAJitEta5kYoAfqAZmc9z\noa85YGd3yKr+7J3wWg/dqojK5WD9xjum5C6pYVA8jYtrdL2EqHe90zOlFwgh\nLJyyBfgWKqV8qSrDhI0kEZYK6XWbiCZm98FRcNfP+u6fEl7sPxsOia/9dwgg\ntUDNOQJ77ecPJzPRn34T+dx9qNQyRp1Uzj/Zy76tD0CK12REMCeRLcUf0Q7A\nXn5TtFWx2KopLWHADZbj3/KEeHtZK1Avo5nEp+18nLfrysNUW/IqgWsWO+2h\nvMi0r/gjfiCInbTHqxtzc+bWQbIPmFpt3RgsBGvaykkAac1Fo1IXnzkqzM3p\nmyJfLoWAe5Q0+SVW2mg3cney2mddYUOMnFka2nI6b2BNDF7hH20gbtcRQPyf\nbD/qkG2PwrahCL4787JQHhaQbafWlB2n5IT+H+1GCCuafvn2nN4AUQDKO3v1\nApRVzH716QEOYYGE7+cVT+PCW3G3oSgXSkCNczymY0exTkIy2pP2/znLCUje\nio/fhzJNRgaRdBmcfb/zFYI9MAQdKpjCT8nyi40Tsia5RC60Ey++ALv7yXP1\n/wqpILR/mxzUheZgv/8UIYxo+F4b5v6aIbJ+hPmO0278yrJNfPM5EKFrScab\nYvkN4KhPFNJ/k56xa8EeQc0lwdmJsc2+6ZJoQpAodMcq7X30VgNhdmIw+wXg\nyTxP\r\n=ogU7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.f1432b5c6.0_1592861106399_0.5513319224404389","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/typography","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"868c9a73fe13d30db93f44a13479251092d7929c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.4757a16b4.0.tgz","fileCount":20,"integrity":"sha512-wnRQSBBpKMah8lPL0+QGqsdnZRP1/kbLBDqJyY5eCPCkgHhQ4k8TOF5v1hsSMWzQmYH8JJmHU5ry+tJPd8jQEg==","signatures":[{"sig":"MEUCIET9Se+mfsZfmHMKHHWuDdQ/w0Yiy270dtsS4NRxFBohAiEAgfX8VMS9Q67BIF4z0HLGJfmXqI39o/OOfM2iN1VwgDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShJCRA9TVsSAnZWagAAzcMQAIM8dbo1Rs6v5JRYh5sy\nYk9kWsbVneL5ozPCHH6Wmr85n14JfErQ/Md9SGtBW9PGzK//1f4Fkj9OLF3t\nWoxz5IgjGSh6+/voaws97lUlRvUFvltmmSljqi346w8RMTBV/RriFc76RaAo\nSsAg8uXjaD4D1dOtK03+lH5BmHTD/GUQhTr/sfQIUK6+1yiMTgxtkbf78Tq3\ns3lDmK9S10wU/nopsRfJeU8MmLwIOxk0rL/e/ZHdaVYi9xl/owN0DsfgZIK5\nPjiZzdEHbexgRb0Op1RHc8lG7Z2VQWOViHOiQaE+2S5zFP3DzdtFwF8pjSy2\nlC+JJD5VZ6S2670dkyRlqog8hESDsy/goKJ2ofW45vy2Shn5pL6SAIxDMkXX\n6GZHdxnZ6kTUJAOqzNoVy0yv5fgh5DX5EE/by1A8S3NfZyin6dLVtwxzBB98\nKQdN1sa4kmhezThiyG6C/S9B9PQ0uVmRGXNog5f6hQFMEtqni/fmx5UXJ2aL\n49f6lfpli2udi78zVZ88IiWLwnROdSF9EhGl+tZhuV6KFHva2VGP5G9vprli\np9TcjFXVE7mlABVwwj2KvUVMBZUEmjZOD4/V+QSqpbcziWaovCVyGjFBqytw\nuE9VeYtv7amu6dS1sJ9Doxu+rhycDpHT3qeXOtxT3wVbabZQx74vLHo8CFsN\nK8YP\r\n=CyJ+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.4757a16b4.0_1592862793442_0.14208243352630934","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/typography","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.f8f472762.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38affa8a71d4f556dac8aec1b3512ee0cdc4e4df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.f8f472762.0.tgz","fileCount":20,"integrity":"sha512-W5jV7g3pBXSIgJbk03KqSrTYKZyKVTxAeHGsQk7X3uAvyzXe8qd8Zp2Y2ohbUwxTxB89P0HoGSQ/o/7orZIcLQ==","signatures":[{"sig":"MEQCIES18H1Xa/USfhNz456/GZmCIXmPT2a2G5WgqWneQ3kaAiB53HHQhuj6jCcKoMdr6w/V2xXkvQLIuE10g8DsTmplfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sk+CRA9TVsSAnZWagAASKYQAJX0GseFaEpy5/7wTxuk\ncxF6FN/tHaPQSk/7U3fNZed4DwRU7agojbW1TTGGe7HpzuZIwLDUqJVZfelx\nEzHddwoSw7fAqIkaJUy08CWHYVcY8uiSBzE728o0xUu17+N5y0ztOcyR47lq\nAkDwqIX8A8SlsAd6f3i3JeBZj+MiLu+u7pcn/YBBGwhU/goJkRwCakilna8S\nWZD7Dv5++sHOEXzboMNNAztXpiQNICUlyLcfj7aQ7jJF7FHKdIhF6B6onG+8\nuGOWHDUmSqkuG0IHsWak3/HZNf+mDMQU2wI5TnrJAWXnRyZWq/4RlJC2JVnb\nzCFGQxbn2kC2Mjed0E3DSjgdSVaqFtUpFcwwX23KGFyfddv0fQ8qSAxM/oi4\nxMkaNJsPQRvxVlYm6tz/ItNC7zUTcYvDYmhv36McS+NyMpVBQ8GsEM1z1//t\nF9WOEgGBquG/IzLAXXZOetkqhfU3nf0JVkKeZ0qOX3rO+ddakNcJRertMPN6\npV/Kq3jJO2sZu+NyXz77MqBQtC/16HRP8TH05oZA/ULoTbcC5z76tTZLtfYI\nZcn+RcATJJLvbmWUzz7xiAlSOxC3UuUZVfq2f50Cvpa9fqn0yLwjPQhVeyWT\nB+2kU2dvBNknqCnVKMXxj8PiM3Q/huI3Ty1W4bCK4pJpGIZD2Z7TP4D86X/C\nMgE2\r\n=U/vn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.f8f472762.0_1592863038033_0.6329340832765458","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/typography","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23708a3c8020eb240f14fe1f4b13493b29fff3c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.7e4d55c34.0.tgz","fileCount":20,"integrity":"sha512-hxUxAQ0Mdb4a5UI7QyRnFqLlQMl/g5AvewTlo4YSNyft/nY03VC/7/jwrPbEQeYhBIgFXyNuYIdiOoa3W2fX3Q==","signatures":[{"sig":"MEUCIQCM2FV1jZHNLy+GC0+7ctodQ3pvuwrtZeD12EvS9xQrKwIgdi4+YXs0LagRJNIVernHLMGUVuy92MQfBRZtRXJgIEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TC4CRA9TVsSAnZWagAALv8QAKUofs0Nw4lJw/jjam1e\nSOONsONxBH+VO2//u8VZU2o9jD3w1YtQ+oIxIV/L3zFwTsMx3Qo5fd6JEvEf\noh+AlvkuScM4cMKwOWJDq3e1XkkEkM7K/wmMCKKmMhyfuL5J/0raLWbhXOJJ\nvTSE0L8vSfZW1RFKl8fn/iCJVTB4h9v7PdWRJn3L428eFll0llRMqj3knK2w\nXWg8901cQhYA38WJgklRnXuGpt/HZ5NgficSANgWQ0so0Rhgs/9J0hvjnB8S\nqCh1HzTh3VT7evrPCmjQUr2BJ0wjGa20Gk+HIU+HhPsGrAcXf2MWXAhL/jfm\nJyVpgZnR5HJsB9X1G0BVw66JhzE2o5YJGfplpTO2rcutjMFDSsod7665Cmc+\nkPVMNhayKJeUOFBlr6d+vRXy7SjvqvPa24qIOGR0qGeKOuxG44EdEY8Usqjn\nMz/r/MeiDr9wjG5IwReilJEHQDbLaOE8Sp8n05KSt23Ytm74FOlOJhg+UBYi\nfgmcxteoKz9eygMoECgYkCIbm5cVWkfC3+CwHRp/2SJI7PJv/CU3V3VwlC0K\na3SWF8kZTJ1/XBh3XdLWQORqb24XEECS4KfuIBeTiAyLIqrfUKxIUge+Q0Jr\nP2H1YcRXnKlMCQHl3RH3OJItYG2RWZPTyvR/2BMEXBMZktFbFhvuniGcmsPI\n5K3j\r\n=9+hs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.7e4d55c34.0_1592864952134_0.176373319784205","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/typography","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cd3ba2139db5af4e182283a7e75c993953c56e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":20,"integrity":"sha512-8FTrTDRpP0lWF1fEMJ5Ub3oCbQVmTMIXo2OTp0Tnmzxdbkxk5O4vAMQKY0JDtfuPPKYvVArpSknkytb/d5thSw==","signatures":[{"sig":"MEQCIFUdvsxFH+MeuRSqyXFS59bv8qFXOON7pC+07ZNKGEZCAiAJgI/+ScY+V1aETfBd7zPHuiPJe3aWyyUkKtapmnJYtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hFrCRA9TVsSAnZWagAALR8P/jO0x0Ev6cNGqq7Kb/BJ\nWpPJHD4PJXLXrSvKUs1xyZRJtDuO9Z/d/EogzIZ1lni6LnixmVnv5ya9Hy5u\n8vHYSl/d8UM9hfi7UWdXpBLM+9aCqpCm8bkkc2jSVD3Ga8cUSBpBoWy/Ou5w\ngcxFuSjZx0YQDLIXivOOl6Eg58rolnkwgxXeo/3/l3ALLb5YGNvSRtHjmVjy\nbE/Rob3sQJQdAyB0C5uAS20cLgPaL3FEes+WEzI4Bx05oJDoLPIXs9akrlE2\n9o/qCOPj2tDG6n22JRESSGVYTxuNDHiaGhAokqGalsovD/p4XEDDRCjwvvWw\njrgtIdU8hTj+49Rr+8qZ304DJBVaROf3FGN5awkjSM+XgnLyYg/KKGEAIqIJ\nQMtdcPl1XaTDez4HXYXnZcJb758uGgmP2LCZL7qrHN7QXvO6CUveFv3vGCqI\nHM+b2ht6S61/c7RZ3VQu7QGVj0NnVZSnn06F1PLWdQpr9z4yZw0nssO3bSHL\nHRP2XxzEUeDzzlugJAUBMhWOrqviaa6D85EvJSX1/lD6bagDAYP7dZurVNtq\nqZB1GLQ9DTITuINBuLZq+ngC14DjQ7WFyWnecMQM8JBKdZTdUSek/qTyOY2x\nACn1nyunxy2QSNeCVHbc8sCPCgqd2fR0yZkel035oZVivfVdeTDEO1ad5+54\nZMwK\r\n=wIZI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.bd1dbc91f.0_1592922474797_0.28292803302474234","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/typography","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.31523bc62.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bac6dd2687e22f8b80eed59ad527e23d97263b6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.31523bc62.0.tgz","fileCount":20,"integrity":"sha512-C783+9bABB0T2rXBOKTssOtCoOfJEBg1QrRq6NF/MEBsDJ0QrSP/b40Xjp75HDB/rL9NRcAXC5vGkOB857d4OA==","signatures":[{"sig":"MEUCICUcxZqyfU/MfbAbMM3mCB1gp/kf7CEjM+yOkwKph1JSAiEA7LRO3E4kLUJmxeE5D+vkWB4QIhoAhhWWO3yxKecWy7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hKwCRA9TVsSAnZWagAAJnYP/iIZJxOdvXY7x+lTOc/Z\nqjZM4YAmT9dXrINEsmv2MMbzkwEuWiWkW8AUMTT1tyMwnjhczdzG6MFHhsCa\n+KfSGtkqQjnbp0hhwD2DSAvY5y4pfwE7h5FA1yCWsGp6LNuJMVqWnccuUqyu\n7bRIZIDaV83DZziifyLICZyud3P5izf4vjXjqzJFIqfv34aeL47Q/ZJI5Sz+\nuReQHsFOvSzftZ9xOrtwEo1Y/umeOSpn18bN80UHFsIAs+QLkJ7S1vHBuVbS\n65TdFW7KKL7s+bF8xv9V68TpFabPiu1bi7dyEQAvS58jsllOHsmR85AzgQDs\nHXWBs7gH12Wo+RuyRiVvbJGEkz/E2Hc16jjOoEgtfBinIdKUury/187ZMKui\nXUbeDnyaR7PbTi1mzDw1TsIiQr4DM48RJ2DNq/l+NTMGsso3krgUrCCS5D5W\nQLTWQK3LtiNwO7M6WemAriOeonR90Zd3UEaEIOrHz4lWDIM0OuT/G529CVio\n4/CEIvu4MJkcrdpFizs5F0l/69XKjc3PzN82kbemlT5/KAZDkMub7XkluVGA\nK0TDMDrwjK6ls898UITYVVxwxgfcPdeHpeeD3ljlNlnFUkOP9Ir4BhKOZjvH\nVP3TAWYDnY1tLHcTEgroWW3VfpXt0T1KahqH2hxsHkY/DRPGf60KVbkb5nYc\njckl\r\n=8tno\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.31523bc62.0_1592922799524_0.5602307450571973","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/typography","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f4934af7def9906bac7154acfda620e3b2c475","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":20,"integrity":"sha512-9dGMmMrRUgCeO/WpOr7sxwRQOtLLSRZd++FS6HJ8UzvB9vRcH/VCQbgkFP7HMPuMroYzG77R7KKJzJ63JoQyhg==","signatures":[{"sig":"MEQCIGP381HTum6tkVoxHnV43rFt8lc1CMfnxjGMawH585wbAiAzshc2Gkhktbp6rjCtWl+jexY47fqNvIYZObM9FkWyPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQ0CRA9TVsSAnZWagAADlcP+wfm28G/GTb0MgVjH26P\nPZoaSjNIkbjrMMoccZ3DtTB7y9WVTUFsHqJ5Zjlpk6axVrI+w+1hF6X9Gzmh\ndjyt4DBaG2uAOiwvPGsTL/NnISk5kAXc/GeD6OUI0ol+4wdTVVmcRPOZbeE8\nzR3lNkveJY9eG8yxOeRtH9NU6dR3Dopiuu/HIzHmB8e5420PC6bCLsyQQWdv\ngyCJbHtLOa7fzyNXNDM1ibyFLz8sbGxtGC6vIryj7NDUSAOmgaT0Owg/8taV\na8e/a3FvWzE+s/GnOgAvWXV16S40gBh8juwKyFjFwHOCm1NKWsZfGzwAmhjP\nPKCWSvElxg8pcX1+PakUGfru1IlO6sMmEdiiNQvnp0nSWp5Id0o+5rM19lUX\n/7248pNAE6vuwHe622yvVxLmVT3MeZbp3wYmVjPMMi+ghjVMyBY1guFm0vGi\nBzCT/Oaj4xsyp/03gQDXl3b8m94uCBa99qRht0pztQ9WRPqR82alIU49cUjL\nS8O1+Vc6yO1l2XGdyCxKd4YiAPX9eSWQ6eopMm+6KJcAx5FcYEsDxXwt0NCB\nEV40vKClEpyfA7vbskB74S7cMy7YW7c702ym7/lw6NZ4erATc2AJl1kW/1l+\nqMeKo1W2MOdGaaZFrSe5P+D0K8uCVNvUtGGAz7+H2vMxyBxAZIIsWTxS7jiZ\n2FB0\r\n=G3z3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.a96b6d4d6.0_1592923187589_0.24732511706577132","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/typography","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"126c5524512dd5d887702a82aad6f43819d2d010","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.ef3a09533.0.tgz","fileCount":20,"integrity":"sha512-AnOdk8A0kr7ogjZ3VehwGWtKsyvur0mUMGEbQQh6UtGm5zCN3tdvHAY/T/h9447zCNlEATTEIwDpwYVsfeLcQg==","signatures":[{"sig":"MEYCIQC56Luvld2E4tTomMq0wYQSvieFMTEJBkJCNdpyPalrOgIhAKbgv0unvkf0Pc2mgWHHu2bRjbtnK0VhsxI9+hsNf0if","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYhCRA9TVsSAnZWagAAyYMQAKQTodQMVbl93Sd4yjdF\nUtzWGvIql+DyCRtBKBA+xGDLsJRLXTpqm/rvbNoSO5moY/JjG5H/CzVnao9u\nwNMZI8BVqcBVKoW4exNov5v2+QeqREcsGADnRGbwEjZO2BIelj+mzwZW4mNO\ncTg7FQtNCVVmC7HnpTRFxCgiFGc2dnKX+Er/Qh/hKKXj0BhBq0TasNGA8imW\nRMvAgYfETDi4USYaBz4xfKW0wYaz6QrJavYTtMoqxVBuX0BIqwp0av5aiVK0\ngnRdxzLemLBMjam2/TowwThPQo4kUMUx0o5FKlY3RpiphALnm8Q68Wc9cZUz\n8YKvm5VQ5wwQq71y+ya5ucTFqIQeXoFz4T7B348UFo1QD/QsD/DfZhRzAFvC\nEWRY//NAkdskOBWoNLztG5Q/qcpJGNCD1AmGMuxgFMgExlrGNGg7TDXlDwzw\nNOhIdxzHNiRaj1dGfzhREOqKn3Rhb1MzK+648Ip0qkAXT6Dye0JcUmQps1O9\nO8BbWQxHK8XN86trdUuvhMnLeCR/b2fBDmr64cWG3VKNKKSbYs+CDtzPYLW9\n05t6WWJP25MEAKK28LK0sOwwQ7YATsHsd/AVJ7ndcMHjP5AaJ4BJP+qSv2ld\nkxeLo/Rxn1ZC4afkKRMn/IXFz3pGTahpjuUiQk43WwYaXi0OpU7c2ZGVuoib\n/BPw\r\n=457e\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.ef3a09533.0_1592923681482_0.41639903870101524","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/typography","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.080965f39.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b652e6f1a71cb61d3aede2943eab38a5c9f6dc7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.080965f39.0.tgz","fileCount":20,"integrity":"sha512-r8R6VxO1T1MAyzN+yKGh04fosQF3Byda5h2VqT5zMDHl9KIwOPJkrNGcIGYbs3PGduyp+1y6JgNtEL4Ry0xLKw==","signatures":[{"sig":"MEUCIQDd+V7yChn7oSA8PIDfxcWMOHr/OgHDTW8276QkwrF8uAIgD751dy2lBpHPnesj+ooOcdFz3ODSZhMHXY1iJWioPZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0KCRA9TVsSAnZWagAAOaQP/icwEuLm3EVkxRdUa8CN\nkHPrvGd/mZcgNdE2joOLq1a2Fsws/oZ/HTGez9thyWt/rhJFaME8g0UfnTbG\nZMk/8EPKZXgfgrpo98Akf4yqcobzIUKznc+EMefQVl5sO17BqSpngYCSBw+U\nyxfDWh+EvUoOX6zUmYgB0DNw45k0D0GU7at75ZIL2r4tqTKLNvAOk9QzWqnx\nXDkmxumldmPdPltGbfJaiLjliqnGbU91UVhweACGVj7huiRJaay//Sx07giB\nWif/0Ku4rPwUrhKSNGmI9qBoK9XPyFOH57nLZy/CzbxByW3uL1dHdSIAWqty\nWe1tegps3RRxMDxUP+MedPjEoHaaPZMZQCF4fOehNFfHj7VpLgiTxby1sKVL\neMsp5RtOcHRV/ciQGD6/DW/J3sFp7GrxT+mlXNAzkwYm9J1d2BgMczx2k49c\nKCK8uycz8RMfyI8bvloIbGJ4n6LDpJO7oNKxYRImlVSDOT0Ifn50n+zG6rFL\nZqt69xahKD2/UNNBC7l8kpfrMLCTYDO+m3O93GFnSEPOYGfUklKJecMTOT4F\nEbQcqoXdsKD9hISO6AqvBVNMic6jCKhbZPY1zOKjR8trCwEiC/9XDXKRkQ6f\nhCreWZcca8qkQXWQDY105BoLG7WwsfLefGWi2jZJ3rfsv8kRruPQt1Ll+fp8\nKD4e\r\n=LMMs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.080965f39.0_1592925450095_0.8702427929578969","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/typography","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba1d9e7775ef57da3ec31d7ed98b17d9e3ce695a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.1bd67b65d.0.tgz","fileCount":20,"integrity":"sha512-cszNISrrdxbFJmhlbG22xGbSdkuqX/sEtuX23i/SC13KR7Q7zLqytyqiovM/ooSilJJOvYFgR2LQ8Lq1HXMiNw==","signatures":[{"sig":"MEUCIGlXbAzi/cDb3JDjDspNSPc1A1NosUoFzHTTE6hlqwgQAiEA9UsiSy1aqIk7TZKxVtdKo6jl38GqcInVcoJvlMcLBbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ib2CRA9TVsSAnZWagAAtasP/3bBSM4YqZ2zU8ERgra9\nacpF6U0aPIVnmbDGucaneG/dlM66f4BZJ842RSvfDqrwfSF+3nAAcM4yJb4c\niQ44vQYGSTUzlOAe6S7ddEH5xrYkYVHUqHxc1TpxWILrvYC6BXhNt+ABJ9mV\nspq6YyklNiIhybmxfu7uyufWhCasqKetHObQpNUcv9HqOTQqMrsvU5LnUf90\nw9nRgTPuSBzsIu8RmO8vf66ecWq6CgMFd2Pv7q1RugH6cPHva8DmITNON6S/\nkd8TcVh7UX1vT9GLIO6wBtPeQuT/QxzKRxEfgzRn7k7KHsTAWKST7zXQ7k61\n+bR4RLoBLSZH1HdS7vcmP7IK0lLNvhkt/rdGyZBrJP5F6lXi1ERvbgZS9vaC\nBbw3nIGTDu3NdF8plV8uoEcHB4RfmZR9PwvZNYbx9u0vOYIlVRQhgQ1hw93N\ntGGK9L98A3+6hQAdNgVQy6Yxgo+HcXXkdfc61fMdnmbnTFVurUEX5oHOwGVP\nv5Wuv+I9QKwU/AAvQTQltgjFGdfxqjJO29yJrLTI0LIun9JXLMOPU88LAUzv\nRJ5/3E/vaqQNDyVicpC2UCtybCgxqXcm2q82lfVWrgJ2VSZ0f9bm0vSyHohW\nsBHgeRT1xucfU+RlU1jP+S9WUgtr6wXgIpT0eM52kjC7fIjYmqgKR5IbjGmS\nuWra\r\n=0Qfg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.1bd67b65d.0_1592927990379_0.4456801756970141","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/typography","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.18ca31248.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb05b35ed768b9f0b81dabd5355c16dd9c86713c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.18ca31248.0.tgz","fileCount":20,"integrity":"sha512-bnIHj7F6DCIe9mAl2rpPb9xxt0hsjLcRlMJKZtgwq/bhSjfogH1inxkRnLR1GKaUchu9WI9ywhbd+QFqnugEIA==","signatures":[{"sig":"MEQCIGtD12z26upOCBNEfvN+V7iHzmKzv7R05wikKJukzpxGAiB/WLdqLSTGo3VQRKd3AZafAs6v5hArCdsDerPau0udMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kjxCRA9TVsSAnZWagAA5+sQAIGKOMyThOSZmMY4+CJw\n4pMyYkhOwJJLXxfSqpcwjDD47xICoxS7+Aw5gxLtCfpazfoeQLWym87f1TBW\nv2j6dmYmc2v3IbZ7N1YkXs9O5DZI3CXumkM5HpirR7RHtuknM5cW+FHVxp+C\nD3kpUQ3qOQZ4qfSGjolAmP8Dwe4qBwGCrxDNU0rAsHIwCaxWBjyqvXfNPyl8\n6OceO+2JdgIEdIiNNNlupCS/yAspf74AWlL59ALI8ZZpwbmDiJg2d7lsFc7A\nb8eGPbWShzVXqtG8eLJ243N+fzp0nfAH6ZqXz27y2ZpyInCwgeS3kTCuIUy+\n5Hc7QTlNvmec4UBoFfhjgMttn4uklVF3jH3ndmmCq4F7F3sb/gGbR4tfLl/E\n4FI/HrJNVkBxilyEZVq3QZRp15MhlL8r2rYJerpKGaO12zfvFCU0qV8oPGle\nOG2BBJDMKDPEIdT/ePacFla49qxQC5Jh+FLTtSVz7JuuMuCd8wqEjoleibkA\nhXTpRTOeo3sVGiXoeU/YEt7F6aScjBvr369ujN0G11otKeSkBG+VQWgRvKu6\nYtnUmY1BjXYYL5XIo88nAi/TtcO5cYC6kfkXml4gJuYVYUZ2pMk/hsJ1kFWV\n+qHphsixahKtmh+KOyW2ytjqoo1uxvW2dt7nEvP1L0gTBZ8LrgzZcbRUmx2j\nfN8y\r\n=u6RN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.18ca31248.0_1592936689070_0.3596643659868093","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/typography","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.39cf00836.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8a95b761ea90ae4c08da0443975e27cd8462ea7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.39cf00836.0.tgz","fileCount":20,"integrity":"sha512-vI734RqcArzqGgc9euPZQtXcKEgxGKNew8K+QMVCVuOp703N1XE3U6cGDs02PdubjPfyqpDRSKb26uq/P3a5Zw==","signatures":[{"sig":"MEQCIEmTft4SAXz2FhZS8QAT4xOkVBayiycq5+KqHoEBOahKAiABT46+yajyh8t2Q5pVZHgqIw1BozvDMr7tQWP2m6xO6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5SCRA9TVsSAnZWagAA3fgP/07qHNF2WbS45BDvUix5\nBgNRrC0TgVDAfNNUtmkU3uCNhYPBiWJaOtj2eWjb8BmaxDgzTkCx1VQGmsUD\nTPfPguxPGrxa6RQqNdJN65yl3N+Bb1XHOtVXlRRzFui9JD12Fy1STUdkoQC/\nEgLUVaWgFHJfZo3J8gUtO3WsS2R3d8kG0mxvmjd+5S39S9uGtAWA4mVlmoFw\nEXN7h9496os3linVFX96AEis9yxBKgi3HVRaqYPcbIToef0tgGHMlOb+gCpc\nyoTr5gz9W22KG6+ocQ+YEJrr6LF4krCxlFrRneXG54EQ+0HCACGSEOb/WFsF\nnmBGJ3528NSHPaY3Fyk1GvN/jmU1JRYFzeovQ02odR/+fzxUway1m7aVEn6x\ndsL7vaGfzuWldRC8Ndz3d4GQ440hJTIW20U3Cyr0VD50zm7B/4rvAKFfB9sQ\n65dfLhthQS6SukebF/JmA13jpi75hG9A9MxmshMdh9yeea3q8uE8zPaLVlhl\nxpd6+8B+fiS8RROpiwj4e5OXvGwFtkrbM1oc0ZbsZScWhF1Eg5P1iFo5JXwf\n9Fsdi9FJeHPJoT3IECHTE7ulS3RcUWafwUy6CRgxB4y8oZxHDPKOTyzHag7e\nh6e1zAF2I++tHIXEhp1/d6ELqLE87lOvUTqM8H3VSSdYkYvOk+NPbZgexANz\nLZuH\r\n=bmJF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.39cf00836.0_1592938065625_0.6734529494397181","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/typography","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afaf284003c91595e7c973b45dd9cf387416a886","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.1bfda9e05.0.tgz","fileCount":20,"integrity":"sha512-tpw49VklSZbn6Vt/+7cmRlKpib2W2nez0RAFGslaY4WwIZidtxmP/Utnn/yjemUj0BEDNWlzYXslqEQp8T7vcw==","signatures":[{"sig":"MEUCIQC+8LnSIFC2oBQgJfRH4/2sMytnTu6Ma2nZj2F51LA6wgIgIcUxTOhg4o+0eyHzLzh//YlUrlxz+JXKjTkSx4YyUBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lE/CRA9TVsSAnZWagAAo9kP/AwYOroK5hBEtyVbonP4\neSnm2gva8nxPsC1f2EYgEH2l5hwp9FfYYSj6/KrSK5zY9EkD36XtSwJaFUMa\ncYxKGETWSyDGGn7kcK2FA2n9h8pF2OhMArMyUO4RONcrofNHGVl8SjfxB8x9\nzrXyQGyLvti93OCzZ+mJBYnm6Q3TYUKMbcOCgjbp0v3kKSlullz7xjf9PhAC\n9ZCl8p9AQU9dDlnhiTaMm2iDIG7LcBEFplBJxATwznxjweb04S1tBUk5iLYz\nxIjWmVVecb1pkH9ECyPT6eosFqMtGFNBv2YqmadTO1VAIEUZtvnfqHxCKeK1\nnI6SPX8Imvxs48JFVb0felGadTjhjAagErVkoQ3UgTVj9K454yZYfewxo+yU\n8iRN+qxryUCVoZb1xTr1x4KUErczysFLIynWpBgINK5E9/xOl3L+/z3Lk/PL\nCxITkhUPSN7XjJlpj0YIiR9/utfZVVdWKniHXKcIs3RvGXc6MOxCru8uFWo2\n/gM7m4l0XEsM79LKyKE+KTjBQyQt08ag71ZunLeqp//dobIBbMSq2ZhcMUzo\nlS4F54I/xtfvW4WdtsxUKOFSV98KnQbgI/YXxDeqeaieh1u/0tQQjRp47Xo3\n9Xh5SjI3mLpiSvMCk2Y8YGYuHLjNjYfPx35uTWzWCic2S3Av+X/3XIWaJT52\nDDbL\r\n=4Td8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.1bfda9e05.0_1592938815338_0.7923713462835167","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/typography","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0-canary.08731bd95.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8be4b5fbd8e1a06040b67937a5a3f92279cd31b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0-canary.08731bd95.0.tgz","fileCount":20,"integrity":"sha512-d0nQhfR3Amq9pCKPHBre863S8hz9tycDzVDWS+MBC0bQP5pdjsK5J2O3zEdIVje40gSSfKko+LX+EMIFpwvADw==","signatures":[{"sig":"MEQCIEB3G021NZgBea+t33KEM7pSswhUMhYX27+W5zZObo1QAiAuo293P7KGi6uNnBU0KFqFh9Q243IiSl42lPzZi54SFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHbCRA9TVsSAnZWagAAKeEP/34M8So70T0Wz9e3gOPe\n0KfEa4bqQCFbbkw8m/0gQOAJITveICjlkkWy63fhLJltXRlNid2HKiMtKxjH\ntNPC3I2L0NiNuwKprRdJ5qWcLq3vE5O5JyGmzCGA567G709neMkBCmSptCWK\ngJ47+h7fA+E9ijOzow236S4ovJvT6+/VD69ayRCICcVWc8VUfe5PXQZqUvw5\n6ZOmI6LxRClF/zpEZ+81UGPqXneQRhmKCAQpHiox0rEBmYx3ssYjUbCl119v\nq+tZpTj3qRXRaMDpEMxNoITz+K7cHabUGyfJtoNMADso0S8jefBDhonReAFS\nRrVta6qzr0qJLzd79wzAihzdzqLtkZdkMuNmSeAFe8A+b8bHcS/KScBi/sNa\nWK628ekK4dP4QMFyYRdVMOuGnYuPe1npJdmVDhv3CCgW0c1oMNIWMrXDuRkt\nLT4ZuDrChzXC0E1iWbQ9gA050MeJnqqkHIDw+/OBQ/4TIQ3T14qGUoRw3kry\nkvUNx/DuIUg2oebs2p7D72VcRhhB6xr1rBXEkF6rGLN1j1veoOhyifJxHpJU\nC3oH0dZZYq2qJA6yVeHmCBX6hqxvRCymg/2V5vqoax2a63kwNGOxKW/a6oS0\nhnH1/IW8+A77JyArhAT04tCU3Mzb/cQJAnO9DXcQhLGC1HbkpPslvQwxnTeO\nBQQX\r\n=M5bL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0-canary.08731bd95.0_1592938971015_0.9914866599474634","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/typography","version":"7.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@7.0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55203f746b46b6a0797ccca277f5b58e98278d7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-7.0.0.tgz","fileCount":19,"integrity":"sha512-K4virioLangwuLgdi7QusEiT2/rcIH6fU55BS4K9FOWHLFb8a4jvNGAv6fUVjZbyV+c5hlOmTRbWHCpchjLzjw==","signatures":[{"sig":"MEUCIQCzlwlkoRwoa/uuLBUT4Dt16RztvemDpDfy/aXRYcmpiAIgUT1ojPdKq7k/TGxHglWPQyxXLuLStE0/fhssnGBnAto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lOoCRA9TVsSAnZWagAAKAwP/1O8OE3IqBH653ll6qq/\n5f6CNPapmw8FV2Az7p/z6u4bsg5WGfdRmp36XZzrikwQCJYq68yMUlBCbeQz\nG2e5Ta7uChOfp92q4wWgFcQh9HS9xcDOSbRbhNzmH1KT2WNejqcRE+KX4y8h\nwDvVRocZU8FP7uDhDEo8yZYVkQFobco9XUbAqu3wqHZPXaAquEVjH9OpQpQz\nJBzaGlaumnTHUdCLM9kHqe8FDFrIov+Z9nbVKAt43jJ9lA35lmvmKJ7NabeO\noJbCzrqzx2ymZRiNxSDCgnzm5ZLH593GqmpDksQOarRQAOwGtcKngYWDyWz9\nISEFZNINNAFRO1KSGzvgJepcsOXFAy2q9V3ZyRO8ry2bihAsz8GRSG1hIzy0\nncR3Zk/inF7pn2zbwzBRDK7cr20BdRZ6Ub8ZxKjXwZs0Az0XFO34gJ49muQw\nO248jt5gpVqRDrCilktO0+pXIh7A6ZI2mDKLlS7uF7mO77Avy141H38/VNh+\n9LludJNP9tU0GmxPNsWfiEdFqe8OputXQMPjpTFw5y14RG1lOtqTWnselYmi\nIZgqbj7CcQ45DabczDgJG7/UYUHOIerBMHF7hiLwMfOFAHNfxprZGYIOIChz\nSYWc6qEZszbhX4Nx3EyOmmD+E0hFlbKNd1Y88QzI4wpBb4/yJ+FFLKpQr/tr\nw2Cv\r\n=lzON\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_7.0.0_1592939432165_0.5520992423605828","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/typography","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a3212b209.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"841da57032eab84bec1146b315ce4c4e68309f63","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a3212b209.0.tgz","fileCount":20,"integrity":"sha512-jJXIKA0JG/l8IuL9eDcAOefVSMaY/uM8fXgJs1CdN/Dj0wMgIMWXTEWZGbtAvmn94k6Ud9mrL1ItztBy6W93cQ==","signatures":[{"sig":"MEUCICVBaxoyNiKLZwB4AoF2W4DN6T6j8TWQQVRLaA70dtDGAiEA5gJumaW+xa5NGVixZbOaAhDfkDk/IIQh+QOCIYXquZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPdCRA9TVsSAnZWagAAy0MP/isUHtW2uIhGPmWCapOC\notUDC9uMo2HB3z3sYVBLlYAGusQpP7han52/3ySPGv4c90VH/lUwRgZBF2Uy\nO/1ylNnMF/RKBFfz9tJas0g7fPPzQ+4jbpvC6oCDbQwpaHjRJhu5FytwlE1Z\nkIL+YyaRqWII8CbfFe/t/INE/2l+CK7lwBOjKJ7GEM7WcvaSBkiBChId69MI\n3eB05sGKsDuo5vbL0V9/5FzkNgajWa9uFdgP9/G13dlAgq6swZGK5CumoJEL\nVzh6K1UAH5M/PiKCJS0ql4qRVNwTuu2TKYl2IuWrXnVzqSoyTYbTZiIe+tCC\nx5GdLwge159jriowCPD67HCaRPWnhnc5x1aT8iYWQTcXKe5bl39nL+QNpMY6\ngbUjbTXEhT5+hlWhPDuIb3ckDFA/LDLoIor80emPvi04OyTOXcnmfwbE/kBY\nmP1Wrd2ya7YpmG1mXXZ1WkkZ2da7dwXbEIOJx3OMwkfwviIzE8K3hh+hemJl\na4JNQd4YZqGvxMaxtc98/ePx2STqB2SSJtaT9+J/aEJb3V3n/xi9RL3PCq9N\n++jQb3b1+s/1sLkY1P+s33PwnOJUp+FSuQBax+KkMLjwGbyrdQyTy7iYJFYM\nksXIs3AqviVgEli9ORgVBgepazVnISGIQGGqxxEj6N0K+hF+g5qgnRpueXpF\nxGCb\r\n=4AYV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a3212b209.0_1592939484798_0.1493243972411693","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/typography","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79c2e73c04e41d97a1d074fd1a9665a1ba198056","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.15e81fe98.0.tgz","fileCount":20,"integrity":"sha512-5d2SZEsKHHq/x3Jget+szLdcjG7ORhqAMAdWV7v9/TKjWvlKWkoKzRdTUXHXWWoFTHIY5a3jCAnS7elU6UJMbg==","signatures":[{"sig":"MEUCIQD9Sga6yn2HEoETxq0x9Xfax7KhB28SIH2jhb22nb0mNgIgUSJSWHkxgZCc1DrI1pvvWjKBu4Kky+eG6wFU6ovqrpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrJCRA9TVsSAnZWagAA2YMP/AmY4oRK9irxhTY6AamF\n2RmorAAh1/mZq2vYM22gWszqW49d6DMLtUwoiF3sBFl8V8IYdovi71ujB6kJ\nbyzxpxuI2o6xiLDSdhRM6pZhrvF/kMJs0EoW8Ts/vLKuvZDj1N5gXNNR2JaY\nAHjwrMEbOoXd9CCfqJc/jrk//46SDdp7BF6SCchDIxfX/CkRJ7iDKDDcbPBc\npZdyK7Eq9M1TVpu4CivFLBGUt9q940YQdV0aFyCU01J7jNzFr7R/XasQrUVk\nQUreMcUJlHeRN0ORwOSvfWqrgw0p7Ll8aim381yX9vd5R+lJjEggNj0qThkS\nwke2jfz4XX3hBJOpff+ukC4Z74c5Kyj0MQPYLpaQoQd/2kKsETpLtVR6oOqd\nsAgMMTaf+ANmeHuhYhU4oWSa19kLcmkk4dpzDqGDxmrSqBau31HaVPxgYzOB\nmH+bOIDldS7kAskRtrddPnvsStVWTs1fYHkTRB9QzMUtgPqRGpCtsb/GcZTl\nHOpd3G8XnL3+SIk/OiYopJs5WnbmadBNKM9G8bFbtuQzJlvT01sCvidQX90h\nz0hd137D6ji/0IGe7QjInmA6f3ixl3A2lySDlC+dGcnsAEJdlVvZ6fR/U12R\nsYC6rSx2z+vA8AJYaw20Z+1Wq29HERqQjLTLsUQ1UVuMvBiNFbCnqxCEt61W\n07Zr\r\n=I99v\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.15e81fe98.0_1592941257264_0.5770672593660597","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/typography","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.004c9d392.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97bfaaca36cfac361fdb7726768ce6a0dbe623b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.004c9d392.0.tgz","fileCount":20,"integrity":"sha512-lacP+fYW+Yxpo892T6miEpUj9L7/bwn3CUKs1wtQNyaUG3tp1sff6uF/uycLrmO1EUzRa/THFdsEouSQsXBiNw==","signatures":[{"sig":"MEUCIQCx+fAo0UvIEAfGTDVnsIKfEoY7BUWBLUPz/OjMJ/5NngIgGpx5VIFBwmiM5OPsKU3/yTYacRnCA42hgw45RwbjEXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ohzCRA9TVsSAnZWagAAwD0P/3iJf1c8FLEppQajVTeu\nNPLz2xGRgYWfkgaXf8kYoYBoZzy7i4Oh4NiEQJ6CyazNsWNfhMFOUbcG0Y9R\nYYmQK8D0RzGafN1fGQxjhR5ce9JpOlEa/2jNGRhmQGkqTn7amxrFCj6KtE+m\nZgTwHKANyGGtt6bYgmIJyYlRHkxX9E9BTh2U15bEH0IY2IkU4h+VadbQr9Jn\nkz+eGtB3DumHi6U4tJ+5zvAjHa0LhXbcK6did8Y4iyt5muwYBq2Bpss/JDie\n1kERdGXhVNCfCl5+Fjw86PP7KVkUTsY2ZmZeqEaEgbwcB5H6jDA0f454BIpx\nJbpi1y/yB5yCa4yeTQXbCr+1PdQ1k2/vR/dgth5fVArgdYvV8BfX1MbsKESY\nHlPrQY9DpU+U4iU5KxumnMUCd5th9sikTAWHavcwBuxxJeR9P36fNklERko3\nWyI0JHIdAksafVh4t5T7oH4jZ6ipgzak5IKGhq2za11KO1qsDwYrFrgV/5VP\nJOyM4SGgLkiNGZ2XuJeFbbaRZVxSRszjxJE2JMyp2s0fEYQVN4YwKdUTuySR\nLCnwEC7Z3n51FlmwKAWhl3+VA6MFKveASa3ZO5DWlY9zbdc25mpDVKm39nw2\nsgSj31808flQ42WJTtpnm7uvFcZtZehK1aWcjjvgQFVBT23sgqN2BeQWUWKJ\nXSd2\r\n=EeQI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.004c9d392.0_1592952946875_0.2710831013512902","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/typography","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3992771275abd0b37cecb143df8175dee69f8ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.03bde00f5.0.tgz","fileCount":20,"integrity":"sha512-HG5pDsd5kM40NiEMgTtzyfQUq3/YWB4w9CJt8lm2NboU7X/ginRFq5vnyOSeKqjyoBB5UeCRT1B2Cw933h4h0w==","signatures":[{"sig":"MEQCIHwQZYJMz7v/bit+mNHG96zPrp2D60mVrE3kdlPmmvt6AiArZioU2tKwq3aRsO/bR/Jfo6rsszEuoS++tWzcgYWBuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7iCRA9TVsSAnZWagAAqiwP/RAKvYJZ0XihNaxhr2av\n6E1aAf2A3hdZJeRVgdR4AcmU/mklw9VRQbOSTAND8eal2ZDrS4xpzOIfVNMB\n8Cl+fvOIWtRgEdYM3dDFMimfQ9H8jhn2O0/lVrdQc+cnvkeuklGspZhGzUwS\nUbAEmcUf3TyRL9OpoMPLrWRSCYJkv4/teV5Zsu9b0yxJrDEHPIMVmWoGIgoN\njabjhYr3X6rn94ccSsI/YW/NLa99LtKxFr+l0HhEsXQoKiiuxT2d6nsHMAf0\nQYdz+WmmmiRVQgRbB8K1AT+67l7pelIcZ4uegxaPcOTA2eReIOuJ7iRvCE3P\nb6jgPFUJnKlLa3Cr7e8RhQwrNvn7O0JT4/SGIIDmgIJbpWurCkAGujK4uRQ8\npgi4byVBQFCTEXJDJS6kK3H22y1aUd6+JKLFrqWpzd8V9oKEFhzi3xSiz3Mj\nYFYaI+9nUYloH7pHNBSZ8K50kH7JFO4icXfet+qZcQBXaux4HVKwjAnSJCOw\nyd7Xxw+wOiyq0XLrOr4mNeyreKZKAqodo3qCGuZGrnWwyxzpF/riGSPiewyI\nGBxsffY2psmf4OQ2r0HZoh7ZkJW+TQ15OlsGxALytlr3m1o3K9mM2V5xxNlC\nCX50vyHEY9q/vtL4tDTBRxbQMRj9rY4hqmdlK09x7I2CIHJV+02riZlSuKeW\nC9cK\r\n=E37/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.03bde00f5.0_1592958689778_0.21028552580357207","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/typography","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.599b8c319.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a24e775f34cea8d1eacf16fcb65fd497b8d8d885","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.599b8c319.0.tgz","fileCount":20,"integrity":"sha512-517foRhAXfiFHCBYeZQlgP+eBllIhEpvfGjdTPmH6Xj3jwM1cwqGY/JYk0y7y/TuuiQd+lASLdapv7nDf/Wj3A==","signatures":[{"sig":"MEYCIQCNK7fdQJYD8bLm97vQOk706TpK/hePRnMiOElGXTj7BAIhAIRArOsldwBgxU/4ENY5ecs5X2xY1qL+clz/KuLV5fxH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mUCRA9TVsSAnZWagAA9m8QAJXqUwvntXdia+u9+z5+\nSr1QRaUGoW7RcIFpS0ks8D6QeWAfnTmDNcj/eAxggMpJbWgzMZkMr9nyIh+J\nfEXh3Eu5vmBhnDbYBV5vr1SHP1/ODzoEZDR5kM8ndHjCH8XRb167DRMm5EB6\nKnGFdHdVye5NSr6ho057N4qAPeNdcqwy42izFlzBb16ic+Oo0epyP9n7XyR7\nWh7Fp44bZSj5b/ODmW/TYvO2yjh/Aze1MujUVemyuVj/rgA9yDHOicC2jyKG\nSQGs8kaAO07kAdT90Js5c6fQOUK7vutLRE5bNpIN/KRhFTj+vo/gTaUanX+2\naztaGBbiTG4eED6aOiASt9AA4grdBd1LH/fkE2zMLoPYKsXVtZn6zCWySZsT\nEwx815tt+WphBOG8Jl8mB4o1kWGcDGxymm3tD5YJnLbQEJMB+AUTSu+L4QpB\nMDSAFBrxqNTteT2brbJUpo04v10yXqn9xXmUEznWLw/8X0bjZ6qAFIAFc2CP\n1mTRpsdQVY2esHSWizFLbcCaISPtcQDUItUkko7oVBtG1Z1HFXSi3Jc1xSi6\nXEeJHyzlnDKxYz4b092nWPMAmNPgwSrXGwHX44PbsIwXAcYX7DAgcxA5rrEM\nElBRPYTSVnVIdgt4MmIySaR0Y9s1CrmxViY2sxWXuqseVBJjUrMqE7uLqlkw\nsddl\r\n=sZWx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.599b8c319.0_1593010579756_0.5931037670530119","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/typography","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.87e3be418.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23368b9a1bf6ac3cac08de66b439af12d0a40d70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.87e3be418.0.tgz","fileCount":20,"integrity":"sha512-thT/ZJe59MGOjR7qqPomZbBAPDPwV1p1LSaDLdg0GZHiX57AKHGEAkXVeuB9Dopr9iUfBk8klLzE7g6lbUme8Q==","signatures":[{"sig":"MEUCIHvY6s91Wo/2IApdKWiEvH4epBxpKWewbT+zVNeniVG1AiEA3AZXO00kJH4120gNDiEiDZcyLY4o8q3DFhZlNSbFkTI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MCCRA9TVsSAnZWagAA77YQAKSooUiByMB5Uyd8zVoZ\ncH5XtB0jbfcy7TQHddX30DIsLvQ+9GS49HDs1BFbHBg/5IUs4/DbFpePQCA+\nD3mEEvSV4GucWWcYlUlnlrKSbqEdo9TLUo13B0hDjXmBdMDvQk3UWhbL+m9c\nAT5g90OWoOkKvD8XieZZchls5PyWz0sr2kBoj/nLuaWcYi0GCu10XIHyI29/\nX0qZRGOJYt7/IfhG09uJWIfNI3RvX9UKZwRua2uOkK3B0X6L2twWkI7bR3Ub\nb+k7z/mBYKsFHKWMUuC41J6rZAt5d24ssOde1/UToK46wmjDMtcDlc5Vcxt3\nWX5br2ylQIj8tDsYLZP40DLJ2pbx0xQAfSrbf9LbnU2SSKhE+oL6ZlQ/Hm/T\nKNPah8kyuw/fYXP8OX7fIydK9SxCbl9Hs+ondrSn6/IlYqX8+K8HGTrDs8jH\nDgXAHpyQKYKaDp/2OEmWk1kz/tPcBkcDo4VOQVrbVqiHAWxx/1sEZgQBL8El\nrs7LJoL6CJYP+pzeU/iV9fUuyum5LWv2Uw9PpI5YGRAxme8OZ/WUHuRIX8BV\nsTnW4iklsHCoRGX/svIri8aFw6lwSGnAjZdw+XH5WsSXVwv8b5UJSs9C2cry\njCVHudUpfA2Cx6cNARJ8ySSNqH5FxINRG/svaC88Hnz3fJcN/Jh1c6IG7wtb\nYx+P\r\n=u0oQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.87e3be418.0_1593021185758_0.5222100917713739","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/typography","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e84bbb35a67a90185b9c9765037ce3540dad671","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.035cf2a6f.0.tgz","fileCount":20,"integrity":"sha512-A2PmFybLBzJreMl2ztwIiA7N+63g5qpvyCkNdqEVRGJ2HBwSGXkp41x9OCOz2j8QK7qeqfybZZoM1WWro7nTXQ==","signatures":[{"sig":"MEUCIHEVMXl971l+VEgtT5Q0vX84ekbPLK8aDCw6UbarO3J9AiEA1pQhjhCetqxV++1uYW0LHhW4Q+EoGjaQGhI+6TaSMXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852oCRA9TVsSAnZWagAAYykP/1Gx8YcqZyYpOG2IpM2z\nOmOOXwHNJQhr+0l52uSaOuHUf89yYFFRqXI0iTsCS/yh7M42XXy0W1FDG1TU\njobmBxwahfCW6lu1IKquWGARZujzt0K4vNfTmjCZGGRj00j3K0aCo2yFrHMz\nLeRUWzttzLqZPk1QMr2CeOEHgNLsw6+m4PBXMg8QDsh5CFrGgGGDGQZQwrHD\no208Hrzr/MJyKso5tSrxdAHIpX/Z+g+5HMyHvmwuDQnYkFxc5lZLjxstv6B9\nStI/26/wcQTfemYP9ykw5OtqGWEat5XUPYKcdG9E3SQV85pNGoIvaBoirUIf\n3N62QnljlVN0ohMIpmVjt7Gyc+TZq3q55G9j890Ce2vQaMmWUvTfkJjt9zjG\nXzgjEwBWf6qJK4e2vgkVJmD5uIp0hxlpuudYVAsG1Cr8dtzJrKRSF1ZkyYer\nHLQjkShtkBMqsN5TwbzmfbUweRkb6+pYnYfbTjbwLESyw5IcfIEhEt5sPEBA\n7UsOCSS+DEXfH2hAaH711P60epmfLvWn7ky4zTV4nxMvCq7gAEWQOkNJzzBW\nsDQvVxvaj913U5Rj6KRKlO2iBRHkCPHo4LNLNPl7cNCzyN2i2prp8atk7+M7\nt+EMaZBi2ayf9slh1J9+9bjW490F5eauW3puBxxB8wcuoN5kpIAZLeQ3LvWh\nqXO3\r\n=vA/P\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.035cf2a6f.0_1593023911623_0.6310888653886557","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/typography","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c34444c854e77f1f92ac053a27bc09239ec6f692","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2fed2c12f.0.tgz","fileCount":20,"integrity":"sha512-dWoNef+SHTwbwL/ksNi9rssxiR5wuweFdNXmclMQ2niJS9WyTcsVUAiOkPOawFCWI/rAw30vUuEytM5/U0AEXA==","signatures":[{"sig":"MEYCIQDlFxGgbTuZ/wE0hQ9UvHXBwBK52HUe6Ek+dK9JbIYkfwIhAO+aXUc3ViB8YFwgy5C0ICfPegl05PKEVHlcl68+rsrO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKhCRA9TVsSAnZWagAAnOEP/jUH7WWjUMHZAZ0Zt7Wg\n685GAnlRdfTZxgajHkNHsmonsj2dKFGZDaSQCabvPf6pkvAm8MIvvIwBKBMw\nU8AoSxhQ6vySzBFhQU8uRClXhXL/6QuhrLD2rFAD+mnrIXWyAJmG27ppy5Ll\nCyxmzPjpz9NQAI/W8sAnbPR39Mf93MPa7v2N20yiw1imp+JkdSzhTjntHrAn\ntuguRdm2tqwZgSZjhUCoy2LsYGmgQFoCLJJryO9yifYRmYQn7bDvRAkX4v3I\nLN0I08tq58deGMiYS6Y2KEOSmyg8GQ4Kib5EBfuhbzUhtCNUCtsG/X/ZUFEI\nsE1+GUmA5CEsW+WlawomHzR7UaAN/XuviBDmoo8pdzw54WnhTRfJsoPn0TrM\nv9eonmgmnGLj+41efFxznlxLbMD8ZkwrjLVYlhmNgeBL9xPpKTdnQeoQ78zn\ni1k5OgCamLcfZ8Dt8AC2kabVcFxDPj5GqnuBpNG59lPgvmXOz+x+xgXBhghJ\ne6VN/Wzk5WrB8/sn6yvEt1RUzKoVvpIr2vg7McElia+lGTcUInDoumH0XBQC\n+35B1GYrtQK44EI+Z0QOb3M8NV4hcoov+LQh6Q128ul3smvWw/aQXTLUdynm\nLyqDVwk0n19/x9gcxh+GhWyaQYbuJV39da1LZjBTvppJPu58M4+Tvwd16nT+\nWYrd\r\n=Bwll\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2fed2c12f.0_1593115297016_0.8909268628820051","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/typography","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.38197b443.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"801f54e5f6e34981775c047be45feddda656ddff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.38197b443.0.tgz","fileCount":20,"integrity":"sha512-07NfYr61pQt3G/wIjoG0JFt3pNnpqgRdGseIRPR1rc2xB+c83iWi2a+T61UgUvS/O2w8CaHdEMOWgl2VnkBBPg==","signatures":[{"sig":"MEUCIQD99tnSFkM4s9kPXYwSTLrMV4HIUDH2PSurjwT0jkCS4wIgArqe0mWdcgi+eiY/1oONUkqlr5ugeLivSTIZrE2iou0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWOCRA9TVsSAnZWagAA4NQP/0rzf+M0ERLvWbiArOsS\nIDah7B1aHKOTRmYHLC7jjrxq1aMwdz0iu9qfg2mLbhPz3biDFb6KRAEaSZnN\nnBMvoeT5TJI7671HhemJAMkfzWhLH7wgDeVjGj5hV1iyGsEJd5Vi2x0bdFwp\nndFQVmQpx5c3oKMY5R8T2aakQ6PqirPHX5+/rsgcM121mFP6at3I78TkiIYR\nsLZjFRxz4TFM4/yrz7bseU0fP8fbGJlWSAvHG+xz7sMElxb1vq2KYEfK/buR\n0MxWz5y3NXXH8KlEkKIuYx8nMEX5XYEc79E3qCT4hGEwHBigwjMFRivHYiJF\ncf3neJGLJzC4b9vWQkrYL44M0YJBke15Rzo0FiiZC+hy+bPlm0xcdkGs/jJc\nLFAqL1rnnUc3hCOKZXya6LsXLIESDU1Oyk1Zvj1U2SM6XokSlxZGAvUPKH1v\nUWZ9/557dKN74ffw1utPLjPK+Y6TmsAR7LxpmtUa0smfCWVsRZmpfeXf7PDG\nhqcdJ4PQSmaJMw45mxe/xSWGw5DHELV8COz0qN0pX2VIC/UbtEzYdmisRHAS\nUWyvYtogu7epJYGMnixPNaMJk/S+nZ1QPZmm6YKqrP4zZlIOPBTYygVc0WgB\nlBecYlavk2x0o0ki0Co13VbA9xcRnHsRAj3eZZ1v9iZK2pO39ArKhjh3Il3u\nE7c5\r\n=jMp/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.38197b443.0_1593120142514_0.7770638067189168","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/typography","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dcbae04d3d436f3e27f97a647aed2847148b1d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.69a35e80c.0.tgz","fileCount":20,"integrity":"sha512-AX8QALn2oAg3T/Ea5kIdG4hFjjfOl/4iLrG9656Ng2OjnKQsOgikh//nbHS8QKwCcrWz9hZNVTjL99cm/kegpw==","signatures":[{"sig":"MEUCIHMJuRQ45b4G3MaIIW7jXkX9n4K4a0+r7x65l3/CNSb5AiEAxQOadQrlhIL9WrxwmAMn1Gh6YZ32jvVZ2ikvxlrM1n4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKbCRA9TVsSAnZWagAAna0QAI1yM00GGw0bttsCCCHh\nXzouR/zT59pIuC+EP9A9AaAwewbF9sq92Q85V37Hlier2p/eFzsz+V0JV19W\niK5I0I591jSNfOKj6kaqtFofvrfPUcbeRsUdyu6VFp12W/6douZJYkUDeoGH\nkkNBuwPVF37Ypewz8EUp+0QwwkfsYmKTKgCd8WLed1kDUcwBXjK6VOhvcUWZ\n9fo8gDLP3iXP/SMfGR8bQI/FPTIKcBE+nE88J8/JjkMeqWkiv4uxTuUydBYm\nehB5/gw1w/zBobP5tGwBX+62vl0GvqCjq9Za2iHT4jHv5b6B4XaNQLnH6O0X\ntdSW6FWCNNlIKifRaAtceVfcCTb7xhyk212CjgQ8dQbSvWNwqBgIkvxYu/YG\ni/9/UrHLatiitxssWnEwsyuQTQD1xiolK+xS1HdbdDBA2UR9Hdih+In9IvNs\nquTdhd3/tkzGMkEoldRZIku7g6JWbJwf2Xxgd7qLm0HxI6ubTDzMaLP8z00Q\n1neKFVbQAFw/Ong4ndeGWohv2oUzruQ8XQf/ie1nIyqDcbVkX8caBMWD3L3h\nuGCEPVBwqwmJJLO7wgLuWMoQu3yvK9COvBjUu2LBej60+DPEeVNBGaoMcUAR\neBc5zQNpM8OMvIO8XDAJvNTFGNt07r/5gETfivL7B6elKOvZIkhPDsBummxt\nUmyx\r\n=A1vp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.69a35e80c.0_1593193115398_0.5641867334581239","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/typography","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d2d3cbeb013f5a9b899c2991244e4bc5583301f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.df7154fb3.0.tgz","fileCount":20,"integrity":"sha512-0PVFNarvh0knsD+7QzzlJd1+vzTAMHhoyQS/q5N4l9GKIb1mdtkjQfbRUVjgVPv3hF7GuA4gRDnh9tCN3Rjvog==","signatures":[{"sig":"MEQCIAT1uexfMKMzkEVxY49A6YJ97jOjeClSldtwbfQEhlnQAiAvO6xk5GMqjJ3CnEVFuLAlKnNzqNQtvy8S64VZrn0JjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juDCRA9TVsSAnZWagAAYD8P/RieFJbMfco+Rr/tDrK2\nspC6/TrWk770BRPHlDpGqYyNZ8p48/dJ8ghF0nS9j3MWmfaiRe59IL8Zd3F3\naziF6+tTJwlTtOUu+CyiRr+WDnUU6kBVd5ENg1rU4m5sbzO/5AdRuZV9pkmr\njX7BnneAuonRh136KTP//NYi0XhU+wvYezTa4M7RrsK0JtjXv+xmeVG88CSA\nvtvB6Vj9iOgSMljcO86Ph0BoRRd/2gbBPVt9ppg2Z1qJOw1btg7QDpJOFRNa\nnkXiGzdeUTEpA1MkKdf2kkzGtNZZBd4Gn+TGushBUpecvzntuX0Wz2S1XL5N\n5B4P4EeEVNOfPWM11LgHo2nm21hDxTfRlzxTLK25EIzqw/r07KYsQGXMYAJ7\n5aPwzdcgvcDFT+cTDPATud1kTQoI/PW+g/wTz3osciC+d3XD/8DfOv3LyjmT\nLkM0FZLIjXZ6YOEDIxnQ5TzdgoRw75UZbWmGCiL+TmR2EHoyrQS5RRqGemLr\nPs7ZVjwj9r1Tq/zz9wDCWG+eNLWzHsag3TvJgpwNen5eYcKDoJhRIvCDRQMR\nuOHEBnSRP+/Nl2i7iJ/t8gz4ng/kTAY5DYThOT68hSn+4mhDiYXftzCGy3w1\nDwAre8QVgc/7FbrPLmcSc4LHcduQra9uwtDMvmUI/tI+DEhBbHQsGy4/MeDH\nu6/x\r\n=ah1m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.df7154fb3.0_1593195394756_0.15337679865122134","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/typography","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d5618602a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cbd0c33138320873541858032be53e653a31b3c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d5618602a.0.tgz","fileCount":20,"integrity":"sha512-LDZoUfcoq3diWz64H1r2txXkf+xcj72rVO3l0fzUbhlmbe6looFd8aqDmWZUrwOhNOK9IlQjAfUiL4+/H9E0UQ==","signatures":[{"sig":"MEQCIGEFklasPypyvySozsUGHe1wZhs+O5yDdkPobwUnuzwgAiAOgsqjccbAL/TR780laCFuh4dwUYe3mneNZZIsoWgRvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0WCRA9TVsSAnZWagAAHdsP/jR3/eVoRGWJZdzjBC/C\nUVHY4o/KPmPPXiSFQtav6I+799TKkpOurfKiC0xKci+H3FksRtfIcHCakaiR\nje235omMkm56qi3JVdgLElT2lxc4IoZUYIXQ/kIRriJc+eBnpF4KM1Owac0o\n4Vh9lSI9sEokGoqKWcrxObNQRZw5ejrIAiHba0ulFUCCnjQuvz7EmZzSCQTp\niJkOBNIrqTiIyQ2pJdHgKo3B5Avj/4n4sFTuqcbLCt3ee/8RZcRF/4LR2o1V\nftL/7MueucXaTaQheNqjheQii00Ji3bbcJRjz9iclBlQKY5XTwND9MMrIOy5\nX7z6lWtswYeBtQga4jrDwgxRoDHnTGhPL1oga2nLiJ+G1sOCuaDztrEzmUnv\nGKHSSf/PWmLeE2XpSLEJqwJTHbCycXyvAUwHnj2pyUX3WSyXa5btDB7yQdzU\nMWudFHNe+aypw4LtaGJnr2lbNyc8wC3EuoccbvGsBUAdprrsb0VghWaB3Nib\nkyAa/hS/XYgUIVE7SZGvvMjHgyniKzfizdAvPNmgHZBE7yze7z/daKFEkfLv\nvLxtqvormQXZde6EASI7ToZ55Ccg5JE5cecOqbQV5fIXqiO8rRKum8TqgL/e\nsNfav+fS8Dcp2Ryew+XKOw9XQh3v5zF0RbR40snORCd4In6RJx2J+CE/2iG+\nhwOi\r\n=Hf7m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d5618602a.0_1593208086240_0.2593510664081289","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/typography","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e590b376b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a84654d38a900cea43705aa9b086e64d4e56e018","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e590b376b.0.tgz","fileCount":20,"integrity":"sha512-52gwb9oM+t4QZZQ6/r7F5JlJIjxgHea+FFKDbHmHwh39vrzkMUsQ6OfIBAKfBhikGjZg6M3heLZmzSvLJA++VQ==","signatures":[{"sig":"MEUCIFo7hfVp5EyJllt4L+MKpCcWyJDx03/no0IU+HqwmT4XAiEA6Lkm0230hWqdyOIi7E/0aqzxmiL2OOkN9vv75FbTgF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNvCRA9TVsSAnZWagAAX2gP/3b/uhQ4P1hdx+8l/hOu\nOJpSOhymZd1TRi/9KfpdfXvXBMQfcIDGz9QjVoZFUvlMdZzjV4Tch72zP64/\nnogFGEM2M85pJLq9u99ZLEsL44G4uJaydHkErKQawhD8jiMhzIYtZkROwlFX\nvymuu2501QT+ZfsjxyTFMhF/deKv+Af1haWPPVsSCaJSPTTo+iqIVIG66ibq\nw5T336ifDp2LzYf+nXvlHUwWih3v98EpclCq6p65JJF+5rDz5GcfkhPbdlbW\nP/omLuZlLgi0zSuaM/qTccUfWQVg9onAkE+LnZoiqAWeg4bMimhxfWz7zGGn\n4K0n5/APXIRIqxKLDoKLz8ZQxfXxKJhXI26XzELnRwpFkkppKY7rmZaFzAuk\n2dbM2/ClWXaoq2wah9Ud/K9pvsYyInrGj2rWk3ACgFUhB+H9zEOXk4LUob4w\nfGE3vXf6cpxqOYrK8KKf+T9TlHZ3m2ipuykVSJsuUDESQx3RJvk+xAfaYHgA\nZy0y7tvYjQ0nAX/3WlnkDVhrcz4G+dpfAIgxMiIS98G24Bsyo13C+utSVBcS\nwU8wju7qkcnyvZbKjYdEKeUwFyRL3GpvGkVplqp7sFR02nMHFvlt1GWFFVOj\nppoqC4KVyM2NKPXE7+VB701sTVRKhAbZAM/aozOj+NTSiudY3DN0q2/HcI3+\nxMQB\r\n=h45d\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e590b376b.0_1593213806746_0.813484983001604","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/typography","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6925a4d34775032968a28869dea8931c460b95cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":20,"integrity":"sha512-0bW4GsBGYNlBPccCcL87DHUki2Ea9HX2re3INBSYDiNvc73jls8ohoOB4N4HVok3rh17nLZ2yN/evDIZ6vk62w==","signatures":[{"sig":"MEUCIE758fxyCiDsTOFIptZDLnDeYJTiuSifaxdxFl4KyvpOAiEAotsporaYGY7y0x6qTypkW/aR8qGn9HJMV4yZ4i8idKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGdCRA9TVsSAnZWagAA/6QP/2w1FltvAlsEZBrEkVWP\ncjp4wCToA7mLwpOCooJEcjnhvemxxdp0Ob6IHiE0PpDHYKJllNqu9bg5JNl0\nSrtXNk2IENRVnaJt4LX4DYYpelsGRQ0U6znYAh3EKwAXW1h0n2X5xk9a9BgS\nM3W8ujy6XfjG7tq080lrEvFTkRDd1BKPdxQx5D6MneEwhY1W9ZAlBdfBlCEF\nr6c7UWM6ox7uYhMpnog7KubwNpb35fhu7ZKkWULBR9KBqS8j4fGlCFjz8MPe\n4s/9KnAH3ZbqS4Ae4NG+JbnknYtD80pwWGvAae0RD05D2JjTWiihF6SnhImz\nCgseeV0uvgbFCv6IzBfzkop8kjgRMUeQEBS3gxOPgvFxZoPHfaDyx3UehTpy\nzHZeBZaDQrsudzmkQi+K9kZnX6zw+XZU8rSKE9hILLrvrD/KKxm73wbXcQew\nAjVbDhZ7jE9obYSJVk31crKYV7k9TtLtgbj0Ypuv8TzOZm2Dv5nPwVA8JUvM\nuB35S614ICTL+s85eOMh2EU0LrL1yRfFnQQqlwjyrfxzuHdqLG9pcKEQ5Xnv\n45CZvwq8ZxGDkJyxfTcce9MBszXPsZdGKUuz3wzV9sBc28hcNtIhDSrYr2Sv\nFhCQ6jokebA3HN1m4Pc2cgVZIR11dm0i6wC1LV7dtDqWxrMzHuWNPQU1loK1\nNuFk\r\n=xDwX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.0c9d6bd2d.0_1593450908750_0.1514574754008613","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/typography","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d058f4b57c166e07b2299eb8409adf815e5c46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c1fec4246.0.tgz","fileCount":20,"integrity":"sha512-Gsb0JxHDlo/TDavWYwMU/z4+kYwtGaMU1BzcQVd3fSNxLnKyA8GUbmWIkgmnUumWXCpcm/rQDOwWUDnQec4cvA==","signatures":[{"sig":"MEQCIAhRdv0ndNutKqR0BiHClUkKlcvbKyUk0ju5eiI+zFGoAiATcGv1W/1UDk1Yl6CivxaTQUuLAK7M42iI3WtZ/Gr4CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iUwCRA9TVsSAnZWagAAirEP/ipBDbxOYpsnNXS5bJF0\n26aN9wcTG82hn+lPevO5kQWDV9z4OmcTDfOrRRbQAq7Cttqi7hUUObMYtWZS\naTLHQe+e74O9WesrIQ/Nam2gHzXVZxAAfEzgOnpUed6Llicvww+tWKTtfZHO\nbxvB/3GFg1UULQYRbhZNzkMWQwJkxkYarUidMXFALYynXHsR1iFpCV+xT+Gi\nBGuhEC1HQsJJ4yII5UJNzvOZPM/qHIxpA3gibnd+x5Bw67zXOjDUSlZt61tv\n6tFi25xNr9g2tGttefS0tnz+taCN9O1kH8MVwukQkSGh0yyAPH6EcuxBDcNM\nvHt8H1BjD1IgMmMQafozhxSab82Be5UU8Ej6WRZ3J/nonkkDuztvZ3EKFEc+\nl7Juf80INaE1/CTeNS4iI0dbuhuaJo9r0X1ht9T58EYS5EHWsxROJ6nYaBw1\nhZLv4pCmFBuw/vloQuNiknSHMKbZEPpllQfj0KUL0+QstB2sarHv1+83IIQb\n+JXLTUsXT5gJeVpnZ4uwABF0PGaZluvaId/SVZwgrnxinPY+W/3UJ+FbOszG\n3knzKTffbZLr2ZUvKn7nHE7zvpD4BssCbMHHmJZ12AwGYB+mFQV5OJEUc00v\nPz11ESbEGgUp7ZEyAybmLyLyMtSpNq5jhThI71OvbWJFchA/RGq07Hd01Zy3\naubF\r\n=w278\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c1fec4246.0_1593451823559_0.12123298146630779","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/typography","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a1b1a06fbf174bbd22b4e434047c17e2f17ee9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c678a9d34.0.tgz","fileCount":20,"integrity":"sha512-vtlGVo5JUKCIbpQMI70QDQ1S58/nzM9mUQJhUSnZKcbZD5Q45CxwPiXSkdhFRpg3pnxScxQORJlVBnZTT80LyQ==","signatures":[{"sig":"MEQCIFbrpYkfMUoYf+KL2JuVgwhYB0Q8Mf9aWsPrG1xkliQCAiBMlIKvfoLl3YvM1J0eu/5sveCUJHXEw+YBon/VfDJ3zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iokCRA9TVsSAnZWagAA35YP/0XaXNj111fXFv54Js/6\nRieRWXt4geXTHA1R8nSSzsYKGDoJDwon6B/IkftHSgr3HJYgZ+oPdEoHojdR\nVfDzH9p1s+z9sE5x8eAistw/l4l8EwiqSjGQz/oqeqrQz4bvNBVvqKJ5CImZ\nj4TOp0H+HUUBx3ZkXaEPqySF2wPDdJ59UOl7jlCoGhYCrzS4EYRWeWqrUBMt\n2QjnNT5Nx0t+DsAZLz3usLRs9v7mxQyR2XaxH86oBPYcw7o3PNV88DDNVgOl\neRgNhQhRpfyXT5zolBedZ1Rr5rxIpd2kHlgGODfnaoun5lqZ0bdD7GKZ2OSn\nGhmgWU+EDc8Xab8QT4Keqa6wDn4mPjTMovqHm5iWfFMX6N6vvvSISlemPohk\nN4l/Ogt7aOxCnFRxmStGSPqK39pLZX2KKJZeTxCfFbAFhPGxl5pAo53Os8Nr\nOMdlKsAToSCw1Rlm+sVMvGzLw0Tf+UqErPRzXRgpnsjItd0gXXOlrg4Gk8e3\nrwgh8Ss46iWqKUIylwwDqjDgRXTk9wDLVDo4rljjKfS3E0S3KFqImB6QqDfe\nSQqUUyNQ6BYTk7zCM8pIYDZs+FlEba4aRGFZS6rzl5FBR4n3DSLHaZwBiogj\nAzF94vjUuZmTjJcgLrVheFuTljPlwyviaZHSWZ9Ysf5NOKRMbC32AaHUHze8\n3NAv\r\n=LTAb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c678a9d34.0_1593453091582_0.7729419162801603","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/typography","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec0962785ce86ffe4c7382941fe1c3fc0bbaeaff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.521afaf6e.0.tgz","fileCount":20,"integrity":"sha512-eUwp6isZqAHg4zpviaTd6Iyg42BndauDUvkqh+oUuFOZLwrkHHAbPrnjwzizFNmfGl8dLQfKhP17zLYKm5SlMg==","signatures":[{"sig":"MEQCIBG3ADKL4sNPjJcGg82YM77yMJIWhpUmmg3Xd9nNmTDEAiAj8sCr3KB0q6UuUi9hAftQ5cKD2j80ey6teZ32Usi+vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1SwCRA9TVsSAnZWagAAvXcP/jHsFTIHQr9Bf3w72KON\nIHtLumTTyVE7atxUGx5ujrcudXdG8fFAjA8KFKlttTNJYeHJkMj5ghCJN6y0\nsY5+hx0pWtHNdj8EENZjb9zztU1lm4/wVZ48bubnYFrdMJToFarO06lkwKv4\nkIAJRMBJfl9uMhvTsBx6Blz80p7+hq72yZBEdfw7ENYLgpPk7jv4XBeOp99g\nvtuLt/AC57o80xDgFFrbyQDL6da71OV4z5dAd8XNLIex+p9GtahVxkA9kWwV\nu1Uhk4atUD7w/dlZ0o8Fz79zhzmUY4yXCfyk0GMotJCexHFonftevX1NnPmO\n90RF7QkhlHrf0dJdrOtEwqqI4Upe1zoYvzwPh2s2xoaTLNYGA2MVV1OOw1My\nM92hvuxmTrw/8AUxoUtadRXIWmp/eb2xE7kJWl2O3uEzdoyf34LErV/uUPkG\nmrzy6zmhtTRJwyK0q1mR7DrQrILJWVRt+bDuk0EVUJozorfh59h9C4YdnSRB\nOILVM18J9lh2AAWfTyJJib2AvLes3CkYDwmYWXHiYRCO3v3ZvR84dw2KZmDl\nnXggEQ/XiSGtqMwRWdofCkbtqKFUZD/opt7cos25+Y9bpm6+opMH6GEoA7ti\ns5x06hEcJloYdwF1IrYr1N+SY61v6frFDlu13oLLplMrB11QaIse7lT5nQYA\nzjkL\r\n=yJz2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.521afaf6e.0_1593529519673_0.8249276463205886","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/typography","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b044d0f229f7bf833bca0e7ec0f460dbe2f5ae19","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a2ad48839.0.tgz","fileCount":20,"integrity":"sha512-/FAHMWzqGY3SlUG0UkVFpOUeukuVvjbNEHwfEoux7dL/jJ7A/4olkB7SDwdfQWW94+zqa5P/wgTv/JWP+gTcew==","signatures":[{"sig":"MEUCIQD7XX2hwPjidTlfrL/VCS2hbvLWd834koy+AbVmS0GSPwIgcF2dssXtuFmnkFyaFuNiZCJpagJZ8RyB8a8oLkb6p8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48FCRA9TVsSAnZWagAAf88P/RdiK6ggNLyrjabpd1q/\nUt+4kuGTmtK2szWP8KopGPUU04uL8p0jxZZydYCrHm7tJV5+UrYnx6gcHibV\nu/4sj++sDPQCc/sKzG73+GzrPwaQ6erRfdJeqGw6qJ0pmZoNxdmEbM+6GqlB\nDPdjnOH/kYq82tGB1svOIu39SHRGQZloUBocnElvkUuSk0nUfFKJVk1evgQt\nEawZxB8bzpRnoofw7oO2Ei5JUeiuz5liFtRt+/b/Q41lrQHgXqHAZ/Mihupt\nnDklqeoChvVOh5w4jraSz4kRbgnCKQi6VpEicTmEwwlrwpd2Jvt3KXoRJ3kM\ni8WSUWEhQu1WUM/Mox+Xz80kuiBeci6nAQnFCrcyaUt23fRrY4FfQ3bcK3pL\nGQJs/KravS5k0blNvpxiG+cDHY9ZXAiPgxlvKWgXzVCfSWSP1gdx+MwbEmCU\nzbVrMX96/2i1qfjfM5bPj4m3tdMhyR29T2NJ0vPd2OLNKPQfBCGOobw4ml3r\nRo/xFK/wHsXiiTtki0nt4DYbNFBS7GxPMw8as5//lCGik2z2ipfHtRXZt4i3\nyoKls+gl4Qt5wRqRV/xKM8Kbvo9++bsO/DtrqkZGTqDs2c1vQ0ZOFf4i2wyd\ncD4F0xWs3mJweADrCt+mAqagE5GV0A6JU6O3YJYScaYCjjbo7gsfvlVJ5BOo\ni5WV\r\n=hu7k\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a2ad48839.0_1593544452529_0.9657593658994414","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/typography","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ec2385881.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eedeaae9c8370fd9ac43948117a3f46106000c7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ec2385881.0.tgz","fileCount":20,"integrity":"sha512-2ec1wbIppp9NgQNHJafQY7XwGZ+zB1r1JYRm8UPaNX8D7CGBi5U0148jH/oQWO3ebowNEPRXyNsa58jWUoP1Nw==","signatures":[{"sig":"MEQCIF7tbcvMhQgrpVGPNQVdl1SYsmwfgy13I4w0wCIfFdz/AiBQi/rsNRhZj+NiDzo0NsggRCfAO8AJLdH0lIJkcNrdxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LICRA9TVsSAnZWagAAZ8IP/16Gav5zfdqOkppOhMSI\nJqs/gTT40n4wNQ5yjgPqbahpHvpHup+aD+vwGtq+8dgfGdbFSxbhFH5TYgjp\ny1PM5atm3DiPsMUTdePYSBTixOqP5UNSB6LokOVWIOCr3q9LKh9633UcvqWJ\nak/jNvf2Vb10GzNqznKtcr+K7Ha4a/UKF4inCjYNXcYkczWd2f2BlHLPzv4n\niTLb3rBy2wkDAuCTppFHLFwpmNSvhI3fk16D/5MFfDeQ+mIKy0KNa+/44O5C\nJhwFDZ5qupTh/7Ga1ldYiq6w00SejlBRtOGmMow6n0hN3ZkhEkNxw37api4f\nqhnpxd+lCMijjr3jKDfyp2grW54+NDUhcR85/3uKbfGxct6LTzpUcy4DMis9\nzfdgQDDGfDy5jIjQEdhp/GPPWkzj7G6zuhC6OeeGdKVpUw7jkhdUfLVzzCYq\n/5R1unlpduhWkp8wzysep6AzT7tURz04ulj4xpSHk6eqQngoVW2cKbV3o+ay\nUTRtVVwJpTP/xOIqaUri97NviX9mnrKdsKbLgSJB1x6+3jWprMeLp4NEnxbn\nGPKg0ucKzwx+KqOZbVTE+9gq9y/g8q52qtx+E4UkaVEyK3Sgyl44iOwiN7wC\njSZrDwPYYGQg5Ejk0hRNaJxyIb8tVIeXclbbH0a79AeFqTOnT9d/xkCOa+xw\n3ZO/\r\n=ADJA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ec2385881.0_1593553607847_0.722590396406807","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/typography","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b41ab5dbf90380657224ad9ec1a18a50d71f729","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.610c26c4a.0.tgz","fileCount":20,"integrity":"sha512-jFPWNNaHZVSAdiLLzGiytf5X+gnqNM6jRAqvK7RxjTg9vOmY7HPZMIFlLvBKhTSDi4GAvBIlmG5YE3eTAz5Pfw==","signatures":[{"sig":"MEUCIEcZb4RvfmHkPB7HXAUREAlSAZCNAuKnZKl+up7noch1AiEAh6OdfvowWMiW0/RtWO+es6JwNJk6dH/TqqUcGGj1WDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KP8CRA9TVsSAnZWagAAzHoQAJUGjlVObAWyi5EazLQm\nAFPDsbz+4ap/yd12pM8F5xmE47hTzSLLsn5T7pRj3F6nvV+ES30wc0ZqpeD7\n/Nonl/ilgOiJR+AJ8HN4xv89BzW81wp8eHd2kEb8EIv/wNGHcWU+Ji+i07el\n7qmNc4XQiZTFd67KmaRX5aCDKR/FlCAQEmd+8dpfQPKASWyDfgx+mL418U1I\nac8CqQoxYLPzXkUWV6gn9mQmAGKudG6jjrGW69P+hsihPshFBsVO7617SWD+\n4dmdtdIowf5qCFu5kPrFKbEj0tQIJmHzwNCQPmRjhds45b6Y15IKx6njrhHN\n7fuZqgbbhN1A9GgmpT95omY6rA4Hq9bQCWYqQPENayd+p5vSf8xpk5LO+T/g\nQH9/o8mlVGNqAoNdIEJarjMaaS3ykPX1+qaDdQRQObkwfpKtPxsz6kBNUSrb\ncL1kbUvT1NNRZJg0BbNok4CpqwaBTrfUHfYHPnTcagLsFCG6+kmJIRswI0gi\nSohjQ/i+G2IcFFO5NJUFcfbcr8Pxb1P+wbAF/cI5lJF33Z22wP4bujQgYOw7\nP88O0gXoLbvMqXDgUFPdLAKsb8Toh2/lODjyVbKHlfKgiPozZLaNN0nbU+je\nKhF+zOoJFMFKQPgIpCrcM/0XWSpEBYHZvc9mPs6bQC8BK4BKPURQkeA3HAcY\npFAp\r\n=f5qr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.610c26c4a.0_1593615356041_0.9370070600644567","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/typography","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"264c8eb6305fd8198650cd5e6fa49a88e876505b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":20,"integrity":"sha512-xtQtf745Sxjz8xjk9rX2H0NTNWOXl/HBMTIhq8T2VlAM6K83lZGTBqeXBMobkMKq/UeOTidCvraOolobDZY8Mg==","signatures":[{"sig":"MEQCIF/wQoQmTE8NxusIMIY/GPhHcWKtQB87kmGG845O2VHTAiB8gn2FcZxSmlpI3NG7R/YJT66CjMsKfy0FW9+LnkqdLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOECRA9TVsSAnZWagAASS4P/j/OmnTatNVAa0aNHNN8\nCHi9QYDh8k3PZ3dWFF1nTvscjEZYzVjvXXpTiCLK4+XpS/eUQfyeLz6s4pZP\nzZkv/lsqfOZLpc/wk8pWZO/StUqV0ISVTZHeBEIznsYqJ38r8SCQetHEQWXw\nzkpeR+Qvif2+w3Ut5QbXunitplcHbkXFBRsWWOKBWOf02Xko+xo/h9EQWar2\nggNu4WqeUvSvAaKQ+3VUGOdhXakOY2Pkrv5gVP4gsAV5S0Ii4XVfSryXL+3g\nuq4VShcp79oLHYIQuOzhWsa7bAKrJxod8SUqI272VLuyiKsQ0lQ+PIJb3qDv\nu1ds30Blqz/nJSb4zDN4H+qcyvtMmkn3jKzxBGvFsUxecHI7aaHeKcX3pGnY\n9+GKzBSplBFwCwIjx4rC+TWO9YcEXBogXOMBYG+DZwUTxHk9fuVxkC47oxb7\n9niMGZv9vVAbDbEgxOrVNWfeXkb0b/xhuUQE8mOEvwI7VQOol2aOH8++RUWU\npc0ycHOG7LeDFtSGZYMO0exM/gyPIBHbXYAJRs52F+kkaORl2gQgIr6MmJfT\n9KZXkW5Kh3Oq3ni17M6H+006fyo1RCSIi7+EXmZtZg/qu8JEYeHIRGXa0dAB\nzzvZhew3wl6ZczDjIofgikGYpc24n0102bjcQp/34H+qKne9Cxypp4r6J5qQ\nUYdu\r\n=ngq8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e2ea4a99e.0_1593631619980_0.5914683295772867","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/typography","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15b17f1c2a7c86406221317ff8f7f0f455fe2410","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a78ceb112.0.tgz","fileCount":20,"integrity":"sha512-8OaNJzeVeYAxwWUjHR1QSxc6n68gL+xBQ2MYncStyyoHnaAL184OCGbPob2+11wuAmkE3XRnl7WdmVt2TtPu4Q==","signatures":[{"sig":"MEQCIEX+H+y2Kxgfu9u6CpxSPKDx8b9ohbqDo6maVxAGtjdLAiAKdNSW2a2l6JFcbaIIblCc2+3TctOo4+e7Qz58iiMiHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZGCRA9TVsSAnZWagAA8cIP/RjelTQlfAvuiOy/espa\nerjyXjRHxdVvKCC+o3QdkHV+MOryft19Jl3PQhxxQELiN1qhFdEGppAoqo3B\nqlVwZaJlTE9cpeB3r2sPC+L37dXrgn0Th5H4WuUjEUom1Wd2oWpz3RKDX6cX\nt+j6lYd1x+IHSLXacIq52ltUT8ieC5jaolRV1OWxhTs18IAvV1rGl0LiPQ9a\nuEELS7zZX2TGa9imBpA5hFhYq50T6XfLkzXmqd4uEIg77PY9Q1o+8CXVpaOW\nBcVgvEN9SAo1aNsgs6ZGI3IwMNdIIzXb2+g09d76mJ47saSWlkm5YRu6impx\nZYP5cuVrkre+Y8+23SVwYwdZJDpS7Dn+MyXs0REaxDjr/LO2L19+z5OgcHa9\n/p41f1crGU2UlC9gSUZtuAeX+EgNHxHwg9DxxjkwUEBqpjxBBBkGvRj4c+WQ\nGREEfX6qc0RfhgPlMf2UNcm+zwUP9p+bQifYofz/BdZEFi+u2eitnifVUrLX\nTRVo7+EIbLdNY7sJ/Yx40rwLK+30VzSKzhr0S4EYjhc067eWjFJ9FxCDrAja\nCQb6TpwCJgPli3x/MDZY7Sb6Pn34OV1OfMrPf+0vpvJ5hF2M7T1LuM1GZDNd\nFvH3/wY8lrwqbLREuEIBWJUfUO+n1W5sxHgiAJ4HuLmg7IEkf7073krRKA7s\nb4St\r\n=7vOx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a78ceb112.0_1593632326000_0.8211416512725429","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/typography","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24513d57d1a50b2b65a173ece7d95850716ba816","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b0c456d33.0.tgz","fileCount":20,"integrity":"sha512-/RptwEP8qnea12gAra/nQAjG1CMKoUVNWcB8wxuIOc0p8ibIr+0H3D16Zmg9EedcBDfttc4g2MFok5a8uZ+mWw==","signatures":[{"sig":"MEYCIQDCzMBA7WqXax0FBKxufnO710Q3uV5PfJRAvsFO4/aDTQIhALjqO6oq+wk58YbKSt2E8A+GB/URcHOdXV5sFAX8qFPB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6iBCRA9TVsSAnZWagAAnwIP/3ePpi6WqaxtOb4YJA8m\nsWkwkmQAaWvQqZgqYTWicbj8bpb1spOTQzZ9gVeGaYTAJm8pRQ8j5szfNrez\ngcD6fR96VT4ZwRlK8RSBXiREqs7Vx1epjX31cCraM25USk0wXS0Wii7P44X0\nd07TI4biX41RKkZrdewF80lta7hAIkF1UJvJOZVmhfsCj3d7IbajCvc2Fw8p\nIp3dOxZu0dU/gH7trH9ncJ9EHagB7kuCuCUUfiI6k2QR5enSOuZ8gUAi/0On\n/BicF5GtmZC83Kj5eBDIbbzkEuFdD52Ld07Z8V5GPD0JG3wtQ/n4Bsms8QPI\nWZXDi+F9/wfgDsXP+fWApIwHHvaRu2v03M9EKxIph8DA1ZS2uSg56Y7/QvJr\nUOpw6YiukNkZ7zfNCZuDC98WBJmLSdyW+F/9pkheGtuAuIU21jLXYD3K3Gof\ngtkzXZpiBIwQdTNe9B7YU+1Jxq0/bSRedKz68OxR+4t5QUNhvcJ2tJL5Kh00\nQrKN1E3EzE8LLKeB6LAilyoAQdmPQJMrRmv4ikSCTdpngbNjxpdgJgrvh/TA\nsqP3VXuTHISF+iEbHxGZODSU4GmXu0IXNbAGgZ9v6I9nUSJwhZs38xeVbg0j\npzUV/lYe9Bwej48iKtzGkVWSGolATDWWrUwiWvVq3E51EYoODAh3lbL9q6LC\nreaR\r\n=UrF0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b0c456d33.0_1594075264777_0.6516162596986492","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/typography","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4910ea4871a447607f36cc60a4d6c02af02df151","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2e5711e04.0.tgz","fileCount":20,"integrity":"sha512-PWVWxx9wHPqphIvEVrgaifxu821F9ZvKpgeD7m6qRWiKbF0xeDEVtEfEgxXsHL6narmGqumD7XilnHvDoZvr7g==","signatures":[{"sig":"MEYCIQDJAlx25ZDVMT1ca8w5J0TqBTWMsb9Iwki/7oqbZWRm+AIhAMEeBql0XEHavNFf9Zd2u6sYBHzpH1HvKAl45LeDvTBL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfi3CRA9TVsSAnZWagAAYSgP/1Jmew1DTeJbDeGW94HR\n6NdQ2rSNvc2gOErFkj8QGEh4QBfDyHl2i+w1bgTBL7WJLMGkrgZMTNo5bl57\n0G4GCGPZthkfd5u3c7x3VN1L0Yt2dXBarpcP2t1KjJMtYHS/SNpwI5iQoqYF\nozB31samrGu4b/9A7z8pvNkpsV2tgjA8uVw9TsqUKZdSMH0cTztu0edzuZBM\n5+I/9qjF8291alsr6Rk7QazPqidFdnMnqp4Onxjbw6XslPoY5nXmDHXUAbv3\ndihnjJy0v6varDRlncaRLZjBzkz0WvZQNQ19NK+PzV16TPpCr2jQufaXP0j4\nIFifJimKDw+ugYiCh0lXONdFElg7uS0i/OJIldwJxsbt+sQSXFl5n9uMGdls\nNcpGE8IVLUqG8x5jDJbr01yRG/gk2Awe7Jnup2lngE1eUFGBcwF4Tlzj1wAK\njAB31m23ouiONqk5cBoWKix57Cmj4emZAYejc9jkxaNvrP+rwJb5eaWrHiFn\n6RqTlSQedkl0B1yeIF7MkrqDykXKeUhsthCN0HwG02v73SHz1OiodCSNOV0e\nE3sb18zlartCr2e7vG5ms19XFJePa2O7BbZHxJnNxhehWJybEAobrr4pDRv6\nfoxtBEUZu9+h+sCgE0SwMDX3fe23a6EhKsikoEGlPK7iw8uD4QHc5UOVNMiR\nV3KS\r\n=rYzg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2e5711e04.0_1594226870708_0.2070448271524432","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/typography","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff64073c6b9ef991b3ad21cc7a8b5d0e734cf8d5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.811fc5d24.0.tgz","fileCount":20,"integrity":"sha512-6HVNWEafoirGDUurjeJo65u2Eg6A+fnM8yuoqlBpKpcqz6Pls3o1TrcBi6+Vwnif1bysSGyupsVpZxQpNqAtWA==","signatures":[{"sig":"MEQCIBnq8LvW1r8NCMiA6Iob+2b2pfa/x/7npUJwqZzTOOX7AiBsAJ0EtI213Vl8EDVn15Jpplhqq0JfhpWNMUH2x1dxLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf84CRA9TVsSAnZWagAAI7UQAJ3a97V8rySBNKoQyj/i\n2dIWDwm7m7OPeakr3a8WQmF7+/0ruiJuX/oSJhfNP/HeBl0q1pM3BQa8kzPC\nKp10DPAhQn2pNYj+sb8RXGYzSb0H1YFORg9xBYWBPNjlLlfAy3L5zR87J7vP\nBKsraCqDwX4dDkRu+MymhTuPKa0GmlGSeZid4Jn+rfHSjATw0CYlJugBF1zv\naw0F5pAOTi+97tOJtjDemj19Gq3iFKoOWlCZREzXnbjYz0BGET23o7j+bIys\npZYgl5wTVeTq3rJuTiUX3cTFm//Mpcfg1uTCBHM94t98lcKXN3joFQgSGFdu\n9pNEGruOZYYR7n2S5OWHbPWMVljxGg7dmvT2K17vCZC320sZtje+gq6eYFb/\n3nriWHFbbtrd9imiil12wh+YrRxOWLPSwcKLsx/pKg5fdZRbIbn8ZVrmUBzo\ngagJTAqZ4bQ31nFR8viWCZrIZzcmoJuzLOSSU421u3trkWY5wwrOQS2pIo08\nopTBdC/z2RFsCq2F5C1fNqU5zJXVlCSqVdvBl2zdRgKb7x1wPnNaVgDWdjga\nOao9i6e8RoxWPkzuDe9s/Vc0ZrWXkADMXuBM8M6d9+BSNZuJuzLVxtMvQX0k\nOqLez9FKqyVYUIw4HugxfUDExvnFPAYpYKIIAPslbnaSzPrwYZh/77LKvczU\nOxHJ\r\n=nhK4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.811fc5d24.0_1594228536108_0.9483045205613834","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/typography","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25140533a74bdd8ef855d3a81b372304575514d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.6ed717ddd.0.tgz","fileCount":20,"integrity":"sha512-u80WuwWyuxJ44bp/Ju8AqYArvTtXGo4wVpZoa5PRoJLMepwG+GFvKLZ33ziuQiRHRkkFR+rsF+jy687FrIjivA==","signatures":[{"sig":"MEQCIACqRc5Gt/TRWhS0lCnds6NXkpiKC7mkNtXbJ+nHk7KdAiBwO6WLCztyeISXaGaceHnX8edEOKr6IBTWzc38YQxCSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiH5CRA9TVsSAnZWagAA2AIP/j5wr1OrDDgeiysd7tyk\nnY7EEtCpmejtlkB4GexHq1xLDvK6850EJPDgssQwDvqCEvyT3S1qdC8aBA2q\n4gNpC2em0tXOVkhTWsj/ZAT0yggGCyxp9XpTIDXXQ9dBHZzc2+4TCWu1S5Ys\n1lv322Z196s4fvFBTngzMQZ07AkW/KnBMedMFVKxZUC++z+ehQoMuxj+0QCj\nQ/Ps+72/x39TQWbgw8JEsiZ+PYNmj30A9rXREQ/GEveCJDZR16hQGGX7VEfg\nAorZIQW5I72CQunAPuRzptQq96Jb5Hb/aHGfmToPeo9ffiE1l8pIqUklCC/6\nBXyhG//O4kOP4sT0R5hcu75UJ4USxxneguopL4QwvUQ0NIrOEURMXRRh6SGd\n1BezCeNepMQ6IoddQL6hri6H76gV+siB8Gy+jG4hGWDLRE4f0KLAoZvBdbY8\ntgvsbmJkBQ0jnfxWcGae1NbVgwrLgXgxFOW6ncfuu59y1I83BM7tSwbfTXqi\nbDDaCh7r5mVEWhbxfDGqZQSHLA4kbvSco1Do/1002RiWRL+73vm15KbzN0cM\nH6stns+3uDHdyCHb9KZtLXOapNI/1Tw5kF6O785vZBfzXxf348+KLJouGWTv\n3y8VUaSmOVI3AQKxdbV0EIE0dhzD8Za2fQET34ijjjz2BKjECECS7oBNNjYv\ncOza\r\n=PVzb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.6ed717ddd.0_1594237433366_0.4113473162317631","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/typography","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d850de590.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5eeed1660e3eb837bcc2133f7d2c0b357a0b7e46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d850de590.0.tgz","fileCount":20,"integrity":"sha512-Az3777pLJ8rEMhlRGPveP+WDjJVFGOVkl37qKXlOd5pMvM4vt472L9HWUmQvc55Fi294Uk/FS9XB1Hi+W/n0vQ==","signatures":[{"sig":"MEYCIQCkATjEtub6sTFxzGfmP6sSodWweCuzX16L68VledeQCwIhAOoz9S7+9XVTVjRIyBsfLeg1j3YqPmH9mdq9nYyh3gxI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xeCRA9TVsSAnZWagAA+7AQAIz+QmHsD5WmBcOJdYyG\nD/MqGr0RLDE+dDMvN+mdlHuJ8W6VGMBocFpqOdMs6XjzugRCL9QZafcDvkvx\nNhjO96NISioSXVHTZJRZMW65o0qUYGWTYaSk4H56lDY+qGU6hqLfADPQSguz\nRr4KLC8ze29JfbW5f4epjuyi5yYIfNZn/WA0pDjMUjoQ3gWckoerwS3focZy\noC47F+ayHCfcYhVkCs5Wa8Y6AzQX2NCDhBIopb82rBz+lblcaVDUkSheKu7p\n1dH9Jby6nHVk5XzYI8N8sXcuUPQSIRdx2pPUq0eCT2WHp8qPnQum8DB9MhyV\nOXvyQGNGOuYRA20AVDXwk63VzDm/wf+GGNB/9iZ0c+VFPplZR43otGN82wos\nT5fQ0YbARFoqA504rW3bTLcz16iCWTp/9d+D/22r3R0SgEyMG8YgSCmral6c\nFqPi+8tomDaE+QLpFU3E/ajLGSnxU5SB/ASTlemrYx7rXSpP4hcKIxo8PVAv\nA/ZT/sFbLOcBJrZK9SNWTABA0bvnEnEg/TKwql1KhSp6Gkk/xGpKdLRqyYHw\nCctn24hQj2k552J1QJ6jGR7S6GmJVcZmwG/Z7kmH7I9UgnKJ+1QMcdIG81x5\nuUrxmXktc02SwRxm7ScYugPG0JfDSVVedoD54ln9zcmOVoxXVMjZ1vAoNyLg\nJ0e/\r\n=MOuW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d850de590.0_1594317918447_0.5522458660939906","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/typography","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e07a70841.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"138edffdaa3023292af0fce8a4a7588b47aaf375","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e07a70841.0.tgz","fileCount":20,"integrity":"sha512-pRUW3FzWJZ/exLOirlkiPBhCpUkgKV+XTRG3OBf5UN3wNK/mxps5iNNT4DeO6moEDwuzMInW/7Cy4aBPTGl7oA==","signatures":[{"sig":"MEQCIBd7GzUKRf4gUgLXSAAMI1mWs3gQZOPlWTzpKW8S7md/AiBYAzwrQHcL5CFIAWU3HUkrznhZJ1dMgRY541VVQ83yKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NaCRA9TVsSAnZWagAAaC0P/1jy/H/hnDNlqA+s+biv\ndIUiclfIASSwQ2pgoLFGAGEUlOAjqDQceTIzhVDQRPFudc14uYphqpu6ZU9w\nxJFsJgWjYA87Brn0GbI/BqP9lqq61n7GTH/u0Md6b99GpSUYp06ooIDd4B9c\nE+4FMJjb0rBEHMDTFHfbNq9DYki/k8M+SBO/Lg2gaStjtsT6YFl3Zp9WRvSM\nx7SeUz4wIhS++cQc/AjLFsxmeK9aSjrEMrG1iT4TTHLnN2uWu/R5iMNBRR9U\nBGol76rr09JGf/rLRIk7dsW32TcJ3rzrg5YKIdgkJn6Daka69R1caczPkghS\ncIZVSLgSt9VBpjMX6jDNVXAsLPfKeNb87KwIJSIwPK+xPFy9GZI0R9IveaC9\nf68+d4FhDF/A+L+u1T8li281B2l3ZmD2+c+La4y2HVkZHB7PmItlgIMGjDtv\ntL9ofwAJBJbIeYscmPp6/0dxzl1FFsFO7uRDxkwNqTFfnLG8KND6eQRly2Qb\nc0JQIRkJfCku8KGAAG+X2BDWbhCYtWktOXbVpQPEpLBJTOQj+6YTe1ajUANW\nVe4eb8v9O0C2rB+QqP4hCW7e1ws8aVaFQ1zCsDzUDMIoZRTA0bJRhoETrw6K\np7vSo+j4HaJ0fZWQ5D0EeqFXXc9ILAjem70hko32TtlPRthowfYb01wwPeMe\nm55D\r\n=FUMM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e07a70841.0_1594319706571_0.7261413500036207","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/typography","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6f59fbeca0f078cb55d31de7c3ac78b69429cd6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.37947ed6c.0.tgz","fileCount":20,"integrity":"sha512-7LBfAHb8hd+gD6sBtPOE2aQew1OmrV4SETjJoVF3AACfvMRRXmjSpM+diIAECXg40QYbnzTLcKflOMMlUfuEaw==","signatures":[{"sig":"MEUCICdyhFVArHBFHwlFghB9ofU4UbkDULTf93y9Q4U3iexHAiEAxhzG0V6ptGXn59mmBR9txedngYLMNXe9mcwy/999cgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+yCRA9TVsSAnZWagAAD1UP/jATdZdX6k2GZY8rnM+i\n4iSOqqaN2ocoE6dJWlFwlq1aqzTlAdLlFVi3tt1o2KZh1ZczHJu6LbkurYEl\n/mxpNRqS0k0XzzeCNHnH1zTZNqaAlZur3GXJbBuUdT4rLoE/lRlRl+Utbar2\nJ8we/WA8NkVaGHXNFj8XFensdl8W8JImhB3Dlstj1WLXa3AqNBn6mMKhBYDy\nDCIVSnNy/UwOtro6dgfGWla9q9PqRy7p+5vCZFAbuD/0boeGZmReplqZ9P9T\nmM5C9JFwBJj+KqJMEwUXhmZmN/pAxALCTCeg/Gl8GZKPtSA42ji68NfSlmvw\nEAHBmlf3tU09E6G1Ivgo/Q6UsdXK7TVQjLdR50qGs+87DMLJMQS4rOUhh3UA\nIdjA8qd6qVhM/sllo0lt/Zuhd8z9A5rR6jAZ0x62y5kpUq1n9VMsS/CF2wkR\nItK8siL8kGwAPiX3h7dgzPkSipIA8AOPlKkGUF8iznrOmItKT5XCWGdZ71J0\nEk4tQ0/zHJMLdbbUIbnjGRij+nl+UEm6CUvyw18AKkeCY7E6EauNWSzb3xRJ\ni/vAr4iCQy2bOMMVDzoC3memNxdaZ1tDvA8yxnGpp5HkNNFc6XSzTush3n8g\nUERbT+8b7RVbGSGP4opIeBFwud/hxLT+M5PWf5tKBfdO1ciw+S0FIVLdYOW2\nbTO5\r\n=X9XO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.37947ed6c.0_1594326962289_0.08947379896477603","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/typography","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5d443afec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d64006b21c189532b326d586c2ece5dbdd93ee9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5d443afec.0.tgz","fileCount":20,"integrity":"sha512-Ps9JQ0X+xHh6mKMZwJ9J69RiSVc+gvuMwB51AusGwARx2338rFVcDBWX+pgojCg5VdgA0YphnJuVtvqDu+WLcg==","signatures":[{"sig":"MEYCIQCzperVNmodFqqcNsSkrw74357FHZVleU50wEvb0AfrvgIhAKPoICTErsI+8E7b54s26CNSmhbkovBnyzV4OqcLNiY9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NbCRA9TVsSAnZWagAA5QsP/1cZfgWJOibRJvSRyoRA\nNJuogLoWV6u5RXrj/WQdwdJHb/Aic/mrpI3JM3QlOsB3Vvvp4uYw1BZBaKVb\nYkJsU/sbZg56B+zhYSGOrC2TjDawU6T98fGEKOjNlmjJZjkIBBZhXWuxZvF4\nVq0/Zs29Q3ccQjIExRK8Y2rMx08o5FkYT0Tdv8fEfXm9g07ebudVFLcykmqg\nTKWzyTJPw8vJjPgRmz3hqnOrzpOWiskPCT2d+1FAdGmhaxw2hXm+EU9ZR3gp\nGeiiF4w9118gwxxWuskP8xyddRdlClo3taTSWgFLPmj087/EMOaMgpCeME3F\nWdXMxADGl24YfG8JtpXGOj2klC8iNOzeI23VV1I8vnTCiKrIMqVObo0sw0VF\nGnyXih11zSxVvd4LBEEQsjzColG5UNdcHoPtSGm9DLNWZbNPcsoMtPCiEumS\nWf/VYpc/wVQOd03q1xqfVI2AS3/A6y1pt+8TpFq420V+F3YeVcWmTWR0ZqkO\nTGK6pCGm3yAyLLpKpItmUQoUd6yN36U1QPRsykHrJ1JxV5hTA+Ek0ev8LWyp\nNOdBbfQTlKWle0NkFqbEZbLbPKV8BDCk1s4flR4cCqFxQ4TD15nE3pp5tvmL\nS9ISTnI/rza26mAdJBkVKsW0AFJ42AMNcI+SmsT5Eb9lcYStuMuslEbLw5Rx\nykaD\r\n=+v5u\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5d443afec.0_1594327899047_0.30838753250454154","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/typography","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"892c71fd238b3853357ee1942d83df2b9d8c0832","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.9ac1ed914.0.tgz","fileCount":20,"integrity":"sha512-QW4UVOJIc+R2tBqgnJE81eKJnK5bwTV+5/5aXWd9GcpOzxReNYVn0shVuEUQNl/6HZirwjGdSmAm0yinTiwHVw==","signatures":[{"sig":"MEQCIDl7cDFDwOjjpGOBQ33QZ/QsjwNlPlRS90HPisfLQheWAiAtvpxNxFryTbOtGHsTKYr3xplnSWxJT8sIPC1MoeyB2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oeCRA9TVsSAnZWagAAFDwP/AuwRMm46e73pwVgPiIw\n32x+qh1ivZg4w91rRdOEo8um2/8VA6E8gaBZ4VH5rVM7gUu5LwToTAI7lkki\nVVC7rPIPcl6xGZIPWPZWC/ugk0p2E9c8F9jIPACG2aJi8z34KdnYETob+5OE\nzMMv76q5Ppb4+/opLxOhWI6SQEoT26mlX9/E1NI8Ayzszpcu1cp2NkKgRBsq\neBlAHaOx8Fhj5IUI3xyZaNRgWAPHqERHH/KR4T50DR8hLRgX07LeTivA09/z\nqE288uHbWqkBsySQ40+f+P8fRJKd56zmTcl3VezbyxQ7HOev3nz3taJQoU/o\nO2i87K7WPUezUGdbb1kLfFsoVP/Zug5sFX/IO85iNRFmrr46twP794NYnsuG\nqyi7ctEFMBm15Dvotmq5TjGilvakYGhuNTcQYpQ28VLquRI4nv7LfRCdIxqS\nRz7aZmlSYi3P3Hb7b4FomHXb7lQDmgzL2eyaqGuF+ZvJWwTgmGkB+D3SuBxC\naJGjypqXpZzk1A8XxEaAjFXNIEyMOMBuxoWcSBv6S/XIdgjWc3+6X62+KpsP\nBiHZv+YWK0VHQJNfpX4tPS28kTC452mgW28FqNz3WW6Uwo1dbsMf9BNpesCd\nwjqbkAedUOcvg/OelekkdxqfT+h+nzD6g/W0DDGMxLVTY/QSETwNidfu2CvF\n00MN\r\n=LkHb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.9ac1ed914.0_1594329630107_0.5763918987223753","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/typography","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6e68f86751e335a62e802d1526242c3b31fe1fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.1e7cb6198.0.tgz","fileCount":20,"integrity":"sha512-yPUSALZZwmXluc+ZQ0xsc4iZpDMK+UQQX1UxuQtT0mP5eQviqocUSJrjlqe5ViL0jQ0FbWzXwvtgn9taF5hvHw==","signatures":[{"sig":"MEQCIDeQ8R+nLi2o51lcyKIbhC1ls3FHiD4zWQ/D3u/+/3DDAiAUrYpzkRRf+cQdhvZ0KrjBXXkNjuuKjyfus56o8U2hvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5Y9CRA9TVsSAnZWagAAehwP/32HWrP/UF16cTNwkWJW\nPWP/+xXDfijkTySa56EeqJY6Ai3TJeO/cjt+I56m+JuE56kzje80Z9WjILuL\nL+arbZ6OihDpaKliIf/87zh2tLGBOi7E6H/Vv7A8ZzKOq94eZ9XXUkJmsEyq\nDIk6UOfgm+BIc+8wsBRme9iS/EnDz0Uh2yZREjW5JBt7RF4NvP+duZHGOKue\n2IkWy9/pViHzZgNqs35y43kwcr0RapwU9SKQMC4amy/+P/tDacAPr8ZIp+jb\nFepneARbcUFQDxnGfGrsN8F2il7ZJ2AlZHGg6BvyldZ+svyCuUdTDlh8OaKI\nM37x7mcC6Y6JQByq+3fWTtxjHQ95kPdJxb5TEOfj/JMeqiwtJqx6px9dgGVS\n1+6KjIr6kpHeL1JneJ5vCbjJ+ijAx7cRKanMtgxm4g8U2i8oSGGf+LkD3eXE\nbyvEIxIkcgAcXeajj0Lp/P0XLKnLomDdZ9qQvAbmOfHJJngWzX7WVhMDMbdQ\ndOcNDsRO9PGdRKPSanI/w8nQRjoGP5p04oTBnU+m0r22MO4VroRGGu/RPFDH\nOArt80EF/al23v0pOnSKd4VsyUh7KafpQnAkDVc8tKxfJ8vlHi2Aze/tQcEg\nUiCQHRdIzUybmpwR95SbNT5owncCGQiF/MZeyq8FcBqjPn73nGjseDRvLVIq\nExDv\r\n=Vq6i\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.1e7cb6198.0_1594332732803_0.18780808138567595","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/typography","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.843f636c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05342cabd05d331a5387a1f1e89d97e58e72c6cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.843f636c0.0.tgz","fileCount":20,"integrity":"sha512-bohzGbrupcl0Ze5Yya5t44nxESOegdbdeKXdevAB51oqMygX3IrrBUgCgJTxTi9xcbAys4PagZINhdKGVGeIUQ==","signatures":[{"sig":"MEUCIQDLCkKrJDMpo9pceOSZp7xfKjLmB60y2TNWt66VxWytywIgURoGrXIq5BGYXeEHZMx+cmZAw1D9IJqTQ1oPbTGT63s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKiICRA9TVsSAnZWagAAvPAQAJeNlxSpZ/oPRK6XDsQj\ng9egPHnuEGCBXdzpmJruHlutt+JnxH1Z+U7jjxOptVaV+yX7bAVIGyb2/fXO\nksQ9cCjyKoTlSfVWBsAdsGjvTaapxrYl0MZfeSaxdswwzS67qJaFwdXgkWp1\nLvGfMeUxDA0agyEST1kngjmN1JDrYDqO69dBhIxGp0i6zfZJTgXIN0YTGDjj\ncKPx/d60ea/DlAR+n2qn5XQ3nBYffV7lbZZh+xUshuJ8pEuVyK+10V1F5A3m\nMMAQx9qrqUf04EGx53oD4XKGp9sdqm+BYboQOfVqtd9J927YkY8WltsAMFxw\n9P3NkYre4cvhGVTY0ETwNHKSTmjAvVdtpjJdWBVT/+FZWXPeHRPz6V3ckK9S\n9Cypi5g/YK8b+JAPWbdtZr/MH6VfL+sG2oDBPRdZ/DO1veHnxg8Hz1ycbEce\nTwXrnvJGA3oA4NNp66iqG5QZT0YiArAcdAcgkZtfLSIGNm5PSR2jozBnUgN+\nlHLKdV9Fs41bFjHe6Tdy1YtA5/ijgLumbORUpAtkv2m/7eqpbHkZokIpSkDT\ntTVE1xUM89qoMchUgRwBYPmVTr9XC6lsa0oHi4gXuK7HkTx8NbSrrbAMeHao\nc0D2OzAH5exDRmAi2KM+rfda5udlTAbM81trU6pKU8XFpimlJy6Mkhv4EQuU\nwBKj\r\n=9qoU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.843f636c0.0_1594402952187_0.09719461608621649","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/typography","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3d79a88d3e25bb3b404513b75b5209caa90965b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b2edaeead.0.tgz","fileCount":20,"integrity":"sha512-f9EevbF2Sj5J0/X/4ZH7QkHooS+sOuriGmrHBFNdxsgU4kNTS7+5bueMm6O42P5KS0zg3iE/jM2vOqqP8+E8mw==","signatures":[{"sig":"MEUCIQDNL5sg9tVQsrhx0dcUZrg2rIXUs8Tm/JJT3z3dHSOaOwIgEUGBTzZq1IH4e1iP5p9PX+Ltu+/kBz8IZUlApfczXZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5JCRA9TVsSAnZWagAAeUQQAIP7oP88wPplLt+zaLW+\nPIMbGfJxh/iptXeAjkCBS004kQRrh2jyw5a7SflkHUvpYpsCGzFKEiAAo0Js\n0eiDNJAuCw2s/x73GDSokSdg8Fv6baXOGVRGiAILOfXLpiRlB0a6uPZOUYvw\n7ALwiAa+FrrHB/uNzV05Kky2WTEiS27Lmi/Iym3B35et7SxmqXkvUN5qvaTB\n1RAvGEP+zQoFBhpg8+QJTNJYI+blIDwLunMPykuRPgRsHb3fSoN7D90NPAGC\nHXX2ceaGtXbzxa/GNtbFs5ig3xyx2psWdP+Ht+gltPW01Bg4+P6aqESDcm17\nGzFVKgzIHUtK7+JB0E6B3wktjz2xWl47tvYUaBCnvuL/mxT50i8RqMW9ofQk\nmerlHDKL4UAjPeXcyZyrWvfgVOJqd1F0EqOarWg3N2LlKvx32NU08cH2EDyX\ngIDEjse0UqhPanGaHAm9xTsBQSzh+uh0NxdtRperSHYrM78ZjXDjRI8/H3/r\nWkKtsUWGSpqegh1IV4UMmnf0KINnJYHn8OQQp5FD9cCD9nzQHyXIL7JIJZry\nUQYTElWrh19hZAWG69iDPVobrAfHIMrRZ0ST/1cD3B5Ky1mI1Cs0Q6fnh13g\nN+Fs8QWBL6oOxw9ccDu1W/ZzHP1kSQGFBR6fx0+fzsnzB9cR5sD2ZEFXBaSX\n3UkE\r\n=E616\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b2edaeead.0_1594404424522_0.42616299376278666","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/typography","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1c6ac9856f99d29f622bab9faf64f7142d0165b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5dac1f624.0.tgz","fileCount":20,"integrity":"sha512-qxeOw5a81o8zukkf/OTTL6K9oKh8mEaX/uTYvK/hWdqiiut4Qnwk8wej2WqAhCvgzklgYhwMazzolow0uAd4NA==","signatures":[{"sig":"MEUCIBtD38sJljpszlbt+9aK5jW9HVnmhPThuwezP9/9O0zeAiEAios+fQu5hlX9Dt96p6aaZPh69fzX7q4AEsdXKgaJCL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0CCRA9TVsSAnZWagAApTMP/20SDvmnsihwasaoroNb\nUQBxg1pnPmGesOYW8VJ+ma5vterEGhSxgUclj4Rc5H/6VZbF3VUdvSUEBQJV\nflqa/hJ08Hm3S3NPODDOXAUrDQhdJv+vrbBJ+YwXSYv9mpreXRULc6ERm7nt\n9OMqycumfS4BpI9tsTSRIdI2Y2f9WGmXcKwzX6+zCIN4SJF95TR2ZW5/mSnN\nUh3QI5kw9NvZw+qlCVVcb9d6bYmutNRkhJLXVrQeJP/IQ8+7PadPnh1cII0H\nlbD9Ch4cam4XwS/Xdu8JwnZyS8kHScFucPybvmi8s3TdiE4+5huhqtqfH+jR\nes3EjxJMkkt5rsyf/QKeEhcxC+Jct4cyjsUTBcEAEfnjVqdNZKy1H+508e3a\n9mGhaeU8sFppRnIjROmA6PMLbYY36RxumlMugcbDjxmZ1RuyxZwaTojRw63X\n7q91XglhqHg5hKYRGPYVZ4gtd9WQeDA9iP0wG/TVg/4RP3moOwtcPELdpfP+\nrmIJoHtRYSBvROHLfxByISzaYp3a2dEeomrkQAYB5S35Tesad/7ANG/lQu3R\nGJmTG6pzTR52O9qjrOAiTYrj3m/kvIndEGGtA54Tc27XMeJlOdrYurqAt4HU\nxorHvZYbaL6aOvoB1NAeRf88jZMYk/FqJn/d+iJKuy071On0T8yvcw3v89LD\nsMPN\r\n=ERcb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5dac1f624.0_1594658049777_0.517498859373489","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/typography","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.4497acef8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9229d2b689dd1befd9ba726a2fa3f3596b6f3c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.4497acef8.0.tgz","fileCount":20,"integrity":"sha512-fQT0Y56PWB2gBkI84OOn9ioIYvYJGDbaU8vMCSY5GTKXMpyq82D3gfSDYBUDr0lV+3HtXQ1ghbg+Db/mdT9XQA==","signatures":[{"sig":"MEUCIAR8nTgOABWUtN3oQYjBso74Oj8hwEqwbz2D2Fs3PyATAiEAwcb/ZI6eh64ZhOjj7C+rFRMmINMluTEakrZ6USDhjdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8NCRA9TVsSAnZWagAAA5AP/3W053bZg1Opo6Drbvt6\nVO4pazyL74jNuLs+LOTnGwPqb53GSLj0hia93+RNotuRnOXMraF4V2EOLc9C\n9H68Vzh9LUb7QTJ9kSp4q08/nKzPj5ldNdgkFG5iPIDUW0lIGKbgZzHqJA3r\n+4re08KAMkZ8ZW6ie9ukv2GGPvQEae1qF1IjftdoapV5ZLsFqKkh+1PZEmGj\nKa/p8XW7rcbBRcb7AyADv1A5y/jwUkjQcM0m60fA5LoNRC/QgS4peTNYOwhh\ndhvw/hAQUp6V+UbZe18hefCKHtr3Iu9E2q8RpS2aIr9UO3LKsCNRCH9/S0v2\n2KgzUUSTZOLSdnZC2TSFl+4gXlyhNyhvpKgN7537qSPfmn89wIF5iEESygC6\nLjGIs5nJQud2bDu6ZkqxxXvrEIdrcbi4j8b+h/2hak6f3O6ykGhpPdNjqvlA\nTaYcCBKIfnd46bTRHxVS2JQgLWdzbBRTcjLItjTKdvc3bencVO/ky14iSy0Q\nrDDP2DeWy+f9VT7pVqA1PfwMa3suDnvoV0WYacvH1y8keIecl7ci9V6H+rhu\nxKA2VQKy2oYW/ZCT+NZJVhJKXlAvEKJV7SXUAzfAHMNv6SCxRy9zjfSvR8y+\n042tArB3ed3eh8rc67BA7MjsthSNuzExBRIPjY9to1RWkPFDYUEZGodZkr3D\nyMKO\r\n=5Cb4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.4497acef8.0_1594736396943_0.9977697329642554","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/typography","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"888b3124db1eaa013dca61cf535325f15783f269","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e6e23019d.0.tgz","fileCount":20,"integrity":"sha512-LVlodEyKcJnGTuPH9fNLCJ1h+/dgnf7khcFUzg5h4rxGsxQhrpRPpLsJjnyleN6N1499qce2FcVsL94SVl943w==","signatures":[{"sig":"MEYCIQC9RpD3BihDxfvlVOpZUUl/sry5mF/UHD9jlCpVeyF9VQIhAOvIq0G0e5lRWimlensTjQVKDJGLRyX8QliacKzCxfNJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhEuCRA9TVsSAnZWagAAyt4P/39NoXzZ94oUjgtuOolr\nZsQ79xEal8R2BuIFGiVbEcQCVROXFITdeYIoSNmI8HAbMo+FZvbX6crac+HN\nkmOBQk5sPHV7/Lf85ttscq57P4U+9eLyxSs6m5rSKqxImIo9v5C636sBMO3q\nM7BXkCrL26Cuxd7U8AOQQRrNGDCrcXCNgRVcPIRa5SHrGMHik+VPyedeDMAs\nVCvfpnKjmXtbzpnlVo+nEKwEWBEBxUR5frRsKQPkFbbc80OK1xAh6nUGAlTK\nBR2tp8LnsZbIhT6p3+eC4x4hmKB5WRJ6tSrGqN14UWNitryJTgFsjBCW5c7u\nbZcotl2TA7ez0jKy1Xhe6B05bqhOhVYcV15tLfIKfCliEIQlb0L7V7ypM+3D\nQv91obBpC/i1DaEakTAuIfQWHyCi2bRyuHgDf34QeNyJAUk8fvgG0t3yg9i2\nrcLsZTe+yGjO3IkU7ZtB+mo+HzipTi9+Hx7flmR0VhxGPOmmm8acXHH6/aMd\nr3DAAtS2NI7G76gIKzk594vhVLnHl1M7fbfbP0XCtR0krkHZNY/ZB8MxwTDP\nXlIJ67beYfBr6Ig0U8oQKWobU4M7mCzly6TVS1qnVgpNEST26EKfppTjVJgX\nJy4WZ23GMUc2c47jZdaBbL20JHgF2fFYPofFlD+3mrIOlOO3R40Qfpo9csha\nOEUi\r\n=IBaK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e6e23019d.0_1594757421591_0.8527195973170054","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/typography","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25a9a9f348b4886c5c4c85b24c01bf95fb35ffc2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d548d7a92.0.tgz","fileCount":20,"integrity":"sha512-nxFQZkTdMlfaX+VjA8/umXskP5ykV45BbDCHCwMpKhxoL2q5+rbYs4fWtSaGSLTL9KCqATZ2bFHnka6agqfTXg==","signatures":[{"sig":"MEUCIQCnGFSA4kEAao4pqczIPAyFAdeICxHwuODCOevfe3fL1wIgLjdO3+gWBi5eboxeRIJfjta+Fw3WtJaxERSSSZcTzQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/YCRA9TVsSAnZWagAATCoQAIwGPuzZy2QvjGKlYo5w\nLZHgTqTUbS2Tld/AS4fobYIkxwNCzvIXo8mRQngYrITY4n5muHP68RsCowUL\nayyXqLurtMRfDLIZwW8dKe2kCtJafnZD2xJHBvRAzsoY12XDYp32Ve8eYAMD\nrtj3u/RxhKYmZ7fmLvtbvf0pafy2Ltv03gWxqtPWKtWlnQsfK3M2bmz4F7Eg\nRFenMNvmWpoH1QI6gCa3K6SOCeGgW1+DKgUoSffu65iMKen5rrnrz6hbGHDi\nko1KUoevICADIewGWLUSHNXT+3a/bmdOu8AiUmx58jKLxu/WTPFxmOXGXvUW\nEbZXiRWZxtUFROdyoJTkm8ylcjFc0p4agV4ce88hi8TfKD1WF/8Xc8Z5zC5B\nkWw0zpfeguVXMwblhKFkeyVflsg4Sfk8ERWAduDv49UXd1g6kz1vUgaiEVZd\nANcP/pmmDlZV/PUFRoZQQGJDCpst7R2jH7jxpQHLLICpAopVSiq1Ea+1YAls\ndC6+KEx3b0K4huyWM9fR0sQ2+WrXZXMyTFU9hhYpiwsB/VVY23VGcfLkpyzs\nKEbh0ffMDak11tCAoy2OEle/Oc1EBmgfUJWg6SqmGnYRsCtYlAk7nAKHTF9T\ngTnsSxl3lnmorwvBCskeZ3TNsuL+7gZtxfG3HOzupEMkmpWejPZwat5PXzM/\nxrm3\r\n=T7D4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d548d7a92.0_1594761175896_0.4318324526225099","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/typography","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99e4b35de5d9f3a32cbc8a8ee75f9bc2cd21c5b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.58ce529cc.0.tgz","fileCount":20,"integrity":"sha512-P/deEYIoqrjHyc8IUHdjZihGoyAmIuGmufjFHg2Q2MQp/aC/EZ3awGBMYukHPkiI3xY1wZ+UeHCGcVrR2j7Lgg==","signatures":[{"sig":"MEYCIQCs/3RHiGl+ytzsjBsJvHH2MBA7W81XeVWkQdGbEf4lqwIhAPurPv5uVVPI8DRJs62uubddG3TjvXioJ7bRw4gLZRlh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBQCRA9TVsSAnZWagAAo3YP/2UyG7RJLegGDfGnyqKX\ni9VSr3j9zfAQ6oScYCrLF4Pjg+3kjfcCXnQ4hTmqfFy8xUExHF8UxsHjnqoo\nZbKbPS6RWzWJF8nVhjXzSu5nAsStg4huGpIYo3eRjOPuT+a/hvAoAO1wdpR6\nHu2GULwuPl1hXVDqvjKC5j53YEuQgAe0N4LmMGeJuPxOR2wwE67fgjDeG77P\n02RdFecxyEeXo+6/9Gmc+/HHK337AnttJygsU1bRnRngR7/zXRAMiCmykCiR\njj49INFMLOe7M1vLPsy1o/4n4ImQbXCR3RemAD4PXmA/sPi07GoNGjxa3sn3\nohgTbH1dj0PV6rc++h+tUwD1MRuPC3ycZ+EURovX/dpB7DU0SJk3O1cKb3Ta\n95P+MnLiaQZ4rW3I1P0XG2JDNVtSm3qKI1SFJcRXeyjVNNjLHPK9+t3Ezmgy\nL46nuvzK796PH8DRUTqKWyIdoNllZzE5ob3grzAXjJO7ZvkdtWn5Cr9GRwi/\nvxJVpTiNhrRarlWKt20m+4erMrkKVMwHQlAZ2ZJP5On3nBl3AjxYF6O/fvRP\nxlAxQ0LNaz+l9MwLzHj3UP+gcR8O55YRQKZgnmILC2vpsH1IRyFtwQprLRQ/\nTY3LaY4wmk9Vb/DzkN3pYU1PwaKNGB4OzT65PlydchmUIfGJu3iJUrHZypbN\noTOj\r\n=Wj9n\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.58ce529cc.0_1594761295566_0.6964382709336903","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/typography","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2824230480540db1cd16c045c6c381939072dae3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a0f1202dc.0.tgz","fileCount":20,"integrity":"sha512-IkuFkwwbkQ3LzxlLYYMs3IOc6hpzu4vXd5DUB0bTQnEwwBW1pI9OfV8bjbR8R+ylKqmm90Qo51zirGzG/w5mQA==","signatures":[{"sig":"MEYCIQDphFtLk3MJeL/ttmQZvRUkYlYY/twhIJ9au/IrXNp9bAIhAJ6tH26/2uFJE7V+L3geZp2bh/Zch2znYPgmeYEq2/Hi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTQCRA9TVsSAnZWagAAZTYP+QAndQzkIs3+LDlgsaHW\nnEZFaoVQaEYR8H4s+fU/ELlI3H/Fp7ZwTqTpJkwmYVqO0f2S6RTfm2c0ZSYt\ntrItznqlsS+u04xFD2fxcS761PdraOyiL+cgRzJ6j6IIwRurd8DDnEUGtGEi\nha0QXsM/MvWivmCuN9cMLvyKzoeCy9a0upHfNy1jFwDMaUn4zXlibkqaugym\nMFLETpTo2fyFh43GBXWPT0DUG/S1Tym5PrgcHZlra2bMnTIpI+k8W8CcGukJ\ncsxt3iLlBMVNLc4q8o49tt0ZRXtcK5cljvkE8W++z/SIvTEofeDv6/9bMxNQ\nT+9Xi1GaFRTcnlWxHXVsE4+90L32D4NwQ89roqkWlFeIeXkknVD3xUdoP6Ts\nScxmTtqlfY9OCvRySe5JY5AM5UZX4Gf2wV5kMH1g6324/ibBAqoA36Cfv5BT\nAJrHp9eb4VH/FcF+lwl5A3gSrAn1E2g7S0DVX2G0BCC0LcY66Mq8Bu/gI3rE\nHj/yxc+ZhoOH9D4naYHzOc7revhUckoBn7IsQggjCKcyaX4Ebp4NJP4vPMe7\nBEODt4ISsOCGewyXxHhtEhEddGMdJTW6l1U8HemawEtmcQzgRDPGZawyhHVP\nEf5rx6HIAfUh3Yp7nZ0G3HR/jKsui2vGlkVPJxIZtPkFkZ4ILHtB1fnRDDrs\naOrN\r\n=pyAL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a0f1202dc.0_1594762448217_0.6199611255572732","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/typography","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71cafde067a8c0cd54560a3e894691a07d4c4c92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ad4df58c1.0.tgz","fileCount":20,"integrity":"sha512-S60hE49NvpwX+nFWXEcxm5l9K5eqNgwnXnkcP67NkjhxhMAgKi7d9qTLPLNoLpQCcR5OqnHTwvW+kNL6OihB9Q==","signatures":[{"sig":"MEYCIQDda3XQvoWVTflUT6UrW9/d7UkDSUe50yNqs+Kyqv6K/QIhAKmkmGQG7cAPthpreJ3r90C2kDfEO546H75TpetglZ3P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkoCRA9TVsSAnZWagAALq4P/0+Vi0/GNx6Y2s17+ynO\nWz0NSh/+SET9uHTih2JkRjPdFa25TvLyWxXBnhMeHJx4owuvZsQ3nCRAai+n\nvfWzNYOCxipwr5sEWfZLqft6DvT0Xjg3a1TRiOKa2btYDx+qdi2y5JJo/irn\nEKbX4zlyq3hKbm8cYtPCuZKQsVd2slEa6wJb2z84TYXTMh/BIuFTu9ASnCUF\nickX3Uinz3OH0v1p900Rc/8faspF16BsbVfi1qk1UkSfzvSwfTGy0IuL7HJO\nFjRI+a2fHwsnU5UQOMvzpgubwy0Y0KCnxmTKrrUxPrhq4xZ5oo4RE0R9Yy/8\nBDGTZQOuDbPvoDtrG9eunvBMgAMA3lvgg8VysK/XOaxsOleZSSHqG3Rzdqa8\n97ATz/A9Vl5YDJt4BJ2wAcUUoeQ9xk4zX/XssUIRXu9qHulutVtIu14VwQZU\nLUOBej7nK5eFZYC0p5p4dsI0uM5d2NboGzWeIYm2EvUX1jcPoH9XkwBtIjPJ\nYY+IWKlCx3ZKWSYnf98l3+OLIk2sBmiuQmvgPSv33t/eGm6KVIlZQdPgMNmL\n35VWZ46z073xjibz7z2HD2BUpWFoArRknC/MMK49mqMrYU+oeeGGDXpPkCpP\nHqmxYQeO9LBaJe+q1wkAkFTATYEIlVfnuVNFR0BLPA1IepWMovTZ+uq4imh1\n0DyY\r\n=3EIE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ad4df58c1.0_1594771751800_0.8727821872644574","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/typography","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.01db89053.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cf1f33dd9220fee47994d85d406259650b71318","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.01db89053.0.tgz","fileCount":20,"integrity":"sha512-SzlPqvIkToFoisyfkY+Umoxhkl5dr4nNA3CtuBjcYqOsjnUTu0+7iZJWSWdCScGKXnJtVnZjgyTngVqWDGDAZg==","signatures":[{"sig":"MEYCIQDb2JNd2PelgMzThyp9vsr/OVF3Ieer8dxuaHGuYQuSVwIhAKh+BmvDSsB8/XhVqIQceHtt6nUUEcRVfG1x7u190KgU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKkCRA9TVsSAnZWagAAQgwQAIq8Kgqn/DDTrnhWe6Nq\n/KW0ZsQkw3yDeDuno4/hmeFteZgXwvf5/lVRVNpy5JHeYMla3A7cMvxlgNHK\ny4HHsZwuvc02rH5IWyo0aLDC9n6J4TFYImOV6/07FJqKx0zds9bBUxn/gBap\ndmRUJrNtJxoLj6BtcGO9GamgN1j3LcYVI8SgZqCzXdst4IN7Qui1ApnPUAF3\nE1GuMka5mL4AFgY7iihLm8IpMpFS6/TvfkIBNtXKkV/WiqQPX3krPULD7tf/\ngOFHx9oEb7QcbvnKJKXJGCZ0kgjy/5t4uBgPmYGSfszFBnBjlOPd2gb2Nf9F\n7k+SJJESsryNiwQbMkLFaJHVD2XtSTc1fI0tosadWcVOtb82GFo6ozr4dBu4\nGSW0GK7zO3RkjEI4fRDJ6fpKAqslaxn8+nLfCg6t2KkYXMVE7M0RtH3XnyOB\nxTCb1qoPSuIkFpcwA0rxr5WM1vEidwxiyO9xuxaDE9qXZJ9xe9/hVqe/UR50\n6fgH0R6RKpGDdGOTBlo6oeGwwITOuxvCB8CPjJz+JgF0sT3aPvwJpgMln57v\n25sblBl4nKo3rcIeqQjzJsAb2lVNrxfKMk6FI6cE+T7lJ78jjD2wRKcLE13W\nXwqJqS0ZTlz+P3euD6AsNSmtdlXKSA8frTJK3MGhSSc3lg4nr14tztQDra/d\nWDmP\r\n=GCro\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.01db89053.0_1594917539507_0.9164392804576249","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/typography","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cc500d7034362f98b168027ec9044bbc64185ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":20,"integrity":"sha512-hX0aZQpA9K89YcVF6DI1lGy+hsMMFdlVxQkJAI0BT3Kb6vCrBN3v2WUKD3iFM7/2Ddn53HljWVbwMkHC7tVppQ==","signatures":[{"sig":"MEYCIQC0Y7SknaYkCwKvQBsa0nNnZUmLyO/niBS1ip0eJwKpcQIhAKrLGtQOjihTdHQQuC6DTrD1Ha3N7xF4qHUs/qHsI1UG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5XCRA9TVsSAnZWagAA3/8P/iePDwWyml+9HAcpQFS1\niO3fZ8bhGTMIPwN3LjAOmE6khOSy/d1IXiGg4lBVecTyyenznpasoSQcBAXx\n+ij3I6nXh9jBlENNwgEpgoDNLbYAvCfF/tZZ90uDgKKRyXDe8yvEx9x/niLl\nhCpjNffmi9bgVwaEFzU8UCBCjze7080oSsMrluGZYtQRlQuFhgi0CRFHL0Wb\n+RViE8ZqOMG46Ii4+pCkkIIActn8mregjLJbc8yKIi5gISsCIqWZ1zReOjeI\nRRl5yZGxfHi2BcEVBCAyJz9eAW6Z7et+wPVQFnkoscyvS0W1i7VRclNDw9Qq\nOQEaE5r9hQEKZYvqsxb6zcHd4rPwIbB7SqZOOmQ2oE/zVZz3At2b1Buni+ow\nz0W7oTZZq2HjnQLOVsRrgFbb4bKP9SkylOU82/4y9eegoXT8blYnVAGtcOpq\n2rpwnJVJ8YYemBIQW1mi0Ac7OsFqGW08RNXfMVRcYG3MytLC9632KJWrLf5Z\n7MjMi4wFXW8dnUBJDgD2JQmA/qneBgBOvPgcB+vJ6reJ5WWQSGOp/DWMJMUC\nqQdtHMdtGQ1QhKtQomFWJb30GEa7du54sgA8eh6bVjxW1Y4KjHT8+7ZQEQby\nu12c4Y1s06JosgnwTdZtSzs7r4imps4oPvGh/2iWYiYB8NGOuSrjUPFae/9s\nY2CS\r\n=fWZ2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fb5a4cdeb.0_1595272791136_0.010783082747804817","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/typography","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30fb7043a48959305dd0e80a8ac969c63fdb6665","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.8df0f517c.0.tgz","fileCount":20,"integrity":"sha512-REWlURFqy9OjtuJHVZK7jmJL0Oz7xwdJfry6ZlaMNpsAN1ZUX2MohkB/3Y5Jmnk2Wj7TngmmD0TYDWLK1WCbzQ==","signatures":[{"sig":"MEUCICtXAKHyX+lZHzbqls7K1pgf4ncFNcff5cm3RptZBPDHAiEAssB3JnIeRrFu9/CdMaJepbtO4JiKhSmaGjQzCvB70Ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7xCRA9TVsSAnZWagAAK3kP/i7Ld3sAi/dzOuvXQN7g\nYVfGmn79qR8t2rwpwra4MXG39FC3PG2WVzAlnw0Z8WyxG3c8Af+3jkXsKqmH\nlYLY8+kOjGBKv6RNnIiaWr8gMlA5jRXTDCyK6bwJ2wsnPRHWbu/EgkaNqXh6\nfvIcTuTiSLsmGucPW/8j0p1kVDte4eS8yg+qLyerZW+sdnqU5N1ZVJws2ahw\nM2epVQaIKXnCX+Ds514+db7ZlROYORBcngqtHMhT5vWuVK7AFdLxxfiq0ujf\nSKpDIn5p0Ka0bbyKL2Rssn03lmhwdlrw44srQN4AxjI6EyBtcLh30e+PPZCF\newcU/Jbrd7wltd9IuDGATq24AVpH8Uf6c8MqxnCbUQLi0DVxrwZc+KWPMZGm\nelpdDdpl+tl6flfnSeOQpjVssoXLbY0xPj3ckq4Cp0KTvJu8tXR8SgVv++mc\nUiiLdYiGOpxnTzf9v2FFn1bnbnZVjCfglfLrnhVrY8fsuZr1Z7tRsOODVSmt\nElJ25CJfjPvY6TQiEWyIH6Suf6UQvVB9h/sWxy5g/6bO6HijpOyzNl7eaE9K\nSVBrV0cMnUvI5tolmVpf9aDNP79wyIuA8UxOO41SlFT7YhJ6N4Ie6boUuCge\nFgBiDiBFaRi/qtAczZPSQnO5c+UJpjyrpXROFO5nn23jk+iznDEc07FDO78F\n1T6q\r\n=uOIp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.8df0f517c.0_1595289329189_0.9207953789611523","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/typography","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3aac3fcdf68a8d21f8920042b7247db227e06926","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":20,"integrity":"sha512-GpWhfIViHaB3E42ISW96FzPE6/hoddwbE4NJaYuzhHIf2Eyf0M+OQvfeowLpehQJZqqCj2l876LRfEUa74lhng==","signatures":[{"sig":"MEYCIQCMEqWdyj8fG1C4ewgMD/fhQDhUlR+W7qVGtYPcT/tXaAIhAKhTybO4fABSOK4hI2TiE8IrMNJoeQcjk+ZCW83pfgXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFju4CRA9TVsSAnZWagAAhP4P/071p0EVKDlv6XNsbA2M\ntQdMkTh+LYzOWfIp3G5nvqPNJEhBgWAIKux3NiJE8m+YKppqN+dMUa9kVScV\n0NeHj3+o+fFdmcAQ9RBfil78jOHBsCiMXuTQfqmx3LAsFqUpPuEfjV1aOu6+\nNIZQctJWkltSkK1WH4CLx3jaDH2BtP1isKs5Ko/fAx2wQEzxtONKQootWdBJ\nBs9HIBRFJtHhDWndkqabpI51svgFaj8MI5FWVEE+SNs+f82+ISrZf6gTTPRG\nzcLpCEPnVYI3hnEFjhwQJoxYXEXvP7rHIgk/qyO/Zop4940vfniRHSpMpUCa\n/7IxkbDrFDlreK2pEg5u8aOrKIPSUGbEmDoVWxfreeb2InQLObk6rfEfP5PZ\nAuJm8HM9VogUZg6WiPgx5CH6S4A77P23GbUqHq2wb+ZrxKZwT8k5n2UocpuB\nRotJOfqqNnd7ngZ1JQpJXqVzLfPPUnJPUnxcP8vgQuXeK7AXZlRNiYblkO6+\ne+ek1bR5RJRd/rW46fY0OpLf2FJBe4yITGWUEXaZ1lK8oxfhPJMAybgoPqYx\n7HuGUMhQNJx0jk0yerljJo5slWMGLiOeupF+RzfAhmQj4PEkCEF5HOzV+hRE\nsseRSycqyKnxx9EKpE4v/rQZLC53/wE278eYV6M6v/wclCLsCoG7/rGpYxoJ\np3kH\r\n=5998\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.abcdbcfeb.0_1595292600325_0.6638172978625136","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/typography","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"628cab0ec0723f32f808865708677cdf4d4e7148","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.7bd5075de.0.tgz","fileCount":20,"integrity":"sha512-qe5oxERT0kEPvMY2d99OhTdBPFrzMIcSpGBz7owPcvGfnozP8el1a+hcFJw7TWko7jsnGPlKa6kG5avVn6eBGA==","signatures":[{"sig":"MEYCIQDmmXgQ75k89/DlU/RoxbJjdhJwRyY7ygzle8CJvUKrtAIhAJUV+1xdkL93cZYDTfYz8UPd6aBafYqELHf078LfuxVt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgkCRA9TVsSAnZWagAAAQQP/2MK+e8VNwg4G5OFg88v\n8N0Rg09zmyDtFPui6tHT8zuT5rR5ZaxiJ7BmOiSP57dQ4CB8aUxmok4MjWjq\nw0jGXKtAh9BU50yOmNPPZR0JVQLebTsRmLvCm81XZpCu+yR71LSmvDv/z9TK\np4hT17McSbMx5hhXdWQwn4/M8/E6GylPr4l0j/3aW6e4sbqisgps1vcgVXKa\nl3Dr+n375MEeyoycw6hafRNpjkPBWt10CTb7DYrC0rJ1lBev/n8PibDSrBSh\ngHpm+gyIgFscD7Fi2Hmy6H68+KWdovWBC28NuHMkvGYhak8hDd25zAZ1XhWi\nvT1yDVpeapWWVJ+yxHagjqQjaEZOB+dkbMfCRXkZSmM0Xuml2NVpyeZtwZOd\nhWum12hc8+546dtMcZqpbMGBRWB6fQ/E1fUfFxHLYAcTns15+hqLpNGyzTpB\n33ZIA6rSkr2a+0dMUSmApbCixSAXZ48Ni3zNnBr+Ww7LQFUddtgGUiEe0+50\nutvEWO54FZykXV9aATvhRWX9Gbi8G4Yk1zSrq5rWrY7BnpZF9yI77IL5oIgL\nD8Ml9NthQRu1ZJ979zcaHLybE9msmgLVAt9esUFP0Yj+4I8juLq+Y6NJC03p\nk+XPYH8rQh08L6G4l60G0e4/kjRL2w9sNzG93L9McIvtLarGarSELTc3JaBV\n+Jro\r\n=TBfn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.7bd5075de.0_1595357220140_0.24396667611218992","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/typography","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.405a29a20.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0902e8737f76515c724cd5f65f65244eedf96887","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.405a29a20.0.tgz","fileCount":20,"integrity":"sha512-PNPpXSBVIQ4cSw8g+2zMum97xhOAkOUFfeAmoW19dr2BoDLgG9e/Wzuo03srMHrv+C8tFkziwyh0ZvrS7Zv/zw==","signatures":[{"sig":"MEYCIQDZvHtzGzCNP4EZIdb+YYom8cAteUqQJSsavtKgEnsTbwIhAOPTfUvZkeUV9ERRWviR4ohCwL5Y1X88jChgT5nHE54u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxHCRA9TVsSAnZWagAAztMQAIpFI7PCIIGSl7hemJxp\nN7B7qLvVkE6oiF/PngmdAUstx+a3QSfPSZrbjUkE+gLcHSFcDf0glBHeKOk8\nbue7w+it3rFGUSKEZUzO1deTdz1ipd6pLVqYcnmyugt/dVIag+uxF69U+Q4V\nlgn7QddQiuCFFHZUnWWY4vsnsDlFGvVQc6nANcMwENvgv/rBgBroTQjriPjt\njdbOxjKB87H5q3YFG3oMZx0avG/Gu/g6Xf9x/qOujlMQuf9n8VY3D2tmMX/L\n7UB+m/CeYPH4+IRYKuVyy2cvTCG5fzT0Gfl1Z2IaWBg4864n6x14STEBk4oS\n+LL1Gq7bBRDH9rvHMJnS7SxeTYbzGj/rL08/UEDbwQYumfdBMSunBCrWGaKg\nzh8lwyuPtMLjKEeCt2aWLQWGKVA9Gx4V2kQ436q015yFRFis18Qf5eTNddk6\nJahSRYkBWvEnEKZz/mmX6J02T1utkC72vmW0lGLnxL7sScb131Fjf/oUbLih\neSRLvPhRt+KuKlb+smXHsASxvAN3pRAboMK4SCYcEYizKSXwrW9kOFBHlvgi\nNQz02PZMboj847Q9dZK5oYEarbWRVCBBbjoojvIpkBWH28Let2sP5W1pDcFQ\n69u3t2qtLUCQkkEICYm6NcHv+tbcz2I3XGBIpVpiTcg/dfbzw0Wtr+eJAGad\nbPQn\r\n=pmBq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.405a29a20.0_1595456583434_0.5568923076533203","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/typography","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"839b75a226c7c25c2d111cd3f6c76526556fedbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.f3693ac4c.0.tgz","fileCount":20,"integrity":"sha512-vbh9JR2eluhzEf/m9M0DetUPjvBoFit+gEbDCpzOmNw+0coBfMJwaZoYfWtgmkgBIRLs2TeiZa0Fwp5J0ZFVxw==","signatures":[{"sig":"MEQCICfIIMBpeC4q4DM4KRRdIoXX1Kdp4N+qHjO0ypgTFugKAiBMT5Twt7i5HCAaRN012nEKNXnh8qN96Tbolvdg6LcvXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7BCRA9TVsSAnZWagAABXgP/316hie2oAaSOg/RyOXm\nWXtyr28Oyw9iiiQQ3wogD8D1ibzQSc11hwU/K+lvwbnKm2eaRAl7DFrJ+uaw\nffq+x2QcTHPCJAX6Z6DJTZNUS4MUrSjx5BZ3yUyITZJhzedA476dmc/CSg4S\n8A/0dlW/uRDoocdRBc9bwA68oMkjQ7Ytm6UxU+E4GX+t6rNVv/EnGc1Sd68C\nJN0UG5+xJdO+lzwTIjL34VI095ActgX4BLDotX5alCSJVGTJjX3u77TYkklB\nJa5dVQD1y9CkyXG5jnAysbNiVsValj22EYaonUsYY8nNTnpETEM0MEkdbaOR\neRSDHhFHlN7X/e9KlMStTXfD3nRSBj5+cQ19WgxbnR+nGI8bMH/l6gKar67C\nKOIvSWHjMaaLwl/Gz/VAjOjhGyqqkpmkAhv4EkATi+k0z/nyjc9tOfzrYj9c\nFSjVjQDjiCkfn5HZra4SHhpgkhHZoGpyMOZaGiDnWak+TCGtB8CtDHvDuyts\n8zKhhWfdKJm8tcubDplL8+hHXV+oDpCW9ptkyS9Kah7kYRMFaw+bJWJAkEsj\n/4AMSGCL6rFE22FQpBW50Btyqhh8yKxXnNq4NArUXaSqb8j1TI11RMkVi6i1\nYpftZ1iAhlh5yhKahAlJo+wY086NKs1Rf6WUS4dhe7wKpEUQvmaQZbNUSqvp\nobjv\r\n=/T/r\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.f3693ac4c.0_1595457216982_0.8229975156712259","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/typography","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.12a109680.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb22cdebb8c940a7de3091dcf29450c4d024b013","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.12a109680.0.tgz","fileCount":20,"integrity":"sha512-RLU4wA1vW48EUG/pm0fAWfe8fLM50fv9PNdZAHF1yqFOfzmXSlKM5Hj6V6UzrFjUofYCmRg6BTtbd4fPQI8Pow==","signatures":[{"sig":"MEQCIH52oLAtAHndOWtS9Gjz0hYms7luGy2cOH31BwhCcaYhAiBNMBJcFmVInbCvdvl28BrbENULaS7TGj/swSL7p0RscA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMW5CRA9TVsSAnZWagAAUPwP/05OWUeHEA/WjWbHV4+l\nqww7AZCnvAOnKOPi7KbJ9/SHKvvh9VzIZBeB8NRrXkLKxJYbYGpdl1ibU/Pt\nhiw2VYgjDFtg1ofvVIDgPuCcLuSHW3tdunaI7KzKJEBBDaZ9wGtxqmeQM4c4\n0VOnjadp5KKAXSDNch9b2wnikTkBogW4x3qrJcmehMGLpkC45ACrBmNXBQH1\n+EaeN/rGMgm0S0zziRj27aTxA3ZSGpJszifd1RnBmh1/fuCo4Lh2rlCIfEqV\n+PQyvoIR7ABH7keWwHeltz9Wc4qAusUD5agQMcL3bnetOP92eJebaJniaRGg\nTUyXL40TsAlKCgjbxcVc9Z9gF95Q9/FXeg1PGknUsPw2IAk5AtN6PcoHI5b6\nDMRRI6evBOWiA8W/z4a85zUSigx9Vmi/Xze5B2CCDk3Opt/rFdk4ShcTDFXh\nVMjI9Cfkeo7er1e4HNFW7basRGjm9uMjWpYetLPifjjkkEIrj+y07/2OLGRE\nnOztZInHfkmSqkMaLBl3ylzBr9ESkdozqjNK89Bz1oF6tS2V5ccp3r85Y5GV\nmB6m+dREi12a2AvxWua0GlVMmYXhl8G9dIFE+5wbpRqOZv0QJ2/z/ZnuRgCU\n1lLj1MWYXbaS41qBW1z2iLIAt/0+jZ9ZWfBH3XYmQ1OaW4yDLhpUylM83My9\n5Wyu\r\n=AwcS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.12a109680.0_1595459000868_0.39977227185432307","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/typography","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dfe32e7ac1e834d6ff723dfd3e3a497b3750761","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.bbd06696e.0.tgz","fileCount":20,"integrity":"sha512-szh74zhGi8m/tWq+l8bML73QNMl0lJDH3fGs8Ec2ubPN8mmhaz8fUmuHTa1/RQlFxQFaV+5TST6RDxx+m4uhTw==","signatures":[{"sig":"MEQCIE8v0zbIDAC1rKHjQa6xCf1c4yfVi/KiPDYrS1blDasnAiAv+ZySzCZ1tcsisG6RsjJAiGeKMBoetmXcWjZwS4f4HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFPCRA9TVsSAnZWagAAuWkP/3kFporwyPm7cTjQYa14\nVmZFaZQvGSpEBq089tedPNMACVxy3aJqPA1iaRmV9oAOyGQhnARlX93VyBlE\nzi6NgEtlfPvcbkdJgPLNFBd2gKP8KcQW7wgG+U/3V/ljCekk8xPdMI+4c+zb\nX1woHwPWpHofk6lvtmNSnST9y0KuvanHQy09xPok/VE9zEX5OOM+NPwhUHRw\ndHjkPfzEZATyWDtnprce1+u7RmHkSoOTzYFVV6iS5fdEToG15E1p2ukBrjfE\n1sVPXaAFiLYsfbGdL3woaotcdGvJxdLL37Ivc0ZVTOaJ0NRsqiaT6OOo0dF4\nu5N0XeKFubUuIbq6yDVmjAW1S5lj6Gx18OFquOVL5PWfTvmHFwCOkNaMcGxw\n7q8X6+0OXY9oNGZEQUXhe+OayKbRGPMosn3KyWbiZF6bk/pnhUlXTCuaBlHI\nnZd46ErQRirX4MFJFK2zwoFR0a4v2Zo7zDy8vOoCVp3cfJjA5Bymo0DD3V5u\nwodP4GX8xubg6QTwXUrCkMGL+6SVE5lSwxYLYkWC++jskhRipvpXfZwVCgBR\nzK0+t4CFRr6fXlRXx+Csn3boe5mwIDuaakULWaFnHHNJI1YlQbaltvyUDJlJ\nt2ZAd3GqgB511tbBErO4ZdbjsY56Z336+QMpwsLmyQcVUDpoSbcw4WS5SIgF\n3WpB\r\n=xz+x\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.bbd06696e.0_1595461967439_0.2705426861279612","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/typography","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.4951e7651.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc0ab7c336d42de513d20f5c404fd9d115de08dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.4951e7651.0.tgz","fileCount":20,"integrity":"sha512-Wf0/TQcRT9KfzwYtMvjTPnMxTTyx+hJK6Y6RG63wMRL3+HwsnmUVtDroZvS9Y2sKjxQokI46y+1ZB4sW6UtDZA==","signatures":[{"sig":"MEQCIDlBKHbe/9ThkLs0uJaE75BGcOg7hUJSrUWsI+XyK+u1AiBkcbjYC8rxHycdC/RnXBX/iEMZc9HQLMlWnjjsg59Ybg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyoCRA9TVsSAnZWagAAI/UP/RxfHg6g6HqL/uqF7tol\nixwhPKMJ0a744qjVhDb2GRExtCWX42TODRCfbwWBy/etO55SDVAtDc8HrCtE\nog9xfTU59QxqjLRpFdUiyakmBYLOATpg1rjuM2wBBnBCDCtk5+gJS4k22jrS\nFvmNpxIhiQJnR6wSeo2MpJaOa9QCeDNuT4VIXbuWLyP+TLoqR1Gq8DWO/Rbz\n1lClmNu91JBktc+7RSQCeFIOdjifb2puW58K4o3uCwxPBXpGvCoGm2OtSOsU\nyZaMAQPZ9mwXIDKmO4i0K+OMr+A71SX1IQGl9BUpa+5ZhZmMwRhDzt84NyFZ\nR5gKUYJAi51wijMauGC6FfHqTcHIc9iZUnEXf9LQCokdj2SJtMy3sMy5qsFH\nJQp3RY0uQMWrcQHIMDiIFXhGraVVcvGc82rz8EJLMP30Ol3agdrNiXBoyiml\nQvop7QUQhv/Eet7ry3ug0sHA78n39YCqb8nfFY9jWy4OPJ/6mqr9YD7GhMZZ\n6NuQND3VqzIzTJF2bVVcBjQNX/gC7pQWPY0QHAOhyxbunS2DUsz/aK4UxuNx\n0A87HPtNAAkrbOQ7evwzODlLkA3pEllATz/iw7W4ctfFejlY83PFAPifhEt4\nSJmQQjaSXs4iQO143ei1aQIcXVHlQkuEmVqd0O/qls45WG3HYuBMFNFoAnoU\neP/5\r\n=OQ/z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.4951e7651.0_1595468968166_0.569395436827977","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/typography","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.75deebbef.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fbb93efd3491bc78ca5b90ca14bb2efc618edf1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.75deebbef.0.tgz","fileCount":20,"integrity":"sha512-S9dzqFfHqFxdOhJd/ZH70DqNYc44zzVXncReqBQ/hAYdzBzirZks+bh1DL0zuKANGzO+nWr+yzUaIRmOxecIjQ==","signatures":[{"sig":"MEYCIQCrmXAqsV1Kk6heqlVQJzHpm2DHEC+rm0El0APt4Atk2QIhAIdlDgrvLQpcHajW1CC2U74tmqIOnKQ8eRUgUJ0W+Ujf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGczICRA9TVsSAnZWagAAXl4QAIJaGQtEsOTsX8t40u//\nNeAm7q1sXe1OYq0q/4fCKTyzNBylA1swD3xW4CqApxH9cqXacmGGBpnMrzFz\n0bcygC7Sx+5cdDNxMNQpN7J5nY3uwVzgwLtDpj+pNmyc3srzkCcYNg6TXzMl\nxvoDToiBIRJAq2+yOsWOrFbiv+gta8oAtWgc8iWaJ4zsubVY20O15YHCoCKs\nCkU3r59qNq2hPRmarfnIb2AfLouv6Zz51evKoLFPIOHuZ7DFcHIv9xMKHBvm\nnmi+DnE00OqRqbq5ZVbyUHIjfLYmnop6lRpa6IWtuRMv11vYLnm9CVm7ZSoe\n6j+FT9Qn67GXo0zMLR/Ojur5AKPlYhQTFdmLGeo6qi0tz31Z1C8IEdyosmOG\nFoS9v9RxQ/NU52nwiudnW05jxjSeCO9H9uCObjkjyXjGmgNnEgVG55iC06Cs\n/td4wlGcojo9PBemKw9XD5Gt6KvIO1SsShvjLJJaby3yCu3R0nZ3IZecORud\nWpmBtk65kyyr2w89+OfstlHpDhc96SrZ7nz/tz5XyPjN/dTlHw+9C0Rz7uT2\nmD2Es/UBujeo1ZTK8nbNrRicXRvHijCYyrF1gWX7+Rr9Mw5QR5q7W5Ofvesq\noDqr0r3Rgsv4Alpb4yaagmeCqYYfK3ZFEP2vBDc/RsCtlJfUBL3u8oK5pVYK\nMllz\r\n=gU4Y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.75deebbef.0_1595526344095_0.626630355869487","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/typography","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e80875bff2943c229dbfcd385a2efc8d00e2de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.95aff33ee.0.tgz","fileCount":20,"integrity":"sha512-Bi0XiEoxoBsJ5HuH8fpl5XbF4DX8Ftd65mpDDbOUexUZw97xrXfC6jV2+QcNWWSF4+blmTghmSfyE5zorb8qQQ==","signatures":[{"sig":"MEYCIQCgWJFVjENr4mhy41el/lr7cz8/7BfijL62nDuygqsuwgIhAKrGZArRTscD+kN51SahlusfiJJ30xl2vKjb/AKV7Pjn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdsxCRA9TVsSAnZWagAAqdkP/RH/s4UtOlp1gj63EzPO\n8e0wjh+CjbVGqoGLpBHayWaTwkCuWDGbVHHPgj9QD3TWsg5OOq8jCK8Y21TK\nZbpOPJF6cjd8fjGRi3Bfm3rRfm1yqQOte0B6DizCmYpyL8FKOO9bNMSJvRZu\nFcU7wK3UqnuKuOvpM84TKLM8OHx5mDnQgKdP4SguAWZRA4AM+nQUjBlwQDJJ\nC6pPAGxqVZNbxA9zchGgWYW9GMgvvJnqv7f17LiIGFB/qXQR1m+66AyJr8Oy\njxEBJEt+plf/sjqSGzDyL1zbRsVMHJoQpA8TkEwExBmtBmh4vzD0Zf+Y1Mzn\ndePma59Kqkbpu0gNRqUqVX6cRvnIctPBJT/2fwdZEsKnt1+4m7ADP4dnVH8k\n5VzP3qFe9DCdQqet2kCrhxan2sejEMjZ2c1MrtAw1+t18dIAi13LKck7DD4+\n0/d5hS6fqA/zDNAAXp+8XMr6NZC7ph8d5H17ZKuEaV0pws38PLKMKPP2RCZs\nvGLC8yqBxvd+2WQVdjG3473UEnzjEe3oj4e4sqq0pyPbt+z6gvdgcjozlrxH\nWdXefftZKbEb65Sen73s3k/hsiiNVE7drgfMOjAwKlJyotoO8CKNEg2ZNOl4\nsGEW+xKT3l9hJxi4jTX/HSYirj/XFcybju7lVTePOWh0Qx8A71ILxCuk1kCG\nGoW8\r\n=VUz4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.95aff33ee.0_1595530033154_0.48721450582289627","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/typography","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d48699942cbb333886ed7c871da892d8ff74ffef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.9d9f47473.0.tgz","fileCount":20,"integrity":"sha512-W/ky2HTL6/zRx6M9JKgcUF23JOKdmKvBR9FgTSRPWYvI+6vdbU/Ir2pvJl1gs4/8BfM450YTS/e0a7KkqPL5+Q==","signatures":[{"sig":"MEQCIF8NkpVfsnXpaCiaxLYwHk8DNvfzC+5DUNrUxLZImz+KAiByr5X6dpBkiaO4YbgX9PymprJuHiwu1OtssQEpGQB+cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevpCRA9TVsSAnZWagAA9ukP/1pJBJIFyyqXCUkVePZi\nyjisrs3o5sMx1VdVqXJfzkNsUgspsst8ReDgJm46JcLRNVAL2M/ZAj5Gagsf\nIc6WtWyfWfU/BoZcfRzBv1YIVmohEEPv0LjyhgjJphiDHL1DLsk/UJ5SKafk\nLOTPiI+aB+6ASZia+NkTvoKGnY4F3+3ttqaRBMNBTBJrQjnD+CR10SoQANqy\n5fi4YomNSheQZvb0DtL34UdMig8TWsfT5cVe1fCg6qdwkrm0NAjm9bLqnHkU\n3Uo2lUZap4NWTfl3B3fEzNzV84zFV6uaywGLStQghpOxhVJQ9vvbQWg2SGxV\nQbWSgwa5sGU+b6LvMgCcio47JqxTNuNqOC7lvLolAw1iV4kxc4R7yBErlofd\nYtNp/6FertWJUU1qdM3ATg7jbLsa77LtSrDpW65Ze0SZFjxCZIE1vEXOh94W\n5MQM1Fv4TBlIv/SMUjNEbjug3miOikkPDxf7VcWhQJJ/46ldhHczlMg99nrc\n/nPw2T36AFDb/YEZesJQsYa7LfuLKHrfwHmMawfH4N3JCJ22f4EVxmkOsxXg\nwucACaL9t0Q+NNvtAGjo0XfnOy/EA6p0gYWV1qyu9fE7dUEiMz2jv8FZAR+K\n70X2pU5iaY5KKF2hrcXlkBJKU0xsWBjZ0sAuWwwZJ/mU5V+KzUMJPutFNRDZ\nAQ5s\r\n=YeLT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.9d9f47473.0_1595534313577_0.3049443471900031","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/typography","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46055d614e15336d8ae775f1f8ad1429442286fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.00dfbf6be.0.tgz","fileCount":20,"integrity":"sha512-Q7GCFkBSiOYoKDkXZRlnDw7CRioy+22XotnhmwODfrCQxApWF6INiEwFpBHSwKwNh/EMp3UVveygcuJA5etnxA==","signatures":[{"sig":"MEYCIQCT5uks1lPx9JRX92gYXiabyhO1I9tc9CRG/yQVhggntgIhAIZFspdvp5MqwT7CaN6pxHglgg1VK5xPQ5C43i0Uw9m5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGforCRA9TVsSAnZWagAASkIP/1ijTX7yQyJEuezKiUwQ\noqTdUxxleftRuae9gOKgt3MTREBje0FshhVca1yBztDu/gPc3o1WvF9+HfJN\n+MsQoWHJxpShypY6/JvNS4A0yqN0efDLpNh53HSI2M+v0E1GpBVM/LNS0Hj8\n5SYXUKDcHqK7+mcmU3kF7HYyK6tuxToRJWpOfP6QnyF9T3TQDzt4DB+1H+1i\nOXgbODMSlrgj9Aluxzyp2IvFn9a8cvhdVGZ3iSFdtMaZqwGWOEyl/oSxsKl5\nOT0pd48SCFBcjOqrkF4PugYpfyNYp4ahQHwxb+qkh/MHMTF6yIoxYR5CimUJ\nrHcQim2OMDpSJgT235pQD3YY9m/TzW+f8y8580twwqdF4U5omWR9uugTAnY/\nRyRxMBPondSIfpyc+nIYe/mBaErQ08ARfdQG1vWMQxweWr+BL0m4NHS/pLhm\nEhl5x5Y2Hm6ERplw9GdzvTBFkrC5MqJaZQpBDSain31fZoPPRZuQKf0p/y7C\nyFm5EbSsOFPpuyUqUVgAFH9hr4wizBaLCXhUJyG8OpBuwd2iVpMZmqzMK34Z\n+eJOKPUc0qnL/P0UeTUYFq7ifI1GH/nM+QtA+0hjCY+4RROEw2TU8+9wLo9H\nW6OzP5XB+EhTYYB8JYtj440PYWFmhlq2fTD2j6cOs2r9HpWE70aKcZtP+4ZR\nHJSV\r\n=Aj9m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.00dfbf6be.0_1595537963095_0.51289108793101","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/typography","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49d57de13e63b1017dd50f540cb76d63707285b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b87e522d2.0.tgz","fileCount":20,"integrity":"sha512-d9IQ7u1xM2iEcjXNf1Jv6MaVYrn/lD/Vxij9Ej7dc8YjM04s4ytItqFwk+9tUbx6eQmDjEy7PHPJADeNtqnv2Q==","signatures":[{"sig":"MEUCIGQLa/YMV0IeRZIYCaPhrd/Km9l0FiZU7U0B3fQfbWKtAiEAr5RmxZSjK8ChIvr9WyV8Dygp+9J4tXR2reMAGtjOI5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/TCRA9TVsSAnZWagAAF3gQAKDs2G47k1rBe2bS4O2u\nkcvajz7yXK9oNu61ogtPMWDMU7Gs2+y3Nir35nG/WNgNdWcGM4k4ZA7CJ67J\nSkp9A7hSQHvTggTItzFAnmzc6hbGWQwUdJ44OxdcZk+C4EVd+4e2ujVcA/Au\nYf8T8azd2BSmayK7ygVoWD60GdB4suNKcmGSQJzMGROrCAYIsut+peiuETry\nZ9gQAMpSz1BZb3zVdpOFTNtsiuBI+AMOGI+75GmVufMEPDGcI1usCCaknPAl\nLUR85F/YZlfVFk8DK+GpIiv1S0ZJcBue1IDCiPIqfeeiaX2YYHOkaIl+C1WL\nxeeIgyd3wG2Ng2sCTnUCBPzuMC5ytHNxLgehIFHd7hBfoLTYJhrs5UBkWfep\nuW5Bo1FXlFpp3urEUSWM/MSFqOI4LLUCT63vTjnVGU148enDgqSSXdnAaBTK\n0CDGMqFw4oWX+M/krsxO/KUIoitagbR/t8OaIwZwF9NWSK2fA9PoZBJhNIao\nb/PYQjWO0rMdmeF5r5GlqCNZFFUxLA5QKumFZvlqGhKXj4ppn4JDbN77GayA\nBHBKTHMQ+kVutqEP040Z/Djft/EWQuyUT6V4rQYoZRYQIzfPUHh1N6J/HyV+\nFDeT44mtpisxpF+jtWhTqWK6x+acjItr179jooEAAaXn8Q5qpbvPrqBPSP87\nxwUX\r\n=q40b\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b87e522d2.0_1595539411435_0.5337503600869686","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/typography","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5a029771d9558925e429cb35e7e0061b368e6d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5b3e150e5.0.tgz","fileCount":20,"integrity":"sha512-OWRDZB8NmQoW2347tRjjFjPGkBD+gInXBnq+DAvUzEJWCr6h8Aj6HGr4kQpLEZ4kJS2vWUUW7DYl5NvRkUcEig==","signatures":[{"sig":"MEUCIHKT2jbF8dZzLJ3JlL8EExoCJ7zQwjCO3SKFmLYFyPirAiEApYAWMOa56/4NxovrAthDwN3SVD+APq8ST7fi+G5h/14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgoCRA9TVsSAnZWagAANmMP/iaruJhqsHmZ1QSYDymx\nNp1Ys6c4LuicKcxflefOAZQnTgQ8OlaAN+XH+rHov0cAqG2ZQOZwy3CguSsW\ne7uaCgr5vYVxrzxC2STJg4d5YfN3OtlJXXPijFOSlFD+TY44BamVtpGgVRYE\nLvDnGRKbsXpKM65zCyVXvTz9Km5UwyT9LG+5zb+Tw/lHDazHorHuPOrCFp3P\nWGEI0gdh1M3hzqriJra6qOAFgFa0NeOFVslsN5xC1MbCyKBhNrbmyq9i+xFY\neztWDJ2TxBvZbPKz6cgJmQfO4PJ5Q4X2H0LM5UrkFAHn9C4HgJAzOZG+pXjg\n0N0JVFC/nc83EklRFwVtJqB7hUEfEP8U/hhegd05JTI+EwIMLItgDgCwy62b\njEcHeQw5iKkNuXAt6Atp22zIxzxOjTujZXG+j+qsMwjeY7UMnKWBY85po7Qk\n+CqfOYhX2iHz5nvOEqc9Ce8C1m1T4j+1fFitv2mAp42CfXmB0Ax1YTDiNAle\nLAxXEna45U2AGA1t6DJIo6erOYFo2Ks1dw12Ut/3rhsdBM0Dsu4q/UXQSRxO\nDJHJ4L9fsgUjF+qgB24cJISYBuea29IvA33zRnmPzcj5jdw751uCu6iuyCAn\nu77k/00tzdZtr8otPFb6d2ykVTOF0wSOpotgl41d/nX4SwInWJb/oxN3ApVk\nzhaX\r\n=vsgA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5b3e150e5.0_1595553832123_0.005801813727652094","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/typography","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"908e7fbc3f95720a27ed3a6534230c2190379c57","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.f0ae11786.0.tgz","fileCount":20,"integrity":"sha512-n8GoNMP2jf3KdHw3r9Cj2DCO6X4+zMnQnaKB6MjAFf3VUhE8dzNvvoKx/gdaOx1Kpwy6puoCIx05O4wqQl7Bug==","signatures":[{"sig":"MEUCICRMhXDONCAcOtUvpIdzjEgpPirUoDW18fM+ysGhIa7SAiEA0b1Gb5u26Tgwz4FXLWCtXan03ibIlnhh9Sr675zW6k0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzBCRA9TVsSAnZWagAAYwgP/1YOsi3+8tJDWsHzFItg\nYiQC109/OO2IceSRTx3dqS4QfahX+1e0X0NCrFozfjvb+GCT+QGDblgpqu/8\n/8RB6GpEHHfToe6U1oaW0e1ldsS/VWs1CNo/7JcLK6e8HnCvUy+ohhXiU/Ot\nnNq79Lfa34urXVeCjzu0YnjwrXnrghxqFUh9TA3/xJWbT1xxWLNev5s3AQk/\nc6i2f78MZ4Jo54Mz62smESXWcb4n8a0ebczUi1gUvJNStaukLpcxws9zaTh0\nEyNdT2QJYSDqoYUfnPd55K318XRHc4nX5B/z4u9JZhIhZDt9zW9+NmaQJdJV\nCC2Q5hmzGi7IRjbgnk7OjCLtYVadcYgyMWKYVmrzlWIGWwVn8fpSH8q0ZLCJ\nj8dFzHEOeG7PXFoIGXfqGHjIXzMojXKGvY33jmK4nlOx+8UiHIXbqhpXF7Pv\nudCjR2OHeqijUd0JPC4kJRs+xhBcwpOdpA7BDhxe4P8x1HMYQ/T1VNVPeXn/\nEChnz7DZb1Yoovlyr5SNamz8+eIyrgnxvD8ZxoiB4gCZvvrJJCZr4kNM538W\nxu/F7bTbXV4HZ8cz+NzLeSP2glXg721wkH6eFRJgE7B8l6nqIb1uYPjjXAiT\nhrJ/8qCkCKus8wxqjS8+trngPMMxbgKGIW6xcQ6dTredB76at4iHPiI6lf3Z\nPLyQ\r\n=Jm4y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.f0ae11786.0_1595555008833_0.36050032084754124","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/typography","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46cf1a9fd4547ce0c2b8220f6f1eb30705b826db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":20,"integrity":"sha512-/eHMpHZDVnRM4Xtjr+4OV7KrDjUUlPI7bopfYQIQP2gmxkzAfQnx5CS9ICZ/lv7PJT0wW3IQKkL/nFM1qwekuw==","signatures":[{"sig":"MEYCIQDFUHUGJUS2S1X5HGsv/3NR+oYEGOv3V1XT2D9FwIE4agIhAPofk1o4BkOk7yLyCN0VUb1HZirMlPmIVEY9cw2stcgk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMgCRA9TVsSAnZWagAAU2MQAI7ECo2lMc6Jehn7aCMr\nOhX3+IgUfKgVGcZWskDUfXMoeRcbE9KeMoHgoI8UBTo3AhzABPNjznFOcTRH\nr4ao/zU9wRkBRJ1Jm/XtmULL6+ZS9HHL+ygBMCSWc+ghck1+kHT16JaP05Vy\nHi4UzVKlow6878WNFldA+LDvxqhF0DQG7JVsZqzOwnoCoJGreo5UWKoqWbk6\nzv9xtfQJ/RnCYsZZxv8yDKQ4b5fUL1UBBgm5S/faAOh9NnYSlf6ketGwJdZ3\n+v68gN7fp93/eXrXPSC4/q0blw4+u/f28/ncztOZZsWQGKrWcyrFDO5wCchg\nowuDvXhUZ5+3PJ9IUT6+CwQVyahZE1T03Cbu6rnvbdrsFULN5Z6dY+n2QekA\n4QrAr/gfm8xRDnW9J8KdJ+jQAIJBvgnUxvR3ihjH666GSJee3jnQ3fDHzwVO\nDINqkUbYUiEIO+4Qsf2Xs3AHa6w+ZrVTfFDEe3jSGtHbyekbvjfUKFdacKKA\nV8b1aZnqqpPlIBKOxsHCd8bXoCWXioINfMMs+d2Yw3xb5q3XaUakhr/Czj5s\nEXpJgMpWaWbzT15/NbqKwB9q2FBjH+X4y9JmBX037tmOt/HoPk1SGKtSvX+A\nv4sOp02UM6SA9CAaTc0BFfdpzz0AIaH928rLP4NvimP+Z2mv2aBKhYTtPDcb\nHVXC\r\n=y161\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fb4ee66c0.0_1595556639811_0.6648114850199967","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/typography","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99a90b0174f7053ab89d68ae9c522aab56147266","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5511e0aeb.0.tgz","fileCount":20,"integrity":"sha512-5Ykx4rB88Pyr2JfIH8pLXR7rK+RKGLyleXcqcbFTUDiBlSP9C2YaJ/ozeF2pyEeHHfPUKiHGboxwEw5JWJ0HyQ==","signatures":[{"sig":"MEUCIAG6a8N8gJRaGCPUZNw5UUvMrMQRbTUHgh0tPe2G24xVAiEAiK5tuzEOOi1Mylzc9o3EGMevQZcio1Ykwud9794u4fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLMCRA9TVsSAnZWagAALlkP/0B7BDWq3OzSJX6k+MUj\nTIMz2QoZCQpaYGHGgoDVzAI+X03DsYxv3ohVOpf8Xiy+VP+YrqrQPQnhe+QI\nBcrV8whRsRZp9Ne75BeMROBpXreb3DwwKrnZW7b0IgJ+FSD58v8q28a/KpEj\nXqFxVvL9Qr7N9zv8QyEeFqu1NEvyo7STthI8qpZxwpUi5FJRPVXrga4/HQUu\nuV1XljQKJIAMSN44krP5jv4hTVj57GTrpXZEHggc8H6iPiGz/FSpDtTmFgkl\n7iswstQq+HNUsZA6jrNqxOWgnu0/nbLWqT81a39n6LeUtiqtfuDrAv7SzhSE\nC4sTJBeeIdgPJgnpgzye0ghjUv3BXkntrYiYPX9SDN0NXlVAcOXSy+TiBmhE\nmnDNtmikiubKF5gyKaARKh7idQHwusMlajV911TG10CSNlD2aez7pTGrI0kW\n4yhFRet1MeWZfRNm0Yd0xUEe5G6sQWEMU+/ILqV/fnc0FEmtXI880QstzIvX\n+KWbsFImhPtH9RrgSI4SWuKgEnnzzqXwJOeabBVVwBhzuy6F1hU6mgdpEwoi\nGXCcAfmzGkWeh7hqhOjBA0JcT6zQgfpBcxSpkYphIJdMqoG9Nco+BoS0zxUJ\nP882HidM1Jn+rhebff5NuhINCJ1xWlg6/Zo7a6O6dtBvcIcnBnWILtYfJkXt\ntaAA\r\n=RsQ5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5511e0aeb.0_1595609803631_0.04049815537451673","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/typography","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac4bf7c7ca46eebc68e6d323eb6582837ada533a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.8388a9bf6.0.tgz","fileCount":20,"integrity":"sha512-Z5vQr00LI+h/laYnzzxXmR0wDddm0gFKxE3YOH9ZXGDbpr1VLwS5wGka2dQTXVdd6EbnhiXq3Rqkj3EtqcDV+A==","signatures":[{"sig":"MEUCIBHGvK1RNNesPr11539gFcNBCxA/Wv2GxQjArLdqmtcxAiEAi5+t9v+vJTTax1MtirfuLohx0wWde92mXxGd/L0A3/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DOCRA9TVsSAnZWagAAUAoQAJjmMajOCy6zMbJvVYE+\nTFD0rwB+j6GP5W6EYuWAovMNfuybDP2VMT/BbZpT2avOsWNYECPCn03YApRQ\nEaAAKkJp20aD905pgtVyXJMGseDGYsKMU7ey5vRY3mCR70iDSgsWzlupE5F+\n3DeDVT9DhLMbVW0FbfVxJ607oam/Dty+vQyL68KQJbp3oO4pG/0fsMSJvxa/\nlSE32yFprHFcxr3v2ZIDD6Zlq6mJU/yi9AU0Aj/aQ2eQ5Vz+dk23cpcnnu9x\nP7aCt4LC6Db8MJ0xcotcFU1pgxAvMqNU4joUdF7KBQ77JOWqPB8FUIbR7clK\nlonkyjWhMBXd8+CfyBv7vXgUMwYFwU+5L2FdlaI9XPaRamAupE6JGEcMiCrw\ngbL/pzzSlX4oNbfp+Gku9XM8ky5lG/V1ByoslONFpzQiDmTvVvya5vmQ64Pn\njLwIRtVZ5qE6h3arIUmoC84yA3g8zDbNW4qEOtChQgk/IfvNQX8MRkyNhfzH\nQJbXkthdE2TrpP2r/A7e5ZsJT6AEZMhhvtQy4S7mJqQy3nMZdc9jvNJ7Ckfg\nYjvCHZ+7cNjIWRWkYtVYFnW6044uIYnw5O0GjnR0RuzvLl37ZrJPDso0iUmT\nsCSa4HL0TU8En7bOeGO8cL3gEedBsnacOzn6nP9WZuO0iO/B9/LLdbMox1KV\n1v/W\r\n=GzpL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.8388a9bf6.0_1595621582354_0.7660322160594684","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/typography","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0df9d1fcc5ee243f604d9d4fe74793ed0fdbda64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ac405eae1.0.tgz","fileCount":20,"integrity":"sha512-3RqQE8qBWyqYGlm/MQgz4l5LYAjxizLUNryYCIXpChCsY44XJHzOSAanbT3L82ZBafrTNfdZhX0gu1ah2EElPw==","signatures":[{"sig":"MEUCIQCr6uYvU9qKUTzXb+zrNaLgG4t6+z3NRrkM0D643RJBvwIgRuai/XAGracqdXu9BzyCd7bkHsGg0JWEesY2yQhutEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1qCRA9TVsSAnZWagAA2WgP/jJCFsLOB65H2OBraETE\nIwo+EYf3hj8wOET3TrVxpF7cE0NuHNst1VwVFmEP8PERHU7iuZLM+hjYUec6\nDDZrs6DSIFS9Ow0Z9Bv7ApaP+fzaw3PPeRqEpcZxHRnTEb7/wZjCd2fks7dA\nyafW8LZrmJLIiaRrOgnYEvmOQHNVV+IBvE3NzsVec0f6BQFzLJ6Jad2gg4Yu\nrPwUulc0a/n0Egejp768kgRJamMLCt1szzLApPWd3Rx/HBmwAXckyqK+OTj6\n/pXgxkdbtiC+6ljQ/LR8SLUBmz5ynjFF1ATN+Oh8Qpj+p3zPbmhtDpkQzWSS\necOBGsvtkvGJoNMkfON81FbHjz1C9ydTo8F2tUP3Ab2lLHukbT6164cNNjoZ\nMBFB5EB+tH5/Vef5ZU/xMtpyzHzSgvXEBD6CABxxdjqF+EmdRtO/AKNnOGAi\n0vfj8slxpdRkyDg+A1U0x7TVAwfzJBrk0eLgvzv4d+bhkIzd5agpXGJ7wRWm\nLNAszydJHPjhJNzMRuI3XfyDXflbUMzywPPhJ0wkoQV6N9sVItvXZ1x6Hcd3\nW9e5OOkEXZGfrNy3EYZ2v97LcFd/6CwU9R4V/cG/KmIVxWUBv5ZTVl0VtNAi\ncBHp51+sChK0bbLpP4nok6m7gOYZyWZ9/AlhfTY8x4zFUoTGjpSsAt4f48Au\nlv5v\r\n=2fOv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ac405eae1.0_1595862377764_0.5838837745222893","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/typography","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.75553837c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"595ac30ba0252d13cb6e9680416c68b414c62de9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.75553837c.0.tgz","fileCount":20,"integrity":"sha512-rYlwW6kEsmFbsqYGh90XpixJw7Sp08XrZKfFyiCCvIYX3fe9QNwG68UhQFp9TDX7Em62+80fhKauxnHwwA4trQ==","signatures":[{"sig":"MEQCIC4wUP5SsAQyNFXlJoki2cgpxMldg9N6sfgZ4MTGYjWIAiAvVShnNGkpQY4JAsfdkdsRmvwadhbijagcXAw7pLJMiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7QCRA9TVsSAnZWagAAUiwP/0ORZSBlY23Me7V2CPMN\n7aMcIqs75CSoZ9XkD3TEirmgiXU0rco5aAtpPgmvHJOIRSV5dyAx/r7b/4qS\nSpuUIdh34pP2GxeseNnvLxCkniZ0bCgJs3VQ7tsB7cVYDxEmA0nTtZy/gyhT\n0eAe6lR8ufJe/W2pHsHVJ8qA0CU26G2Orcujm4yB4pknIyjHGZnUqqq0hZr/\nZnJoQbt9Ke5YaossWB87CMOIiKgzkPDhho2bINGLvOnzFzOW/BVIHvtI4C4y\nZBmDzxSm8nF795RM2+jnWJUDB7vtp1WM90xFGfcMJFvsY9VO20nxANOrmnZc\nQIU303R5QHiDm3qnqdq8wfMkzogsTBnAdNI7PHag7nZe7XbeqDQI3ReOfD5S\nsFBOCM0n2RdqWYMVqEkLWo7S78nqsFoh2ZbqJwlsy+CTeHbcvmnP3Fr0aTcq\n8OjQIZWSAzRax33lA18kgUkpeVErIumPwEXnNFPiXl73WNgKD3Eoc2WzgYZW\nMEtTEH3y/jtJbpe4GcoWLehJl0ghKs5bGy08DR2aKV9DHt3G0XalE5o1Iia6\n3JB1qr6KM7xzO1UldS1/9WSKcFYr6VUg6fz9N8EACyio6xf66SdFiPH8Yd/L\ni4X7k/iF1oYLnPbS1rLTGdbGJIiDg4sgAuXNV85NTR+OzEDHT1E/AAw4YcaC\nmEUv\r\n=9Q4V\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.75553837c.0_1595862736292_0.5792624489937115","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/typography","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e3384b190cd549c01a5a895e8fd3177552fca0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":20,"integrity":"sha512-9S2ltXRiisp8cIQRMKo0iX+0dV0dwJZ0KFmvJ2Vy5id1+CI7GGZKUAPTpV/GiKiJCaFSTeriWBNmwiLTMXzK0A==","signatures":[{"sig":"MEUCIQC8iFbkufkD+0buEOkeBeaujPWVNukrKkyqzFwYZqv6iAIgGkRVlmdmL3+kNr3bM2AWiIQdRFIB9GfD52VXV3sLvbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTPCRA9TVsSAnZWagAAKsYP/30rapv2FChY5mota3hq\n5kaWRSgAuKWIKe99v7LUVkZqbxcpdvsx/0NpqyOeX1GyXYQYzqWJdfcoXH7T\nFEKyXYCnSgg5f4KlHYIKg8gTSq9Pyn434R3AS+c68bqu9NQ/+CgolA/kDP1G\ndALiWf2Fcjgo7/cWWqF9yakWSH7Sr5gsxxHsoSFtpiz5QiNPowJ/vixEAusw\nfc/JwC0YwQ08XEB+xXF08iwZ4Sle482JKmQJ0sC/xtltTlr904J29mLIOw7d\nu1y5CX+xqLDJ+nC9kFx/tAaonqNuSyqSsgv/fpCTE4OLZ06yNUBBbZKmQQpk\n/uM+93CgJeDQyodabSVkmkMKmLwRrafcbj6J8pEdBOyThQGbKzRQMNLzYO1i\nwHsDPRGxSG7modAtHQQoclOgObffunG65j3qwOL1X2MmfRT81XZ73dnyrG4K\nsefnbH/xJi6+9rR1xIuvKmWXpCeVAuoAIVfxFJfoeZXrHiXUGahaBUUGzgl/\npx2MKH/Co1DXzoWnxaP5Z/ZA1UyxchGKCQMjPmNwhjSe/H9PSJCuEWBJD8GX\nwveadUdYlIxIMv4OSSTxXoQ/beF2GZj583iSwCe2XbnZafnUmOZ+G6OZgG0d\ngYEDuObRKnAagm+zWtpEsuitmqEi7TbfG8fWcMvBVhYUvfRBebRQPrapHIiM\nhLwy\r\n=zHt7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b96fbfc7a.0_1595864270490_0.536909790325713","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/typography","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b8574f82fc3cb9f63ce8c4bb83f7220ba16add2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.61f1a8d85.0.tgz","fileCount":20,"integrity":"sha512-8LYBrVACoFveOwoWSucf3UD9a8O/8LTALmSRMQKBi64OR3M9xx47k/j59I2D4f3gCxO/A1dbaXwvZBS3rGkoOg==","signatures":[{"sig":"MEQCIAOEbpVSu1fDAJLXzy5W+fZixbeCTul8Tib6gzFgc/0+AiBQUlmalPYoau3Crs7v5AQGdFRe6qOE9tmIPSFoSJF36A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvbwCRA9TVsSAnZWagAAIXIP/A4lyO0Cot6gWUhZdRht\n7h2yJNwkuHsRYa6MBl2QG1zHw2u6TiWv6DRUDQPJRmvedTUEh7GM1ZFO5I9B\nyHYkgp9ayTZ/VhiEIVdIa8FJqJ2KD8VLwmCFQb5wG4KVm6OktwGIXXYPQGIf\nclMXI9ET/8+yYA3LCNCikZ8tBTFwIwzyvzCe1agm2V4R7WHMN9tpgjeEQHtT\npTIrpgUWT5pyr9ZsQTbGb+NQ/+Pv2er4C3MzDlBuy0K4w6E82DQbPbEkkYl6\npgoih5dLSFNSxkIVt/qCDAE+Kt7811yVtAP0qR44gx4PU09dS4j+WT9N53RC\nDJOEFCD25gET6W/5S/wXaCcOwOe2pfiqKIC1uFfQxSYWjk4v4zovnceSVPJ0\ngZlWMIbuMysYhj1ts7m/siUAZhGB/2JZg52RZhDgf9joVwHWjtG3KTyVNA2a\nXTzr3f/mzdPM7eTnwLblCLR1mGN3aReARlslC83bwekurEIv0phVaI54S94a\nxVv05dOc3YRL0IMSdNLGfPaW8ABs1VJo+kGS71X1Qls0IIzwj3JqW9QsQRfy\ny1GdH6+JGc8v4RGC25GS/AJPB7MrU9gBZ+fh5e4RCgscTxtsW60Uq8Sl2lWH\ns+EpRBO7+Q3aw+IA9Vp/f3A+MEmBfnEJSerzMrNhOAkS4+ZEz/aIcTTwROyv\n2xcu\r\n=SVgY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.61f1a8d85.0_1595864816154_0.9872959309015557","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/typography","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.81dc33377.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93aa2743b403f3271539512d8909bd3869b4a21f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.81dc33377.0.tgz","fileCount":20,"integrity":"sha512-Q4z4AAkV/gYbHMBIauYto0wYXP8yubmhJ/BY/QWBnLy6e0ItZw1SUGVB7n/wZxKV4F3eO11q68nNPObXGAaf+g==","signatures":[{"sig":"MEUCIQCePyZNfQP9sYiLvgGFZFZM+AWPirhcVYQM2zF40NBrdgIgebAYp5Z0vMPE4tam18QO95oCxSWyJxV0SKVZz0mWwzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvnHCRA9TVsSAnZWagAAJlEP/2ULo2LOMZAURWI87yG9\nglYl6/MRulXtvw3aSIImaE7v5hjivlf4lb/UOyXt8NYlVvNGfqZgBRS9eomY\nHw6QLOr6Mtk3Xw4jJbgWPLbLy+OT+FI8ASlx0pA2xj0YcZNFK6I6WSKP47Md\nJMyaxYc3JUURTVwyba298emiWsGhP+3RU6PrpB3xaEwYInaFv2v8oFqqV4NB\nzUXn7NQwvU57swrdE8URDHDqsvHq2f/p+//CNeFzKVTWQRR9lmxvXTHpPuu/\nvhHsCd+A+TBtgXiHK7R4ZqpAnNB7PDgc9HgIow/hJtvSQ+38yXIxyBG+w6/r\ncgkIjzAqKSwhEBXPqR7TBvqDyzI0vS9sJhf3D3B55NRFZJcf7UFdZLoNQE8R\nuQCHPwZHRvyESLTd1UNCNJtyQWejJC+qbgWWSP0GANMLEu1vaKBJ6v07XI2e\nOHp+gVQM0TCrR5eXDmnu4/H6m0Mp3dtlyciHQ5y5/Hm8l71xAsWJRqFenHWf\ndFZxq53gF1fwNs8tCLhjyONUG87G6JaXPQikpVa7LilsQqhHraFSqFiuZlL3\nH1ZZT4tIq3NvG8GG3sS8N9KSZONlaOpmTovIiriH7pvB1NEknTM9zjB1iC3t\nVjLalFLZ6ww5RBGy9ADc4mGZhGI5y74urcgx2c43wtXUFU7AIFGy+TK1Jd6z\nbcjS\r\n=9yqs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.81dc33377.0_1595865543373_0.2384830299799796","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/typography","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb6e913fa14393ed20e1a0da545c4d62656ec0f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ffd9ede58.0.tgz","fileCount":20,"integrity":"sha512-Tqm1VYXL6l0Cgn2wRntZDwd5BRZyfGXkm8yEFGm3K3zRMNjLgoTSvBq4/CQewEgtZwptYJy4pbs6TOhWCF/gGg==","signatures":[{"sig":"MEUCIAx39tv+14zPb74Il86O2KxDwVZgKzv7Afu0nEE9bmagAiEAk8hpHVTjSgbdq6qBdWbIwPj76W0qOekcvqirJuxEyEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGPCRA9TVsSAnZWagAAeAIQAJ7UlkBwS3BjFFGHUkHX\n/3emQw7sOkrKnjZNR588eHJoik7hraom5ESYStcxS9B3m8KjrqUed6GqE9KX\nen2x2y+aVpFweIhnan54VUIYdD9ioJr9G8dq47VAbowaxDPLchMZdDWTVsNI\nqaIG0gulIqDqDRyH3Zgy2BGI06kCalTpIraYrUk9K+l924vMyemBPZnp0gTJ\nBgLBh7X0PX8LZl0779Bi73FNCPRoCPfJ2c/y7A+A4cYj+CuVs/o5xgjhHZcG\nqcEPEBVjaVpg/lPiEJjXKOdnRS1e62KyGnO/Zwcv20L+j7BfSklRrn/ak+lX\ny5L9JcpXLnlmDvtcdMkVPEJvgbPi85Lbi+P3NemXGSG5G6A0kSze1/tOJWbT\nAZEdXlCzKw0wnFypEI7+1ZapNroUpIq/Fh+PHUn7fhvD5XBQwx3JFVRArY8F\n2Cf6tY4sixyrJoTnNJMqpvXjAI+7q4MYinn73h48c+4iTkdfvJO82/kC/Wc9\n4JYTBVlBqeKXAtEIn+O4hXnX/GFcju4Kugz3yQY8sLEetWF7yEO+2CmUUai0\nA3rEACw/I91uKOS99FWT3sKUX5lnH8fo9vzKUVwTDFQKRC6cZOst0Gjx8vi6\n14C8gRtFCf+Cws5NeJaq45W9uHBR3Sy+AnRUI07ogwGa8ZRxgadbFIe8mYF1\nYbrd\r\n=o+f4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ffd9ede58.0_1595867534796_0.9928950723792598","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/typography","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"673b8467a4e13c83e3fbf0144978360eccc83cb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.52dc55acf.0.tgz","fileCount":20,"integrity":"sha512-Q6yqo9YTcUcLgcQIP37lHoZFJjeWco5cGBEPer8nSVtWXd+/7/EB7F5ARMvwvGRsHvqfN1KAdo7r+ftOxwyvsA==","signatures":[{"sig":"MEYCIQDSrZCS9Z2Q9qrSvnqBq6RupcDNup52hCn0cSbIw19owQIhAJNQmETWwYt0maliW0M4l+UO9BLBds9la2Y2DkkZD3+U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwoICRA9TVsSAnZWagAAWngP/0U/a0dNejP4zPHILwYK\n7Vjvu/PF1YYF4MnhUUE2R+COmhvpUe2xTKQrcWG7HipfE5/1RKerWE+IR/Wq\nX6fkIg8WPq8zNW3/BfosDnP843a9Pxn+jBsXGRFo6s5aKM8/Lhy5obJI0LE3\n2MMg6sxODSrrrJy+dCvN13YQttfRn49tj1MWx7srAB+UQIJB47vbDvJUpfAF\nmXMYScY18bPb0ViVYJsh/W1NfCIxshXNzLF4L0nV9ZsBcSJ4lNxgcsJPKu+Y\n+fuPiluJnviF/KxmI2toLiqWFd9ckJOdZRm7Xdx4cOzAhulCGjWlsFPBMtKS\njkFZ80RFbEBLOfHHnZtL865OktMAEvTNfUibHV35ZXH8G7g7OKJM8khX66mF\n9sFhmFH4SOpIu1aOMr96POq2GsH1fR7WrrT/9H5KqZqk/T3xRdtTp8yKkAdl\njo0VbT2GJqWPENuyUJIgq1ULfY8tIxaquzlKedBAIiMzUJxKgVTJFNGGzIti\nPOLNtdBrLnlj+nDQCPtE+M1v7ulXvS5cbrGR16Z6qsbiyDIspifxH7urZgsT\n4bon9O/JnImoevmvNYjWLOSW8CX9VhmlPdoPzUemmCSvgElsRGB8wAbt0Oco\nMqThBorhaElvA1clJYtqtGzaNMwjh0GWkkwP3+UomaT/IMQpJE1ASxPEiag2\n0ZGs\r\n=eOpe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.52dc55acf.0_1595869704074_0.5565708864255494","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/typography","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3e88675a2278404c17e95798638ad26ac47d714","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d4274ff05.0.tgz","fileCount":20,"integrity":"sha512-CX38U75nVPJUsAsgQw0Pu8iPk5dc/3ARLRuvkxJDP985Z/kPBpR8gZdXpWDaqTLPPfFDPA+WV6xTJYf+6SwAlQ==","signatures":[{"sig":"MEUCIQDGKIAZZMUkzvNoHIACLMsQDJmGzczWlm/WASfN4HmEQAIgGm+gU3X5uD0lI5DFIUa7tIkWHNyqKdSGhiXUxuyvusE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzAQCRA9TVsSAnZWagAAvY8P/3GLRPjB5dFnqj5/5p6s\n7Y8Zi0B3j+IzqFmJqpjxk3NtDNSgLcQMYy2TK1gPEc5ZU9KqnpxhO0QFmLkz\n+2dgDZaChTs8IsRTX7tgnssJw4rorzxEKCcmlNILEm3m5pgYdhphn5mxZM+T\nY+mQgBpFH3jTG43tSznXohbWNCymByi61YXXURWJfZenZrlKv+lz+FVQ04JY\n2WqDOJZ9ysjtFdS86jRu+zbBxD27qTn2/KkmO7qxvjwzkkrA0gUt6vcrt6OQ\nMX9YXdK3kYele0MBPDnVoKaeWd1lxgF10zqUd/z6qs8/q0ic2sGpA7TU7vPv\nn1OeSufXuf7aQ9RuOlW19AKAHfD6T3VANV73JxjhEC39qk3Z9NjObe9fF4RQ\nk6N+5vQpN63N/iUeRuDzwIaPJdUE0qk4QfzdorbKLCPtUnHTX8X3Ij7mHxvy\n5rs/TxTQ7TR6N+zEq9jRnzAxv9ZmuERw1gWWdhXDMN3DWKIhKpA4phWzoE64\n3SNnvStLHgWz4hIZJl9cQkuWoYU62uXqwAu0aAIKJ88SXAzUcfM1u4+wDc53\nMNktN8M/cESmof3AuwMen8qCCRvk6yTbZtihoYmDogfAri1QxbbGEQ/F1WrR\nq9RVyShDtYHUjIi47gpQqvLEPdGDke64uYWikxrHHh0DT2o4j1LRIDvAgBoh\n74PC\r\n=3das\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d4274ff05.0_1595879439597_0.911351845974055","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/typography","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5be25839f16d117a476809fdb6f3353c1b5c933","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b82d0696d.0.tgz","fileCount":20,"integrity":"sha512-WLwU0y2yd5yVSvjBOvk9ckQgfceqdmRz2SSaYkAwbAtejkOhz0eLnZSbg9HlgS+aeGThAjYtDcAbNS6acCkTAA==","signatures":[{"sig":"MEQCIFGU97YkKsXk5VclbM92LGoo7WEUicJpWjeQpbFDQR3SAiBYf4hKAX7dpPEwgpJLNR2LBZnioTojajUYpXbfRmQ1JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHCCRA9TVsSAnZWagAACxkQAJek3NVDdQx3Jvt8a9Vi\nO8SCgf+3OrhbkLNekAODYdrsd5+kgY3fzoF1tlI/fl5uERU9fCa/2dMwhJJG\nmODeH94mVPYfWe5posctPmwE24cJnYGtZfegMpgJAtXWDLiUzxU3oQW/i0IO\ni3tuITtS0sMD1bnx9UgBrOowp/AGVecloAdk11OgtYAwLNVxIy/z+JiJS6X7\nF7/X7waT3wK3i/tOtlJgD/PpiGRUsKaFRq46jPGJVideN2PtvhqPhlrk+74Z\n6Cfap+4DWodZfmY93FWVUyY8mOSj+WOWvKZwpYlPxPKSE5Rmt5O4fH32GKQG\nIltKVR49lkbnSAlgG8kWenRwkPMS92M6J1qhEOp2mDgZWJl6f2IGS9t1ZZcf\n6V8UhXhjy4Wnd+wUshCE9EYDtqIpsKgQywMlRL6SybhzL8MWNi+CuZ4gZNpl\n3rbE5hhB9y0pbZliQy5E6nquJvZuSRvdDTTOX5s2XOpf1eaMVkhkUxAyKZkZ\nAbWwJrKatqhwtHNbp5M+qJ+PcLB0DaSlk0PFrP9IKrWNkgFEec1Jh+lTQaKJ\nr9HEZDIF2KNtyTqg8j9ibyRdv1ZqYlZna5s45Y5JfP/NUpXRLZ5xT3ksr/jf\n7coM7SOzeR3UiXovCv90LluxkFiuS5+8TctaMwWyIf7kWGUNYOBuhCEHScrh\ndKxo\r\n=R8TS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b82d0696d.0_1595879874019_0.6366616139773296","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/typography","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c2852000d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b80d8bc7e85396697661749575380bc9e443c53c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c2852000d.0.tgz","fileCount":20,"integrity":"sha512-bE9vJnQYJ+s5QhOWxobZthOSCgLp1VUlg8qV1kLQu2s7qY/m3gCRmmGeMgtFBirBOjGulG02q/n0FFdi5xLQXQ==","signatures":[{"sig":"MEQCIEIWsdvt1mhf5ULSlcmlA4/fxffPGxRqjsiiflKzNTXaAiB/X/js3fOkKq1AJcz4Lve2J56IkiGsgzEbDXe6CO7vVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":93763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/gCRA9TVsSAnZWagAA7ZoP/AmkX44kCghDnSPdGarw\nsPaNkK0hb8ex1FdEvjm//o7tLgsq3awvMITI+pYWDI8jeyLGc/hjaUEWlCYc\n9ga4qRqhHCruwasYWVQaCAoOrZxmB97JXtK5s3MjwnwRiXaEhW0A+XmjaOh2\nNXr8WytDJtaRqlzzV+NDBukpSQmZ/GFglovT1/9oNfxgiEACBtFxP0ZCiIYX\nI/z2lQtX2Zi/mHosPzvc74V72Mouyym3Svt/GltpzBiT2W6+wiFfvvow6Rj3\nY3kCDElqwcmHn3VpqzVgfBgPqExoYGv0TajpaMoCE4nH/utS2kL/5pVE5oLe\nl/tm9wCiZFnlO1il9unasiDehbrJMuI+EJxU667l3XwbqMJBZDbxQwKYkIpw\ni7HDqq3umvt/4Kq+e1cSq+eYO20B6vnH+QPXJbK8pXp+GDFTD7Sy7g5+82It\nnTgadm38UG96nIxxrAFx4VSYaDsD3ERB0mFwqxd/1k7pPQnryL4BZs6TbmvE\n9pSXuDaPReNjzLuv5kNIa/JyoLmR/jGvUIg0kAxYRh3DwL+d4gldJ8VA6NE6\nwwY22vwBmrpIG8ew9keAjxfRGnwzImekc3Ebr3o24qhS2lWFzHUnbBuQMWBZ\nAsCROB2nbrVkkw2EMg2pGQWfs76QOoUeFp7rUN6Uj/JELhRaLAB8hoEDGSX2\nrdRM\r\n=DnQX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c2852000d.0_1595883487822_0.7073880014362448","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/typography","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19834a44114a4cd1868380fb4252c4c28ec1f958","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.f86f83f54.0.tgz","fileCount":20,"integrity":"sha512-nI+W/2Oihd7V7oqlj9wo83UxPEOH1MPaYO3mijMg4b59fdsavk0EfCLOZY7u5yWc9JEzbUENsjpmIpbqVn29ig==","signatures":[{"sig":"MEYCIQDOq/XYgNyb4WGWHaNljakCrlFRyxwMrFxSWcg5bAJwtwIhAO2agHIdA7AYdCfJMsGegc8ZJhnVRCWUanvR7B/j7ohO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0z2CRA9TVsSAnZWagAAk1gP/i4S8XX1L8zzts0/tUiJ\nS+uMyOoO1J/t/ZMdvADmw954GzrEySyCqOgb6QwHK7evGGpa/NgCWGCbtQqD\nk3b7JRonuH5I6gIXfvc/FP0I8H/JHOp3fXZjV/oyLjag+LMhBCyDzHNlvhP1\nhNVX18rxDH/Q7gLAmckKFH36FjD5zk/0VDx8eCzlX+aVMGjz1N5+Do19IG6D\nDHe2OG1o+aA1pDDbDn8r+2alfW+QhGUZ6+Y8RDIw0zK4TUEmUyxx9hshXBqm\noq0G51Qv6EeR7W89My9pFcwRhex6vYEF3EzvFPdnPYWekezsNbRmtEGYjSDy\n4dS2XoTDWjutADdl19YiXbJ0en4Ev1N9nnCVohDklewP0W94bRq2eFRw3Zuz\nE64M8KvCG5wMpDb8r1zljUbjq73dULpxN7YvP9xwQIvAU80H37LbIOq7ogNC\nSMtwqjcnekXID/F9yA/pXhbEPSv7b8lO1hk3ktQqldKIP8rrWuXXDmHH4Btw\nArYewmdkdivBBOGS8ivK8Guxh0MBVgWluv1213dl2DX5ZOU/9OnPfOzHNIbR\n1/pYBgCA4RzpviotgqGfrwrKyIe+PZYzRlnPKKaNMkrNRL2h9IWDdGLxc2bo\n/xpNH20GLBGM62UURjKweCXyX6rymPAXmVPGnseDbSiFEACMgyb8Fu3nvOsE\nT8pr\r\n=vb0s\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.f86f83f54.0_1595886837805_0.2368367732111194","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/typography","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d6165c9bb12305ed5920c95a7086f344b12133e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.41eb1684c.0.tgz","fileCount":20,"integrity":"sha512-cwCZQPfvHrODRUyqSEulgFsqeKHoTIp6M6Lo+EdhheJW3/E/HeCuKLrQzPt8y0Gtm9r2lDR490BvJpmPGU4TIA==","signatures":[{"sig":"MEUCIQDKANyeur9SwpFEEYuuCpplUhWbunLgbqT8b6jBcW597gIgdoaybh0MkKC6nlgOwOR7AnubG/WpfgZkB75QRfAGB3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVRCRA9TVsSAnZWagAAhsAP/0/A3dLfd3Ybc9Vbijra\nStDLiG841NtjbvpqmLLnwg8bbD579o3swdjIZWyWswzpSY63ljYIVgb1PSZ7\nE7R6biyo+OP/C2tTIlI0BbjUGI0ZaGN3ayGOhOu5TAqYHc6r9pHWnknCK2xX\n2spdTIRMiy6gTYOlfifidvu6tyiHC6eWe4T1Gz2WRQQKv5ufPoPmS1zYYhep\nnhImsKDB3QrNVlIIHTvGTMY9VfTc/W1KjzS9Ah/HAJryOntC1lZDeOLvbx/L\nXbDO/2JdZ4o9V6R5cY28qOMlAB0HQ3X8l88snCQzch66tmms8puav5Dmwvw3\n1ZESR9zTC8uQ4GHiyMD/hAvsAPeS8gm1a5Roh3UrK2wvzTG1FCaMFWKFSa/6\nU6cwmGt/GSBe9mNC4yFTqE7TyP65M89eFqNaSaDEYDQQWCtkAHY/onJdnE6U\nM1J2h3ov93+7hAHVr4xkxPIxUTStmHdzR8PnCZVCNORBXNc0PM/s8EtFA3Uv\nVUCeFjOZ6xc4W4OMIuczFBPpbI/dAVcqgImHYjhmZ4iGYcV8kIgpp1hO0h7P\nANUliTFZW1i0NJrDtpu9KRqj/RosEaZE1wefPxu1Hkgg++hx29NfUgoa7G76\nU7SpsI856och+qHBp+G9uyezxI90YxTskR/elKN3aLAkwjChKaCmlK6x/Isl\ng0JS\r\n=z0gQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.41eb1684c.0_1595958608951_0.4674401172447853","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/typography","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b4b06955e197b2429f28fd4a8bd19e1e2be0a22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.9e2f6c450.0.tgz","fileCount":20,"integrity":"sha512-5WqYEc4uPQVTLKLRsCOWfHW3rGhfQulW0mF+h/M4bFTyE3ZS2SNncIlMjOKQX4fzRMWnRuuS9xmY97IOGlE/7w==","signatures":[{"sig":"MEUCIBvTn8hqnO3wAL23vKa/qNGkAUHRU+Ywv3RjtpnXQLVYAiEA6tw8E6BN8KDKVCiHJcXMLp+vHTwUamOWqiP7Xm9JjiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkLCRA9TVsSAnZWagAAuZMQAJazf3vdUvHct93WW3Nm\n+RmPczK/scaLl3eQfIMag2oQDkItbEMwrIwnFPczOIYd7eN/1uM4O9DTDAGu\nVKQ9YpSWbBNP7+clWeRGsqYibnBKuQscG0a5rwqB8gmy314tAf+tndkBPRwp\nqckFB45mFKj+QUBcLOoOt39yujhP/xOViVSWYK7TMPozih6ZazYeU73fAZzX\nKJvkhjOOztf782ooLYiV4jIT0bjN3F7doQMQtUjLLYYXbVhtMcz4lgyHumcR\n7Gp0iDuQKh+H0TWzxVWMNTiKRMzQxGwHl1AnXxnK8c85i5k4n2yn3V5lxetY\nMtjEeNjKqTH6ZD9uJZ0M+wA1ZsaZfFbmrzrQGBCMwTTkJMf++vhitK1CXOtG\njBkozPzi7dOqDepkXKwpqyYa8SF1MxuUA8t2EI5X2ugZWxqchPBntVK+IuRU\nltHVXQWBlhVPxKj/fMBajnLE9D5zO24tKHtzoO51dorwyoRE5C0DcSoJO9fG\nmJvba7kmuwYzYnuRcWI3nYTHlm5/dHqiuRgkINCTmdOvTLLBG8bVjN82kaog\nvXiiOBNsuFRotSmePQ69bNtUDniI7lva3bH2Gv+hJot2FIGvwpywB+M7Pyna\n7SllX2ViPZkKp0STk+E9vW0tSI1A9ieoBj5oBNnbHc7lO3aVLlNAmqZKKrCc\nT87N\r\n=Y1ST\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.9e2f6c450.0_1595975946657_0.0868211639431744","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/typography","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"697dc8ee0f6f9de0ff7935fc21c1d7b7d52c0dfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e6950b55a.0.tgz","fileCount":20,"integrity":"sha512-dffq6pQFprfTN5C58CqpcUGxFJNvgQ6thyGjsTibJ58euMgJgb9qinB7sq0lGw15sFmQtrDNNmMq5R9W/O2Gvw==","signatures":[{"sig":"MEYCIQDq3ttrcZzsMwUURvCJWfoEQqoIEHXox+z9tto1dplO/wIhANQlO6SOfxwd0CqfbwyUvEUVRtzpSDi+//sEXH1L17nH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwXCRA9TVsSAnZWagAAnKoP/1Ph+4Jol72sjfZqu4bj\nVTZEaWFBZ9rtK8r1R64MghpYU06HOlMxpmnmLQBFXoKjG4fAw3oQF0M1PRk+\nBDg8CO7nsvOEg1jOCMafXb2cZaRFSisPxcuow5AUoFRx6kJvf8eXCEf5GBF8\nvp1rd9WaNxvq/v4EHWIb2+mKDRdCT7s5uq9XVPVyN3L3bny0/24R/r70Yner\nlhTdD4zaXoOexF9zWkdmkEEeSyhSw+RdG3HwO/kEMZBnIOaq27Zeu8TJLzNG\nO7X1Ti5aLOjwHpsm+c9QQpoGWGBAlB0t5fZNqin1ViODgAt7CTAYz19bPPWU\n9XPU90Ox4gQ8SC1AfNXKC5Ddmrcd8ot8dvapwiwglRF+hlyGUWtCt51eujta\nCzCshJl5/94g7IpMiyDUULxHBYOX4VUMOYWiiifc1uXRLfGjGnCgTKe+U4h5\nvs4f35dARL2AQRVRmU7dm2pY68JBc7FjYxwNQjbs2Dv7QrYzZJGmdXMnuuD+\ni+KS3nY7iC8IUCQiR8qZ+m0Zx0Oexq7MRwF1qGEpZf0vM1K6KK/W1vDiThL7\nvM4DCTWFC1r+5/JeYjGf96yDNwwM/4pYyyMYZTVGajadje43CGcIKfANO/It\nsDx2JdNLEmMrwiwP1YQFrG49B1CbpzZJ029/TnwOjFjCb/qLGwbFq/+gLyJQ\nJIBP\r\n=r6q+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e6950b55a.0_1595976726392_0.37788304927479843","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/typography","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0c7debb73fbd71a2b32c8963da1673dc4960ca6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5e51ee38e.0.tgz","fileCount":20,"integrity":"sha512-ZtIKE7fFLU3DW6ajhT5N/H3GVR4VjJw4N1KFRnBpwlWZV0eTdVwoLnymPv0VHqtNbvJNr3STFhwNIGkWin/ldg==","signatures":[{"sig":"MEQCID01QFfvTLP9W59IzgFTDnT94KcWcR9FJtpyh8Pn23DIAiAcMfSQMLKC+8+8ZnegRCiGDs5O0QeXe4iWkBZ/V5X5qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGjCRA9TVsSAnZWagAAbaQP+QEcbNe8QiWyVvyJiHI5\nP/VD5i44SBESXbsn1dtz57hyKOM0sCUCPDbAXp0Ijm2LSRqaxrSZqkcAG8EO\nyRSsMT1248OcaaPCj1mHocr5T2Gxyk0Awg9qbeAjNZC2sZhRoYQEPaItjAeK\n+bZZj85YGe5NG+S/Mrl7XhPsZWTtYbFR2ESGJfkqiDb4euhUbBCXnqDnJQTR\nI/o3QK7Pw05lL4OfatqI2iZBbKAJ64OMMZ9NBaG+Iyj8WHL4mLfaEswD3Tmj\nKd10YiMEPogREOX3cbOFeKtsx+EyzUs41W1OvjRjh5J3v8XhBsvBfYt50aNJ\nt9O/s7HcGSknNZiJnRX/2MuAQccNiwBIXQYJrPwSmRKpnKfogka19wqJGH8p\nCZ140ZL/SM+NH3zqJ7jfXg0XqFiU5vbiszf9dnTSenaMzo9eqbYJ8cwUI5Sc\nuXSi3jVyRr1ufjkt1NiiG10wTizdZiYoIpdWuGVkhf+bENGdjndE+pFyZPVk\nl2ULQnHC4/t7CADPX1fkrkeAz1Na1q/wEX+Q/NDOyA6DILThY6QEkvMqMxpE\nUqCA2uZbNnwLUFs/LDz3+QVKCcBb/UFIFpsJuSk5UgO8ZQUy0sUzvLRn/gGI\nEy1o51IxaHsHWf1r+ggTRJwX3NsKE2BbERGIVscabtxi9jGiNPRMA1cgKxV7\nxUpm\r\n=LTap\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5e51ee38e.0_1595978146573_0.10398527126378831","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/typography","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc8af4effca5c3f5a76835a07cc9b21213a9afc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a3898ffcf.0.tgz","fileCount":20,"integrity":"sha512-waN8pYnSNS3TNWvXr4SlDgSOIjyzjhrELxJqpV4YhWXUw3rrUjuds+7tF0LtNCXK+sr4wvKGD1ROMKeJ6QJ1zA==","signatures":[{"sig":"MEUCIFM9a5zTJ4ZCqRwrVcVPPYWsF7C8gtHYPAALryX0tC27AiEA+DejKrxJ0Xd48ygz03+aqFo7IjNheKFSav8nOTYWJEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":94078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMR/CRA9TVsSAnZWagAAiXMP/iFz7pRxT6qYj9/OBWmb\n/IgDlH9e41MHZ/ANOIHWITgMjeQb95LbYg2ZtHpMH8w014+HPoakuVJE17mI\nsAgCj8DV7xx1wusC9US+kuWKMwR2uJ0qHL7mYDFtbGAizA+fNBrWBNM75hV/\nNf4DPfBbb8VoBybW68A56xSxTbykUe7nlEc1lg6ukda1K8O6qyTUVJeyLgMe\n6WBaB+JuYdoJKD/DeY//5lcxn+1sMxlFBzqsmwN8N/VGkSLhQpkomTVSvcKB\neLPDGLmREUJCrhIXKiMokRxVo9aWUwhxwlhTCxix9d1iYwT7QumRAlqA51Ny\nfl4ilp4qIFtp0PQyare4aLAOtOpgL5e2SkFX3la+FIucHfp4AKf7PQ9wA0sX\n8rUN6Oe8u4foHa1FifzVnWWgBup9m9mHZicyxtoCBylNGqpehlWmvrD4wtEo\n8L72i8dIV2crKtzhbxXxj3eGchfWrZCIaQPT7VUrwcjm2dgIp0tnkGOEQcKm\njok8BKJ2OSiutUoNl4mtEtiH5zPCbWcS3I6lmpauEiCUkmCtBAQBP0e90m7B\n9ko8w79JWN50xXMb3X8JPjUCslGHHckazTM6OlNabiZnJ3K+oAMXtak3zhaF\nsurMyi9Tqcqa26s/GGeiSVmYLKd//gA/joHrulBPuxAs3eSF9ne30/ExMP8V\nZX4i\r\n=/Yd2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a3898ffcf.0_1595982975045_0.26163495734291686","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/typography","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46ca2a3cdc2860ffa7cb226a0c5d3633cf607d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":21,"integrity":"sha512-Ivo1+tWtkwsWwLooLtrmV0TV8mPJgrN17WZtR6tNvkmgfIlyxDYyX5Hv9REn8Isa4tmblyl7IEofaWauR6WmZA==","signatures":[{"sig":"MEYCIQCaMtECVvZN4WhcmZORFgFcLI//9jTx1YrtCHMnuM3iKQIhAKUwE/bYY3/Jl5wiwuV/DhF6hh/DoJ/UOWJYwbkD8Tm9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":95211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeCCRA9TVsSAnZWagAAaO8QAItq5fiGL4ikpTpqqJaS\n1sl1zS7xourLyYxgLoH7VCutFO8nhBdaCDAOxfG10aIZ+3zRen5nYFFjfQ67\n32vGJLL3e62ZItRY9pwPOqPaF4xeGh6SU8DkaNHgDMAicjCwdlV2UrzWY4U8\nKB5qycOjvG6OOa2hbr7bzIK6KSXieekI38u0GUztNPH4U8yWvCeLEQ2iTXND\nE+JBUYeOErdtLg2+ObgVy7K524LeJZa59fNz8wi5rVOOl31Gujh3r0BRlnHV\n+QvA65RJ+8h9sghefvjquf4U0ZIbGe0gebEbI1Zlcchz19NZdfWzgv/BapGJ\nLbfJJ2w/MhF8SL1rvzQlQrljkF+Y5aIhIixsCIvyYSFoi3g3TYu0+oCYjt2a\nWzGL/JLdKmbnYCfnhNAkpnXthI03TR32eAJyA8GgYTnJWOXzJsZMwV0SuQQz\ntpGJBJO64kLiQEZcxyRq6d/ft1TDDDyoOWz0bDHI5iLDP45RD7KwVcFEpDEx\naGV8l6ptKYRYa+239y49gp3sQhTh39HjzKXDnj9N3cSKta8TZs8wz634MJwQ\nPy14It2BovfJ2amhlcOgaq4atCbnltBE5AJ78U2KcIHDRom/9mx3fwbGUZIL\nvCC+COtBzdFXEr0hHbTfQ9LP2RX4jaeIO/pqyteI7A6nek/33i/IDaZyZ2lQ\n/mQm\r\n=LJoD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.bc5cc6c96.0_1595983745731_0.7347996724984298","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/typography","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cdd2002c25c4752afc6e124cf67d9937b626bb8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.9bdeaf928.0.tgz","fileCount":22,"integrity":"sha512-a6yrxKAIoN+4BpQAtZtOKaD36e+1BssTUCD254Rf4RHHgxO9/1LD1CK0C46hAsttm+espKoBU+Rk8WOnMMbicA==","signatures":[{"sig":"MEUCIFzstp0eE5VG7Iwttnn2fd2wu6J/AEaZl4YnBsEj/WPDAiEAzamKSxUB1AoHccfA33y/n4eBGNQ4cX+8uZEzAja9lcI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7hCRA9TVsSAnZWagAAAVYP/1mhX2PfQAnF/shmHDB0\nw00dKNw86vwOVPgC/13zI1U4LBt5bPmfy1EIZVxPLtMWz9haJAtopteuPXNa\nhBa+/UncfmELSx5iX2efpSi97LVE3uMMeGTiYxk0GC42wk0xC6HFwvKyYK5/\nQDpbRuOElf5U+HMYDy/BXTTrmaGFeV1+rCxSzzWBbyIRvxhJkYDfmcf6gY/h\n6okclhzN8qF+amWr68TeVsNu9f+J4i0iGUucW8XA0usT7GR8KtNTkVzIyFeD\nq/YffOn1MDi0PRipkpck1xC2as/Q8y18omKnLIRH3Nk+LaDefA3SgooYlcTK\nMPZSNCY46c6pm5UNOY8qwgvF6R4zR1+I4FaE1Q7OvLJ/SYuTkSP6V3McB/fj\nTNkKo/pkZY2aDO7qwUqlvfXwDlnDDMj5RLbIl682z5WV5H9AoRpPst0fHqNl\ne1jEVH5Pv06KGLCykD1gey/3nRNmLTBTNcnmoXQBaJugX7gCrmbDOM1eI+mD\nJO1z6vQ5SRGFaT503wYd+8m3jilFvLNZ7NblvnfWxjCbvqwV2KSTTXc9g2Wd\nvDHwy8o2bmbvPukIzbJx7P2DWKD2UtDPHRNGTZmx7AXN6wHYhPJp19P7uu84\nahc0x2QHxv4YxXqpAu+hKa7exfu1iou/e1dzZqOXUZXxVwjy5dZIM+BBJrQ/\njyJ+\r\n=wy+2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.9bdeaf928.0_1595985633073_0.5763376397158402","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/typography","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f6a9dfb860f8833a056df043a8aa77253b08acf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":22,"integrity":"sha512-X8VvEHEBGLgqBzbHfmth4XV9vJ3G8UZfGdOvez5bpTNGfs2mzq+FIkG2ldhF3r3QjGthcMQlSR78JwSFc7A53w==","signatures":[{"sig":"MEYCIQDieyTYN8LLf3WzK+snNK3IJRe7YoPjVNDV2MdWaRZHgwIhAPUuXF84HawmJbXQ5PuRgDaV7CYvXk/nATE+1wNWebWh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINI6CRA9TVsSAnZWagAAzr8QAIXWwWC6jESNGmQ1EyQ1\na6pgZdnKraIK9U/9p3wDLXi7cbjWElOuTsDTOVCknnC2j1/9lU5J8qzwB/Y/\niiO68zztjvidddTXuLsDH5i2knOSXtOWRCVUqE0PUOHPRtFcyNsupHLK44aZ\n7BiH+TlfoCu4VebpnimtLyuj9wiYReCgKaQttkC/9LueL2oWLuSuWdyZd2Hx\naslDmjeuyoMuk0EOJEOK7qJdqL/W+SHoz4wW75OVEQsIp9M0ifoZB/AKZFvV\nNWezZLmr9sWZB40erQ5w/jgbg/nOKJzMkysJ6bt1tWiuWXBdz6iL+SsRXYoj\noMDZGZ8nsahT2zB/RM/ZvT1kwFFZY3lOXhZrwkRozTCwRzo2oWk8sNvuM3qc\nanDV6iQSdOyhy2UGG1GmUyKvmCriABGNqYHf3FqfyxmMElscCnhQ/0V53U+G\nK5FbeISxEodABEjVcwh4g+BNoDGJgNULf7MUHRUAxQCKk1Mu6oHpPJxikxyF\nTCMBd44vfEGSkt/WB8/wAf6sIgiYcBaYQPF11TMr3CMXEbY2QG6U7bwoEeoI\n+dF0WHj3vNTAp9A71TFM4YoiEH04TZ8i0hjv34vkVHivby5LtbtVMne4Ct6o\n0RcIMyvp4+yM9yEdZeTm/XEgX5yUtISIYz6mNP4Lr+bxXS82ALvoH+KieA2+\nD0+x\r\n=pBfN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fde2c1f9d.0_1595986490318_0.6394550282962945","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/typography","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1163dc5def5ecb606676507da1f360b271a45b65","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.6b3876d5d.0.tgz","fileCount":22,"integrity":"sha512-JSzxozHa/92TTw2usBD56m3Eb320D1IPDv3D+uMuH2CanDmj8aAs7jiZVTpdKTK0S4n/BBBN1SAMC1JY1/HG4w==","signatures":[{"sig":"MEUCIQC1PVJDls/e+Jlyn53XBKh1NYwjt7sN/fMRPQuVQEqzGAIgePoAUlNoJZBgaXH8UMjvqlK4Plzz7bSiEgATaPnIlB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMbCRA9TVsSAnZWagAAF2oQAJaLampdkdUTtx0kBg2z\nbuAlVOb/0/SaQmorufEPe3tG3PipoY3n6h7vEHhjbIYNh3jD38RJ7QITtiM1\nac0jqczYPRFX5uDdqXj+o5DygM6kZrULX8AiTc9iSaGRB+FGag9RWNXpGK82\nI22SQl4Zl/dspv5ZA++AP3sETeS466oLSbDsXxIfCyjYiujrQVQMR9CgE52g\njqYCk09HnUFuhpwhzHTJrUOmXtssxlMfsHBjMNhnh6xclM/vHI2zl1tMNQ0J\nb1wC732p2MAPAaqj/ySjc5Q+t8/9LN6JKdO7c3K80R6MI6yMsYL4r6atrvEG\nfvIWHtaVZuC004Bmj/VDGpwYttVCLi4z8k9B24QV97DUUzPH0KPtpIJtXld3\nK+l5F/k9BHD27XlPrDXsgicUJNSVgtSLk1DOUqm+vS9cq56XZkhZC+TZuJ0v\n4EIgJkvrbHvak5BaXDB569RGA1zepI4sDYUbPysLytHvjkuc4OwQPrRSq5AD\nuoHyeDb306hEt3Yl+MNZVqihTRbzBj6ec530fBQ7fu75OKNYebd6rV+vEy4r\nTpnjHj4j49klIhs1heMyrNME6Y/vs7Bx0JpdaID/YDJ9wCVIS/2AxBUOQ5yF\nqr/7l2yHgYXivCruhKepbHW3gMgVHc9JE/8Clc7A1JMSQG1siHs2ufJsmk9J\nhrEP\r\n=ueUd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.6b3876d5d.0_1595986715518_0.7728121854859253","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/typography","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.30ce17873.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c147e72b127077139cb8f2eded5314a805f33f3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.30ce17873.0.tgz","fileCount":22,"integrity":"sha512-3mWx3n5XgdQMschyXF4y+C9C5msU0tQ6GU94pvW+/iquzfBI4opT9lhHucY+SqCgTqxf2g5qyiEWNJ10iqpd9Q==","signatures":[{"sig":"MEQCICKPFmQCqx1X2CrGAnQ6FVqfQ+BXh2SXaKxx+UewTY5uAiBBjycANlmAcWBVtJoTEzn46iX9KtDxA6n0Rev+jpwYag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6ACRA9TVsSAnZWagAAhe8P/A+xJPvaRMA7qut5cP4I\nLm8inkOtIqxsua2bGGCm6X+5GR0eWGWXljmbekWRkM/jLcEjrn96Omx8jC2Y\nDPWX/PimZPFAt6yMmKI3/kvuz/lqpnmLVHBkssuhIYFvuVNNLNLwfW80a2Ob\nQhUO+WnkAkOeMd3iAQGB6JADlpZGrnUNHlyTHoyjuUIR8YAMv9zV1aH5bkjn\nIsx0eVsxne4iXylvx5kgEHQ09aWhg3atJPk49ZDnHMXyNVJgrynrweMVAmh0\nT4JqjdEUnu7ebK5ePDGeo4Ciy+0YuHTeu80JiM8Ww9jKVxLsWvMyYadd6BrO\nwIDM5M6ENQ5j+UFyb1Osf4bvT9LsNen9KIH+Sil/ja90DcjOvhITnapk927c\nK3acYtZJI/JrHHVjYJnwJrshzHV2Hw4ocX69xHjYudA20T9rrq91ELrELBR+\nuNBL9McDih13PYmO/GyHGopqnk3HdoQG3w5C/o4qZeaj4gG3ST3gmg6mpN+8\n43wO3gQR8ETTgjavTC9axtszXWkxI3ixH0H6VC35aaSJ5kPhb9UM3bFP8tzt\nsnoR1uHkulJwXFh1wFFpxwlPeSeJtfwz3roxAsZRWdpAzM0kIo1liTClBrTl\nm7yQrSXyDwn42KOnka6Nn13Z8dVwjpsPEuvA3tIzuhuJbtfpfL0l3660Pyw4\n+VAB\r\n=ghkK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.30ce17873.0_1596042880226_0.2407254007126267","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/typography","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0321b134b0b664af2b5d9091f22fdf162b80a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":22,"integrity":"sha512-hxCM4tclrLsZGfYItTPqBHo3v+CRtLdckcMWhsiER0SpMuTgk3Qzx4FcZg32dB9RtM0w/Wxk2Jyb4UkrT56BuA==","signatures":[{"sig":"MEYCIQDUOLvNbNMuQjy5qOWoakcImlK6qc+6339Sii5cF/dfeAIhAPZUd6w5I9qrkVoDzmX9Wjvxgq246vE+4IOzj6roruel","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8LCRA9TVsSAnZWagAAy9QP/REdXbUZ86KHtZTHiE0R\niR4H/95rhKEJJ7jBYF54rnBQFd0SrMT9noxczGXmzalAWdMT4/l/LrNhiAKW\nvEdmXjU8f8W7fJv56hV9tvm+zYfE/tKjyhBnh+5OzqEsQ/mEarM5SYAgfNH5\nOsEII69mASawPy7/U9wG+bA3NAisVcyqbZZAxO/K9xh6rLh+qY2PowfOuBHn\nG/nLIfPu7luBY0laIBkP51zAJjsB4BEf7vJS6cAgQpTTe3MHGYGdzcaGO12K\n0Tlp/C2vvLmy/9xvGdWtLtO9ZnOs13fe35cFrhDYKfRYMehVqUJTl8fQxawA\n+azhAJjoAvMLgCS+BAqQjAwZuGFA9UDns8SQheQoxPqz9JprJswgmKX98Lob\nkdcBecqZcd7E7Cc6o7fFs0vLcnbBuqM4ehSlgZfKfGadsL9vN9kdMl01h7XD\nTE1io3mMRdoBmcsDPnNpTgKtoU1VXr56STSSD5+WfOZDe7TND6X9pt16yZJ6\neeJPaclNPj6ALxW/iCwuEHGPqpEvO3sSEw33RM1mr1KbUIapPBvtkKdTOHwL\nOqQHa0ZRrAR5UNMYk0uvcyvzgLy8J1mRg55P/Bagx48D/06iCW2hw2Ip2jCz\ncyBbqDwFpKLEnTLwfEhdqDct1NNfPWeQ7Yy3Y0okuX7OHNcvE1LYg0RMx+J5\nwZGz\r\n=7WWz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.f6bb43bf0.0_1596047115105_0.15692870556676275","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/typography","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5a75a0501c01fa349ca1c1c0e2a950b21ab14a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.6af75f6ab.0.tgz","fileCount":22,"integrity":"sha512-32eEmuAJIN0D49Ul2QC0+JvBtBwd1BK1mCNr3vJIcUz1gLEv/G9lBhft2zVbFPiU8pTb6uv17M6Kxyeav9c2dQ==","signatures":[{"sig":"MEUCIQDuWdcgoyowavRcwGQ3OvFwW9ng+hqo+Mh6fsK0xpQOtQIgDlFK4BVwLrkxQkShiZ3phsPK0CFC6BtDTjc0hL0m8j8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3ICRA9TVsSAnZWagAAQnsP/iNgn3YmVKRC37hKeDvZ\nwFj/+fQhqKtrjCvbspE0xFhLo++5fQu4kk6Cstv1iMOZNDvecOtDFXpRbYym\nmD3sEWXNUy4avZs+lZSuG7ejJcBBvmZbdRZ+9hbRWcCX9lLJ/JD2TTbWgDTe\nxU4b4at4rBCZR0hO48tjC4bFyGAQkZcUui+xFBpmme/HPGv2gI+8fwamrqR9\nHP5h8qjn7/7WrY3XA5MuMx2zDKnML4OIW6tTGqw5BDarFrPtxrG5RAZdgK5K\nECwXW4KBT5jOQ1vuZCyEbh3zmlIAaL3BO9MiRAuRi+ekIZPE1YRBEuwluaIr\nWKzjqxeY4L9ssVtzN1cJUkO+q2PI8wrEGXs4+czL0XCRSpvW7xT4Wy9lbBhC\nFNVG2NkJVAOGEkDHG9tKDxTsVtFWSUqdgivi2/GLeRc3XH5PvMqPkmvoJ8MS\n0DyO7PqnkJf+okGaAhD4acHZlwa585g+zU6hCYhFWtzmd5lsADLZ6P2kq7vH\nNmMaqdwVfRa/lEjnL1Sxv8BuvahDd4OXq+Ha0W0sQuuGC+VdCBrxcOhJtNi4\n2yrYNtBxgylkwKessKxTOhNcaVCYTU9FkHd8JM9IOQSNoBpHa9Uhg5pP1BSv\n57LRuexGGsjVPINiSYHqsnchT+Jm8zczMCugBwbDXFDAm6/q7VOPDJR7c/Ki\n7xSb\r\n=48W1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.6af75f6ab.0_1596067272013_0.3708572838226476","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/typography","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da24bc45f1e59852f78c543ab6b176a31018dd92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.42d7a65aa.0.tgz","fileCount":22,"integrity":"sha512-qv8XRa1VJWs3xErijSmACkVge5bV8AV4LCelsuhiwMyTvgBsQXah4s+udCIyYF52GoHDRojr9zdrAdSyYpXjiQ==","signatures":[{"sig":"MEQCIBiOGa5w+SrY+3N/nVdteDTABuSmpdacCaNkwLFybWzeAiBKT7Q72bB+mdOyRV/G0MWsc+kTXdjyMdKyMpx8SMjrrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/iCRA9TVsSAnZWagAA12QQAI8Bq33yUuvVSecdqKz/\n5RBhThl41Topl9NhCgwIY5Mz8sbotGN1WE+5OGrMlrXBOwC9aBrOsQbZhG2M\nnQ9sRbFi/9hhJz6AUcqCqoK0C32ugHIdHIPLLLfAciCh5S4p17TkHU+npmkJ\n+Ar1aNSGzZgXW/u0YXxhaFMR5WCa+nVUNg4rigppYgEpZpR7EKrxmJG6PGTo\nTZIj8Qr5BxUUPH1XlTII/CjazUhqrzpcYvIb1Bk2s9eajI8Ho5CqbP9Z88ES\nAARyNP5iZ5FQlrIxUzdbtjWPKo9rMgK1GRX6Q0sl8fZmjbpQ1j3AHvMa9UFQ\nWnP74H5z7dh/dGMU/RybxiISCwuKZLiNOtrLrBQG0ggg++MaBteWdXW9wnWZ\nCJ5NsnBuz9zdYEk3aX+BMroj6OlqYi4wUYy59jrOwtU5MeF1c3Tq7u+aTY6E\ny3iaZsjR3A9SbCXS8GXYINv0jJtOHDL7KMmGeaZYQD4l5wZnxP8d9phpsuMH\nXvgHP3ecf4nB+UlX/FjI5/VaqpGVgibZqOPdar7DXrfG37DW8QG7J6XC+svf\nBAEmUAlDqDdOREUOnZxAR5PAil5Eu2aYN4oqtnHjc/1OMQMAo4qDyc7Gql/L\nywI+459uL0FphHW18Bh+fsTU18uLMDdUHK8cgvYxp2dHx49fX5pSNDtLRMRr\nBzro\r\n=pzAI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.42d7a65aa.0_1596067810212_0.3109556536007083","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/typography","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cb874e89f584956c03b158b93f332ad16b72392","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.85abdabb7.0.tgz","fileCount":22,"integrity":"sha512-Z72hWcCZ7EcyaTNVQlC4knm6MBpRQe8ihQl07i9OSbsZy+WK/rOefX9mw+lgfqSQ7pS0E0F+Af0qkfNr0nw5eg==","signatures":[{"sig":"MEYCIQCfhv4pNkXvImdRpNpr5YKGLyVhNNIy+KlMUSJlynTZggIhAMCiC9EOawD6hhu0QTjZoDTUqZbdCwvaLB1MVxyNRp7m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhENCRA9TVsSAnZWagAAQC8P/1P/qvq53vXwk5APAAco\n1F9USdxJARbqvhFwK3SFPM8U5FY5rFSX9EbxaRII3IuSBO5tZQJqy3wdTiM/\nnIowHhijP62E48HfqKI9nQQiu0wNf1CcaflgccRu7cmQPK2Z+gRKG6XnCKF2\nnZyxgwHWnBvOWdfq0ImzkpIcX97TS142ADUAZOqv+Ea/ICM1Jelic8VnLh2C\ngn6O7RNzBUWdur6bPCSvwvARpfkTMKgs2wguSRPiEYJFqPN4SUONNUgCGaVo\nalnQrTRh8e58MKf8co2uf7PVTQIu8hULu7KMdD5+346J9yaL5uboqAi/wIXH\nNnsQFhsuiOiSyOyFGj8NgtZXlDsBnmanjzfyv5X430+XxBG1F6PyrcZF9Mft\nYoaG8MIb5ikNZltlZELkyX+o6w4s0FdeJK21d7zV/vnHI4N+edweUSq9LyDj\njnoqVKkyavu4TOY9cWhs+QQEBAz9C1i6R0mS7yqfIuzI6+2ZGtEe7T5lh4GD\n/a6DdUBl+nmya2eF8m7y0M3W1Z+ycHGQBONQ8JMxkfgke81cWtF2GzLMapfw\nYCEvXAjCyAx08h0HC/c5eSOGGPO5MsQF7WcL9zkTI8HjqXgwJPVyUuVMpnlr\n4dXr+8sUOqOzK1Mx5IaPElghrMTQklDLFlCk8GIzKmpktXBsIXQKckeHLn+y\n+xwc\r\n=/OvV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.85abdabb7.0_1596068109235_0.892683395372682","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/typography","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c314359e9d3056bcc0d74e03ff77f20da6e02c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.49fb20ca3.0.tgz","fileCount":22,"integrity":"sha512-SpCNYlUwPETkmbbMAetH0VCDb8znptfnTQ+EzfjKT/RuTGCm6eJA0f8gTiMDg+WC4vUBt4QvKrt+o3WpWe8svw==","signatures":[{"sig":"MEUCIQDiYW4mpuxTD7phYbnnGNHKZ6JI3QefY4ViDd+7NoqZAwIgHgIEgJl/k0jPZMGQc07E2roAW0/bNVx6ID8T5A+9diM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIBCRA9TVsSAnZWagAAZvIP/ip72A2f/u6i+KRrrcsY\nvwZPksA+bfxfQNJEnHsoN6U7jzL4fEX5Z7rg+HvAoBvi1yyH6OfwvJ8Bll7i\nLPouDrY4zQi3jrlEx2LO+wAx3mNnfVS1xQS0N1qyT5SmcSaJl6iZZXi8bycX\nBVo9m3SE3aOQ8odStX9mZLXx7e3imnG8NgFpncY66Q8HboEZ2lOEN2UXFoR2\nb0QhMSfRs0G3WSGehkeccOLXZDG19KCujg23ILi4iHYJzD8xyxot7xTG7KvL\n/gfmRh7OGMXGPY1pdvDcZqh2aamf17pBIiMkyAGxV+EgsPNdL9nwwd1OuERU\nn2Uo98wiAEJHv7EYIsUl+jmOXedaKaB1WRJlg5xuNY/W5bmpxIYdyW71uCD3\nbKFtJmgWLR1yWSq/Mom4JRAolQfBwP6hCI8/eSp44IxyDB8FLeaKympPCC+W\niZdXPKLjslaD+P7hHC2ikrWTizs1Tgx3ywiGT5GcTmkBnS9MVRPRRBc2Z49S\nZQH+Gh0RbIxnvB52Mue56XzmPhWka31IWQmBCcrp70uQFwNCUMvJOesiObjV\nOv1t8yyvQHMkbKdcGVCmMy8ZbS5/bazAlPYwBfYqSr3aRFOGf6yLjzH0yUXy\nVwj4cWmFRDdQNkl04fdSx321KFFJMmnDIWKuv6iypS69WCjb8ziEtsiWs2Ua\ny/6X\r\n=Yob4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"@material/theme":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.49fb20ca3.0_1596072449055_0.9016097287579381","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/typography","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d6ad22be02b0f0d5861bb081b1886ea65956cb1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.962d4abbb.0.tgz","fileCount":22,"integrity":"sha512-YhHkwjkLi013vSdKFavJTShEnPZO+GZutMY980jyS03U3DME6vD8u7Nh7rQL2BFgUEZEceOVAj1B6VIE0hyTgA==","signatures":[{"sig":"MEQCIH1dCsixSHM/UvozYmoiAAxIMEJRhCLTbBhwOhpLw5xwAiBjg0JKvuBWvcOQgzHKDsjGYSJMnMR98E94DMelTTM/qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDdCRA9TVsSAnZWagAAo+sP+gJ69fGJohr1G2Zbq5BA\n4QMRa0VRlpus1PLgLXLSl2RBdWLtR9t1JzfUmajDrHqF9zh+L2qZjif0QLgv\nF7ST3BCR01U7y94WYmjsz9VNz8D6pXeycgYmzMm2d8/j6YnDEMDBeqmtZAaf\ntUqfF97Oq/DNSbDQUeoMTH+chx1iyYjNLW1X6kXg1j+TOUw5uEFCu8B2FpC3\npDuFj2EkSTOpaCsbh5srW05vgQDZc2LPFFjgPG1fqcD7KwaZ2fPEFY7ffRHA\no2NdGqdZISTJtzPRVKTpdlLzg4c8BnTPQ8puZjD7/hXJjtVkOJSReam9COYu\nacj3y771J0TARg5loZRDn4DXpJczRdEs0eyz+HFqYY3lH0f+E7aMUtmCzb0z\n+WRfTB2e2th+ve6+FheNKBcC0N+KI5WJUod6YfEYt/nepi+nNzRApJO0b4Sx\nDG1CKqCMhtVY2pk9HA7hP1k9e+vxTXPhE6Dstnum7rUpgONWmZIby1AITTIP\nW87embwhbbg1h3h0MlKnthlZglo3vI+FVcpUbviuVKvb1MkIsbyLnM0Szqlj\n8R7KSuJFlPxhLJP+nKk38CG0GcbUOoY1FjqIL62YFlqkR3/lzM5S68PEjlDC\nzpR5kV4285G3tzg97ZuCzXCCWBAQxY5mDPmw0wnLL4b1EyfSYJEHSL8GTL6F\nF8mI\r\n=SpK+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.962d4abbb.0_1596125405044_0.5117021192554831","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/typography","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73fe52382d841997e077c2d4841f2ab11832a066","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2fcee40cb.0.tgz","fileCount":22,"integrity":"sha512-4fNVVTWdHROcwW833wZ2NSr80XaVIFzZpy633CmP6Lir2BDoT3YPee152jvWAvpWKfvYufWtb2QJuM7Nrh9N7A==","signatures":[{"sig":"MEUCIQCgbG4dtMYFzZMsdZdYyw02w8UB0EYOwgtagvA4U1/fLwIgLs5qNm5bDLL39/A8nvPt4gtTdXmXypp01eDD9Rivhj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGQCRA9TVsSAnZWagAAAFoP/0xnCSnlDjxql9wSSU2K\nl2fItM7vgWFyyvtbP9FWlBzAD8/v+4njx5oHaB2ON77cIhXHvz8NQNIQgF2r\nB2d/lC/olheusAqNuVrXomNe3jWjuSXiO98hu2uxoCMK+jHQH+qwfDqPvvTn\nfhajzh1+66luwAJe8PAz0dz+TqFRsEiwI9Y6ng6xmYmFqv0UtRf13yM8WatR\nfyX2NbrE5bExn7G3mdG3Xv7lCXbZzTOSs0RV8oFmiWvZtxwF3euWHmx36187\nmpD5GCg6JpHvXB4vo40pjrFybegHT59k6DQLIZXJc1jpFB5D8d1YG4Y6Kumx\ncjPELbc6JG2y/AguLpzgsDfnTA7CZrvrVhr0qIdNAweQfSuuvhAC4gdpH7Cz\nvbw41NIPDcE4losSqr2rPVtn22+BCM241l/jJKxUqK6pcT2rNWflDhc9oLIp\n4k/Cot0mJTf2scorYsVacggoQYqOZjr9UIy9yoHQZtx87B5EJ5dh6Y0N65e7\n/AhjZiil3ul+7Tu6CsRDUYkfcLsNdq3sS0m6XGZU4NSScL10vb+sqYg//vw1\nr6lPVdYN/jvyFS6y/MY54f1H4syOYUa2ygJX9hs/qBeeBpXA8MLPepCSU1PO\nsvBhsBXXTgMvLPPiQSsrwrdRTYqyzMO3McLYlGqxmb/wAs32Wz/3Ryy2YrVM\nlgU+\r\n=gtEC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2fcee40cb.0_1596129680288_0.4066559401256198","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/typography","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1b906f115269e932faf9b2e45142baf4336b066","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.bd5987f5a.0.tgz","fileCount":22,"integrity":"sha512-SDQAgXsU7N5a7Nc3cJYLGa397cv2so7HHUm4eeA/3e9Q21bmJacX/Dm/gwku2pgfCKMj4ioZ5GCXq1ocYJuZRw==","signatures":[{"sig":"MEUCIQCtOxtNaCETYwJHUdOAjA73qEwvOSOfoXdHI0K2kJXQtwIgGtj7RNgL68i/7NENhFTt4K9Y322hPvEF/Ljhfv9FsDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdXCRA9TVsSAnZWagAAz4QQAJu7mady83EhYAqbo4de\niRkeIoEQF25oJuPQk+fUcCWvpz+70nRUNWCWRcdOigeyVexR1doLevTv9f50\nX/6ZpMab4fKedX/anmqRqj4pqvRldda7im1mYoGdN3zWZakDGACMwuE6uP0a\nl2utHHHzRsWXOz0AwewuM97ayppzkwqYJ4XcD4fyKpTAfmhMbb+OYawtsNz7\nzf59G4P0I364+TlvDuicdEafgOE9gjv12ESvANGw5E+MvIuPBz5XejZ/hfVD\nXmYFmiimrI4vNHMPwLEqMAXaVkL8sBnawT0MZerYwHAhPhXXa6b8wXGahuiQ\ngfGcRLaBGL0F3YEPoLJxQCpUKn/NmyTVcLHeTRf2LGruADEYgf7K8IDfK5uP\n+LcCVDOubdWgT4c1tGWU3LE3QUXC+FmuI5r3QU08dNpPlkxOlqQkw2eiq0dv\nU7x8OEPSf5fBVrAmxBIrHBsbEZAj2vt4w5+qdn0LNfDX3ZjVSoHvYZQUkKyD\nnQHZatHNMZvaNCPLPqWtg67G5keiKA+LDO6yLRVBnSyedCV9qlcN6/+a0fuy\ncjDG35lffpqsdss5P1W/q5uGQPoTzp/aJUG1YYLufiU+h3syVe/mHk32V+9t\nnujQNB0/2pZkhmm3nFx1EEZdPMpsk3nkUPRpEuIwxDXEqdG58mFef1M1Ag+P\nU6vh\r\n=ZbTz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.bd5987f5a.0_1596131159151_0.15878105463342806","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/typography","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fe33cea866bf493bcca0b997e25aed1f53219a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.005e86a9b.0.tgz","fileCount":22,"integrity":"sha512-HRomRQU4vZQZc8TygK5jwSKZxbsHqn2HoOEArwCzREFSI05mWpJbSZbPO2Dnurw5VYxS07AjeW+OH9JkjU6/5Q==","signatures":[{"sig":"MEYCIQDnZs6AoXHpUbOONqRFdegi+GMw7nLEbI9dT9i1FLqoRAIhAKD+GKKwDbA6lfDGPitx4bf3r8Qt2xKoS4vn4a7k7HXt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqQCRA9TVsSAnZWagAAvk8QAJx0G1QO5QTyThkpUsdD\nIvUvC5RDs0wtUx0Y1IKxbs3eI9Gd3Z3a8zFqCcHMq0Q7jyyTj8SRi1TEGh/1\nfWrZpIt5AXtVHoa5UOoh3zU83HtDFLJU8+GRyE1fLtCfJXPtM9R18V/oTtIA\nJSBURAtOxeKVMjgXEdJwzC4gPeWAqfpTSaE+7Dro7WSqwnEQf/Cu6hZzGfot\nZQ2g0rdPk90hHaLrPZc4WJxFeq4BhGhv1/W3/M0nf+shJjK7Dcu4zfAeB8rF\n+aLuSdQMMzjqpIHZf8vDK7uHp2dfao/OiX7C7t6Fa8rc5D5fRtXRufUV5NDk\nk374SPem8BQDZacmOxan+cFUbJ1Ritvc2ilTJ0aIAjExq8JeIlplBXsge0ns\nDWivQTvYSCXpnKHCdmTuhMrFPmjoflMIUmpp5wpEahEzed17J9zlccSWMTio\nXev9+64Ix1c9MtvkCX4LmzN3mgp5CfWh46aM6PJilwT5hKOXZCR3rXHTKYCc\n9QqDmtsqEfwcns5+r4KKEIh6tYhscvXMYiIQv76q4zFQtciboHlWUcXWX89y\nteDvbRwqXf05HLMth6AHxo3YNioyOe10oEK0BptXD7maBC77ka3U8ZNBv/jl\nQ8ZE52Z6z6K97u8K+4liF1xX9uk1vbzfcHRfcMNlwWiqJGrGTt0NDLPkBvOf\nGV55\r\n=PW0M\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.005e86a9b.0_1596131983535_0.2673950211254552","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/typography","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cece672a2564065f9a537353bed7ca9523587b71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e309c7c68.0.tgz","fileCount":22,"integrity":"sha512-XOv/Q8nYB21tQ69rjVxQnSLDEuHMy7tb5/Yv7DBFN1tqVKkXv/qV6D6x2BDKRSuLf4KmJM6JVwr5MvOFFeRIeA==","signatures":[{"sig":"MEYCIQCLKBvIKSFpj+I/5wrc3gpGL9nWJuYzGpKQpdrwp8AP1AIhAPiWbdGg27bc86Xpe6Gs8ciYPpzeF5WmzGN6FhYbhCii","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwynCRA9TVsSAnZWagAAD2cP/3IK2D40AmwKOViIrR1L\nTExBFkXzykZNpqW37ZkAi9yOCl2hjdUOMByuRVdeLiEYl2WzfRd3Tdha0dCg\nL6+LXaY40+cPM51ZvsloDa+Tf+nvIAj8n4dYaeYkE7wy3ip0fYnvwNW1wbT4\nsH1/QJgjaxgk5dzkw6tm7iDhQakiqZyS6B1/VPGaCp3Sjxal1N9GogRWHlqz\nvmKoH5euGXMTum31fGgGsp1QVi3qjEkIucm3/quADgXgIjNViG13oBtaoVs0\ng0u8swBmL5xhrcWyiXL+o+RmbLS6QK3tsik5DhO0Oc23hW6n3jV2omu99WV4\n1ozoQ8v6XYAgydoIearevag8m73u4GIGCAJV91OwMiJGzFxxWANPSXRGBtxQ\nVKpBUM7dw6fKwWjbwKeMdWOLh4jN3BHQ0v8fp0jb018vNToVgwYYwiFacjm0\npk2aEOf72hA0/k968bwnruQal1d1lON73J5LyeQQRvbA0aBEVnDbngmFkQAE\nrm98YvFUx+jDhY3nWH5xJRt9pFnyNppLjCK0me0QmmCYb6n6wqPg26uUBUw2\nHgx1r6fodBoveBKQNW3e8GpXzKcRCcXhs9yyODj0TUuZ5Dge/7E/+UcPl17M\nTaweCvJyOxeRxpr0GtoxsNDqSEk0ShvdK9z4KMRKfa46oFKU8oBIVnbJKa1w\nsSra\r\n=YrOO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e309c7c68.0_1596132519176_0.6780678674891867","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/typography","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13dbf59f022a072ee4ee3ac4ecbbcace0e02962a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.935a51cc0.0.tgz","fileCount":22,"integrity":"sha512-FqZPhgmPndYfNdLSFgA/+n18GxzxjIPUX/wuKEFnGti2XGQwBn9A4hsEcxnEfrK0b+P56hgzMlVIy8Zk5pvPGQ==","signatures":[{"sig":"MEUCIGqx+M3HSNH838N9RYW9M3Vi9VmuUfwnhYeqB09tKg0rAiEA5s7tjJn4J/vr6yYRoz5LwSXJMTzwpyL9bnRM1FiZc6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9fCRA9TVsSAnZWagAAk9AQAI06JvGBbYhP4pfuVBQp\naPrMySOwJQ18uvYnB0/9o/ll6TgPNncqUzZ8syZA2lzy3RvCYIxJdovyJHtJ\nWp95eqVV/cnCa4cPovkF1KW8z/HIaDv2MgG0tqq+YIm+O42wZfMvvLh0bh70\nrNDvc2+y2c9YjN7HHnf1cgJMrz5QDu/3wtEy9OJA8GbBqyaElQj6zq1TyKii\nGO5bv3DgeNmjl31W/+I7gh/N+eg7YA+Bvoe4JtQrhfJsQz1T+nwX9TsVqxwW\nJn7m32+5bcxpvFRDC7TbAj7ZQtc/UAciQPyzbpTmcavII0IhAqogXNdEkLsJ\n5gIamLrE72PhNMnhe+aJpkoPfZoiKhWu/Cl7ccsbBnEcYcBDVP1YxiA2nYQW\npEI0x+FgM6onYLM8oyyLYllIoWm83/DMqNV87kdHCSVPDbpvNI5u+n+afPYf\nCtx9wYjMXGYamL9N3Re2E3VEMtB1ZIfkgRZiBoMURU8PcX29XG9pIWtOMJWJ\nQlH986P88U1KxlJn90lUyf7sIcbav8B3bDNMblYH4fKvTGaey0eziuIfwyTp\nJ4gkoF4BMfPjnwjtEizhFSdF7BObVawgMluVCuaF/k85eW/evxl8cmCmncME\nwg1Ntil3PN1sQzibWYpvi6XOmrR9A77c5G2EU+v3Nt+IsQI9wbFh9v8/sRe8\nnGu/\r\n=iukM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.935a51cc0.0_1596133215171_0.6592738209890274","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/typography","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.74839da7b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f8f84bf093e7a81569eee7c009eef414aed4e10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.74839da7b.0.tgz","fileCount":22,"integrity":"sha512-kbfxPTtPrwhiHJy50OndrTqwOOnCKhxGh1za90J3S4+azolvwPkvAVsQLE2Yrbf1Fywfjs1D6VbD5ceiseDG+Q==","signatures":[{"sig":"MEUCIHVo0W/KZZeSvEBkuwZPfwFAcIWs14biHCpVoY7cj0tEAiEAm0/gQYy742EgVp634p/1YhqtN/9d2O5sZQXYwCUbILM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxHuCRA9TVsSAnZWagAAAIEP/1IdKUBfcbregECYsiMA\nnYUFvBmzSyR/LEtE6nTagoSMsvTW9d5nLLTjZbdXU5WkM7Qd83HuixmdargE\nExLnRtGOrJX7ooDQ4nb5JMlgrN6LlKZRWgrMfUVPtXqjeIwy2frytynTZqmh\njUXPmqnzrclusUyl3vxDrKbojm+k7qGF0AeehXk3jMPZAgzW67r51GJ2I70S\nbisbXrREKhKxfshx1Jc5LuBHqO2ZSmDNE4UrO6BK5AXu3h2PK6vtIOb+tYk/\n1wh1aeYnwkkScKKwWqtRr46GWlkkf+uRlVQn8Qrh7iO8f1SN06IbcuEPU3u5\nfNkBYXB2bWxYPkSGvD5WABYQQLqWMBxvPeJhuW6xoddIu6scnTdiONQrEU0d\nQeGFhG+jjV9U1Um7Ga8+v+MPPDApcxhDPZ21we6GNzmV//z5cW7oiZ0oBqve\n8RuL/yQ+ykzPSM33t+WOjhQIlAFOV7InC61Xm7F9QtW4CG68AM2Q5GBJImIw\nS/46WEmekVVf8ZKrugse68wI7UL9N8wpwwAKuWaYqMdQfhPuYREfQ2YKHbiw\n5dN8wVlhw7KTPX6t4bSGilaBEl4Xn43uyCr1rpL7lWQHB3GRX7JqeIunCL6C\nvdvCSd7p00VVeaGCsdb4ISO5a6+IRwoLKyD4TmpsVXft2vvAG6gnrFoHH6Ca\nCP/0\r\n=xlZV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.74839da7b.0_1596133869710_0.13585154955994372","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/typography","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0944e6235017a0a87bdedc1d442ede1cdc3f29c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.f041a48c9.0.tgz","fileCount":22,"integrity":"sha512-n9M1ab4NVrBxJy32dS30T0Iw9kiezEk+le0uBJsoRAZvo2Fhv6C7gxWqEx765MU1eQrdUdVTGIM3eT7cjZ5wrA==","signatures":[{"sig":"MEUCICQAnZlATDdZ/V215DoKsQCZXIr9i1Ixuzsk5TpVuH9kAiEArbCLRFKCCMqUgjQRYQ8np7mWR9GBsYalvBG7K5yfK7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DKCRA9TVsSAnZWagAAPfAQAIgvSnKkLD+lRMoUAwDQ\nhJwy7hiP4iq6ZgdAUkSyoQFcIrWoxP0ExXo6rri5wKEi8imJH0dBY0mb3X7p\nmGjceHaf4y8VfjwpS1/XxxqJAISamfkuT1OGTwAUG4e0GDxRDBy3SB96FEWq\ntb9Ljx6jRIBkual8+o/MjUIyKrHG/0aCjP8hSMTp36NF3+cdppSVQDdBvphq\nGGYMB4Up96CRRsqgHwNb6dEDb+7jv9QfgPcpFygon8l3uelSVX+G5or35568\nA9+gkpeTcX2+4n++wpFc2JWQ2D85DMquo2IVylrGiuAFf6dliJoAHYmjjaPL\npqqnoi9o7vunnyl7lRWuXuQvT5hed2HIm7bUfognjwwlFU1f3sRrwgH5Y6rQ\nJxW+mMjQ3Pwc33AJ61vzst2BPTcj/v325mDXSgC78Ta3LB9DV455hXKHGovf\nnCYMjd9bYuncUx+7trXK5zFpKFZjpsLBQhYzYnAOPITG/23muNf9vXuCaFX6\nZiO/Yt0GsYVA3+YeMmwUdwRC0KD/PkK+59r3QCVaKUP/mk4c76xYJpZsD9Rp\nm/coO9tWMKyLpRiAfHwqG2CBPwt+obV29t0p4ExIqUR8naJiGrUWF5Ymm3sP\nwjN4odds85++AkayWdETx58FICirPFAWLSH1eUDTfMTjsWzcX8NV+9p3ssPV\njZEJ\r\n=BSbA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.f041a48c9.0_1596149962010_0.027217648103048386","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/typography","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32c3689915a23968b73d7bbafc16524687c62fb6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fbb1381e1.0.tgz","fileCount":22,"integrity":"sha512-ev3ZK1BtFNFTvFGcaBKf929lr9yC/oB/Zv4p9ndMiJU5ICVSr9ODTpW2XUgpyDWkdKTXl1fL8sfXU0FKWfFwQw==","signatures":[{"sig":"MEYCIQDA15NFP/2c24kIMZVt1QqLZ00WCiQ/AlSiDO4N+LG3OwIhAKHaa4JR3IqqFsIO042wGwCN0EFkAWs2lckXHZyzMUnV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD26CRA9TVsSAnZWagAA3kgP/2/JmU3nRqXEa9yM7SXs\nP8izsB+Z9uaqMOCotBC+syRPUTxdIyHi8ViPkmjfazumyNLZXX2IcD5nQZm+\nXFQ74Xhp4OJhkmxUbPh2X6Dgq0ZcU2i5uvt2m/N3J0x1C1NJKyJBHTy/qfGg\n8yiYS9EC38hdu1xUWJnhcAZJUFVxckJhe9Yt9fPLAc4f1gZpexjtYWDzAe2O\n8cSCYplnTZJXk1W5cyhz7ujJAy5rlrKyBTnbuSCW/KE76dYAB4Kj4sTzONAS\nb78BegZIYqR8K/ZnVU4uAiCSla3dKYJS+kRTfs5z2ZgAMDCWFMv0peRIt14J\nIE8Dkl4UMb74DTnXqD+ea5udvOenZEnKZe8JngE9H0o5csYqEvkM137jZxfW\naZgSoGBAEBjppahYuH9ArN2ZvOwTQ87Lw8aczYWJZ7OU5N6uo5hQ5ulhEqw+\nLHJesFLC1sr3i95b7j71fFtUHS9+4s9I79Zp7T8hZBE7S/xPvC10ZPbZyd0n\n8mxGjN+++HGzPgGrKEZ9Fpa5JWQJNIkA7hK6t1/PUsVRXk4TbsWwbaAD047o\nxR/pNtFjjjruw8mMFxn478FSz95aXfCeSfEm3kpGk4PsWpepe9ql4N8w2Fk9\ndO+yCgYsnwAZUsPtRJsBpCishzfPhXZjTt432rTR8hgpoMaxzhRqLHHYLNfB\n695B\r\n=562S\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fbb1381e1.0_1596210617334_0.5221900939363369","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/typography","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f627398eea7117e17b76237195979c38013938e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.7f61d5785.0.tgz","fileCount":22,"integrity":"sha512-67c3oEZY7u9791s6DtNeQkPmduKCJEYSYSX19XyKl3wNb4YCRC81SYbxI+TcV81TLuBFSBAXETShJNZD0Z6GUg==","signatures":[{"sig":"MEQCIGOcg2UhkhXUnwRLhunNHVnAJ8JElImBIR+REfriJwxqAiBX3QayI+u1qoOsJiVMZVsbDSID3w5Q7+1pLKaJRKMdLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNtCRA9TVsSAnZWagAAyCcP/0XvwhH6fS6erHNS3tPA\nc9CQvNsIvjFzlzyTaB+pQ/gKvSfCLjbwIn6CovwBPo6Vlr0HTSKyVRAPVC+K\nC7MMPbuiHGNlFSY9wUvG9doCAonWT7sVj+863JFenwyUUZN7HHhqHXYd+IA4\nbAZBgfJ7V2uCUN6GqF3KxL5XA1z6wohDFAhzX/6hJ6DiVMjzjat7557BQ8SD\nbsOD/7JjkFkJlL9MN4Ea8/QW+l9o/QNveowc+5oeoYtcx6kgyrK2Z56MEOMj\ny/RPyAYTecs050wHwwNPbWF2X6dXPEpCH1mFIL4d2W3QK/5492mcrly6Z43T\nG14DXcBefsUDKV5nkMXPbDAdB6EiFjDJuK5xMbULKkg22qhH+3gEGR5Cr02n\ncGej2QNILTMcczlDKsSRfA5Y9KayIYVHbFXTnhaosGrW4TbPO7keGqa50pK1\n4Dl1XvQ97TyVu5U1KqyWG6Vs2QFe488LiU0iW87GfHg4yK+sxlZ4wbPUSx5c\nrx0L36pUsVos/ZPYmvEdRhFnxUaFD3GNo7XnA4xLTlfl2ptYe6Ic1ZO6/hTx\nk87Yi0exvN0k1ggybkoa8V+mSt/CvepbtuK5iIoSm783Oz5lIrMEfiHVk19G\naymoCikjNntElr2Fc9Q2BPLhFM2cAZpd6BMwQTVdOthyeREsR/Jb+h8gGKlX\n/Eud\r\n=3Yop\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.7f61d5785.0_1596216172642_0.6358353198303401","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/typography","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9df9aba1d1c1de47a6921e0df9636b984bb5c202","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e1bc84d10.0.tgz","fileCount":22,"integrity":"sha512-8Qzy9no5bHATIVEACI2Yn8+j5P+yq94lS2UeCbcrkle0e3olbwH9QQQu0T29mPQYYk2OtWP2v+H0hU0bArQD5g==","signatures":[{"sig":"MEUCIHjLH7Jhsi1usL8dgdefpGA9jiCBjgwr6aA4ngmxqJQxAiEAloE3ojGmG1HUClS9t4qdb1zuTULHZBZ+jNDNonIIQg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE5zCRA9TVsSAnZWagAAyjoP/2tzM4lwrwQHbGViQVrr\nCLSeY4PhBqLqowYDJyV+3JZGylAJtwds53XedQDAWT5iRoKdAAupIU8NUmhz\nQwTo0BHz1P/xHf1eLfpY+Zi5W39LAXw7piQXbSn46v4IUmSjg2fTmmMb1i/B\nuEyPCWM15B1qItAM0kfxPslEiluFj9H/VoLGzKNTwuvHJvS2uM1hHQSJyKEA\n0crh8NjiKd0M8ym5TYKN7Do53BEEzyYIodYPVx2ub5nrhcH3gJ1pshqMbkfe\nS05qUPYKlfsJSagCCWuFKzV39HSrivqv6XWYIvVBr3m9X95u966bNm0KkWHq\nXBa8M3UP9OnOFehGG1pdorbc8mRQQddcT6uM9Y0OFwxxk1CN9UlSeUqXxvH9\nhAoje2l1D21wR/MZJeSaQlEgjTyIT5UUDPV/AkBquu/vRByeSm9E1+pNM0cW\nerBezk3V/fUPEa1yOvcbySnKS1IZTwR89J5M2TXujM3bUcFtbTsRNE4k1YuM\nA/8dtdWqehjpRsDPhrbZzohN16+Omcj8NpejyXvWB2ujBiRJ+JeNiW56uxGk\nirf78/rT9k+8bAtlvKXa7EekrPIMIgOhURUELcXAhw1d4K9QLxXy25jh/Hsy\nDqqfMwa9r4VOw6A5i3IcyZxCJawPgZ4M5x/kHenksPlPzi7jBjBoBhq7ya6O\n6nO2\r\n=1ur+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e1bc84d10.0_1596477042564_0.33759147637321507","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/typography","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.096a7a066.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4caf2b60366403896c0587cfec3a3a08de8964c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.096a7a066.0.tgz","fileCount":22,"integrity":"sha512-q6HKSmEWSU9lM3sy1GjiGRskqXWMnwIWWAzet15+Q928JmYBKlw3TLvgfjeeQiaq/c3pHWcGE7Dctk6oNrsQWQ==","signatures":[{"sig":"MEYCIQCkouyZ4T97RnOvGoAGnCIjIhC3sfvdOBuSKbiBW3g4LAIhAK4oDakCEPNmrbXr0i8tONzjSc0ALoPHSb05z3x4BiOS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8YCRA9TVsSAnZWagAAN0EP/0c4uWPnpq+wXHSghFsr\niNq90vShlnttPcpKF4ohPgmXm2H7O90DGJKBwcj7h1dHPbk8W/h3eqlwzQBH\nXKaRW03s9FPOsDIAhDM9G9dGYDwL1s25BD31oW2kihUFnuugQZo28ZDu3Rhb\n/iIzJBgV4JvQ2/2UI1aFWILdxagPS/cGNtcPwewafwNBkMPRr05+GJj7IQBY\nNm/m9UlGHhqdWaCVkXgK74MyzSQdeKZhhw69UcB/qcsjXwZiPaxUI973JNoH\nKZ+EzVjDk10i8BbrF102mwqlnhSFuIOMF7wEOxzX9shMR81X3sVO9vL9Nach\n7TtOMTrmfpsg2fWOwvzUZ3ue2vvxcydaO2LnbNQzx/suY9vqtCQKIJW4RQ/y\nNZf0OsQqk8vccKjmfDWG6y1Dud/sLb8h8yt3ISASQHeHogAG68WugrYjP12/\nbtThJhIbImWmPxB+/H2pEVJg2INyDgM9AcPNXqYiAMXck+02iSTXI9GmoUIH\nkL6qK1Au8kQ5e51YSCDppvRBaAx4rjely9K6bmWsSxXbN+PdHXNbOuxlwMDR\nf9D6Mx5+ifytaO8JvCvTMShYn7pCcIX0SWPVTsmNuIAUcJpRj17bU2h0Vg2M\nwsFnrk6RDmGlLxVdWDFAj3BofHMy8DkUxIzVbXGUB4C4D2Sj2XNfWRVid5oa\nw8Sr\r\n=YBTC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.096a7a066.0_1596477208001_0.7539041408246283","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/typography","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b8325ba79bc2d5181b28fd68fa3e65148d9ea82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":22,"integrity":"sha512-G1vG/YFk2IiJRcrZr2adtp4S7qBIAg3Royyh9tvEODHX0mWkYGL8OfM4PK0CdqB6e/Do6w/J8SEQrnhQ800hWA==","signatures":[{"sig":"MEUCIQDrhCimtf43SdlSad0Du2wgfi2QTDSAnMZ/F2iskHT1QwIgGeAL9RiL6z4vLzy7399FWgq/b3qiZoZFC//YJNG2+Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8pCRA9TVsSAnZWagAAHLcP/ixv5Emt53U77X9lUCd1\nR7V7G5igOujtyV0T8W7uZFKgi3tYLFvnfWVXGyYmRa5rnwSrpbc7R0OJZFt4\npwUP71ZJFiK4qHRpOZvsWPqJj+7RxmxwQ20E4XQ49paG4Q+fUPZYaT4qC3fj\nDu3dp+ASP6ZgWnbr/u5RzgNDqvTCzLP53creFd/9udIazpJakM3eaAHgdhiC\n4d+oDO17is2nR0Ypa3ri6PWNETS+eR3xtgugXKvhY+IwX0BLPpooXe7gQUv1\nlZnfJAmpn3dkFsJjiSVXkv4Zplgi2CM7KC8hCvK/wxmnsH4GfadyN/eFYumB\niQn1xPg/EmgIZVd9owpNDmZQYZgFT9amCi1RNpXNWMa20c4cA6CS6eBbpMt5\n99hdD7j5nPfuXD35PRm43gu2IRDuUYgmyeWzpErT9cm+859XpbZtezr7cQLs\n/PBWMYhlq65WDvwqJnF4JFonwSntZ0erCKp1GyAuixSbpfItepQjPlDzxr0l\nrCtHNclVbPOkvvHS3NFOWfL8adpm2nv+KRhTgJK6dKuP7b31oXy7g3epBsWB\nZxurkSK20qIjeHIEt6FVa9FDZ5bsGB4uPb+0wx1f0/FPcDez7aGKYEuS6z3M\ncE7Cgp84zWKbTgfYDxMbuNRElZKQcPGV6vUExioFOsFCeXMY4B2t6p9SDjsq\nQOh/\r\n=+PX+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.aa3a3e5a4.0_1596477224701_0.7804056173094136","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/typography","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5903d39af.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"271fd2f345e4f328fd1bd666d7f6a360a62ca927","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5903d39af.0.tgz","fileCount":22,"integrity":"sha512-7w+uAcYcl5OOIWkEQCaVXCMWLdpBI+flmbar4I+xmOgVruxVC5Jp/WegxVQjz905sCDMfilGYM40yFfFxx//rQ==","signatures":[{"sig":"MEUCIQDAWkQ6ZILykAiID/L08PRz/lbBx7Nk896vOAz57hUK1wIgWeGbVrPNadDtKDc/mmPqaFsBbCAiD4FNr3u9u3kkP3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9BCRA9TVsSAnZWagAA83oQAIagL4qVnQsf0iooCDY3\ns423If3uzsglPaCdPa2Q483COK/GA/o4JjCZlSI+lNaMQ1CCEpyJOaUOTJ+V\nXKXS7wAHcN6oFlQHnDWy9qQbJVtDeaOOV+FT4NwyOaVlpvkQjCFQHXXVARGZ\nVDKqyRi5avlZEY4KRGK0zKRN1iuTrKkTUZSuHwr6TWgyALGFdLzjtzF3jkQh\nWsbZp8KK3yo9bAb7lc2I2AAWJiE6hBfVTqMESWWe6kavStRdsix8Du/D8GmD\nkNQKlL+/PfbQHwef0rpVnWSFFmP7qWozZvkYsIs2bkUmQU89VWRohhgUIA0L\n3pWXYHaJluQZCOEb1gl+r7KnYFBeA7NLJLPFjc/dImbzm3vR6316UQy1N934\nEZgbyOOaK0MgZhUjTjEOFNDCqkGSmfLGk2o7usFyQkgomfnteclon1WrvlgR\ncL1fp9FIB/sHKUTH3KS6iEnlnCdmHUKuKr9K2khFga0Srg5Hpev8m5ob68tr\nAP8SViqDzgL+1HE/xkriEVPZ5ZDv7sn2Av8BY+Wv2Aqiih0NP7eMoIUyXHDy\ni91VzXV8SLDD7/Rw+ROiWAdoDtwKou5z+Eg9kIkf799sw8Cu7uGo0xmYGgQ+\nWyLXSrg1tQAzEDYAru+CC4dLdu4baBRP7+M5wSKkdC7+5rWcddyrAZpBaevG\n0WKI\r\n=sRx0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5903d39af.0_1596477249312_0.8748370129754031","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/typography","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.72258f898.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ef4c547f38a51ae35fa3d4e08bdf407bc69d0c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.72258f898.0.tgz","fileCount":22,"integrity":"sha512-Mlb1DnEj3MkGSgRjdbRUjSSn++8AVnGLIiY3ST79iVr8bt2+AjrYL59SrmAfRqq5es7Aw3n6pcHcsatMByyHRg==","signatures":[{"sig":"MEUCIQCiez73WOq5RD1XBoZYBn99L3gbOXkuNi6qhERFGN3MaAIgaP8qrzyYrPgwSm+jtW9HcRXnLY9uDJCFzhm5RIPb5Vc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcVCRA9TVsSAnZWagAAVPEP/R5/yWgdxULJFLtMCJ7A\nC6ypQsa54mT1LOWnNjO6D0cjmNG3vAgNlfequmVBt2WAS/ZHvXcbLKz96Pcs\ncI5ZaFwlGLZ9/grHce8FwQNGG/4WmnWC0cOey1lyENathxfDcFKHDI0KAb4s\nmQZNuvr+2KCxKAoHj6t6wDkgNvxHr4A51UO9hpS3SSTCIuM10YPKVW1VNowA\nLha7W97F9Qs+vZylIcJGE44qNDgyg7ts+08LrN5WdkvcyLldULk5SGGIA10Y\niowLJAZxn9b2aCa9EahCF/3RBoPmt1ZqHDwkB0DVKz3A+15ynTU9ef7Omdy3\nkMGaeehPboFK/weP9+SYn+D8HHxakAfDrj81wIcH+yjbCNQxMIjEL68DUtqz\nhfYC9fZbLU7FYEdqq68bJIiNIbyumb7yX/CYH3OqFz8Sy9QuBOvtFB6sj2P8\nBd93YCi4kS+sWpt++Bli6/lrH78elrVEjeIkx4uF1IRx3DoFBD9LI6X3wnBI\nsf28LsiiISUNgkg+LDMbHE2EYAxzaEx9p1ejNZdvf2JzrBB7hC7fh48hItvZ\nBEDH/mI64bHZkEiVIv4VqNSXbKR8lIWu4LUD7VsjvAiZqPTfkVMeq6nETWcN\nPTYdfjt/bL9oKecI6XPTfhc9y7Y5/PAAbVQInsoAmfAnHA+zuz0XXBewsauP\nhxn6\r\n=LNjc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.72258f898.0_1596503829230_0.08341645076540383","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/typography","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f29cde7fd37da8eedda69cce0c2b2dbf3a7ca90e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.1b44b43c8.0.tgz","fileCount":22,"integrity":"sha512-DR9rTL9Edu2fXktkAwfIMEO0tUQKhDbdzjRqQMXFg/CfNA5bryYsnnCK3AVVM+EK7FfCpYVMHVxJYkxKd+ziAw==","signatures":[{"sig":"MEUCIG59LAq8RiYy+2wY13GZsukjd14j+ukVSDR9QAzVat/EAiEAwZhX2jpp0MW/MAAR5rpDqc/aCCaSCiY2/YkA9LogCYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFCCRA9TVsSAnZWagAA7VYP/3dbjTjdfK4Z4L567ZYo\nGbFFsVd4zJEKtrVT9QEY+b9HGdusXoZ5pTtlh+l8AB9Fr5cOxPiHy6AnzmEV\npVJjTPbQ3B3VnBf0nYBJBJHhWUzrDNtf0+sTpclraUndviYx5qSFDbGCe4Ye\nKS5H3t+xO/LS9ATCrveEcdJjzxEwQ7yfgE9Ionk42hzvBksC9mdDPR3IUxWd\n0Z9eFaAqTLHFBllJ9vo1R+F5n+NpkNsWJspDvZhTZgnMrvnFc4nXG5VCyFq1\nPG7M09pYlrxEIgsL1oRENmicy2TF8Ap77woc5KLhqxrvrDmnhF+kdObheVRi\nRIbuba+m9ulGdL6T7tTwdzYAY0oWRdm/BAIP1POhWAeHbeLjl1PU2hWqyCUM\nn8bOcf9MwyUhsLY/XcqM/bilqda6xEA9sHiBXwGfGmNFJToNfEYMobaSwh3K\nhBdP9MI7tN5STAdag48BisU7Y5rCSwE2YZU1OXNRphQXHzJAzXQuxiGrbC2W\nkktthfTIHeQ2yCnphYTxsNQInqCVwdR+5q1iMKYNYtHJa2CIIIdtHvm+7pgz\nXBNTKqX8x2uZg0LBR8sML7hpXUPe69okvB4mIEr9iptYLQfpvj7WyZScSSpu\nqEcBg9UMgROS+3nz8jI66kZPNL9cuv0YCAnf9XFnY+NBbVFK8Z587//nyM6x\nfxpF\r\n=QyhX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.1b44b43c8.0_1596559681645_0.9921203391131581","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/typography","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46f85451eb356477422c25d06b7ae38978990724","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":22,"integrity":"sha512-29u4nBZ0rgb7xPP+dkuQ/jcK3xEQ3TdNycF3MRDlQ8RNK1D+hrW0pPXj0jzHlOObLoNUnNzttEY9RJbkHNHVvw==","signatures":[{"sig":"MEQCIHWAjxelkmE/GI/DKrF5+7aykke/vD+SkwCHY57hBZGnAiBZ/STgG90JG3pDjWqopIVr+eyeFcxvmAQc9VsPh9Uw9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPjCRA9TVsSAnZWagAAAr0P/1BZ/zf5DerfkyRm9gGS\nZkjuCEHHvwqVQqLZqRgqbveJBqoJ6nDIASf9ubUfxIUZq0iXPnhGkOGzLCBg\nyATNvhd2vx0J6qFYWb6qlcYq8vZDWA8AnCvk9eYodfuyX5LGSYLZssKBDnXW\nOmPQHfq+/I2p0r8V+JbTn7U/6T+pgDMGa5YA7pjhyngK2PbPv46Tx1LHJmYF\nf/0hAx6q92qnAxBfXK1h22rgdDVrfjXKBN8VZ7S2qqjXf6cAAaeWmILEpzkP\nPklSByTeVbVw6MZHjzbc3fYfl6mBPWErTlKtiN7gJ9fKfjh3f8IL39voX3Ea\nc1EIi+ti3gup9CpUctRwXk/U5AfPJ5WZ5XVXAw5brnLKqsDtP9vLSD1nKP2s\nkjZA6YRTdXsGQQrNOlMcf8AWwM2gvcosOibJhqOfby6fdTV7h4jclHSpCHHy\nJezSHabziRtRxYBBRL544yFOFptJ6WppKwgjbxeQvFn5R5w4lTlGdJTLq6gx\n1eGQVen/g42+BiVYxSK/vsZSJ/b1vpYfJyXFC1nDKjVkz9kXRogqdzSvvegr\nr0yXzerSOhRcAx3Ja5Q7ZAmjpA/U0E7kuTkCHvTgh/10mI6dQSDCG00p03ae\nXwPBM72EF41wRoZu4Q4AUOwdCtQmDQ2umNupiw0oN5B3pwtmC1cmLWRIoJNl\nZqwh\r\n=q1kz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e9d2e2f96.0_1596572642609_0.5040796476019833","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/typography","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"560181b4b6d217c1c835be171230afb515769d1d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b9dff0a19.0.tgz","fileCount":22,"integrity":"sha512-VFM76V7iEcc+rqA3PkIN5MZpfOyXY7cAzCJ6D0VSIc5lup6usZ30n7jjlCtREDZAp6B9oqwouwlusD2q4Czx4g==","signatures":[{"sig":"MEUCIQDjwMhxzAinL6u+BdmT53yTCnHjKJp2YDCsYpu37A7eUAIgH9faR61vEscJbZhxHOPU3I1DHG4xRlD1V87huukVafI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwYCRA9TVsSAnZWagAAyWcP/iRhb94fnBPi0CovyO+v\nplPDe56HAGI8c1yWr5xvjNVT4sA1xUU7UT1RVs7ishYul8zO4W7WfDjLfSBi\nZ2AKOXXOwu2dE+6FR2l2k7RT3LHUGvxiHnosE1tHkILDddFDvR96/tIFjIHN\nyRiuREdxJH8HwvVIX5zk5Mjjtep3PeUPGKSPGEutbOGMVP4IGKLWiOvIPrC6\nZfbOREXRwlJjZsGXvWxEx31vn/WjEpEGkfpHYsujq7IDq+IGkBcuojEsLyIz\nsqS2H4vGXnAnEZ3aUBGyxL456Z2J380sw/SCw6NQnzF+Qpacff/G5oElvvBf\nmG+bjCzC6NlzH1KlrLYdsGvwkxC/PIKkYefYq6SOeae9ISuEa0/DGdfpPeKO\ns0ifmFeFvCWKHXImzGnQmhwawoYUiOFTKOwaQwlk9f/4KOiMTvPxAhZEOom1\nPv1Up/u/jjw2SeMqPM6Z2h++JDeSJXDE8pyn2dy3xtVOWNF2zNkZ0mKV6Ubr\niCZsT8mQDfBhPVbWQBilGBtu+/VOT1nEBj5J+wrzsYXzdJRPKpxn4AG45HVG\nyHz6bjJj2VyAkWZHZ2pLq0I3JzPj03XvzbXgSloyLrR3xuB8HQXch5bQ80/r\nLtgbb3MeVmlAdaGKCnSon5w6lSiZrwswUXLF0gp2xwG5xH/ZwRYYAMLjbsBn\nUD5F\r\n=8nro\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b9dff0a19.0_1596599320384_0.6234667693760241","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/typography","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ef84561872c1211a2a8f44b55672f0347e0f52f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2bd09a706.0.tgz","fileCount":22,"integrity":"sha512-jTBExuJb0nROx8AGe1TWuE0ouTgBxnPlKpt6kbsNkuqAMawytyeUSAtuqdxPBeudh+XE/wQHFvqYc+iN7+GCSw==","signatures":[{"sig":"MEYCIQC+feLAmji5D0MuMBIZHzMu2ZSdzkxbO0ZoJwRFzeAvRwIhAKoNxM8P3/1hlxZ5PV+OQ643YrRIHYe/31xhyOIQ1tYT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1GCRA9TVsSAnZWagAAOp8P/jCdPGU9y+CBj/FgOrme\n1vs4ExJv0ogc0WsWuU5mOAQ3A3M8RpgafffBzbcjm6ciPsbdCswGZbKc8Xrm\nzi2FANt0DXVGfB/c8g8BFAQcY3DoilFMn5yFB7lmKVI6/afJCaib/eN7OtuV\nhtrDToytj4hiG2WzyxgCtrIOtsQjGZ6ZkKnkYBx4jAWKgcIxkxDziuzfAUEk\nUBEVqCthkdNyuS9LhMWQ5Xce35A2pijDyCVzMTnqfRCN5/3EXNIVutXzSMXQ\naOVw1mGiro+cguHGAvq11euUB5ocfBraXWCJbbNBd8UY/Qz41+dHe5yJ3X9i\nx2U7tPR1/Mdn8AVv5QC9E+3Zfp1MO7C/YrYl4tJYgcXrvGNVDkxiE3Fj7Byi\nhhDWEqeTiLwlKaGP3b4x4NXNqyhVqKhJCF9mL/oj0IgE576sOfnb926DXDLC\n8L/CeVA/CPLLLZwe1jsrZPg8XX13LNofpO3x0SkxFNioJoonfBeP8OXFCMs4\nLs1q2V5QpJ2NXj97nf17Y7sSvYOTcN4TcF4iiTRX6IPmKbuSfeCliOTuf7Nq\ncQRDLsk9AJ+PvwqzH3mg09dMpQRQz7ps3I2JpoWCkqLd5S7OkcIx7JLqAZwb\nhbHiezlAe4Bq8u6zW6Is5+8XlQ9CewqAgsqgRP2W7tXkC+J57LT45rWZEgGk\nbCVK\r\n=GEs5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2bd09a706.0_1596599622098_0.25736339683986764","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/typography","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e0560522f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0bf82c1fcb4fb1573d3719e714f845340a51e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e0560522f.0.tgz","fileCount":22,"integrity":"sha512-8B6+gwfdq2tfoVzbzOTqHzTd1PpYBUXI3YbmgHs+qjurOsjIXqXZGeEkUvM2MSySqMzNitb/ik2y93pAOTeb9Q==","signatures":[{"sig":"MEUCIQCGcyKRGEdCzo47qTMXp7SvZLjVC6YBSnbPrj22W9AlXAIgL9MFEoJHT1ye7+9Ns1gMSaTDp5VOBDu/mxWt3yV0kjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuolCRA9TVsSAnZWagAAVUMQAJhAlSnuV4dcOt5oPZ0x\nttKwBxCQr3KOl+iJSeVOZnXjOzBVvCAPdLb4dFZGR3GkxF/7DzMXMiElfcvL\nIcNXioi9FySDE/93tR5vA7/xOtgZ5qLhDo8B86bMhqIxlQiVvJx7cnwoJjro\nd2GhDL1WDcnFdQWBQoB8PNBFBDV4wdb7mbYZrjJR+A8EeM8xTviO4w+S1RUV\nnIITVY3/4y6SPBJQ0rhXuc8HERdaAvlSqh0PMEdp0q2bya5gpyNQxOqKyOYE\nUHb/IIR6opIAIRly7cMyruCBw0B2WahwVDp47K5ivOoG2wNWnPqDVfhbGfBI\n5YyDXxEZtdhXPdz3Dhen0jTULCXZbRRhv6WpyyJ6wOw6cABEq8TeTbcdmtGw\nqCTJyYx9zdyYykN4QOxXAl4bRiuhYqKYARr2IwG1zxRvlJgiAvyKaA+6tC4Z\nuFltj2SUOUqUB6NojK3bhYqVvYWqLd3bQIYrGKYFK+xRtHR2podit/bUDr9A\nRgMN5fBUlPIkaYFoUbY2JUeH5On6pGd8YaXM+CMHpYRqCaWNWEefVDqiU0Tj\nsaG1VEOz6qt8B6z/eVwjjrDqNpYVMWdHEcaf2WIuyFu/03G1Vh/6sEhdnOWJ\nmUxOFDCX1/ROVnZ3KhXOs/XboPBk2UR8d0PzA6LWs4JWPspn03TYgNqT/ySj\n0b65\r\n=Yzwf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e0560522f.0_1596647973139_0.5166844141010778","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/typography","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae929efb52608d8e39fef4f633c78f4b02003423","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":22,"integrity":"sha512-+4b3zZEvEUJcEVeMJ8n5g2OG1rjchHlb914aOz/fHWsFULCTCjKam0xfPjNPeew5RNKFmMZ/FDp1C04Tq29zYg==","signatures":[{"sig":"MEQCIGb/394EVHWp1v/wQ8hy3ihG9RNIbLADPkqogL9FHWKuAiB7FoxvXR6BD15YlhuPY0QowLDmuct2KxCbb/aL49WvZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7GCRA9TVsSAnZWagAA+mgQAI9wkrIaO4ETAKa1W/am\nBdZ0Zl5M48NYJ90AqiMIRFUy7C6756NOQX4YOzKce5xnul3HNPapZydshwZK\nEJcstK+onNshBZGaRppdQoEsFW+qUiUnoq/d2rcfZVoUbNTOsCmE9E4Rk5F3\n8Sk/JIJOQsNJP14blFi78ppa1Uxbn8fIzhYaB43hN3Cph9+CMZyKQbGNqOi0\nyn65RbCMDMSI0kd3H3figVZpAO4HuXvbe8u1bOAXebD9VtFXoCCAB5tKvuVR\nnHzTrrnTz9b19bFskxrYsZYZyYMhWJcR4MNyE4DvdDCzJihklmN3ZgJJlMmt\nJbU1kEdwHcB5p/aREd9KtHXKhuafunOL/ahuN7a2DQqeq6g6ZcAKIG6GFxxL\nDDXreG7A4uq14YHI6MZ6V5ddBuFLkdNYwTOVoE+qr/rfi+HZheXiTfyIpXHP\n73wwjm7QgN70i704X/LrnUfqRJTkbfbbebUNYx3yj84wWEwiFCHmgcHb2uwM\n/TnSHDF2HCVSsGK3mXCzUxtFeNeG9LTnJ5qWUHxJoE3aLtz334a7pictxW4S\nAL5E7n5yONiumsA5PANRAxxu2Aim16wBWMcz4BmvkIonMW4PwxzFp2Ll28KE\nQDvZgg4Z6EihDfDzHz2E8+BSvPKVa5dtJI+wVKpanxx9dTLoiezluJo5apNq\nKxtA\r\n=aMxD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.08ca4d0ec.0_1596649158410_0.6488560228698519","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/typography","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.08090126b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05c1c4503e5fb888ec17de5c169634929599770a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.08090126b.0.tgz","fileCount":22,"integrity":"sha512-q4voI2Hc+Pm/VQHfqFAa5B+xSDILGo137lY4y7O3O6GEdjnmsGF6w/9FBjbrQl4S9DIYWp6ING4m1f25eUopkQ==","signatures":[{"sig":"MEYCIQC9bn8ETbQNUkTrSdxwL8GYFMJTfUBXdCRCVHYqTKzoHgIhAMmOuq/kVWSdOdYlH9uIUbGsddk1nNlkSYM8UUCyV8b2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrOCRA9TVsSAnZWagAAVYEP/ieX+h6fltIVRINz0Wcv\nZOfRLYYBHRAIxHLu+ZSlXxml6WGMTE6ygusVmRX/ljiCE9dmyML7eO7dJ2xR\ngR/upm9yeWT3odt/nvo0q+uavQC2WyidMBr1srnpr/gd10dkhfuMqWC/gJRW\n9sU8tAKn2beJkQDxhnYkM+Lxujl4cF+zmmRH7CODJYf9g4iP6emaff48Rzx0\ntr/Zo8+T50bjvQ71Yziw0J6Bvc6YVindJof4RqBicxYz4NeyCmZjwzaaRvhP\n9m9hKKiy5zR6gAbdYzpNOu8LS0LNGvePrFIVcWOIzwnfjxgiYXTeiMUfA/so\n2Ot8pVjqD/WOylqb9EIepo4BVyfG51EW45LgATgnRMKQRGkX5CFyM/LojkWc\neE8sSB4N1VM6j1LMFbO/p63r+Tk5hyoJlqlAMAnxJM9lsDUd2N8iU5tPnYpI\nplThBDSR9Fv19uOTfaC5AMH4ICRYeHFrnEHEpCqABxzVaOebwIo6PxC6fDAf\nNJEtsYnZkVRcqhMif+nyDKdKJG1b6/O3KrkQo0OkkV78JIjDoYqNglOCNDnk\nLmTLqt2kPvhKFxGVz4EPmmrAWkAZXbT0TR3vXjeWjoj1CtNmf4WUfZ4MGSSp\nCx+xHiH96hZ/y4tI9Vb7VCHKvmJG2fwdmupBIhRPiz+vDWLN0ZMCrSv5ygDd\nrIRi\r\n=+Lgm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.08090126b.0_1596742350131_0.7916582611188425","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/typography","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49ba44848711afa09ccae8284d9d7184b8225b36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":22,"integrity":"sha512-8RbYCSz8SwDvqkzifz7BpQl8/ZL0/Xnanjlj8qBf4VeQ6L2yTLs9kfXCoeDEDuNCkDCyfv/ncmFSphDT6r64JQ==","signatures":[{"sig":"MEUCICYcfw6P3HjLH94mHXPDspsLMtYdwX6IFPhzemHB3Tb2AiEA0+6v/0jF6eT26TI83ZkMHbCY+M2JqFayqP14Mb7VNQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHr7CRA9TVsSAnZWagAAewsP/1+l2/pTvyqGHIlf/00a\n1EU4Bkl6WJ19Kz7xC9nk6LOZs0aVg0Ula5xbtZVJwYZzrnrzf3/7HYjk1QkM\ndk+rAwrqDRW7ERwcdSIGs13Yzl4LVpC2OdJ+xyXMD4aohyUYRGk+tacMqAga\ndTDwzog5JJhomjEOTkFZLKI0HddYly4+AIKPFv/GnAG7VkOu1iXFTZGybw4l\n6inCsWOdCqCmpupuq5866ZPb9Tbi3iq92irP+8gqqy8Lt5SaK/0PJo2HUoAc\ndaag/n0tBg9rAZlLlKp0uL+5wManC2l8SD22lMJNFNijLnwgi4YCyb9pT7b/\nnd3t5O3HtU3+adKOMxXq8bfAAFoULGxPjs506eAQAH/KCoWqIR8gUUwjCZVN\nvN+oVDQ1OuZsUsVEKfA+l4tiaiTG81uqm932rV9JJIqoD8WtrLVFLSZwLywC\nfwMp/qU+74gkLiec0MwFHwI9dF7Gjd4kw32oYYztma9TfdL8vSAUYb+YRlZm\n9wNJ9UNLR2jBQhub85egf6o6X0xSNSuB+Q1D9io7Hz4KaVCnzjFAuS0w6Ihj\n7YRSGxkNuZntvYW18uv94SVy66GtPq58ErB68viiziwXMETxpBK8afAG4DYW\nooAX5+j8XxrRwjuf+3W8JCZ4O2oh/6HG1U9EPfzEikcF+GWxmMaj2JxPU400\nLtit\r\n=XZ3I\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e8bf5b2ac.0_1596750586856_0.31698043777327367","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/typography","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e3b746208.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007ee38fb1b13527ba08b30d8e6798aabdd07dda","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e3b746208.0.tgz","fileCount":22,"integrity":"sha512-xa3TMIAsGJsqcK+PXSLDSYCIPUbxCR+1mZImYUcmaxA+e0Da7J2hxivfYjKN64qwGPwX8Y15rAIgXATbWrpmOg==","signatures":[{"sig":"MEUCIFzHfdJkpQoxKDYpGvqRGbkyulJ9h86Rf8fdspPrSxo/AiEAqwozq6xTiB1Oq4ANWVXG/R2y7d5OJ9aVOveaqPDDTUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":107044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOaCRA9TVsSAnZWagAAkXwP/3UhrIIDhWehmib0LJIc\nsYJx5VCgGYPPjmhFiaGoXuOdY2ZtAgO5F/A+23o3zvsdmyjDPkMY2Q73WYsK\noqjfw+REux6NuxPVfOomH8ryBPAFHVSV6k18i2eyDOMy5Celccl43lCeVo6X\npkyI/tlwvHQV7N2tk9VHju25G+6YuKHqKnGiRUKWvOsajHoqYENYyiP18lje\nkn6qylwbSQVDvRemthXwFW89SkDbwWOetDz2a6Hi11tVL+9XzYiNrJY2Mejl\nFoslXYFSbyV9G4K9aHsegn1VorMSgq6pOacatXlM0N7OsQpC/wlG+nJWI/RX\n6u1ZBZw+1Fh8mSUZOngLM9ROiX9KobSw5tm3QfiEztKtdEfQO4oBi7pBAOMb\nUR03G3fCnRBfH7dd0Wk+FwuNWbd6xafjtsPQKbqteuOBm60uAPFVCuGkhgc8\noQC+Qj5wGkE9uQXIte5qouttmVv1hgtrDPFpQeIg82isn6BO7VoW8TYwUTAP\nW56KSIM0S5DfNNzAwfR5s3tRVq8SP+DLbDfcgRDYAkz6+DMkTiGfSU0vfvwk\nCi1DRKTCbXMIOzG2Upd06VCzsWHpya/k0KW+kyZ8dz/6cF4b32x75JkcbJn3\nnAj/CkFjG7jp9l2sMk3e2RbrE5YLSHZyuhUnvHUyfl/FP5FY3jpsjvZIQFBV\n3Iig\r\n=xs81\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e3b746208.0_1596752793577_0.3981133927861311","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/typography","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.96a640534.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b1b4bda8ea28529a5f2a2ed7b3d5be5c169570b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.96a640534.0.tgz","fileCount":22,"integrity":"sha512-K7TR9UMUvPyA5GldJcVopL+8hZMF7ij4MegSyAtfY9uUZ1BWdnoFE9Ton8DTSvU04SCdr08u2wGmpOutvAs4VQ==","signatures":[{"sig":"MEQCIGVYdNXSf4L7RpFqH6fHdY/5PRNgwzp7hiAgxOEnXT9DAiA6QLrd+qRQaoyFias7y8au6Uoy7pJ9bGRMYBdm4SI6lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcOCRA9TVsSAnZWagAAIeAP/3wzpa+jU1FLvOo4OJfc\nMPpHmBlKu+FF0jkXD/6/1udc84YGhgSeIXqdgN39wQykhh2F0PbKKtKrJuEn\n3A24BougtZh3xD9EY0aenOlgLJXoK13GDYf6hlKLllY7lhhY5kA7lwNojmnJ\nEVXqBFqMRi6bvSUWHPfL7yrvHxkGYiCh10yoQ2bBlXCw+Q6mtNsr7Jkckw/o\n+lRuf+oBYdxLRexBnjlW2WVy8OiGWAwz5Hr2Nw2hzX+QLA5CZ6Lo9vNzzaKW\nRdwVASWQHq6v8s8mAf42WsXSxASjC6lqO+aVlqAZav1MoAVmRRVfEEOWgKb8\nNxjFZEB6WypcGwc1WtpGSuaMSq/sTkSQoWcLJNUs46GLykVl7soEayeaxlO0\nEZGvdCfhleXQ4ol4K74sbX72UBbPjCqlQaTJtEY6A1QhfAAsDw2xCQRwERQP\nCCX3w2StPeG2BivvklfnXs1c0GOiekGM5kX81aE8czqLxK94o1cEt6Qp0LCT\n9VbxDBxMfO9DwFmI9mC7T6/adUAACnxjr8Cadh2030lz/3Xy3Mf7Z7sMqkPh\nbh0RJVxxkHI21vlGXcyXLpCsI0KRqGp7vStkv6NCRcNq/sWBfOHZSBUv6E6I\nOrN1RFxpE6pxHuii2ccHtdN6dmbfv7GDLJ1+GgX2dkFZfY2xBhjp+A2FRNCm\nT5gY\r\n=W340\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.96a640534.0_1596753678449_0.6602070485053344","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/typography","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af69427a136ddd3dae8cd258cef4af79ba5a00c5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.9f9aac825.0.tgz","fileCount":22,"integrity":"sha512-CqqLEPh5GUm3MZIk3NX/bKH2myuaJ+gQmnfzBjvgEwaLUStsuZehS9jIST3Nh75NP08c72ZQL+/DDtIXC/kXvw==","signatures":[{"sig":"MEYCIQClDZGLf1/ULS0wBVXgiMdL3SaNUb98AjOBJWvsa6oEngIhAKmWI2xYgPuKZPYnrWeTU+g2Gwhgf2uSmCam/HyJJ3Ox","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7ACRA9TVsSAnZWagAAqM8P/2zoh05w6ewlsmzS2XEe\nq6+jRdu4Sif3JzSaUh8cjSmw9lheYl2Wa1iPOJuEnNxBfzS8u3LcXLo23s1g\n3m6ibpInoJh0RLb1AKlwMJqfuk3lbOLXcMB1fJXbPG7tre6oiGJB4t+ZQIln\n0DkClOsS7Zhyl5CVVYeXGFEEc1XaPM+4oa6vK+ZQSUUZPOkjGZ7aIu57Gr0u\nM/5rzCPzzjzrUBioVPp76dUg6GcXLVSzFImJRQexIJYTxbyeF9Bs560p0OUD\nOiOdFC+MYrYu6egDr+EaeNczWfEdRdDbFLpEJ+9mR6DpnsqVQKnt1iWVrFOW\ndS1hprk3tEqZtl7957yx0o6fleBT1PqLlEfxXzvy0dQIQMDK1m2bR8AZPhwN\nmbZR6yWUk0RXNbqcu1cPr4GJD7O+59myf0odysZmviP92djcnoucIk7bJZYD\nxgzjSS+Yzk1kCopoSB2BNRz4uwbvxp3bUCB0YxKvG451ATvMViWrpomoEjZF\nBekS7OJmjq0PC70REQZsxLfD+kjQiWcCWJ9GFL7kINLDmoewgBlY/H1XgpVa\nHZUWL5sw8jpVmDtd0YMYx1KrIbX7PL31MaJIdPzW5KVevw7g/f1MCdFicrNF\nqKFtURzVjh+zWb66kk3lK1q1pJE7EcTmEoDoGEL5AuQnahMuq3Mrdh9LT9sI\n3F9f\r\n=lW9a\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.9f9aac825.0_1596833472185_0.044888690723529745","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/typography","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3afb4689acf8544987d9a29d240084bacd84a710","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fc65fd00b.0.tgz","fileCount":22,"integrity":"sha512-Gv2zdfUZp8BG77OLa/QaU1sM17oEVnDdbLjvdfOsMvdYWdY2F6QVwHAYGp4u7dTPKOLTMxwAOMBnp3583Zbrfw==","signatures":[{"sig":"MEUCIQDjGcZsG2GUhWmq4BOu3wsJAwg8Wm8g+QautyL3AMIxEwIgI5R6IW+s4zMenm6Uecek2frIUi0b8sZ906KuqzNPOAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWWuCRA9TVsSAnZWagAAr/0P/jnYx6IIZ4jNc5nS6rbs\nIg3+gdPZk46RfhW+heTPaAvwuacdLthik1R2JARsi98/f1JBqQ8zZF8BOk9R\nJWvyZo3859bSrDAO7ANVTAsAv/WLjhKT2EzEBX7Ce3Mk5YI2YpN4rlEqArFA\nQ26hWR0TzjZhCWw/zJxUU5909axv3mCdQDIDL1Q3YBTsOLTTe355Ef8dlzmP\nXI3v2NVAKkCTq0zmDq4E6bOVVA2FKDTm5mrhCtR3f7d2IgJWPUhf/lto1nIs\nEgITOmwPhcYvO2lQdpLQrHFKed93TyWllk7W6h52WqZlvk9NhQCPR8KqIoVB\nIg85g4RWWURLpnNyUuac7T6vPPeBFfSC/UeRhGy6VTcWks/kTJZ9r5Hp5ExQ\nXe8LecuINt+wzHON+wT7Cj29La623WKAgiAAjqpIK5yPyDQjVJ3HLGom1/Pa\nTCshogyffPcgtNH2SXCI33t39tYx2ZkaiR5mN08rKT9Hll5s7/MQduW/moIZ\nwjoB9o/9BvFOT0RL8oxgROTebIjRaKP16NVpKk9PPvrcNaczSHFiZqqFTwef\nYumPE+mCQbEl1Txy3CJQ1mB+KoFfcUluHZY51p5yDfRnqN+u5k4mQ+JrbMZY\nxePI0HvOyIpKCKYSYbb75K8tqfMRzX+YlhnKIbC1W3YhSBnO1rY0LkHq2f8i\nPoy3\r\n=rJnv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fc65fd00b.0_1597072814271_0.04939961563788886","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/typography","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a3b23225051861dbff88179dc3d9a815e914964","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.02e372c5f.0.tgz","fileCount":22,"integrity":"sha512-BcGS+LlRzqatraf8xwpIaWArLVqEbvK7TVkxZnoD12miZdowpIvouBnhv4IhDt0aC8ITZspJOuzZ6+0wJ/m94g==","signatures":[{"sig":"MEYCIQC/o7sglc1wn6xMh9fm9a7hw/KslH8unO++GTU2nFnFmQIhAIjUcVpWXIxWruaRUpelzAaVm4TGJ0THG1nfnp3sBuTp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxMCRA9TVsSAnZWagAAYBkP/jw6s5wrPMHa0FpYIZDr\niO4i4HSDvSR+QHGdLnrh5F7d7VlUbTsjb6va0vbjPS7XgyYHUfSyvp0/VhYW\nl1P0HSdOmoqowTLvAUNHMGsw4qAoIVCeWKRwZCJpLlpl2tMJ5q/YMuEt0yRQ\n+kZby2rlAeIzuRteGYIrZkXAQzlUuWhFSCIU7rWuiMCuhHf+cU+iFa0Sojls\n4dVQcO/LyqLaOuWE1L6KNhfqrozd7NCDhMlcUpgItE1iEge4hPtrJa/z72D8\noXlbMsqmx+t8kD0ObT+6Bo/DFgefgm6HgM2ZAMwHTGxkLDkUiWP1NtbaL0sA\nKma3V6xSWhDomZfG7lt1rdARntTtiHl7ZyhzBPrZf4wYW4r1w9ngjaNxL7rt\njHZJGrrs8LJs8c6Uj3QCUiDfTQBYUQpBi7IbFly/yLgVdv+uNFDBFjwukIdg\n6nO8TOqHtyPc/stKL77tKhFeDhsi12EoTc5QRRyGvkt9VZs35jDAFZUxr72T\ni6lbZn201rhrMPbyHsJGT2pOKnoz4dXNGRVV5w35rEAXEy2u+DcnSeOC9dyG\nZoxW7zbwz7IY+ePLlv3mwidCUXpdgUiYSoUQFSplZt4luWNwAEMvH3Y755aE\nCOHYEuF0ajBZR2LoUlS42iKvfW8ksH78eY6+ZvAlrbXjmQJx9mB5YzdAqjUJ\nhXul\r\n=CYnD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.02e372c5f.0_1597074507409_0.7515023797115417","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/typography","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed7fe266dc4b70452171c0e604af8d7db282172","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.66669e3b6.0.tgz","fileCount":22,"integrity":"sha512-WQ3Byd4H5+o840xj9zmKWdnpbUfHYzjaE1KC2BDf+D2tX2K+ztyA7XSnkmXWRzcdY++7RYHLIhcNxC1dH7MeSQ==","signatures":[{"sig":"MEUCIQDz1WMn5wwhZNYsi1xKzSomBSTGaIf/2Vbvj2evdtrL6wIgFcCRZFmUAg4N8pCohQaoUJniCLEUEggNFzkxy6E1fMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW04CRA9TVsSAnZWagAACfwP/R+LpMmmuuncOkWNAc2S\nULc1zui6iTdxRKY+nFyX74GYIhvxnQDi+ExnnUQIT16qKW1qQ+YBKqhrQPtH\nhA72rw3ONGwCNrXM5KEVo8Gm761y1BaFZKMqRlAGdmTIdAZYLcgTSrTOer7N\naA5SXJfLFzFdGkXroMU0VjqoB1pLDaSY8s1vMVT0Qo/JjBpsVCcD37y/G7gM\njY7Xbg8JVxGIr4EQqMnBfCHiS5CYP23qcpaVxjdH79mXsEMwhaeUhZObQF3e\ntmR4UMn3yoUIhdZSj5R2VqKx0JwOYMiJbkNsPec5+jHDjuIaOmHRXgbPXfSJ\nmOYx2w+PnFRWLJMnN6UpzZFyRDNGt6cn0Ikfsjf78A9xeepKtv59EulNXlA5\nHqsIPgJtUIPnxDBFld04LVSa8iPmrOcfqO/ee5wqNudU0rWJYY0emqE2Q2wm\noV3W8kOYt/UGWoCr9vYx1mjtXzXuGIHWF3QbNEVqKhsk62xPLbNnf9GgdYT2\nRkt4UFsY17CbKz5sVPV3PghYNyKJBZTltfaiWL6GV+iIGNb1p0sAN1KS2Qwp\nFybWOmTrzOORnkWAZC4tAVFqMiEP/ItmYoXl9kH47Vwz8LdtvMNMTx+ffwcw\nx4WxNUOIVeku+NYdj8WmAM1Ctjywzt/fzXOBrHXSPmaLjMEeS4xMheATJ7wv\n5iMj\r\n=Khzc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.66669e3b6.0_1597074744073_0.8157796908406283","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/typography","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d89809393574f94ae6ddd29b6e5388e4c01b90e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.6d1ea9761.0.tgz","fileCount":22,"integrity":"sha512-knvgQVWD9aco2cHyduE8WGVlUckvlEUjHdO9tnxoLnfKGam6MDNOL3rd2iPV8i7pSxcaTcSkhPTp7K6OzkiTcg==","signatures":[{"sig":"MEUCIQDT0OmprqOoP234A69mcgQV68I07xSUV1hHERc2B111QAIgLX/NEWo8oTLdEOhMYfckUlxWqUWi08uAXFCzzIzwWWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquMCRA9TVsSAnZWagAAWksP/18OYKrKLCecbkwRpRqm\n1PqJCR8NePSjarlHNgyjNj0azagYjeewaIIAaK9tRYDjiGu2Nzqe3HsBKDN6\nSJ7x2l+KFU8K3JIBVq7UuF9h/rHH3yGoo12H4j8V/UD8xWh3gul35f0QXadi\noT9F5IfPUhGKFCl+SxilFtHd3T7Tby9Q6C5N1mnTcetnAjixFvJTJXML227J\nrVkqZssGztlDuj7PpAhw9aaGPs1uuLkVHzOL8ysgIE2AT4XPrzh0pKLhYRzq\nZt/ff4JBk5k8SJUs2YXN2Zx7tsH0pzSl+gRL7SC7tcKwmOW4CfEo7MGuZ1bB\nhmU8rftus0yRMd2Yy1MnmQ8UkixWtfpQjCneAe628rRW4DO5DzpYHd3fUS5F\nuwVAUtTVIidP4oosx4PsgaqDG0/pKAISjfg6GbBdQLJ0XHUMzRupIPZJ8pNn\nCasSB5yLCuro8WXAUIwXi6xFCCJW7gI1TBD4dl09y+x9+FwkSF5QVAylcHRq\nlQuCF37Q5OSWgQ1NOE4Y541s1Pf6e5umohZ1CRUXca3oQUHfJDpBlz7eeDES\niDy7FCWntYUhcsiz/I2OHDw/++R7HE+YQ0O4GYgZDLjb5cE9Jw5ruAb6+53N\ndizKx0W2vARSPe2PqsJ+G5MWSxhWdDJAXAuZxOajdQxBJRAJfRsOzQoH3Bdz\nNEPY\r\n=VCzq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.6d1ea9761.0_1597156236053_0.16814094039541994","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/typography","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9abf23cfa586c942a5a08c93bcfbc8e1d47fb010","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.79414bf9f.0.tgz","fileCount":22,"integrity":"sha512-+EcFmqAMc4n+XRjGZBYlfrWJlXYBYot+y+JuD5tyG8wz42dylpAuC0KYzeHNfZXjxmEPh3aObaQsZGuV8EbBGg==","signatures":[{"sig":"MEUCIQCJeykN07gyVoV+Bx/1MgqrFcBZnqQMzTEM0JrU4kcVYAIgKV/rt6k5cv8JVc5xA/r0BX3pHIqJ9UgRahx2KqbzhmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":100934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusSCRA9TVsSAnZWagAA2aoP/AmsNwMfUoubOrk7AAza\nv35MIQNGKeiviVZNeVzpKEBtz+UZOTKPC7u9rp7RqLQyrKvwtsn9RhlWURnp\nwEW4zocRDCzrlMAZSPFX3Wvnvm8Og1yX0Iza8D8LlWPxWXtTHIk68ic6lxZx\ncUudPXj32VgJ/EXQUjRWkfNu10vZGeSa5WKMh8enbvMhPBcHYkY+2MGNhkmN\nT2tMBXL6UdyWaQDuD9DhA1BwTeBscnlYBJFWmIPkin0YfCsdNwTYPO+nhcQF\n6U3ZhPXzUrugvC7f2h4uNjE3p6nBh4Fxq++D9Z6kBIM0+ljJcZyiLXkPtKnm\nB8tAoYc/c4Of6D7c2ZuQNWvmdfQph4G2gYYJQA3WCrkVhtX5p0iMIWTEqB4y\nr8vdcKVGujBai2C6+tf8OQZfZOnL8uBq9S+0gGSpZ8oIrbKg4jnvWj2pLa/Z\n7B3wKqntl/LdPgsLMwH8+GFfAE+9OeWSPPG+NCPAo82P0U2VRhoHmfHNlGWY\nAlzbsfyhsPhNVxj1dv15q7h0ViDl1N/CNmCk7DR3WisQrw0CPjbD+Ephhmk4\nF/1LV90BNxCKyLqfGD5lXvsas3nskLJOfvnNgZZu/+RrOxTWP2bQv0WsMBMj\nDd1nInW/gesq6a7lMXh8qjdBBKNeN7kD5AArh9JxRcU3/cKhQ2PE4aoTm44Y\nQESy\r\n=Md55\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.79414bf9f.0_1597172497702_0.800591575698848","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/typography","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.85a5272df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d26a18f0adbdfc958b18b9d9453385cfd1f9728f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.85a5272df.0.tgz","fileCount":22,"integrity":"sha512-ut/lgYMfDkG8pIoYcxX3VzGoOOVrr8KYSDuZbiUYSdsY0dQzYesZzK7MBCzN1H6jSUlU0i70DyvL/uzMauKOdw==","signatures":[{"sig":"MEUCIQD4iPhcLjmYs/kjb8ZPbtCFRinYI/bFWcxtJ8VxHxx1SwIgLV8Kxzp2qJ7VVOcGIX46CZ9f21ui5rlaGNOQZQfX1nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqgCRA9TVsSAnZWagAA11sP/2OVX3ckuy3m3q6oRQfe\n2FcAvSdWrSRQX4JUIkUnLDyx1wOPsfqge1NNRFde86geAUBNrRae69XhaPON\nrAMRolC86YpdJNwthl51a3e8gNBxQ/8mQ1cuK4FDEgX8VgHKo1zN2Og8TOkd\nLXzTcLKqF0AOT3xOHskDUeqAEhYrh5RzuypkhRjt7bdx2HvpLvJPPYCH+/X8\niQqqJ4ZLxhQA1nmspNNE6nslrgPkwCwYOt75R8aHdr0AYQ8tRubEGp9vDPeJ\nx9Ujm7o3pyV1jI5qQJzGxjQcYFguHKoHfV+PfWjRyWiqbn2666wocdSeS9oa\nT6/gRYe5LM6C/ashPM63Hda4GLi/XolWJgjFbXfodJDdHV/q4YEFRKe251Yv\nlbTJPJpwPpGx/KRIwhpgtm1xqhVvu8KVwDp42DZXRdBijrVkCKQ74BPJbg0G\ne8DS8L/17lZO5LLZ5zhREENUqCpEZC+FRxW13zDu6jT5AEDngdYOCDOqiVl1\nZd2EzN4pjp+eAMgz5mCkw7UNjC7B4h3KFxmENvBQAegA8kKa2qkpKZELoeGK\nDdTLG7ZgO5v/emr8goKoUZJ/SWaUZwYzqYbxPqzwZisq9frcWpI2lH3lNslB\nYsH3ZN6kPBRIDkYV9HFWl39gq/0xRC8QKBHR7Zbv0fJsWyiDQwqpvM0yHih0\nPlpn\r\n=0ebB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.85a5272df.0_1597176480266_0.41683571337426306","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/typography","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4525bebfd2472f8ef0dd79908c42a36c44ea7f6b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fda053eb8.0.tgz","fileCount":22,"integrity":"sha512-A0uE5ZSNvsorwpHGDOCvHww6rbQ9QD8uYVfK7qFdkoU/BvvkxGU+yHd43V2RHWqtxOD8raTG+7yOSHNY+1C03A==","signatures":[{"sig":"MEYCIQCry8VIK8tznIh51yvkAUXbwDq2wSIM5fvvP1zlKxKGeQIhAN5SHiwQmPxivuXD7sFu4V8yKIKoYlcDCz/neMBYwqc9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEsuCRA9TVsSAnZWagAA7m8P/12NmUXE8NfTdyGabaHY\nbPZxrZNTgTaBDRyN/10BF4+x2tjIqo+eZ4MdU1KyILiGr1czr7ZgHmEH8ZwF\nTEEI3cSUZt05HjJJTFjEafa7yR00XBE8S1dJ2F2K1JP8yl72VQ/U6aTJ/fMM\nakccQMFKBrbrNpmFK6B9Hoo1SX2SMpfvmv2jq9lp+iwdlJV3WwiQm9jQn4k1\nV0vYhq/xIFjqOE+hsLfthUT/BoHrILixgn9jdBqpA9DLGrphDz6jxn4JVu6b\n+MmmvlrORWhyXAiwxr3MjGGu8eE1OWuaipNIEY+Nqm1cY7sP1bTSGAQd/cUl\nNJgS78TBPqHa4Ysv3io5+rUOalrJt/xP2TyjErzBJ9e6gLUIW8xK2kKWOFdr\n/nIRpkoMYDMT+Yt14o0MXTLvdWYkGmqQBGR87K+1+NPxUiaGH2oLA2RnK8Cg\nNOGl7FnyGPPqP9qPwT6u1mYWYzowWnRZcx+nYJyR3VhMzZuRS5w91nKup8eQ\nJKdbVq2Ty4JJXlbXuKAWcCH+4YU09m8jHnUhW7PNaqu+wmedUfQWKMER5b2r\nglWu97NJQjqXSPmifaIEjNiPGYtAt8+y7nzzbgHfsq4A3QaiGVpmvDhdw8Xn\nBXb6G0/pXCGNL4MFriYHX3xySlx49kV0W0B0clcUhSPgYJF+6aOBRYlN7Ep4\nYk3V\r\n=zy6F\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fda053eb8.0_1597262638105_0.7067055758308796","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/typography","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.760873445.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d98bad45639870061f3dd1d8c416dd10673cba44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.760873445.0.tgz","fileCount":22,"integrity":"sha512-9XYi8oAfTEcOHxBWVdCpAYynd3rIhu2ULHxy1OoRduA3ypWZdcK2/A3uvkOwGLuO1xxmM+8li7kjQXp/Fnra7w==","signatures":[{"sig":"MEUCIC0nlgt6Iw19SBWU91puZV0l1coE9B/1ZTGVnwaZDbZwAiEAsjktCpQniD439r/vtM2Dw7+wrEpRMt8Dex+PGkvHjAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJqCRA9TVsSAnZWagAA2+0P/ieC7eRpmaWG1wO3Rqyf\nLy5//sc+Kgpep6sQS6ss7yGdvHEePBvKb2tY6slLPBOhTrzVW0NTUHEhoewf\ncTubN6MsobgFjOdUVf+z3vmRrYsmriYq7u5LRHHqPBg6OcWaVUdrNQz4NMDj\n1QNe1n1y7IxugewyjKBOvmBybg9niPZcuylGBkZPyH+8qeKTdYKnNvdDo8UJ\nv2QAKvyjWpqFBFzoUyOojhzv2XsjbSHyLi6eWnocOhod74ELnrCDo4qh/FiU\nMpSqex88Ev3v0yQtkA1iZ55sUwYUUQ9XsRbFIj8wVABz5TEjoAq4jv5Nx4vO\nFj/2O1GKtEcZmkNofb4yWb+BkhxZH/RhB77q8RljHgUDNArg6JbRGmGwC0y1\nkueOHXCMa3Onn1sEcMjEtlsZ7LZgiUgy/osEzm3yIeJV/YHyX02U411uqQGB\nZNmEYcVKuFGmoUT+2fQTMf5fjy5p3zvpYyPU+eR961raQtKvqtzsoIKeDGZJ\n144QRZ4lt6LDUqhPoKA4kw6Bajmcikbhmyoy6waXYn7qXlK9kUym8lu8RaYu\nDWot/tc3ystyy72Y0HC9i1xadUVg6wwfxfhBJqYeqNWdLkkVPzSLX9D+y+AH\niQQ96jk5YMvZXojfXgwAfwaKEq4XXhl8UNQFmQcUwW2SO20HtDmCAhzMze/y\n+xrg\r\n=jqZo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.760873445.0_1597268585271_0.8620773478064825","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/typography","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a40dc86b6bdc41fc27ff1e5943cabe8df856d35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2f4711a30.0.tgz","fileCount":22,"integrity":"sha512-X7Vef+SqGI2jdF90Yh6g4fyPjUaA2BNG7k/S4gqOPpMdtDPUdcNAmNX0bxEDxuB1I2o4rBLEkMw0C3oUKwv8Sw==","signatures":[{"sig":"MEUCIQDHLLv0JhlGDcjVOnt+OGuVsbFh6vuOgXoJSKCOCeQx1gIgfx0vhf3msrjuD5ReGpmiUdUNuQSK0ig5/fQUBhQ5djU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGS8CRA9TVsSAnZWagAARMIP/jhRwvPRE7cKGM1bAMuf\nkM9ngFeiBTpppJ7PLlJuWEA0RMnNIO0zr4twdtGP6uvdlQf9b82xSR5JmLi+\nMxT+Y2ZfPc05x42J5UtPsrQSGnWxECLAw2d9UuhSwVUhmI+To2mJ8L1nghKq\nZ6MCFwlKC3xA90kR+2iDAIRJGlhGcfm7cBeL3dEW/FbkVnfsnZDvLwNVgvAB\n0TMs5vNbRxuqvfF8j04Ekq4wgHooqPO7l34xZWQjg4GG1xiP/1BdqXXrC59a\nBV7PsQ27h97M1GObSV77NDpJ87nbkvGT7XNTy5+h9looxBIa1tnv3bDukkYN\nVNV37p/UrVlnrEHtXDkP+vnANgno6IxQDLc+XW+GdZ8BkI1xAyZMNQTvCPE5\nxpXwo63oTfBJObCHKLaNPBCAiQeOxknXAsRT+G0qHv4aAFHZi2UQsyV652gf\nqut2/OLgCuT02M/pAJAckiB8Egh8jH/y2fhIJP1yFF7Ljw5+NlE1MWDGNmoU\nGqEF4b1izxd38sb/IjmVjbnN5ipLSrqSaZELNtpZsr5UCJQOK7Ybmt1UqHjR\nm91Mf6cbFkqXkY+JvjcA4uKOMCJfBhXEW1L8Bv1/KjPHrVx0x08MNvcpHa3f\n7q214i53CIQnRk6zmV/Bf5O27NyfaoktipfgmNtW6+tjx82DFQkONdpMA+Bf\nXR/U\r\n=4/Ke\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2f4711a30.0_1597269180051_0.0809780190854994","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/typography","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12215b3ebf26b7828848aba032c81aa6fff6a0f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2d72f3659.0.tgz","fileCount":22,"integrity":"sha512-Auy4nu3zPDiiDPeDJQA/7/J1tNiePDO6sjCiLrMvx0qdF2GKX2lycRZgwL5+6jq2vUJfIsm5hKZhxmX6CvNeHQ==","signatures":[{"sig":"MEQCIFQrAwh3M2FEIbBz1fnLjE7Hgwo3VFAnW5Fs6VQpNMSrAiBugtLLDN/WCyWk2qu39BXAZA2rV+lLhnAE0nJlmGD+GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaBCRA9TVsSAnZWagAA/LwP+wcES0ZNQI183FW+eYvt\nuhSOViJ08JnJGa5B9N5HAzwgvC3TF45tre3XEw5acbPi/Llp4NYexFUuLJtn\nOSN7Ye+sX8c1zf5Uwg8Pw29Vz6U9gJRhCc7wGIj9LB7q7aK9LPps6uyFZpk+\nq4KyTZG9tTZYmzD/6NIE3SOS9tuyeEVS/76fr5XoQ9QVG7R5XYO5RpHpseNp\n5NwAI3XMp6jYTP7izs9KiWoZf+90Awvsa7w47qoi/Nliz6jAnc2B8hDNR9Vx\n1E7ZVJOPJxg1I+gcVJDWlbHcSP6SqxNCjntLJhe6DFaAfG3QKega3MeAPyE9\nSZSBkbV27gps+psMikBk1aG+TuJvraFXZOHNXOMUisnaLic/LATlLRFTc7nv\nHK7IjbJfD6NwNXLWwyu8aic+VDnngAC62ufnEsJM3XxvAOF8RLV8AoSw4F2j\nGW0jyfAcWTxDMhbq7WlAE7VAMPVX2D+2DomDkVbNqHYklNmJEUDoMdAnKpQB\n6+4FfZjSYo0N66JnoYc4UCDqJUb0dVGbUUMvP4pcIi2avHORsgbdWUMboJkB\nnWowvahJdAUY0gtp0aSqOPgedy/ZSldd2OobjRK3KYUvkIRyD2i8Sr3/fMG2\nJpchF2L9MT1OvM+ya3VFxX01mP8Z5a8tkHMYcwOVntsxLzbBVEeQFNXv8ToQ\nlzVT\r\n=X05j\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2d72f3659.0_1597269632162_0.776547144499804","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/typography","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36f3714f86e58a321ec84dd0d56a3729a1bffc5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.1fee70a5e.0.tgz","fileCount":22,"integrity":"sha512-qYP+7Er1Y93Yq6NlDEaysDWF+r9ERY/iA/+N3gNFu+M6LLntaJzgmAQaBGxl1TI3QurXS83+N+pYJoyNYywzwA==","signatures":[{"sig":"MEUCIGk/2ud61hDqyK5lGZEqcWNNVDq9WGdIlfIYecOhcmX8AiEAq3q+GNk0guDrdEcZbZ7wIJsHPUrQgZCnSRbLumgh4tk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHseCRA9TVsSAnZWagAAzCcP/3N1JRigDg9UMOZONoU6\nybZQtv8p1p5HzK5pQyMNymGFycUEfMNcHlkEoDCU4nYUSWQU6almB6guOpIt\nDpVXbnTjKP/pe54VpwSCbilDvpalfdTKhZfoqawvCfiyikD148HoN2OIXf5t\n82g/VjKwS/YxwbrWwMDr0wMuT3g2UU8KUfnJRcWDtmIWYaN6tg0w5Fe33m+5\nH+ZxW3UcQw+EAwImulrB32GWNQfrNwqvxmZNPi+JG/fDd3QvJo+tJ/86/H2X\nz6euukQNjuNTaYQYm33Le9VJODQqOr1pdR72Mf86e7BB/M9GINE8wntzniHR\nE1cKNjw4LNLJOsgYWMmVtF9nd7fuKr8QySGbo95uGCWvSdY7iMJ+9QyEKuX3\nW7e7RZ+BnvhZl8vpKrQ9o+ZpuLp42Mk6UiaXJVrVjjD7/3yOLovWOW+8vq3c\nlxrsZ6jDVjVh+2FcIGerjubHgQfcQaxpexDvt29UBRT89fhzaEXSeL2Wp8vr\nm3WYVwkrbc7M7LRESyJHHm2VY9yH2UWivG3+6qvRqUnwV2Y5Y9oZ6ChQj17Y\nNB7KSgBQzhZijAQBmAymZA+SSthT5geFtTeJzN1wzqXrp7FS3z4TeOLcP/lW\nSVvqG3vSIJr4MxZEhzuaZ8PMgyz4LwdAtEzbSpsV5ictU6EjZ8yYzSFUKiaW\nUmrl\r\n=LqFv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.1fee70a5e.0_1597274910200_0.9861287575095821","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/typography","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d79a11461d73b4f213e6fe2de696d3b18b0f3715","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.023f3fa34.0.tgz","fileCount":22,"integrity":"sha512-HWTzGIRcW43pFPpMS51u0SWf+bknEuC2LBZl8LlD6KCVP/5p3bNmkBS0vaGBuKmMlk9FEjtvcPOT/mrW0Qs0tQ==","signatures":[{"sig":"MEUCIQDqkvIq72rXu+fieQGiz/8AH9OIttRjmk9/MwgJWKZUsgIgLwMtweAQ5YKWfV3eq3QwdTLW4esAcdRbTwECPESuOO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJNuCRA9TVsSAnZWagAAb7MP/Ru/qH1R23favBHTHgdA\nKGxMIxp11DXHL8B2hqTDq+Rivt+ttHqOOocFEz7J8xdcN/+ReX9fQcN41dn0\nlgd+mT74EktA+3bu7J4u8KejeVi/MBu+76RPkPwczOb8NzMnmPI3mvJVYodz\n8EewhUgtQrd9GApJ6XSgYtv3ak0aP0WHQuDgTQvCu5kXZi1lr7g5zKWdMLF8\n2a4Knr7Dv6qaNse+AKBbf0TBkOhHVANHgYp5kBwCePpFED8XORRAGllQAHu+\nOZq/GbLkgTwwDui1DQDvwazeqtWWnzoXV+cLBXlF1lsuzpE2oyBuOFtCsbAF\nSCLibNsF2CGobu6Ab1tt8Eo6coQPLUUxrBRfLHvnC83GevxKCkJomWZRuI+A\nhUu3+RuaqJcGwvvAHzW6jj3sSiF5kAyQ9PyaM9OiFGfGiF8749u/tApmTkWH\nQZezvsddB7n7Hj4OsJwSSoTmfOj8jE3zjm5Kr0cjYgRscIFHFv1KXg8nuoSo\n5kPwZxlt8wGGphtIQUgwULipm3E0KrROMSqU5ueHSxpyh2v4tYJdRox4Nx0M\ncjLR304kNQlOpZhhCoFLuTJvzDortNPF08p+QjTtxkt61Rvc30rkFDazJQKR\nKwKFAd9hY6oIlKcZPoGQHgJ1i9M1end8JvIq3wEB//dYntvCCGeOlp9K8rWO\n4OO/\r\n=MU9U\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.023f3fa34.0_1597281133472_0.3604889637078208","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/typography","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d8cd3965aca340fcaea42a5363659a1425d9100","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":22,"integrity":"sha512-cRpF+VoJ+FKk0nXu8Rydh/HWPWXjp7Wrohda1I2/s8SP4b8ozpM5ZrlXlWbi+A9FMo10eosaWPeenxjfN+mIfg==","signatures":[{"sig":"MEYCIQCm/jDDshOTqnYC4xt5ohDNbG6gkNWlf+UYJN22PhCe2gIhAOTNXYIPFKa1qdKTB+jsbNUF7srP9Dc0TqLRJ4rbwV6J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdPCRA9TVsSAnZWagAA/JIQAJnABIOe5tjiSjTm4EGF\nAD1TLcb+Zk+JuDrRoSDCQ54/WFK1xcuaITjh+qHI4aeiqhEpsdEYWeB/95TU\n1XVsrsB02q5RmlrbZy+6BZOIfhWTXEt5jys2tcSCrk1QSDsIw1uVpt26Q2so\nhLmKTz4bJe/EAlbeOSmKJ5z4Tnsnng+BzqxrKd7PIqTNdGYp+VhyfOqm2YG8\n/TI/mn6P8nDufVQbGRyQrX4EBtK40/S9xEuzZqtlz9dQQq/CBNwwhPQqjEgB\nTwvgvyy6sYNSdqOf/JH7nKiFgJ3GPehwImoR+gb2OPLrlmxu1cVhR1LI6Gc8\nixd6aHe0JZ+OfPnORSlE6VzkfM8OT96Uhuvdwh/myz2NlwaMMCUAxWl4Yd6o\noP1udffMoN24V8JA354Igx838gMcB4Em5q78Jb+tOoWklEqUlQlOwP8YyAAd\n4yDvKHZcsfE6AZskTW2kbl+SWg93R8aU6nxJNw6ZzqPc5wRJeUicgHTYbXE6\nPszgJE61L1cAz26avY8UzETowujRpPeU4AorVr0jFpW4gi8zRo/huqhbuezX\n3tJK9+O+a9TLXUeq1y81gH/6Pv8oqANPwiuLFK22qxI2MEFtb8v/2c+8XE4S\n7Tbw7P9o+MetsmTfZMY7831ZGnchc8yk+7/+iiec1X3Ph2O1JVYtlSvA+V1F\npAaF\r\n=p2qq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.80f3a9e5d.0_1597282127419_0.4465959600627578","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/typography","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c9217cd9ae52ec81e7c8bf605ff78d53b032dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":22,"integrity":"sha512-IyaZ5xZf8tgfzy5zNpucw1S0cMTnsny1neNHjfex3G6HQRt7kK06g4yYwFGuKPEmjlE7aJJF9ARy73/1tXAakg==","signatures":[{"sig":"MEUCIQCtdgjIBYA7lbhxX4GgXzskSV9H6QAOve0jGkBQGCljnwIgYiIwgwmxRRxFNdRRUIx1mtVEsSeuCkp4kz/CkLs4DUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6bCRA9TVsSAnZWagAACD4P/ihw34Uel4dK8bINiOaC\nWz2HnnGi5Qe14p3TCZ5jFQJDlfNR7xPIcLONQAOJw0cC2i1x8Fw148HCN7ur\nBjpnXDYfOHCkPioTwCmpmpuQQCREmthY6RtVDFR4w3e62X9n4yoS1FPIjYed\nhvHewbKOCBN9ooK3FzNXBnRBUdTFyb8joZoKThXzDjsbaUH3/NT2h83TV3Df\nfZRh3K7gw+lZuio4UaPank8eNm2+DXJ77oyA8TzIouJahn8Rz+vLwdFiH42i\nKtBvINwGnaaEhv0UV4isc0/ODsN2nNRUvF/2nvDC9A3sgwlZcygMepk8/wIg\n1jzPXywHXd0tad5K+OCev51lCfA018EJMflQt2kzAJILeEWH/Rup75CKAdJu\nfrAvPAie3RbQEneeHp4d1TpbLbwqfwUT/pByjiDKinXMqP8+cn4COcQQbtoM\nUPnqH9NPE92f9jQ+SrU8USCQKV5fmVLOYVUbDXqFOjK6xPHNKAja+33w+HOU\nolYTFOQ300MqSJj8Khj/bYp1w/le35xEPfppJgLyxlD3ebXYfIPa64KNQZO9\n/uJ3vkiwZN2xrZyRAgatX5JAgojJW1fWvfQEwjYL9c28tbQVsOvBzyadfjXD\njkHeUPkRa9CYP2FwLmHpFs5pJQfadp8I25P0Flam4MALpEJKNOZKIfFq/sY0\n9auO\r\n=+fjG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a1dcfe97c.0_1597308570821_0.16898994324302707","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/typography","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.af332d5be.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18ab053c1d53c037c57270d6243fb6f0104340e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.af332d5be.0.tgz","fileCount":22,"integrity":"sha512-A65iWEMSuUcIVGd0snUZtcV92k8INTUDRTUt17Be4mfMuG0IiVpqSDsGIfVPlWn0/kZp/ps27vwNzfkg5pMBuQ==","signatures":[{"sig":"MEUCIQC9T33x21bgF+uaOyYpAW0KNtx07wobKBBZeKuhDZ1wcgIgZ0UdubMScxMCHSewp4FT12zVIMxUcn0sGORpoBvgIKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3VCRA9TVsSAnZWagAAyWMQAIMeeKgwCmBO3yI4U4sO\nkZ3pchLLfP0sqxI/74WUV1RuPHjZRn/03ibdgRhCKD1hCuOM5MPPRyjuW9bh\nhR36rnVgXW/Sw7/VY8LStu0L3GVubsYOdYMrwmOHyAJdyEilpS9TJ4zcJskd\nYYqtUSm8QEhdVBXl4KfADxsJR6b//6zpXNcGCJJyTt57BjbDpIVkwoGUlqri\nRwN+KKU1LF6CoiB1AwjXZHVWHldB5A+2XDlgOQHckSE01PpST8BHZ/bisYV0\nzV/23aSKw8/iUyXpWvVn7VWbGNTQEJsCaYm8hRr/yDRVIa9AoFpO3lCogCsZ\nvbzdhRGAJJoXgKkbYnrfV38znrYyQPjYJpbyEg13pEgnZYAaLj+H77xvnkQh\n4B+j6FIUO0rdLs1y1ubrRzM39P5AwVYMfIOilq4IDGX0PzEFRl1Bf0oXu7HA\nJRMybEOQHiQ493/PNiFzm5Su4x9Dtlk2yF1FQHg0iccSYAaU42KmZyYep/h0\nY5I0hurq4HGqF7w3X20uq68M/Kge/o8CjpNW4SixZHd89jUGcCnavnjMDDwA\ni/CNuFNwOrtbE66inNzF3bL9nlrnox2qUeyubu2aI+PIfb2eimwc1P7Se+KG\nZgT665oEs99EWC3cPfT9qQGX1drr24KtB+e4DvCQeeXENeMzcjgADsyL79nA\nm+60\r\n=l/UC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.af332d5be.0_1597353428884_0.957316465397763","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/typography","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e16513859eb22243a16bc0bafe4f132895f8421","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.7dd4567c4.0.tgz","fileCount":22,"integrity":"sha512-kxPRFQwNp1+gNJfY0ddogqSBxippHP9Okbqvyi8wZCnX9+WLJOVr+STMURv014G/W1pzI00vQax18uaBDrOYSw==","signatures":[{"sig":"MEUCID2/isl+xdWP8Too3V+jIVYrXwBbAB1v4gy8SLlzxIRuAiEArETC+JMr4j7y4RMymop606HPSho1j+d01aCEBG9y0nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/nCRA9TVsSAnZWagAAk94P+QGqDCsm5o80uAeSxnBE\n0zkwUODuYDelAuOFUmLqlQakZz2wW4Ic0lMN/INFhjlhzrQvVq/oMkOshIu+\n8+VZSfrWtLdavIx44m2czpW0DBzBxSRfrUK5wsGHMJqiO/xs+wiaI18NINlN\nb7BKngrRQ/fXmwsx+V4cRT4dreW3hYMxby7y35DRCrpf1DPur1SOBNwe6Mal\n1A3u457bikoWbhN1Q9YXp/ACqVSKqKOWpv1I7V3m1L1P9Hz+vqmeJAbruoj9\n7davznKPCcuTIptTvmDQY0RzpH/u696qAce4qQpYOiOQpX38mvXCG8gcsjiM\n4TCDinF0emG4BVuP0SN+4/m4NPB5jp1eTAHv9C4BNI4BaxhakmuTx9GxJPMv\nY5tP29GiUackGDWBUps/2knTXFojd4LSskR4rLeYjrvcK5oYYEHwZtWL0x+R\nSoTfaIgble0qV39QzWHmJ+1pspLEywPg21CmqLSoworePaYm8ls59qEyjXbh\nB8z29W6cFBp2oozd2cX5qgvaQ4b+RkWh39s8aVHnSs7hdE3RqBhW6nMjVqoS\nIyLom5bKvJQT5Q+hGsGxzVGxI8hv1eRUJnzPD7vSiuOgOEPII6dKtilypD4m\notDKXSiB8f0+4ehPBm+drpmk3bUY7N6pwCqSiYNSP3sfhJSoviA9e5I9UnQL\nSo4M\r\n=ltsZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.7dd4567c4.0_1597366246941_0.3203020863485959","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/typography","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ff870005a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73bea593fc44ff7463f8fdac379ec7d33bcdf525","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ff870005a.0.tgz","fileCount":22,"integrity":"sha512-C8pzt0lbyvmWU/YqO8fZlJfddSbfd9REm4AAKkiPyDg32+6yeYtFY8/Cmy7D51/0WD68ZmXG8ME0w4+S4nojYQ==","signatures":[{"sig":"MEUCIQCSiPBTzihRdNXrVEy/jKlVb3fhe70oPy+Vwc3EXjjlhwIgI7xRnIxJovctqnD3Pgdd5w8lM+WSsbyHmVwP3Wzp+Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXTCRA9TVsSAnZWagAABMYP/0Gt8cy/v3A+a2pqNzHW\nAEsRPRHeVYIcY8Ko0/PB8bRpbfp1RZ/3RuFq781GxnyR0tJns7shPi6WcNls\npQxhQi3ygno7sLKmBXySoH8RWkCuvJAlHUwjGPmAJF/S5NpVNe/euLQjOBNP\n64vkrifN988uszclyf1LPcvv2Oz0MtK8ujSGYUCMA722c5Rl3kzCRrSWhRVs\nNRLcErDOj/aMJMmXPwZmSWtMpdgqrocDsLccX5FLAVXCtTkv7tdIrnCYmJNe\nQzJEM/IoA0HEth/KO/2VX1h1Rc3Z3N1TZMF331xbQS2En6lXr3BwAFApLs4c\nz+wh6UuhtHQbq++WO2RBTVkgwYoDr9Ai0VN0tJAo3sfxauChNGvzpGp9hOGo\nQ9311WPUL+UD8U3OSdhOcwUwCLjq2v8vTOlqrdtsXpe/RcodtnDwZY37XU9P\nHio4JOldmGBBYZKztLJgqoTXxj62hO3S6Oo/wEZ2Ke1cAber6GXCVTuoPRI4\nTeQ/duTx0SNLx5R23WLjvlnL9VdfYUf2CVknK2FqE+67SD4Y3JmPtLmqfcqi\nHCwzPAqOkqu4Ous3LUT3/TGkj7VKsf945MFuiYIjYmuoOTreNB86BZFJa26n\n96GywrgecOcfnT6QVWLNrK20yw3SiG0b9OjCMkDJb6KU0xFYIy6mVyTXQLTu\njCCf\r\n=E9Dg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ff870005a.0_1597367762531_0.6102290326155888","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/typography","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.150f427a0.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bdc5c3a7fe72656b1391c80518a06f33881f146","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.150f427a0.0.tgz","fileCount":22,"integrity":"sha512-HARsC/slGhqsH3Px3iahgcJoEdtheeigFRbAmfDe7yINN+aXyVW2/H5OBfzXOktxjXDO6LJOpQeAbGfBZMJG+A==","signatures":[{"sig":"MEUCIQDyYc9hezo2L5qFBSYo50OxlO8Y/95RP+p9b1f2H2I+wwIgDKHXDlitELc0bfxSAyPwVzCS0q9wJXk4BpwwfQ7Q6Ic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpG1CRA9TVsSAnZWagAAu5YP+gPe6iuWERXuWjcxb7FK\nVGVZihE19Zh7Z2gz5JzLWICU0QN4jxDRWTpuGt52+kXW17N1WZTIJzFoo/Za\nW+evMdqrDC6RMiiTagDVDPrjXsEF9T9UyLQTYxToSZk/znafqVCJinyFlEnL\nCULh7XFIvw/Bg6Iw4xllrqbBju5Fj7GJzuNrQf5A13zZTdDZLAxxbMz2xHIy\nm2UI9Z5SPwr3KshXc845mC9hErxOTC3uaZt+5S+aYlWq8J3kgpJe2btyPnUU\n4q7utj4eKajuXtbIlbObn/NE1WAmksuC/owW0VWMTCcUZ/UevRKgotsv6jNZ\nB2o2gkmVk+4K0jVfK9qXMo70P+7IZLkf/pxPOTk+LK0JbzpY49vR86ZiMfaE\n9wUNJUOSdIq6fN15olbnkRmMu6raMImBVZYLnjDiyoo9xi0z0N1WHcLrJBiy\noF91cDDdoVz7AEld7ECVWmuHaVwQe3S3ZpGCbmhm+3cNJGPevPD+iTukwLUW\nchTCdXJ6QGAK2xKxP8mUGdWQLrbLUvpD3s4Qc53BoJBMi8UoNT+z2rkE9v/R\nNKLQpwLCaycC0lFKXq3j1ELSAUvnGvljltOvNRPnj0I/g3oWimhl5UsERiF4\nBfXYgdunfD0NCIf7WReb/Xz+M8Nj+rd+FG4umXVe66OF13mxdewNyuAPijzE\nIZ6I\r\n=uXgU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.150f427a0.0_1597411764800_0.9794183763018505","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/typography","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae50e109450efd182743bafba3c25fff94b9f959","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.bcc58290a.0.tgz","fileCount":22,"integrity":"sha512-z2/ngYaW5+iJ0kH35MKMIWv0ln66qrveHSDHa6mIf3wq53NgyiEBHfK+3z663LHnK7vBhu8dORZ5sNMMUWfOfw==","signatures":[{"sig":"MEQCIArP3sTb8FcnyRB7NgGDj1S0xD3qBJAMfLc6iXxB1q95AiAM9/29ynZMit0H6OGqVGqYX1owzt6+NGFqnDAkbhWqBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxyrCRA9TVsSAnZWagAA4vAQAJ7vmOqJvHdp17h0TA7y\nLo7n3flMl6xrs+3mNlfBNrvYVLnG0069TUz4s8RnQkgjJtSZDfSXs5oS/TSj\nolzFqPx7wTEOPmS1X+2jDeGhVwWIl74H2x1deNCkXAC4kYMS154VolsEQNP8\ncrJtIj1iNpb2LwQ+4FqxNvDG/G+yP/HoqBa5/GDLDoOZFQfqhlY/3KtpMAbD\n0swGt+F60mysxrwmh4DbCyh1KIEyAj75kCDbwCsPSEQj6l1xllCQp7MGOCy+\nX4U4UQmhVBvrNCxKJwkpVb8l0NyPrl/7Mzd/vM4zm/qvvKcgEjPdknxVOprB\n1HywSyvIH+vBQJOLKxDlpOqhMfwQ7AEqs8935oi2yfCA7qlVWiaxNeAaunqy\nNXp6zUa3oCNNs8+57toG5Eq4aFhZsRgnQiKzzo+1ZmNHZCEQqOFQoVS3atoy\naWotIpGNiqM73jf6nkZw47SIyXqKrOAwMFqLoqNc9pG4gdKNlVnPkZc2J4jV\ne0JBhac5eYatUxhbOWPonNWsBrXdX1p2XhyD7In/lLcf6zJQXpEhy1Ug2+ao\nF4oruOFKxzT8Q9eEZRQD+/pZBGhcLdmAIYDnMGDpGZ9Obk7rOzuasFbNEGvQ\nFWKw7eS47vxH2mdpmqS1kOwXsClGsJ0VaPNhRy7KXm4w4hHI727n6FSWaNGs\nd/Qo\r\n=wIa3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.bcc58290a.0_1597447339403_0.7244862648968706","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/typography","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d944fd25bbfc7110e05471d899c05343dc7a5f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.4f55400bb.0.tgz","fileCount":22,"integrity":"sha512-0axj82P8RHCDWfmlbiCek4xs9axxRk2KYSFwPDLcWm7qVPrtXvBSx5UwPxjTukK4eiII9u1Q1ZtQoEHtNYsLCQ==","signatures":[{"sig":"MEYCIQCOar+YlkuLNLPR3HxD3ZaApL9fsBh2eHcklbhjtAuqfgIhAIT7M4Ebrgl2Y5j9h6arsZ3N9weyD4QbYX43vrUQCImm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJ4CRA9TVsSAnZWagAAELYP/iBBTdpDH5PoAzrFVX0j\nfn7n5uPzM75jE9PFMwU2RgEPIvXUg7gO5rcAPPHnaKjX6CHFTGF3psnfu/5F\nqN9FxnfAVYhmVtLqbT+AUHmJwZtWXQMhUjXPaeKGRf0YD1eU1pXyVHMZrG93\nEGt+h4T2auBR0mNsbW/suPXtBlZHrc5cfLBu0KavxKzqPtLoNNhicfoQZG+I\nyfWU+/bV5BHt/QsrHhdnEM4BZ4LnSppY1Kpv6BywRzPp7Dicc+oDirHEvf5N\nqT6tl+0SA9Aq7cz67WqXT3DJddaUZHlo/x5/5dT0AtbtmPBIXlERkS+uU+AY\n1AnZdXkA2r8+XhpjFPH/xyxGZy8U2H9fAnRWkcHL1ck4IkbNLywviVBzkcWr\nGKtDOag9JjaQn7LMY4i76RsCPHIBuOQscTwYtkhN1GyMabfq+j4AAPRhgrBQ\n5fhFU4IQ2hX1ETPVMjHS7FYKcnNgx5A4ndcKDh1gdAFDklOyMEdHBwS9NDem\nqJDsi7maxZLyeoKuyrsaYu9dA3H5drpujGIWOI6QB2be/dNK+FT8vrVvaskf\nKcxPT80j0EEmoDY6hbw1c+Agf0peBM+qsiWYD7fp2MR9XxVpKBkWGx2i02YJ\n1hNX375Sn9e5EsbOOeEn98ssl9PFPWfgz6upKyKBkpp4hQP25O1SlbBICMrA\nl+25\r\n=9iuk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.4f55400bb.0_1597682295291_0.9044542730867782","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/typography","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.000d64815.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a79ee3538e18e93e1963f49643d4685ef0e3978e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.000d64815.0.tgz","fileCount":22,"integrity":"sha512-GR2Vk3Lzru4HDXIjldJs3ZtpXkpPGv4xOe2QT/KRmpOg9NgTw17UjEF/pjvM0LdHBVp+dye26SeR/kxfL/agVA==","signatures":[{"sig":"MEUCIGDZ4neQla7vTl0nOv24DcMe5RPd49jCby2YyvO9ECXyAiEAqFA1AjHCa0ndM+iWuHZtflTVC5pJ26piSjMomvad/5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOriGCRA9TVsSAnZWagAA+7MQAKC77kOk2JDZHKpOs9Zl\nM6AaWtPOMf5lrBwFrlhagPj9/6gZ1Yb2JYLMfSOV4Tnh9bEzAjtDAe91R4eO\n/7EIFO89uuyfADP+iZjo1W3JWJBoVaoPyRR2H4B/dup2i8qaNcU6kWtQSPk5\n6NOw8myWBcQlcZtPyv4LW/RLtNAat0O41paLHeopHe8yR7OuKei+NDDwybZw\nlAAuMkj2oa42hu7iKaLaaUhVzELhBUPSB6KeyR4LCC5mVX6mXK102ArfLbLr\nWTs1d2sgTqJQKr8ABCm5sVcWbUASHFTEBgrfCfRxTsCOdgE29wp1p6/iJcAA\nGQueQzgrEnRJuFMbMxKWiwnLzOHcuSoIFBwdNDGWM6j9+HMbH2J40FErwmOy\nLQ4W7StEyJhIkcwQvLQ7niWFv3bQ0It1kyLGo3TojCnDLPjb5jSUYzzF17ez\nmSbJzt9V2MEg+BJq5sldfYtbYsGQbKZrM1ydg0HXl+XPKTheKUfY/c+Rv7F1\nNViNZ9pIg9Ha1JGYhLhfKUUt4gVi3TDyPI++2W2hEtPOtILO7UpgNqIrfb5s\niqrBx5Da6FYzs2ARBiL+Mutf/iWwE+VgC9clwAH4PxAyOSFHxn0TvK8eqPE1\n5SUB2DKZbLcUXvbG3fzQtqfx8gryCEMUxFfsmeu1qK0BrXnnoGGaMH/Vpoiv\nd5ZC\r\n=XODg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.000d64815.0_1597683845459_0.3168910932117732","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/typography","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.defa599a8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5106e7c9af222ce0e0f9bf30c877d638d6d76544","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.defa599a8.0.tgz","fileCount":22,"integrity":"sha512-6QBs8izk6moAWGYvkLipbep3ZFiaixoaKDs3i0uEi3z4HcxFQP3N673S6G8VVN0QlmswbymxbeDucdm0uvbfQg==","signatures":[{"sig":"MEQCIEBULUNC6HOW1qjxiQMrunRroSnfULZpqkRWO8FCEN9hAiAWKXdqDPndHEAvGH0mGbrDqtQqzz4hSf56LPLq0XmeDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOuksCRA9TVsSAnZWagAA7pcP/1o7eeQwLK+hXCm+SPVA\nYGB3NVy7dsUHuwao5gEspIKtJuM1edHXzY4CUiyayi6opln4NmStVilqSMZ7\na6yDW7KK4uWQn1pBTVlmZEOG8li+2ViB2D0hSIbqSRHOfNBR1ZEsroW371xh\n0XlIQi8f6cT6KTkKzVt7iEZskk4XAOZRMtcxHBzkSvLvHAyEoUwJUFVXAT2P\nRc+yPJKDVkanNz6pZCkzLpR2LhhcYbKa3CkASAQa3dVmxb5pXLJH1VYrU/9t\naAxQWaIg/Izx7RSyl1IGr0SupJMrmq6PWBggsHg1SpbDtygWa6xq4kADxbcx\nhJNvc6I8Kv5OXQJSu0/bmP/CiwYKUQB9ByZVI02QolVCs0IDOqqGRcD+vNnQ\n+ms0VnhTWivuNoK/j+WpbSbcLbeirog/BhhfGbmrNB+dhT3RZqBa6DuZs+2K\nCIWkIrCkz30X8zNec8xAggP44/arCKRIHX06X86r5Apo1HCkp/kO9W8HeU2u\nxB9Z25YLy8bE2+H2nmWtY5sy7vGdPovR1Kw0S7JUrc+uuBsGzRO3MitagpYV\nFt++OpqvZHdmq8BQl82Q7yxp6YpEaUOA/rfBErE4RU6UXwuNYM9I6Vx0Q4V3\nNqPP/z2qt9Lj94lppMoLnvuHKmpdyDcF+zLY1QjwJyVSIChsUyyI5HnbS0Yc\ngYe3\r\n=/IJ1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.defa599a8.0_1597696299644_0.8016707200844322","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/typography","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8260cdad3311ea2cffc86c8f56be4e359c15c1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":22,"integrity":"sha512-8HNrLMCZDdkGRQTFqi5RkYIefk29nI0N7QLA8ZcvjY9z4GHoj19WdcJSymob+K6eQuaiw0RFRPkxAJL6gRZMQw==","signatures":[{"sig":"MEUCIQDIw1a82HxjJVz70YUW8+y1M1YP79hV8zi8balqSCEdIQIgXwrHDsjP52yXdgC1EdC2RLdgeLml/8VtkB3yId2Etso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+1CRA9TVsSAnZWagAAdaQQAIwushiEKPgjSA79afeS\nAd1RSYfZBpTxSn0xAv/zm1mLifk8fdD6TxPcmj7dM8vcdZZkv1kkwpBTQFPj\nwY5Jp2BReqg+5YrDQMuXwmJEDElU9Z5Y9PwnHYaZZWD6QBmNQzyqLHgs8r47\niEZfpizUex+Gg3mSZdqvkJ0ZGhB8AmVZXbx6ZaNpr2MQtBupX5xUbXDTGf3d\nTv5LESL4VajbyNeCcgKjzbKx49G+f4k1Mi8tFsDABc75wZmCrhjeiiAHHk/i\n0l5ejKHUxiuJxv1A6mj3VnSqT9d3SJw3JrtClhmY5jghw8/g4r2DXr4BVFfq\nDMln22dVy4UM9j1GexBXwn7ioO2RlmUrzc2fNkMRjwrcOjHWUx3yYuW9PR6D\nNHQYrBA+4Cvci9RM+r+Hi431IyWZ2y/WXmE0ut6hFJKculaVJu0o/vNhhNcF\nGFzKBiIWEPpKuTuXDdHKX5HggvEVQTlQaUZPn47txs8ElMMdfpk9VanREzYa\nhutYJoFwMSGvcFZNEPq98gxUPbw7gkkukkslkszY+1ApGhdIwmXpkSzJEg1P\nBlKjRWjaEfll+/HRNYcReRJQxIAdvVOotZp1QwMPQ58LLPcWSj7KKh2IVe2o\nQ5r5G7MP9WZda1XU+0z+DDXU7D3CVPXFsoFnWvfca/PHZxCWGMjGZQjDMPbo\nklIj\r\n=Qclg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.66b8ed7e6.0_1597775796810_0.16820675334647994","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/typography","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b896b3e5107d6e4f02b87219302b71f77e650ebe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e2b1033df.0.tgz","fileCount":22,"integrity":"sha512-MQUffK3uyIJjPvwTIKBWWDvXS47YpCmdG2jgHeCNZqa6iL6rDnHtLvV+7nyhNrv47X8Iud1QieCdgLrYBK7GZg==","signatures":[{"sig":"MEYCIQCzuvU3Z1zmu17s72TftrR/ZZRjeuuWbkvAo1wAaZzaTwIhANlQ2HQALTUVeGMkxluEUeG0+Sim9rZZPml6NMsddtNc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJtCRA9TVsSAnZWagAAFOoQAJ4OQfN2OZFUahSi7zlr\nvxpCXsgw0n2aRxcF5qdegAwXUDkXc8BjZcP5yW93nkjBQ0Raik1ULBr8adaS\nzhvrSAaByuIVhuPGaBxJNgpx1x4dNdf36ocVLhwvPcQ00IAbG83vjELGTQj2\nyoPZL9sgaiFtlOla8JwJHGQwMwDZplFyn/NjeFJsx9136aR2GPX1YLplWM2p\nFoxuocdKCXidMeISn5WM08/ckH7+SvyrTuDjbF0p1WoDmqTeQ8tqABAUWIXe\nLp87/vH9WcCAyZedgAzJFzbC7wBPW8ts5QocEKtZ85yIk4/8VTrzKaBGx8JR\nhMqfCxMF3a6Ppod44+4LInJmkZe3TQ8wa+XW+XddzsmnfZo6D2Kcvk7B3lHp\nVAxpS3POe5gOAdNKujxJcLhUxdVP7pNO7GLxfDsEy3KeQ4cDMin/dUDxJHHe\nHTa0AnPDiG0jjZKiJFQ5EfrEVUfJFN1HyYZcXcBRMh+YVu3ckjR74A4pvXrM\nLwnh1ph5M6RW2Xz4Fvg7A/Qd/cmw4xjwgmyjqmWIC4u76LBpXZ94VZapm3ze\na7oa7b1BZFadYtm7ZvgSFlqQTQvm2v6frK2siwHR+gpHN8aBwjUTgZupyS15\nAoaabYncre1KHkoCUia80JB/gdWyyjFTDawPOZniswGf4qrX+8VKvvWEadaJ\ndWVr\r\n=xuVC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e2b1033df.0_1597862509093_0.6715416305546351","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/typography","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33633652ff7440dbc9e78a71c913b694b0e3c79a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":22,"integrity":"sha512-5NEGvIXSm7exug1R4Dbr9nUwabcwC5lot3TwXL/QOcpgbfKTQlhGeT9BS/T4SAK1F3sLL/WRAlBkMGXtZt21hw==","signatures":[{"sig":"MEQCIARQU61gdgkQJ2Qy6voXL4dsIRmSOviDdKBQ9Z3GSiEuAiBtN9bg4Jug18PJi0GyyTN09qV78lec4Kh6bMIsZtkDFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXw+CRA9TVsSAnZWagAABB8QAIiSK2Kwd7ORO+uy+GHR\nWVouNFz/thW+k0oif+LlIF6NeHs1HFcw7Mp7ZT8lMI4KuavKVAhNv3AAEa90\nppK3HSQumhJv8cXoUDSYOEOo8PT7ym+pteBVBO13uJCwAIuJ8A4mGhKwBL4w\nWJPVzxijJo3BtL3ZP4j2Uh9RxSpR48awmtG9Ky+CVcu2oV3MVKTNn9yHI8/m\nbjeLDvS+lFL6LGccAXRyuD+QdWlxSb+ytnlkj5OxQbcYoGOfq55M1AwXgLxb\nU3BEAzczXH2Tiwq313TC8ClKSVSye4wHazfKxw6Xl1iEOs9ymYRANjLbvYKK\nIpoTjpJpCoFfd33+aHs16iO5QAXBbzy8Hbp2b3X5UhQuclu3rKh0rltKLzKs\nhfMlwxdWt6oISX+YSiXWxpmc1lc28uCCKa8s7TNNzNCNAGi8fX+1xo4/h80W\nNaKblVSpMRDx/sPJAVYXl5VdXX3vn80IgsOcTmZz8IbSfXnlvYXYuVBkqBDl\nGlSbk0fZC1+kXVBKDQyYtcNK52HYOy1SazrhFEorEB6POft2c6BzmwXDJf3Q\nCp8WHAQXjWP4lu6RXZPvA4imv8xRMmxIxmL6LIupOhoVchBizMZ/S9U8KEsA\n64wMOzIQt+RQt7LetDlO/MRdSz7XzmTGlaR9ssaQv4E8/gKgJP92TJrBBVd/\nyQ6G\r\n=FcvO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2e8c3dd2e.0_1597865022173_0.392151603730416","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/typography","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0ce888e601e2cd9420e73446bfa57eb022d582","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":22,"integrity":"sha512-A4NzkSUxG7o1lZ9W37v/zI/V+4/xMDNVgkyurpQdNmE7b50rJre6ypRSq8FHpJ7KzzwwCofkALW+maRRrQ7HOw==","signatures":[{"sig":"MEQCIG9y1ZrQH9cFszTdf+z2mSnSP7fcYcSNCiamI4uvO3xrAiArLw60zWdl5Z0yaLQ6KatmnDbRiIsXyS8cn0UmvdxzIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaW+CRA9TVsSAnZWagAAskAQAJD128BPZyeR07WbHeqq\nhDKRvNqZuMAXdfRddAVZMbTrudnGqY7voP9AQQiP9rCL4ThGjMmJ7nZNuD/d\nmtwu2JAFKTZVNwCVcXBdLeZJdVXj9cLA6SOGprkLHFkt/5McqVA6mCsaPbGa\nVypDDjPJe7FNDBypySMXwy15CBmIWaazQbP5SkRs5Lj6HJdfePS7P65VQick\npOP1wfv8AGrqZBrPpFE9A5R2/Z1xqbS5lTauPRqdzTpJi2QoKSec00ApUZ99\nEL5GkaTF6cvpR/VfztRPuQJ58xFlQqK4FIUlvJlwQwZTp/jnq621Sr3h4aQP\nf24YybDU2EL6CJLarKykg0D2fW+TqdXriyJ8Ko8huwxBAzY6qoLsLGdOgcvp\nyXKIndGYGmB0Vqpu+QbgUIQXEsUBG1xgThC5mlxqnN3VpPsZVXLZMUT/zakj\n9sYrbf6eTcfayJ0ZEoIfwgTWOKVoAtbBMRE2t1U47dnl4L3o/Wghn8olT81q\nvn1ACwZ4pKAe42NoWf2unB0DyIP9yKLa7EnHMidudpReNQEGJDu+NepuDfVN\noJS5zppyPFIJzal0WwLq1I1/6LQOJBFdSbduzMb2eZg03bhkwW5XpUdDQKGi\nbjG+BjuKFRc8QdVBG4q4leF+NwzlAYJqshs+EyhLTJG6xAtSjWUkDuwrBNpJ\n0ilZ\r\n=CnFp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b2e80a5d9.0_1597875645788_0.5897687111508154","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/typography","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ff88df637.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87aee8460c713658c2456658ccfc7aabd383989b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ff88df637.0.tgz","fileCount":22,"integrity":"sha512-U9z8rsKrMmjjKzOHlfSiX27MHTkyxV6odhPDKwLavAnDb2egoCBRnqvHiWERc8BVwxJRdeeRpDboRTRaTPCCqg==","signatures":[{"sig":"MEUCIQC/iYjLrRLPSPsDZzTHa03/GGu2BphgdKxZt/iL+QMyXwIgFBVMJKSWBF85yGb0M/5P6YTRGXtv19O905IXB82pVdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiOCRA9TVsSAnZWagAAD0YP/RDtaBDPBA9VabwtcGjA\nwAlBVtvVy5touPNLMYTwfRZiR0N2lOJ3+Gr7amUU9g4ZyDzQ+eqxDzmNfA4m\nBIcuqF5qxr3N+eLQLf9nJWZ2XNRolqu0Uc6s8zKYUEodgTHZ1R53c/lkLet/\nejgRNt2rP0lcZow1lF6r1zjmlqyMgw2B5/K7UQd5KRinsknGB1h6BYlvpaGc\nM34Q1t4uNNpJLpQAjUVP4nMydVcZ05DakU6aM4+LIxjGBQQFnqyHIJ+7W6O6\nvQibvpNnDs2Cs+/xE8ULzGwBWwIohOisAK242+vUGIAA8ZPOg3ULrB7bpgYV\n4l78AHD2/XWk1R2AUQAxuoOGEHLEKmq3BzCAYpUZKDCX8ANF8/kj79qinChi\nPESscTfB+iwKUZBbkucWdpOiJWR/QNTi9G3EsZsq3MSwBOPab95QnFe1lHX0\nq4qFlW77eChjKH78ICYiTW9tpix49UeLgObsa+Ryuzbx9Ea4H5op1eluCFvU\n+Quk/7fDGHR+TIpQmJEwoezmZ3xDnP1mrrdQRbaI7q2/pvJTZLGks2bfgOAn\n46ufUQKvRwvy3Czu4E8mE+eWGc5BdZBkD3pZrIe5QwtSypWXfdOKFoV8HWD2\nsMtt6cH0TCnnDAqgBRu2FsuoELuMkO6VblxP50pblgGX3UJBTzTzIffogyxm\n5Jtj\r\n=KrLs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ff88df637.0_1597876365493_0.9345121223446262","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/typography","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23847d4a2911c4d65116e3d104347e7ea8c194bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.32fb314cd.0.tgz","fileCount":22,"integrity":"sha512-qRL+1c/7hjx8WKI/ZNj0fn++qYXQIyXi0bm0G9eTXyAcIXovEHu7ahk1H+g0qFImRrf1VqhY3ZvxT8wvSD1Tng==","signatures":[{"sig":"MEUCIEv6TTT9lYbt2sl4u/BF9MX/BbZE/htT/KKJkD7idcy/AiEA4Kndqxg6Hqi8iYKcOVAlbQv0wBT1JKYvOLfKFMWjVKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJlCRA9TVsSAnZWagAAEsEP/24/MDh5HF3y5ZqZY0ni\n1gvi4X+QqQpfxWtkZ+ogHbCzMSTx+iIX7OANjyaCZ7RJ6IKuzhMvHllfCrFz\noL4Xwc8YV8b+/HVF4G99TcNZ4et1axdFJi0i0JTAeC2NGSfD77k/J4FPcYTb\noIAkEqp2rRG9oCn1Rl8zoY2o6uCCJU3uO4RqWARTPaK9Va47xLZjvNyryCRp\nycQwGacSnSa+r7PXT7qrQ8xr/sG7wegqEhmDExl4p9h0Yx49lxwp2I64gmJT\nTMcEW21CZdhRBZAI4xJEveuhLgHWl+lBgBX/lHh83uQGl92/ARyBv1AO/I18\nV6P4DVCqRueUuM1m8WU79DnR7r6hlluCwlra0h3ggkjIvn1m/DjmUZ888qrq\n8IhBD4NcHi7e12+mxPzvnShEqr2U2U33zIgPb+sHBwc+f9jTTZNjm0JXYU4N\n26RAW2hP4fj2OXRU9e+WrAlLN3FU7urV3tkf01/R8QQXsxzUTL0ABex7K6Gk\nUuvRWaatX3AqtOucYNOmBsrOIRnky/6C+7N06iiUZZbUaMthBlJfsUw4opOa\nBhOTWQivC/1jXxTgrJoVd2aVx4WnjfIatWHw9fBV/MhNqMFt1ml3IgdE6GNt\nCzf0yyHUvXSKWjVI5iWshhMhBA5pY+BYc8WMXfLuOdw8iesmXVDfuYfmsBHW\ncOTu\r\n=pwPM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.32fb314cd.0_1597919845039_0.441626094180702","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/typography","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.546277d32.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fd23b3076890d59c3345b3b4c77fdaafb66b352","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.546277d32.0.tgz","fileCount":22,"integrity":"sha512-bMnPiZpe8DlLoBJw0NCv21/ybNRCJDiIP2RVqQuRslGYPqLioLbGV1um4/yD+ERDJJ7yVU1XxRTYn+Sr0x+tlw==","signatures":[{"sig":"MEQCIDZkoJX2ehEV1aZJg/DQ4K5P2VP/tCo9pojI/SmwxGxDAiAuEZ6wWdLK/9UOHXbdG4F+oBrc8lUKCvaXvRald84GiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgOCRA9TVsSAnZWagAA2dYQAIeRYBl6aSVbzLdgSgaW\nlkcUMhyIyx/zUfFd4R55huzDByGrrfNMrRMJSwmH+at5t7TXavZ4yofjHF3Q\nfRc+WQw3mN4Kue1uSqrHie06rEjTOVZSu+6cTAok7GOiT3McmJeU1ouATPmn\n/SqOok8WZ4kHRI0umSH6+wszg4FT0P11kzTKPIk/I5WuzW8g2OYtgNvA3yGR\n3G4npf4ccEhW63GdZLVrqAvaQMg0xWlodpfo1NiS62FnxOHSonmtgzfWxYkN\niklnM8gx1/BKoWNhDkCTFCmaa7y+6xjFmgwqI2IB70T0l2JkabjGyxUKifg9\nDtpZ2zK67/KyyI0WzUUcEeNfSrlbeK9siY8w9bg3y/ydf6slZhtnr+w05DxL\nC3Qxl2DvPjlTJEdUxJORllZUNxnm7vUPl0mqAuAHiDjDRp3+JL7hDPfFVqlG\nPMxN2HxnrKpw5n2SPlt/tDYHZPx/4RRVAzpQ6TJqle/hGdDjo4HE2bhrvKXf\nAdZci21tN9xj0lGGv5ZLmTJfVxyY+5FBZjkc72eKb/uRiwD+S0/xcQGgw5Ok\nnkBlX1SAYFgI69tMTw7fF9bikIp1Cct9+NpilWa3bCJhpoEPGUbntseUoqES\nh/mNa/AkzYo7bFwJKDo12dH2mZM38XBjH25GHFRDr+0I+Cla5+eZTbehS004\nzjRl\r\n=ZViM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.546277d32.0_1597941774236_0.4502848551546683","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/typography","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.da72839f4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"decfa3e2324d7353fb0fec8acb9ee8b9a94bf1b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.da72839f4.0.tgz","fileCount":22,"integrity":"sha512-Xf4ncniup6OvgofP7ZyV1OiqpBSTBe/l9Et7RP3IiVuaFn1m+IceCA2c2i0KvPJL3o0poD6qHE8npglCHDk+rg==","signatures":[{"sig":"MEQCIHAPGQMMSv+RvmyZI+z6D8GIiUEmPGTX98Pi/tRIU5wwAiBytHQVeQXo1DBGlDxe8RKyYEH/r+vI+l1hRxL5wlsTvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfProNCRA9TVsSAnZWagAAuh4P/RRl9X1QpDjkVn7wU+WG\nOy3MEWId6zNmlE8Kjsg+ZmcmQQtnb52gmPrbI296kb8E/pj7Uk499MI+D9TP\nmungl3JTnPMV1G0o6F7b/0upv/Lu3Ld4KQ1d42HEH9Hu344/NZmeeOu2IoSQ\ngBlnIJyQjlztNxskZoXknSbhfrH3+FoFWr6YImr8mzR+qDvjNeeQOxTHwbMi\nss+y38BSHJqtB0nmZsE3uKFg4/EphnQE9IVFmyKRWHm6pzwEwsEV8JFeP78g\ntUpiciNQQHqxxHKRac+9vsUKl5gDwFr/BBz1fnthSCurFYYmkAmAuGjIurBK\nLYlFxqI0DY9+BWoKGCfwxNHKNTJTXVK6NXKkFu0NHpqdI6Wyq6yY5kYJqqip\nlxJeujfAsvgrEvCj75Rj69VPPnZ7+KsPEhnWEPMf+UfcN4AEdrjOP8RYonZw\nRNUPKTdQBcGJFccFEOYuUehEetmu7wV9Hqf6z0cde4/5/8kscIrdThradFdI\nGZkLDOkWC+JfvteJ0B95gOKTo83BhCK4lIU+ez8x5a0BK656V5D6iZG2m5J9\nDdeYGInUR7F7b/MMjhAeguRBnEiYtBV6+CADlqeSZx15GBfW5fJqAb90xnjq\nDjjbSlSwfFAeHGiszMzEk5pFuKi/wQjdqLqTTCeoFtXrmXMkyTmaYhXJ8u3o\nlhUu\r\n=PjMX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.da72839f4.0_1597946381190_0.5349706456165149","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/typography","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.346069ccb.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b60a1c4ffe48d8baba78a954f9ecb461e64216b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.346069ccb.0.tgz","fileCount":22,"integrity":"sha512-+b8tGRUixi89BNzt+lSUI1DQIGetWazUOo87G7quarsm8esGnMboOPkhZcJu0bOkcMg3jGAOY3k6G9nInQg7LA==","signatures":[{"sig":"MEUCIAqoIMmjABkt2mOu1ocxOmq3sFFd2uvkGFPhKEdywxakAiEA+4sXN88UwoMB5Y9J6gz+F93GkBo+9F9CW9ndBw8bcwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5kCRA9TVsSAnZWagAA+DQP/Rd6lA40vy01mKU3ejNF\nX0gVQ4WQ1coc+njl8N86W1CO/NA4U8zE4AIVrKRbxiRDEsUCpFP8hqPLcoeC\nJpGU3sjsiQv4w0KjQU9ypQJJk9+v1iLQwLzlxqVQvlEce2aCzw+cghbVs58W\n1cObLEn7VzMfrbsBKuAKmFsIj5rcEXllJZFySlXVuNwpxqCn3Q8pTU8YajTA\noSyuSoeaTIbmFpfqIMsieNVJTbSG21+gBvmjyGdJOjb7papt6pokZQUChCIP\nBINuGSRF3SDnUATQS4ZyOv+XCJNBoGV2FQtzaZAt6pZbdqbpr8vxKS2syvib\neQoserFPzUxXiI7mRf0b3wbqgfAE72X8DpPMU3aK5okI/CUUJfm8oiRbDXmC\nyMVuR1MRoRkCn4ljU3JhRjixGPMneaa63FKPsI3R8mOp8gy4xJwELbnvIktd\nwcs8altjmw2sxl2JDauK/e/VJFNt+cBzkfdqTA2YEr9UojOGapCLbR7tfSMS\n+/cwblrYEpa0aH4TRn3CwzTZEWrsuRUjEYkul+axreOkAOKa68LQi/qioGvP\n1FT93Sd2px69YenqcW5QjVOO/nlrl5gBd8Jmc/PZBmuexidh/I1YVb0WQv0l\nelrJJWBjvxjJ+kKKdOLDJnyMhU7zR+n14x34O3Cc6+tJK3AzGJ2UtACNsRkq\nKwLB\r\n=OujF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.346069ccb.0_1597947492517_0.7700927758172917","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/typography","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adaababcb5aaaf82a39d4d96fe5cc2ddb813342b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e27c5802f.0.tgz","fileCount":22,"integrity":"sha512-h26nbwfY/74mvHjZNdLVIJZ3wGNnV8fHoO9Vyukh8zluukcO2WSJho46s0xTq3FkHoPoGMG4zRFjzblMMyOMMg==","signatures":[{"sig":"MEUCIGinqmaS2ldJBr2K1yHaG21r9F4x1RtZKbM2n8GieIm6AiEArMaFl0CmvVn3rr8SAyj8nQYXyKJmjE+oB3CTqGRiQQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsuzCRA9TVsSAnZWagAAqIYQAI6jRK7ZXLtjt3yGlieZ\nVM0AtonrORwCtpIh3QcbjgvDgVSs2Xj9lEb4+lf8cwBIvQu0dBEnhh29yO3p\ntfHDXTvblm5NK7/flxC9eUEVZQLj4sJ/fMLUx5VH4nPyOy3frITeiBwNwTxe\njc9VKc1KVjkrw+//Or8fuAU11SQfwe9VcZ57+IvABd9hcMPayNtAS1J6mcxp\n+XXP+TF4LLNm13WIGSsSA5rVCHmOhdV0pRWAFjDoaRdcUgE3WysU6YvYx8Zk\nHn4Sacu9nJZIQGKdefhUB9wWThB7A+LGY7zjsH9r7I3h1Az86ycHuYgOw/UO\nidoQC23ScbDxljMgt/voMONUDnHHbJtG+cRYigGD8euJZHOnIQhmDyKkjscq\nIZqjmlV5zXm26lap/u6tfK8RUaKo8GkhDumKy67RgMLUKGP0RF9bu0FjKIAa\nPFSZgo15ggPtPkUcvxtdKpZDyPBagJ2PMDYIxnT85frNktzm5qsctH7l0+qC\ngVnv3CBavMtdm8cD4b1L4h3ml8i3Fv25nSqCYgmLPT5ZRR2Fib6RM91A4xwM\nPNQXBknUC7ZMILSnn0sNYrhNi4qeIwakgbVeVd6Up0C4qBINh1DODkkUoPMG\nQwzhM1os7HA68WyOzdahMrECzT6UpkM6ToJo/s9GrJuRy/Rl/kL/ij7WzS5h\nwTTc\r\n=cW8Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e27c5802f.0_1597950898652_0.6835274140228247","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/typography","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3f648430d0c0b321206b85aedd9f71400232a2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.f4532b9c8.0.tgz","fileCount":22,"integrity":"sha512-ASnMOWSK74MQy3auIGuMx+VYl1wn48yDNaXbe7GkYMbB0sBr9Z9SEgeLhR45Amg0N20p7xOUkDjp/HqHXvPdRw==","signatures":[{"sig":"MEUCIQCigagXhAJtbWldWteLEtTd7+6Oh9qISVVz6/W3XZ+XuwIgS3AJYfizcz5xWpSmClN3caCutMSraUh0ZsW7bP7UHYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtWwCRA9TVsSAnZWagAA0tEP/3rYwu0asNqLg2tcQRD7\ndWKsvaXh/077sfEBkaVsIHYyfoxVTxCiNXbSzqFXHKLOmbewOlSvzLLB6SFn\nYejO2evz9h0nZANmPyybrEs4B/efARRXBPzv5InDg+Mvruyo8KAMVyzHk1lS\nJzaZrp2F75bMEZ3F6yuC8jKD4dyNZGqmenR/r62CLqh2AVUW6kxoEvIqHqP4\nzGUO29h0l02WBiVE5A3fAxD27LgrU0Eqmp8ehGohPAVO2RdEUkFP4gX15nqT\ncptHBm21Xjo3RUAK9OJY1frduZYqK3htozTnmcwm11tzPmkBBMJMgN1+z8P/\nF3Ewju4iLLQ0lFqKrvIrgWMoLtPxmMKvlt35ZJ8U+mHTIAKM22aJc4o3GMxL\n/hfULm9HAYMaD0GP1zI8TkiTcCwkfJ3QghdB8TZl+LPwqiPsKBiGo3ulkmdX\nVIM7osOkQNyHpRJ6LE7LK2Hxukf2t/Af1Of67DnmMYiAx58AvyUNnger1iiQ\nzcmCBoH0GcSJy2za+5lYwzGZIuDDPjnbgN0ZYPnhsE4KT5Ef14lP8aD0MGdY\nlWbLLJfPmKxs7sjaf8o6SXL1AXfDGjg+KVri9pLQ1vEYFTQ2KLnf1OFJd5H3\nfLWOAyHWr4avQsnNX9lTWdbA2MldnC2B+QG2DOLg20pV9dF3iAaUPbuBBdRJ\ntXEx\r\n=MG1G\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.f4532b9c8.0_1597953455868_0.8082808832171444","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/typography","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3495aab40045b14266656273c47dba507b6337cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":22,"integrity":"sha512-f4y0LEe3gupZ7JNavqkIhzfil6lE7IJVzrG8s3f9SasPFelEcRZwCv4rfPYz9yyswFcivI4uKygPQUSbvEb8gg==","signatures":[{"sig":"MEYCIQCT9Ny5xjH+0a89IqwnmW6VuJ4Vc8fRv2vAU4C3tjBtoQIhAL5bkcLXB0EZJD+h1/xnpah+Y0f9DCSFwSRetncDBBck","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXFCRA9TVsSAnZWagAAJpQQAJDm5rn43RxumvA99C6Y\n7Bj/uEjhcAE9tVJAZnGzgZ88YzLUAYqdP/23bicTMWTWyw5QlFCsKuPIB90i\ni4OuWDldIDyBaG4NkyNCsMGrLbzmqhInIcfmBQn4+zo/qquefEXguzFJPnc7\nCRzhPS3agp7GTDgflBX7sOqxSkEmogtPNPzhqeWfDDERzVp99/8550bbj4BR\nVzARGOIoRSDV/IG0AXcR1r8+JgcAfgvfIG1DxazbFYKQyWMeRitxJxLJyvZv\noN/kxvxNmEM1uFCpALaeqBJQ8crQQYuRNe56RX5hRcgVxu3TRXKGret/R0Rd\nCcTNbH+SZm7VXnA+IrYillvWTDgswLOpAbuTv+JXjxq5IxDZ7Qs7zyuJMKlC\nSNSEcGwi31rMKra4UbPIOnJW54BaXFTNDXTZ/g1HCVxLLjrUHd9v6gVqEghb\nw3IXcabTrIXl4Y3/t77hghWrt8rgnrItYMPAPJdCSpCqbLmOG97GDVCLF+ZP\nXNA8sWcle0zVKwgbDByVlafS2QNsHRqDY/XE53c0S21SwXEBYqT6SkreNWjF\nyn/c0jhaIlbxQI0TXkOzLTpOnDuEMTkxI7LTS4RcwjiSKpSR/+l1E1JkadrM\nnyeIWNEonTShxMPgdoqTOsT1ycHlOtmA9zq7BcA4iRIJHMRgvndGYnUDMAC4\nkQnK\r\n=QvGD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fbf73c2a6.0_1597957571798_0.2240817391835277","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/typography","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.cf800124f.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"781cece8e952fbaafc77f8d4f1b2013c41d109ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.cf800124f.0.tgz","fileCount":22,"integrity":"sha512-gWjSJ8Ls+lumiEvwMb2IfSSIZGjdmI9enUnREiNpPSHcgqF4W3RGnso94hKI1VJa5WvgcyBcof8kjKyEA0KnAA==","signatures":[{"sig":"MEUCIG/YTYJ3Fxbw5ByMoiBevfbwcPzzXtJ1TzGyVaeOxbTXAiEA+n7i5RF8RY1rbomg4T3I53TS2mRM4YiNH85KWS3wUVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCaCRA9TVsSAnZWagAA9TsP/0gsgX1e7m+7gwM2VvQV\n1jlkjZMfKXZMsRIxacVpvKG2owoJwYFUvvWS3CGO5oofZiJIKJ8T0Mu9KIGr\nhHwDLBaBPXrBNJx/eu+xhsy25CXV5wrEdCEqoQf+NuVHujieSL2A/BfYmfh8\nJXGikJZrOxwUql3lPt5QnRkU8eZCVBbGlwzaulEeFOGtT6TLJGoNlfSEu9Qp\nT8OQeJlRWgqcCnBSUK9TSGNZz+ipqLR5eivEHIhtC2dXUdMMe30Q8W9uPiEU\nblEUWFeCOdvoSRYTtLEzy/jEXza2Cc7xZKs0tQ2y3HrVSqk/zPYTlbrXw4ww\nIF80zOUtWJVJcmY6GTUDcwH7+pB6/1kpj40IN75+djQ5iWxaJY5KU0q8ru4o\nRdV6dnjbRsGaa4K5Xa6UoTpzHSMs5ONJ3xiSvXpcG7FQfQPFgBerP2dlHcRR\n+RZkXFUgysGClb+1r5e+0u5T87N+qfxmoKSbfRRcmHemDJpw21SUo0jN0F5K\nOxrEl8k6K5ve+26AR0g6DOaPZ0nG4wUoFD9BeGT/5rjgC1PyR/GY2b/Rl5PL\nex6aLcK2vihXiLYwtTpVGWXPyTF7lIwFVJL6FkbXViiuX3S0tpPMzVeIk9/p\n4Zl1PG8Ov3Lo0D4EftfdW1nCdcouq3nWHA4rKb+P4ezL4d6Rx9oApe06eeoG\nhR4I\r\n=WOgq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.cf800124f.0_1597960346451_0.42599276460155067","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/typography","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d2863c8d28355de99c7670bac4c2e261fbee538","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.95e4eeea7.0.tgz","fileCount":22,"integrity":"sha512-3CyHWM988HfCmTZqEeGi2K4rKOORpq7k+XSNx3ikgmclM6AJCADJJWlfWAzHxJPFpKJeJHYF7F/yGy/z1ETsLw==","signatures":[{"sig":"MEYCIQCYMO1bOURr9WHozNHsfoZJ7nQS6IHjtN21kAHMl8y92QIhAPAR3aDkKmflqwl5ZQNK1tnuisFjL+s9qFusCQughQMR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwcmCRA9TVsSAnZWagAAIsYP/AtDH3jyW+SHXmNt4qY8\nDhie7sLGvcfviQc62UYFUYZrlmmlnNhC65dCJZVbTQrNbm+Q1sRsWcWIGUgh\nS63i8QMG601UjAkTXK6rgu7MdZGg5yQcYfkRwSGHNtj+VGKzvX1mmgQFCp8m\nvfuWsKtPNc1MNfF2kWHw6VxnfU76q45A9JFOz8UFkCq+ZmvGcmOnp3oz54Cm\n/HYZeM4G8C3JnGwFOeasiYDLVzvhlyaTUNxfhiviSzI3Y9w8Nj2EUPbM1jdD\nxmfILOse2/9g6virftdu9nm6DDePBelDwMhGa7fRPc4NgrfHE6g99My+dU42\nNpGqzzbqn6K/rnHFZ53mMjCEFyXemh5IVrs2xnJOGhiM3rOSun2AvX9hj3lU\nVsKCisuNPzNx0vhBVto7UlvZe41Cipwt6rB9bu+U/PuHpKBx51JmRcPCqrqN\n/pfGtzGuAx/xqjqfWJ3tLAawNzaQkmOC7u9B0x1FRnumXmzTiea6qVl9cV5V\nsXWR2nxqjL5KDzsQy9AoteXpTpwX+SuENiEdjgTebe4EAUtP7JoGBCfwSGd6\n5CT8l5CnyDeY69IG9yJzm22E5qNzPmUUHEZIgf+RX7by4djilNCju08WMfP0\nXHuCM904jRxfb6mFVCnHTiHpGn+xCW4WO7FbkS62sC/7lOOYPkTnFBDKCtAJ\nalmo\r\n=dYrc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.95e4eeea7.0_1597966118222_0.07862448878631656","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/typography","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09800df034a34b336891aee1ab7c39ec046d1897","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.91ab1c62a.0.tgz","fileCount":22,"integrity":"sha512-KGHXXgR7IAfKnowNw7EjkJaDqYNd10YdZa3dOP1PnDch/B9bUX0oq9fa1Wd2/AVLaS0r1BB62IN4IkSmK5uRNA==","signatures":[{"sig":"MEYCIQDbkNkVxkoEHX6RmlKF5iANc8JXK3J3d/Xb1JoPSHiHOgIhAI1PzATSwOK/QtZKQuzttnzVHDtaT19kkdbGCS9oD57o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QnCRA9TVsSAnZWagAAlagP/izVssBNVi58d4UAAZPJ\nI4eVfu3NJSHLjmQRWHk7Gl+yyp6o0qBc/Sd+4+YWGogdgWt3VgHWcGujC4G9\nmWkRTHEdnn8+dC5inWWXt+2koV2jVV3QfCRSFsMFNwUgTqTzQjrgTc/cx+RA\nTIWB91QVIENBCck+qSfX8s3jp7DOateDsqV2xS3/yno559yjPD2hUry61EgL\n0CfVKNg1i94T6bCJgUwh0rZE3FKXmi6F3qXFahV/+uvjr5x2jyCs2C5zsLcM\nQ0lKsrGo+YpAMC1cevPkBWlGvmcsI5HL62ipqNPfq4zlIET6XEpqSWWiGa3p\nb00g4QyebTuUnKQ8Xp0UnefUkQ8mNQPYjoTN/uge3j+C29Z9At39oaVcHseX\nZxRpJoCty7Ltr5XoUbGunvZzCLxQR5qcLRqgy+fwyzSyTBgDSYEZFIUrM/En\nroxtVRkok2pLSPyRwzZKEchPxB6sNAXqEcQyBe6ZA+7s7k68fFozDV7jZ1g0\n6BcASo1L4Nt6ptvhfP2xhJFY1BBknsHEpBK5apZTheuqntiXME95QBhJ++Xu\n9te/rHLxYOVmH1K8z35GYg450V/C/yxtuqmntl67wIwEJH1p9yPKUhXuNFiH\n+CTrhLHf8sCrLYuNdwjOJFuVVU/IvXhF0n0FK0CC2K4u1MIyNcxzfM7tiwg/\nK+BF\r\n=Swdx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.91ab1c62a.0_1598022694647_0.701474493506179","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/typography","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a774ad5215ab34d12d2ef5aeba70bce1f5678b12","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.58eaa9f02.0.tgz","fileCount":22,"integrity":"sha512-QzaeoAlxmlub13c8wD55eW5rNVJMOpSitk4yNPXlmhACX1fpHOQgBExZmC4kg9UtN/VhRKbMwiGQnevIjt7ywQ==","signatures":[{"sig":"MEUCICafnlvh7Ra3nx8h/O7A+oj7Hto2aY6Xa8d1OhJ6g6aDAiEAg99w75v0mKuhTMWw4EwLWQedbO2vpk4EeMVaNdooJjc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfKCRA9TVsSAnZWagAAjIIP/Rk7WjC6heRRTeNXZmgV\nkFNJsIuACzjACRiSa8jJ3dwtlJHMyuwItQt1wK2YwsJi+842D7zPz/kxjtVf\nmrLuGdlffuOpLtj/7T2RyvRYJtRcVIJWeu6C/5tf+TVg9kAC8LRwr8mDc7pK\naIBTct7pW4hZZ6nJRCGrMUCV2vgUjdhYPHrwMXFqKGHjoLybqDHP/e6+ADYn\nmPlLrt4uebckCQjwGWJoXfTF3OPLeotj+T2nOpa0MfWH6yiLEFnxUO/jv31t\nRT0VyrA6mieyBDClIXf3ruSMTHHOJAOzj2CThxNiaSIsgPL4PTOg6mlpJdN4\n01ZNwfYyjgEiPzVUWN+4Gcq0aFbxoLjizlEw1W1j3x7bs824WIz+14KYRppG\nidG6SO+fgHqXuiys/adytRrv3186y+a5DdnHTUH7WMQY3EF5egGMKWKxqZiP\ncmw3qYrKpXB/E1Mlwb2iSxhKdNpw1hIDS039KdmwSnwFzzuq70mrHpzjCb9E\nttr+Z1wrmRdljfoTF9RpE63WNRSF4DCHOVfQT5nlbTEl4ShNWcP7YX5k69nF\nVTv6Rhq1zkKV8fUoaRymTzDjPOrPTifsvGMzA4I+AvGZDDTH/xofyAP4xkAK\nfG/phRqmGhh1qaZc2G6Dm2KP62kMBtP6pMowosAieB66Qb1FpP5C5JZZULmq\neKhx\r\n=YNr5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.58eaa9f02.0_1598040010062_0.4981804572069124","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/typography","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.238216fc4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe89ec4a46760d96b562bc7a0cee868b4ab89a07","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.238216fc4.0.tgz","fileCount":22,"integrity":"sha512-LKQ8jpafmsMtUKRgsw+rfKvlE74XzEJqd/swcOGeRW1vuqQ4sG81iePhqzCVvxsQfr8yZokBqxAxwtxAh6zWRA==","signatures":[{"sig":"MEUCIDlM3O4c1N2BrkwShVEnUI0NWsdFLpPDt8f7ZA0vk97iAiEAvUcS2O0fjvmXyBuc3MTF/OCuX3NIlbh1lX9UAF5rk0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ992CRA9TVsSAnZWagAA58IQAIXCqyJxdiGGRGtm18We\nw8Ny8KPSZ3rZghZDMKskOppTqtnJ+p7vxzLlUcCML8DiunHqoCCYot9lNrq0\nefzEXgJ0csZT2liZURdIkvzA3fu22TD3pfe2N6wWwq0e/g+KkOhTWnJaZR7U\nQFSJ5hsgWjZZmMMg757v0xvRNqAdL9ATSQFyDXabM0aHbodbBYbraWbwfOmE\nTMTbYC4doAwolOpAGd7l+R2DQVdOXGJRfp7wshaMsB2ns346TL/4iyKpeDXO\ntg2lvsdNTt1ZNVP/m6Mdg+to0yRNWpfi1RDxoTH1m1Yi+B1MmUAp0lnoSdqm\nYzVAKE5afb9sZDz9hJw1UKfAn7u0kJHvNOLskgajV40G3Glmwp63v9MCGNOs\nZjn1805+vdlhC0FoJ9oJZSqXarVdL8KdzHloash+xdKGJaRGghLg0IvjloM6\nTALcdGBykivuOkeC3UieXnYk6eBDUv7IWCZUvjUQQBufSw7cRR28jWvHndwj\ngaqF3EqxuTYC2yabyqdS0PvHPN6CUk1h4r00G/nfcwR5ZdIEw1lygTquDeBV\nA0JblZhg8XMe1Xprw3HYQwOFjOwPg7lTmm8CZ1BJfAq5YX6YgbHbVt/66hnE\n9c9e1LmdEc0CJnqBwh4itFT7pXOkN6ivVSYTZMVIqcLiRPkzbc3iHPBGBU5d\nBQ2a\r\n=Y9Ti\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.238216fc4.0_1598283638363_0.008817394887637997","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/typography","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2489e4db6e890123fa9e4e10f0153bd800bb3fbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a1c65593d.0.tgz","fileCount":22,"integrity":"sha512-Trlypqo1AP+/3ZgyalZoTGLPqHe6jeXRUjhNDi2WT31DodmROkmi3btBVJLY/oxNaE55sFoOPW58OkdY9uR08Q==","signatures":[{"sig":"MEUCIAwpI/gbwp1FYbWAUUCZXzMGbKr1Mri90Gs6J06Rni+UAiEAutc3QBONS8PeFNn28QLY5TnHOKliggf8DahygIjKShg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+NCRA9TVsSAnZWagAA4F8P/iu30joDb+q0rlMInJvN\nU7dW8ut9fq3XY5AvUYvl2yvApvZ8u8GYI9oxqwzJmdBfvBfQeful31m/CFyC\n5P5HwUV7qsvml/4wu7cqRyd/iSq9NjHptZRdAceGAfKNjtcsDgMLPcXCFZpU\nPhA6ujSr5iefAfHPUR77A6tF1bMr12iU4sTP47bdl5uOsg3nrrmDkeVA6zb2\n514ndMCkW8BlulLOB0279cmHuj8nhPeZWqmm8KlkuZLGjZF1JIyaeq8rKXlY\nmsYDL+xnY7xMZ0GyDy65rwDp7PFwEMYiOyEODSL0rMuqXAo0O/TujjlUtHbk\ncvth+XcxWdu5uMg9jDdl6CI0pZ0DbmybA+Fxey5Sxb7zgdTDuBaUWk5kMN+i\nvYBDAy/eBVk3bxl//5mcRgrki+BRhG2oFGwow6VmOhR+p3mZmpJUW7KPAr3n\nX8fCRGori6WXKbMBCW6vCFWGAZYbxN+m4/bXM0GroikfFNEf72Ohcg93vygl\nnh0wAsIUhIprUTIpppLc2DnwHRHzETaorn+KV0CFYk+XvrI9rApSwB+pV9P/\nhaiJeWRUEeqn3DIY0yrCZkfgkpyFziH7Om2nH2/Io1KluvFlyRkOGt1isNiZ\nx5NWEE4sdAdlzcgieF7PJ5w1o32GRAu284xKcyTfWSUr9XB/xa9DtvY4Fg+x\nv6g7\r\n=qmB2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a1c65593d.0_1598324620928_0.7097844209356257","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/typography","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1edc73bf54ed0dfae3e341c9b7fd0d0d4de9780b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.708cc09c4.0.tgz","fileCount":22,"integrity":"sha512-9mT/9XT4YVGeUBz5n+bWRu/NsVpu9TrofNryJznWzlr/2iS4+eWsZtkkLQ1NCWBEnwwNNVz8NUOOtL2VmYWoig==","signatures":[{"sig":"MEQCIHQW8C8wN0guGj+TPyWytqMG1+eAT4LKTIub4yrFLFggAiBopNdQxaca3+NJeem8uw9X3kFHR7DukGv9DSXELX4/mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTScCRA9TVsSAnZWagAAlMsP/1BYYHd4CBnLhkGQyLaw\nSneYD+upHSthcTB8hHUL/G2A81Ryudp/869cBhJWHE4aonqiDpU69+ABhecy\nKu1nD1MrepLIrtxwXf5SYLxnBIiQJStPEfoSiIsKv+3MGJ7+8ebnPs0HfPtq\ncjy/T0Rmt/RSfDplr3K8B++YzgLEFk0fFWbCBexihSYBdgLpqG6gbjdSto5I\nkZwtRaBqcWVgRNsn9HTTJcWkWRngODx1mwNhiXXq26NYZjjRJnPU6mW+wCph\n6kUSIQPabC8dZFid7WfbkjjDhYI4EpAN7NlTMPOe4H8ZGHrxV6AwYd3hTxdn\njz4zq2Zp+5KKWpEd6VkWbKvrjPe1ByMEzc9xojEFXrZRhxMqm8Go5plL4APo\nrNbNThJ1SRbb2Xul3heF4uePPTGtRpPoKIyFPEzfMhr8+CH4ejwkvpL4/XqH\nsWoRsk/OOmt3p6d8WSwOom5KfEhYOrdX9Swod1cg9/SMF6uQ3DctgUmKgxeF\nv9Lv9+PUUau6UruHetmu6AikCGvbZMODLqZYtL8bZDUt7Hsk6cZheIqmJ6Wb\nQgcOd6sK0xHDuhtrzL2KRhkqZ8QLettK03S3ywELo//4HZ435iegjY4oG2HS\nJXOY24eoEvotM9UqCr9oE3TcDYgWAuBnwmTp7sT5hM5vQ/FcoTWUYhMBgeW5\nDJ9R\r\n=ug5r\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.708cc09c4.0_1598370971970_0.763680803787647","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/typography","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea1ca9cee8fb9b87fa98089544aab5d92591e7d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.19bea2ad3.0.tgz","fileCount":22,"integrity":"sha512-eNljED80S9COGNQoNWvvu4VbJufP1zivAYm+RT9yViA6yPpM8JaqlPQ0ibecpWt5Ec4ZRdGARJhXWoVlFFm7Ag==","signatures":[{"sig":"MEUCIQCcrsLvT4J6T22TMWRvSn+Uj0OQaakYvj1MP2B1nMdy6wIgRpFM8uAyHA8ppv/NqjJLnJ/M3uwof9HFxS6QxAybNbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6lCRA9TVsSAnZWagAAMBwP/iUkvDLLohMh/j23iais\ndKy4TqoNQuDCuc55q+Sr4OtKKHQh75WHzOPPF5JNZK70OZLrZ2DYRoHH2Jii\n4pnOwYLkAWn66he9N91uvxfhUlVtonlyGBwoZ+6gSO3UJsasbFXDA/4E0Trr\nocx7VLQXDXF9D8eohj6vTBa7+qAGawIGvc6FFSXnBzwPFwW3kB4SAz9jiLUv\n8pGKQuz73OFYt0/bgOv/oiKbK8hX9HJ7sYIdSZkL3tWLio/hHBAeWBm0+BeG\nZul2EG6FKEmZvh2b2z0jAn5BHAawQjIobxapdewv8MmAgX8tHCWnKS2X9ukL\nG5PE1v/Lf6An4vNJbN8ikCCZRGVDUFzKkA0NUQH+CFOtETIEAhXT36ewtIUo\nL0a5hDvG2TKxp+QdeteiS6kQbU1mu8ok0HjB1Q0r0mWT7aTdIuLoVSqejvx1\nqqI6ZPd7iro+fpxJiY83H4xKdtjKr0MJXK3tWYw9O4W3tomIAnoXtQQGJFA5\nzn7BmCMapS5axSrKYaiZfo2wuUkP+bGQUVtG+xvBRGsUnUtFiVBdoUEnfiyp\nsmGfCldDCCT2IWsSoxzn+kwH1eHeXvKoEaDN1+DPfXzQxbRhLxB5ikdR0I6A\n6t8Uz4nTAQBbQ8P29qFTU9UfPW9ZwB/HJsR6MaDtiOtGA9FhUam17Ja+mo21\nbn81\r\n=lhyQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.19bea2ad3.0_1598467748119_0.21851613310516993","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/typography","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.911014711.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d1401ebb2b956a6647d800868eda48fc3d3b0e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.911014711.0.tgz","fileCount":22,"integrity":"sha512-UtjpS/M9g4gN0zIfs8NxuJtJxl/1a6JeU8oyjbidzstEuPjDG57GoN/U5gmPA84CwNsBnKNZaRiZg/jJhhuThg==","signatures":[{"sig":"MEUCIQDxhj4CHqocTGFT7tlXcewxy3sOXOVGEdI4+byBjuGj9wIgFQcxydG69HOxxvm2D/B4w8H7GILqGNs+UxQHhxRlO5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pVCRA9TVsSAnZWagAA4A4P/A0MmjXPX6UczsWnVVuu\nRnDusLWp12b2ukOI78yJGhmna2qn0bOjNYa1bhhvVBrEhl+SZgLIO1UyvTyc\nJEjpcqvni50mmxjpNqUt2RN6KQCRwwB9JbktmZcTAukOj2Rq2Dt0iCckcMpo\nkBnWgPIfF/wFbqJo8lPoy4TuZ1sm6wpg1A2lfG3UDJHuAv7q5ZbMjdAtzkE2\njct17mPJJuUK60ndGAQr9uo3pqxkmg6epiUC5hiOTF1jpAd7vsvyCwJUkoBJ\nrQLXApHY2PnGKkqfCzTv768Ca950D5aWXj3dHS2baUjEK+isWV3k5xIlGws9\nAQL3edmW8PnPDyVt8zNxut5VwnMXe7u6hrSv7ADGseUTmhwpiTpjj8LZj5eQ\ny2EyOtL4yTuYFMYWRgPgaCClQFcJd3CCV3d4p3TNYjOn8V9jrd7xQtXI2/rM\nwkwS27a9m4Wr3JZulrKfqri/w45YJBvzVr6hwH3qv83koeIoaUGXcj8yNWOL\nthfGG5/cLWQp741W3P2AbO7h15+2XV/KJCk0a2VamN1Md0oPq2wGHUse0dpX\nVLYPHZsaFLadK8nLdYuwb985dD7xuHm6Uo1q61aqbA3+L8DLZbhguOmDk6Wv\nPdYmdBGtgr96WykkiCesA4n/+zR9okskzmSH1WeIr9NQkNlU+/XRKfzrleGA\nIW3e\r\n=7gX9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.911014711.0_1598544469128_0.9354370592134686","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/typography","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d1571ff16bcdee46645ed6284a7937a8fc2ec90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d3387f54c.0.tgz","fileCount":22,"integrity":"sha512-fXNVhkH7zKX7Zdfn+mTAWLe+7B9vDAxEK0l67kHXWCk1IRmDzxp/C1mdBJ2hFmZKzoVIeQII5ro0FWkrb0MGiA==","signatures":[{"sig":"MEYCIQDHVgNAMn8trCDlgX5gAyE5uhe+cGwl1Ir2zjB6BkAEsQIhAJVzzUhAmqExkx6MfkNgheKnaUJucfCE9EUFQet6arwW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgcCRA9TVsSAnZWagAAkjUQAJLfO4K5y198/7N0LmFc\nPPcPEPsIQkUsC9S6NTqIzrY8fchKux3veAAQrinxwm9f6pMjLSPWPIMqQFur\n2h0TtquFXEY2Rgvi7hoIZA+lFQJQV8ZTuRgxVV5vGB0nttvZaHJPz+3QuJWz\nBn+6ErYnGm8dflZlmWl8Jcvf7A+x6094HXn6Ftj2u1IUBUJcg7MZOapDGOgc\nH18qgLWT3wZsLvO8q951rwJCq4XDlTiTmd8XVbBkM3B72p4YeToBKQr+qrxy\nPxe/lQMfMDAbpaDwQkm/3oZb785+NQ+ZwFUghlstOVc8kPEMxZYno8Ugtts1\nDe9xgcIIJIqpsUTPQ7HJLQ4ldUta1xVFEptq+LfByG2qxegnYeiIHnRwzwOy\nHSJ5B1GSa7TSIfwg6Mtx0wLuhW4Wp560s/zSmPsRVvG/SW4ms+vokDFG2fIF\n8FnFX6W0uNbhLxEBOMGfCl/OSA7ev4dJCdtlOevsydue4M5s9e6RU4pTjWlt\nX2bjc+e2IUIIIELs54oIbaptCBEm917iks0D5GzHabzJoCjyaUGqY28a6jkH\ndwDnhne75UFwyYo0cysc/AhnUbzZFpQTz36wpo7ulEInbzhyFc86nCthJP7E\nOk0oGP3zoi1OePsemxISsyl72QZSopX6HraSBmuFqK9nmLXP1g7FB1ERn0rI\n/gD9\r\n=VCCa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d3387f54c.0_1599166491500_0.06066035287159344","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/typography","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1f8d464b95f9b7c1117af91c23ed5db2af096e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2ccf996cc.0.tgz","fileCount":22,"integrity":"sha512-2ngD/Td3MpuR9RXelX0VDwChD0Pw6vqCM9Oi+W6RgsStn8Myf9+LJdeZFWT6YxP4QjtvAKR2osRGk3Ves4mVZg==","signatures":[{"sig":"MEUCIHlfze019SkflhC619A4axSLM/VrtW6CMrbjsm22lPE0AiEAyGDe37TQgo3fGtPePGeZ5rvqTrfcNwuC8hs+NvkHIgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgxCRA9TVsSAnZWagAADyoQAIPRVNgprqp4AdFZYXiL\nh9oJnbR9CMeVGHAgZMqdE/2QqrYxVf5GfLJNAMgaQB6LKaauWY4ZtkqauEG+\nT4nRKNpjgXoxzpds5VciYYAIzWphJ4/ajrZTbwsDhijR3MBNA70dheaUCDVX\niKM1cQYr1vpvH4zIWQSw9hegdeT4G+BshTpsVm1sGnEr9GF63LOukM7JTw9x\nf0yfqCIOp5YwGwzjJq+hLnl3ZssblKhN8X/o0YQ+49lJFP5zAUpYdmp4LYND\nRSINcxHjBoH5I8QIh6jvjdVVKZFfiLh/+3EGwe2KR+ftriYUs4PyT4GxYhfv\nSfWwLRdRujzRBT2bSF/0ruQz9F53WvHlPt9ZGyPO3+p9IY/RMiAHuGhbiMEi\n6AQMCBBbtTHvCe3jbJspuJey3KrBZaZiOsQlntyUlVermilgwyopxuRQ0aHP\n51xl3urFPFXGI57OEtA8Ddiu51iDl2MZq3AlBDZ43oQVG+Irw5IRux44zlDY\nekV8LF44sEDA+O8sOarrBURXgCh7XaxgsvstfyKCo8oI/BuBfIBem+YlYCOQ\nWtG6m7tGn/h4MzpJNIxTa44NFPhfvPV6WivFXLiwsus3Y98gIrSf3NpSdTHS\n+EwfjRzarCz3HXBbV+kqHg/qBLEKhaPpiFxnStPKIuyY7NkWuhnZDLr43MzA\n4fYK\r\n=x6Us\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2ccf996cc.0_1599166512712_0.7806095114249614","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/typography","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2effcc059fa9e696e893cd2e0c044a0513f6c0ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.744bfe5d8.0.tgz","fileCount":22,"integrity":"sha512-ORx84GYivzvZLOR3tZtCJCOsimjpkmn+iN9P2wCZbmzhRsmIgqCIG9tVXHtIOhURrOXfHfTJhlnWUnzmAPKaTQ==","signatures":[{"sig":"MEQCIEJw5XobIplnG9KjRiJBVkvDfprtcZaMWJHlrFnLVIujAiBL+S0hnAQOUj8OD5f9u7NYk8arP7cvQ7GB2U2g04xQFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhmCRA9TVsSAnZWagAA50UQAIe+uFCg7FWVph+AXKGm\niDHO8CS3MYooX7qDbYZthy4eCg8zJXJ0Dmwct1YJkqaNzK1+1gDsaqW+U8yJ\nvR460RNhI/nHmyfsKNVjW7D7LIhJbtXIOmKwVgewcxDVPqNsvjXSHTqhnxAX\n8db2h1q+MsCkppIrKlNFiLB+7ju7jhOjnviNdOcxnzEY399ETIW1x8UiWwSw\nVKzp/fPcAiM/jyDE9d5fD51FCegdG0ursK/tUMM3EIuJyNLWk0fgWXCzNWmh\nGAAwofHs9YFyemwYDOVWHOdZbTIasg07g6SLn2voI9uPlnR0dT0a7rLYzBp1\n/ZfwIjpRi0mU76IPHTVV61bT7PNPMFMqwawIf+WZzGcbvJoVMrve7W2pKjms\ntUFGfVTXyT5KKt/IadCmpaZxzzQ765ZxXEr0Y6G3gH3L9HBM/bamuVQJQl1S\n+txq/Ydd1cy4R2zRVainp+pzV1IXcTHPHQsjPz94xbA6gZ+reu2BfXHcCxAh\ne75ryvAXK0+RSIPzLBPE0GXZ1p/xTPvw1MTru2oSz54BbwC87GfJxFu9g1wq\n4zI6hYpMMtB5Y6Ix4w4NSjOP9HAqoseQRclt+YQgJRky9fkeRAV5oSPzzY+W\nNVjYpIErGGkayiakQ1feiUml6OQ7PBL/I7EUaOBEFD2TYUsBgLvxebJ3cPmJ\nv930\r\n=kk2P\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.744bfe5d8.0_1599166565792_0.8350027327490808","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/typography","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1facb526f8a41e07f5e4611fac5dac50d027e96c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.78da96eaf.0.tgz","fileCount":22,"integrity":"sha512-CskdEwxLSegyGgWCk1WB+V+BQg9al59+T7oIQkbqjfoJpBi/XiRFlOTH7MiiEfvwRgoO8nVXCHg/1Qdf/pYRZA==","signatures":[{"sig":"MEUCIHGSEVuJeuFx/I8KlKFD2ULkg/Lpkmb5ZfqeyBKpP02gAiEA/FxS9qx6Ew/OumF+CNeV2B/i/p1DzDeh0RAGBrXS6uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9ekCRA9TVsSAnZWagAAmUAP/1siIAPdFtcpbl+Hz15H\nq2WC7aIb4C2ZsgQvOSLx5nIun1A3s3k4AUlrB0dxp2DUUk4L6j40FyzbIpD4\nN9Rv/7V8PHIqxhuhp8AaDsezyf5hobzZPYQfH3lk4pZ/ctUDa5//1+vdWlPy\n9dtGZ3QwJ7j3PAH3rFMQ898M5BcSgLv7h16nwCQYI5GoIlxx6C1Z5LobEyNF\nL8HF11ayuyI6ZGz7tXoeLpcO2v3u9Yfmj2m7FCZOGNxVnzXpFAEBZo9dzPhH\nWL9gDHT2m71iSPWAglfrUIWksQcqmeUpxFFg0YFPpVA2fVLz5PROw0y3tSKE\npFlWPW1SL+k8gUMueUHeEaMTVaOUbUu25weL6awBwIsfvxbYfhhhL5xJ13rZ\nZIGDvBEVr4USJ7kOHFxxVxHdC75jIgpx3kXxCPrV8lkDraPZgukQI2ENskTW\nCavPHsVCXXQVGa4PXkqdcxXBIF1x1QWNYCqfXObl5kg8hmhddYBQlG/h3K43\nlsStIzP2Vs2csCO5bDZbpCc3//Plnrx9YSajxbDEnkpUfAh0JmSfok1Qxu36\naAwmYNuufyXaaoSP+pY3hfMo8BO6mUWxqW6B8z9PHEimkVizy7rBIjzB5PI0\n9YLS9sdmOQ4zVqDlRxzY04UMim4CIbO+bO5HohUv5DbDCu5r3SKwkf/o50hL\nnMn5\r\n=PSPG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.78da96eaf.0_1599592356028_0.38840350947969027","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/typography","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4920f59a764379ad26384403fb001109790809b8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.b0ed593cc.0.tgz","fileCount":22,"integrity":"sha512-RQf8KmdqBqRABGsnsvTMs+kMyWF8POubt/cOJx1eYUNRcKvfHR+Cdgp9z8BXpsGkVYNfsAjE2/3Uv+3gdh7+Dw==","signatures":[{"sig":"MEUCICxNmqHjYJAjQgT4iMAIDHNAVotvclOVXBC3mm1c3bEwAiEA8vUSTyiAG326Ac7nYLJbMUIJr2yP2acgZnV5S51+zag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMYCRA9TVsSAnZWagAAaPwP/3ZPwix2ItMU5vmZaYB0\nNrQdaP+eEc9MTDHB200fIAew+BZPDLwbHzS0pbo9x24CIB6Q9I5TbDHbVad4\ng9XP23+JbTXUGa/GVke1ZTTMpZU3WznIRaJEorcL8wUN9I9j4XAj2CpSpEro\nXEdesZS1PO5qKW8tskiPRcvw+AIrkNgYlTvxgSZS/uEMJqJa/jrf1RcgP4cc\nhxlqtizGIKsf2syPMvqjQhTz6rOTXHyD2noBdBdZxL5vkRnKjWfnAsxfJ8vl\n/fv156bhekViUmicHGJi1MqRo5lUD5Zlx0vEG23vX2ddqG2OaIC8/WwuNo8T\ndzn41R/S9eB+zTrB90eb+FZghumARjc1RfIG+k469D/ymgQ8QPWN8c3Imx96\nUIlRj88fG9fNga8fBMLc0pibVPXPrsIMj5da7WFfGNdH/3s507GmtqYeJpIw\nDs6uXbrR9iz94N8gVuCFIcWAwQFoG6teIx5E2AQEp0qU+OGwS+HzoWvwpK/v\nQJen0VHLBw5SkJ6pABT6W+S0DIsEIDcF1JuZ+umwRVTUEVnBonvNOTwDvp6P\nZkTfWvxNECHf5cE+7KRGA49OMsrrGP0e+Vx2Q24i/KTDGtsfZHPtM7vG374N\nVaBdOeQLP2NzSqcwdzyyCRFIPE0UJz5OEu1LurmuJldK7LKcW9i5MXcxDWxE\nGAac\r\n=xNCP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.b0ed593cc.0_1599632151633_0.7432665793100781","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/typography","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eed24fed6535bcb3232fa988364ce260e559c65","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":22,"integrity":"sha512-GV675qZbo+fP28ycxkPhn1AKcO1ID2da4oo1OEUDXfHFIb/SCd4P3JA+nFsu9pWjXIvNn264W9b4uZwyWpBXlg==","signatures":[{"sig":"MEQCIEYD23kS9VNGzhvrfMKz6cL8boghZmAtTbC6WiJj3hq+AiB7VAQ+csDwCO5+jXM8kb6Lqc63uwFqxxElGdhE62x0bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpY5CRA9TVsSAnZWagAAYnIQAI5WRn3LTqkOQqx+UwBh\n3B97poLCAWwLfIRAKi5njRpQrYG4SGmArVyEyYrgGyUOR9b5xFSbZkLsPM9H\nS1Xw/KVfXLpnm9hPYNZDZ99q2o7wpVGzsgKeqDFBGHZhA9Pr2sNR1Os9MJKx\nkYUdbjEMG373F0SJ+zZDmGqmKhTtnPLzipbFiRAvYuzvb+xxoRa13xFy0ehN\nstYQRfQdIRLMeVhg24pXf3qc6GdAWx5RxXYdhyQQG/0ksO5SAwTbWYRyeUlX\nsCOX6Xk+TieA1mnRA+RSp3iS8t3Q/Qyv+4GZ8hKgLXoReG2GEdlBujN20BxC\n7X8YXPwQhoY2jzMxtEyqktw3cyUIx+o9EixAREcX+Opb3NwxBjCxqL6nq7aq\nL3G3OYJufClxVuSAtR2WbAvsk/kIxo/gohzuoWhFU2k0ILZx5PBtXtqJsTs/\nMVtbVuSnUFVWdFScMXnJdb1o39vpwxT8ncN+dGdlBaZi34j0jpNXSEL2QMrp\nysLNKWf4odnIwO9kOBJwZqizGMk4ho3SScQpya4Goih8TDvZSO/yNM6C3LcU\nf9jjPTAJeL5BS9LKkhqykU8kg7+k8p65yy3M8m/V3zWzbaSElLR8Ubj3/vp4\n7m214XxqdA3rL1gtZwnpVBVVF+zwedbgri49NHj0CydnzekoK6F6C0NTSdgO\ni4HA\r\n=70N/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.85a1fa9ea.0_1599772217253_0.6677252871346233","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/typography","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a600d2d7e8f93264ec18cf15bbb98bed0962c26b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":22,"integrity":"sha512-zd5EBYhfzX2W66JhP/MeXj6bZmnutKICS/ZE7sdJF4sxwU6JKHoxYKPZe/aOATHUbnKL1thsE8Vc14KlRLCQdw==","signatures":[{"sig":"MEQCIH1VOL/W8YmLAZJctqcmknoVfgIFj8UQNioX9VLCQSgjAiAlWFmKtirbb8UNdAoaTFqEIXFoVSnaVNQ6HSG7wBh+JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7iwCRA9TVsSAnZWagAAs+YP/R+zqt2Gf4FN9Roe0Nkl\nsmlf8AaJDGPOYB2tcyMuKesWu39CCm9e9/Ibf1NPMqvD8IG/7NVYT3zMkI1i\nrbm8ElwXxkMuwgz8nxzZPFqoypaZkzINIuocn7Cd9Hf2mptcO97CHGqDwcth\n5tIs9vWcliuwdkvNtU9Z8PpxngthXJWfcqBLn7UMVN7X5yVjjW38fTsbcywZ\nvo4RvAyd2W3jNRb/yZmXAHTEhUAKscymBojFlzt0zoXGC8uZSzsIL+xJuFVj\nLGwHUT6l+MorKZuWS/TNpfhqPFUKcaJC15jk9/m4my+VIjmVNrct1Gki4rKW\n1pK9xR99Sj9xdf6B2zCy8SRoayT4h5OBWtX4fjjj5Sny+E141i2NDXsd9nGv\nQ2l4QClyVuryyDyhfcZPzfuedqeVHuLFNovPU2Mvr7zlWf9Sxo4GkkHRrTlX\nBdcM7HPRXx215Haqn8FF40Q2LjOt0M4QyCXbQAGlqswKxUBYy1ASxAN+4B8S\nPBw8xU7krPP+wNIm6mWXtGFOtwgk0yBUuS0v1O7BCMfT0kArcr1RBKZQPsGM\ndFWjJf06wILPS2sR1FnaZyhhF9UxSL1pL9wwgFsmZ7HQqivAGUhoZKKdkeds\nf3m8x5q6aQmqnBzYCFaQXaFUilJ+62tLHi8Hh7x54y+J1yitVlwyZasoUidI\nk5x8\r\n=AEzv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.0bc41a9c7.0_1599846575528_0.5195617325864335","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/typography","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33c21d4481be68aca1a626a1a1f48c5140e1ffbb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fc0eb5013.0.tgz","fileCount":22,"integrity":"sha512-xEvhGCjbSXtHNlCMYeFGfMxoGfPOqBj+we8+5Hcvgoi1sLjFjbk45ar4MH9ynLdlGdtj6nIPHBZVSN2dEDX3pw==","signatures":[{"sig":"MEYCIQDbxGqwA318TAratsIyMJ1IPVFhIX8Swsw1NG1+LEWWTgIhAIWNb6/OLwTaspJ+3n2i3Yfxa7E5sfH8BaoDU/cpYRa/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9YmCRA9TVsSAnZWagAAR70P/3Vz58BLficgA7GtBtMW\n7U4o1sg8JvVA0GDKxqfocPWAWBda1+Lqt/YlA3P9BbSpYqe912icikWqnf/g\nTxiwSEDsHF/t2u+cMnwe6KA9nVZKDNUzDrHSHhcWUB1xhwt8j3IJ3iv3NH/E\nSeeCmOvjkrlk+cC3iuRfGn01TzG7YCwvzb5zJ9SeFV+GzbtnTv4a8gtMp2Rm\nPe9QfoSUCantplZQ3lO97NYcJ8IikIy7XVUi0RJmw0YSuOKIyYSVTkIcShgq\nPv/+d5IX+Q2rRSrBpXZ+3kOJCpAbjKlSrEXYhy5B2nzdA8WcjhbBgY8vxhxU\nuIM3iZizNRYADLTNNvIExa0ibk8UHdGVnFo44nSHDCLi5cca3fxl3YHKjc6f\nb060d827QkpZjRi6ep0VYdooeT1sqsjsPGbxlXkZYXWv2rVyeQynBZF4I9/H\nh+3Zg7f79SIBEX0fA8ck+6MaoCldjID2JJSc2QqjiOr1tkwtx12lhlSd26Qe\nGfsHuZBsGHxjmVejTFYY5frYT38AM2VTOsaS9/yRznYMyRsBvcjUZZTn2sTC\nL28lfMK8A3+VtG7j+apGcidsb1t5WSYGa2zs3+QaKro9AbbV39UuTDnTET08\nsCU6FczvnGTNegcjumU1269m4oar9wmJxbK9xADfFREArlrxX3XHsMp1nhFD\nZDBx\r\n=+4hn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fc0eb5013.0_1599854117997_0.1175913471207779","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/typography","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.319bf66de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb2b35ab60eb008012ead98bc8f929ad497c397","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.319bf66de.0.tgz","fileCount":22,"integrity":"sha512-wqUzWMd4xLEOXGmff1m7Heil7RAfcez7+6resB8HTjhFXKs5EYkI7tmPSujmK4TfsqowPtwv2saLr4IZ77+Fiw==","signatures":[{"sig":"MEUCIDBGMlnYgEppIT/CFSJnGA0O035enLyAWXT3QWquCgawAiEAykpVyHdI67iqRO4gZkp0PK6nmzom5O10AErdlJTdyoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPICRA9TVsSAnZWagAAK0EP/ioXw/xem7nBvKG0W4qO\nWsbnrG4pEHMHbY/PI3g+kcpTZXqxpy525Jk5VKnd77ueEhEXyjodO4auDgJO\niwqhlT1BVNkGinzN5etqd6ELB9d5S1YSiN1PSJ0BetMjd+W33GN7bNwrZUQA\nwj+X+G74cYc2J9oGhkmaXPP4CUaxgk9K+77BWf2mW4XMfzhusTgLr+roF/nT\n/L7z5JN8Qo+UsOTj6Z86CD78WmS6rEYDUVF5Szdf/GKluRXk0a3/5FWn0V5J\nTYzZnJGYuHQlbqxJh2ZjmVBYgHs9Wae6KqKZZetXUcAzZzp5zU3P5QVcAUbu\n5WAUPJ+eAX+ZgMBrUPsltfLiq8ibTwacLXtdFDBBCPBVt9g7SgrSi+rinVIl\nBm5PgU3l11hBqzwzJQrMFkbdyS0kTSeyE+rqEzk/MXyoadL4FKsjiwweMVKZ\naK2GEud8AA3r1R8xQE50TWb0nuFXso+ZKrzmqBpFKcviEqVtwWlmTliSJDA4\nXvm4Rl9EV2F7IhHgQUET+tGRsHHYL0G+WqeaY7L1RndeOVw/KzSJB5vmHv81\n0y5RL9khEErsnb47ui1F/LVpOoedAVCi9Hnzzt4STuw+rfC6aruywiwWV/zR\n31TWpxuAFqgiW9YFb2YvG2N/x91qRIyzBteDo1v/sDp78R0nMDHqmX44uJ0n\niX8u\r\n=Syri\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.319bf66de.0_1599865800132_0.1924776230837102","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/typography","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbcf35874d3bbed2b79e2b84a390b5693ca03a2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5bfc305ec.0.tgz","fileCount":22,"integrity":"sha512-0AlPmeUxzGUvfOm8IdoAVrmR/WJ/9TAzpAtMNrn5eJ0tcQnAwCiv2VtYcwPEaXpnKaoEZv1K3x0OqTXk0CnNEw==","signatures":[{"sig":"MEYCIQCQZmjBXkSDi9iChS464bgcMKGJDfSPb5jQvfwxdRaJFQIhAJPkkY4S9wlJo84dcllSfzmxMioZBywlSHzstE8gTRhE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqR0CRA9TVsSAnZWagAA5uIP/RsKNWjg8Qkv4Wq41uca\nSiJn6ktMo4fQvp8nYJh4DMa9/ts37KNVcjUbg+Oxnwi0AY7t/kYBbpPNm/6/\naqMx9o3euez40ej6uJ9sYb+a2diG/9+ZIiGRvwn2/h24q89sKi2IEfa0bqmB\nVc+mUiXDocJrhR09XkfKIMd04w4aylD3ivymy3fqRdye6108XbS8Hhl9orR9\nF8DljCj8orH9BIH5O9E2ldv4WbP0Sf817QzRr+V6bceTL6QNycAuuKYAxugD\n6QJ+VeHqqCfEiy3gP1Xc+nr+nPhhGhflGiOhGdd7Liuqr+ra4i8Hxf6326U/\nKaTLlY+a4db+iToS/X6Z/BfBa1MwmoPumJcMWTwNM4vwji+uI9x05htZy7tT\n1BXGBycTpHBwK2KfQ4LuHDPPelxQ45Csxo3NtlBWvti4He9Sp2s2O5y3L+Ub\nwL4BcGbd6E6RQ7OKnpP3GbAhRCUz9kTD80r0K+5NMPnQiA/F5D7db+BWLFEW\nqSGn7Eb9w3UzuUnaWLHiwFgRBRD0UoOuJIdAEcs2BXOblUHcETcAk+jvYmyL\ns0ldDgDPBYSf3Eg7ZxmOl5nyGQNyLktJbGuXGxl65OuePMxPFawQqMjQNpma\nFIHe42vgzH4Qqp2TgiKsIzltB6M6TsSYdoImT+xg3DGechOXCTMMKIKsR35q\n9Wht\r\n=lbur\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5bfc305ec.0_1600038003893_0.2995118852213219","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/typography","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.83d83f131.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25fc2ec3cdd0bea704601dec030c0750ff7cc391","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.83d83f131.0.tgz","fileCount":22,"integrity":"sha512-0Y9OTt3cp52u6D6so8lyH0CVSt/3HHdyHwKuWE0qCAuDATXAjjheIhv2DBTT4vvp0cBZz4hj+I+vphy4u02acA==","signatures":[{"sig":"MEQCIC8D11Mv10jaiK2c0My2nT+JHP6BHOUDGhn3rK/FBSIVAiANpV9MNQpStb5H6//0Y1KOaI8zllKvCKr77Dex8wLjwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrocCRA9TVsSAnZWagAAYYsP/RXP850UBEGU6jSMb2n6\nehU1kxI4UJxJqphnIMPmkuZ/ZC7n5ARpUxI56nsgDmfsxYq0Ak56I4hIyx7B\nbLxXuicEWVV513/SGuhN7JqUgtemmG8rrVGRQD/ffLYgAxHwE6tq1Ft+UrDL\nBr0bw4kRkbCn+QkWezccAnPuAwafWD8+CKDDKaGUdQLrzHT0p9jv0+s6AQwg\nM8zdYC9Xa6pt5EAitxU1q1pDFbRXNOoMMfjOev5BDmCgBUmmcrmmdErcUW5L\num3QpuklvEo46wDBuZZbVafOyBhsfWOQBkucodXGhMU7V4rpX+rPyOxG6wXF\nnovnl9rOhTZ19LclldOEKFjtcatIeebSmhY6V8YW0cMR6rsjxmBI3IGWLEM0\neLbmLQHihMrsokyzQcZZtEj7toKetYQiM79ewzzuQWEgpw8LyhBqKxg6+rEe\nB12D/H7YOaaJUXJspgpvFl0WDGgvgzlO8U+M86R9KPhBzJcZra4aBJmhrRHW\noAwpP09awEtJnKkX5+8QJNQow9FXszsFC8svgTHEnsbmsoR0QC3+fzW/lemp\nml7y/g1JOkpIQFQpgqG3hlKBmpUviYMVk89FWgGGZYA0wAdiiAfWZMFXCYsx\n6l+ufeCJWM6bCywbZ5AL/qjefUSicmtB8W3RNwCcNdHU6uJa8astbQehAeel\nx5GO\r\n=yHPy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.83d83f131.0_1600043548161_0.14205422606475238","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/typography","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aa9adf394865a664978c733bbc8233087443544","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.40d8e4726.0.tgz","fileCount":22,"integrity":"sha512-HjBnHiBN+9hbd0zYssZb6h7j2QCOIoHuZBqUPIWyccSovHFXWikEsQ+XufyPuACGnnfePO+O8fCrEJWmD5nG2w==","signatures":[{"sig":"MEUCIGcoFUeNwUYv5rJ6mNWpm5Lu4LoO0mfroSx1zLbb1L3bAiEAsNm5a+wyIB+RibRJ0/rsUmFDqb9lIE3/4c3FIuH0tt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/zoCRA9TVsSAnZWagAA1v0P/iTRBZS5wrcaWx3YPQeL\nXxg06zjJI8GQs0bzU+B0M15NRf1HOjxi26cnjrYIh9WY+ksxU8OJSGLM0nNC\nhecgcSPjVT73SUowZaGoBkXKzJPCL6wHkVMUdcAHM39fgVWHNugrGv9kFkbO\n2fnUVUCQx5MxUiNUzPOYnxhf/1jNvIEvHpMys7vY6krStmjA1HTHo9DGk2JZ\n04w03NgwzEGZK2yYCof4UoLMw8Le48F8+VAEK2dcS26xSogORfxykk3hp1wt\ntGCt6SbxfgVjb4C69BE48TWFLj0uQDn4NAwPKGunwxb5nLagk7zCfgt1i26D\nXCVNlcmqEKlEt83EQiuYWnMvxYn/J5BfTZ/B5wZlG3Dggz0BIwW5VXZMfRCu\npJk9nL9CB8v7FADKhiQIym2cOwk6KKxGpF89BD2LZFGMMfNakKqhSuQKiZuz\n/AwC9CLaeBJzO4QXkRz5e7nnqeON+b0WRFUgHQ/I9WMfXTmklMVy21XwLM0j\nq+wcjxjF/jAY4txEE3pBYsWi+oQLwtC/5HyCjd3lXZhTsQgANLHYHnmOrkkX\n9utRC23YXOXPGRg/kweb4Pm8D9x9ZbSQa/OHrnNp0a6iGF/3lyVxsN1pkSWF\ng26VBVfCs4qp4wZAA8wiwTOghTLDfJWiUuiSOmfZy9R+pqAId3Pepd5+FoA1\nF9cf\r\n=yBjt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.40d8e4726.0_1600126183452_0.3146206689807085","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/typography","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cdb0a8bb761306b5c58f1df79355af7bac935da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c25d70a31.0.tgz","fileCount":22,"integrity":"sha512-5UCxrYwZfwcHELXQBQRxhT+8ht+5kImq+3jcjWKffuSCz5FoXkBMDStlgNr4AvH3UkvrrQektVZU/w9S26/DvQ==","signatures":[{"sig":"MEQCIAG5urCdjgTvCcG4mvtNY+FtHA/AT4limWn1i8pEPP/pAiByaynn/j+90rRRjgQhI1Sc8pn3WO35o7OvEpyhYyd7ZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCbVCRA9TVsSAnZWagAAWH8P/1csdDfGaxWqbc06Vmgd\nZExQSz7mAao29hgyfDMqMMzfpKiZEA8SMJB/onmv4jCgdo66cCTOddv8ZATA\n488nM/jBukaAh2SKAHgLBfcskriZLzCkNXMAGKw/eEIbO7NTYw9Hht1Bosrw\nuzrl4p/FBbhRo93iqlfSx6i7furDiL9yKyrNpGtpxalTpUb6drZI+xu5Bvk1\nZfUNYE0d96KBdMJECJaH2OiS7BqzOopAh/KmE4jD6Z5TKxmuXdpA+zjf/5tQ\nRwsRWeqSPWd02ptnH/v0g5HFod2tqPpCyAMJczluOFn2AaogMCQTgzT9KWsE\nSpYXzMGS3fDoPPNoZ6Jzm2jsNDEc+r2a+cMYtzMamzpc09Uu55nEaaoZx4l5\nvYGRNiJnqZWhIFHtlOfZPEJd2CPxDu5VQlfCwLaz/wZij3TdeKKFpUPHJZqF\n4mipEHjysRsqPfQsCIidHhqHLB6WF08iQUxTTK5nmMCGCoTNHMZPbsUeK2at\nmLtj5Vrl/6Fg6rdIY4lSetI64Q46yu3fdKmFhOt0YuQviDMb/yxvSN1YJQmo\nzW717XOB+LFWgXGeRkLKwZYU03yodIYyeM2OPxfteWGchXU20WFZKTlpWmgR\nzl3RHQfeEjmJqCcyf4JmYEQFJeN0C8TQL/7lA/VySJ/gekefi2kmRliec1My\n2s+V\r\n=ywJv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c25d70a31.0_1600136916413_0.15896179225695084","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/typography","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5564237ac61cc7eefa6299579ed4f61a3a0bff0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d52b165b5.0.tgz","fileCount":22,"integrity":"sha512-L3X0CaGFqolImS4H0vNWeLC9VBdQlF7plcn7vmlXQGUJHR9IsLhlAoK/uUBU8rrkgTqmJqHiQTocBAVpp7riiw==","signatures":[{"sig":"MEUCIQDqYjHO8S8gs2qmIAhH4+UAhUC1Zpk/+iG6ufydymL7tQIgR72ilD1DM/mFGn5kLWk7DFUYrKo10leTMcw787Wrj10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWSCRA9TVsSAnZWagAAFvMP/jzNpNG0owIsXNxnQt9K\neh5w77uAkXolXn7idCjhpXdao0iDWq7sfpfvqJ1HCFP/PoXmpI3LNfZ2sFeR\nVCVdxAcAKPv6HNBH3VXOVaECD7L0Ppa4jhMtPhzFbiO9/gNbTb6CMIUuPQXZ\nSFkD+TPjmI6CXayvDi/zkS7GDFMWcdHgQwQuo51lU9Zgo6W0QC4XjCF1wxx1\nIJ4nR4hudG5DxY3VzGpBkzKSQIWxxnCsI7+t9+bSsdCE6qGmN16JAjhc+1M6\nfiAqg4B9ybCv/cQpUdXXeMZd0gP0wHL5gZIkZy9jdLTArpkq07v+7z7a5EQo\nhnrkZp01vBpSpAChqdGxdxnfGSyIQ685cI+URHbdb8xD2HCsVJbEYYNaOblT\nIBmxhQSo5BaWsEov7vGyu3X8LtBXrgrXr+GQI6DNDQcqjsXtD9IxWUijdicf\nX2uoW9kGWwQmb5OIdDjchftf5fXCsgnPKkMap9yZ+NMD+u0ZSD2Iw74h1BTc\nbRbNhzm2qDbCOzE4mFSvghnFA1Sa09d7BJAY05seStPcltmRKBfqFz5evvZV\nk6xKgIpdJDggiMCrMs8E4vsHxt2WINThJ8l8+vsO8sdeCMjsULOPs4aGOjov\n/g45dD1AJwMnribIjEJ084ULoTlJNVMnAFG3PjvKuc6YN3QTEE2ovdN04t6F\nyZLH\r\n=9To1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d52b165b5.0_1600181649927_0.3409891337756503","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/typography","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a831d4799.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5512069e9a017c58557283a05f674a1a97d19f22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a831d4799.0.tgz","fileCount":22,"integrity":"sha512-lc6FETMYVO3JcXA9WQFaAUkiuImJn7nfVllY4i4SquaGMssqCX2s4rkmwlhkQ45CQn/6x3omILGepx6U6RbONg==","signatures":[{"sig":"MEYCIQCN6cAyoiwem+x4Cky1ZtpDB8cXvMTzaCzMoDPuvM5o6wIhAP8ihDurB5v9+qRzSp1T6tgTMjg5haGQ1PCZTgVPz1LP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP8rCRA9TVsSAnZWagAAukoP/idq8J5/NXm3teRo8itx\ndAHogIapSVjy4lrg03cRWKebF4kt7lkcT83P+y9CO/7gyWx/J2oTpu6rNhVW\nPLr35zXtRJx31gp0tRzYImXUtlPv/hUSxVmQHbvuXeTR2Jzpn1bd/WVKPPEZ\nlBWiRdWsunoWIoPxTXMDWY18fwi7SBHIoOCNv8Z0VFan9HAW1ulRMIxRQxbI\nXHqqdNqE1ETJ3ugafKBSu9p6dijgJj1SGWu5yZhlxiYPb/AMMSajc4AT1eg/\nwZH02dEGY5vdtihdP7w3xFpzC+8HK242uzT0KfxWgFXNdxS8qrrBBe2Gwlpd\nEDXM8PBATEA07t1lwLDmzBffWQhTeY7J/ysxTPvJIJzSadisAyQeNWL00TjJ\n0L9Eg2VvysjaZ1sbcgDAKXoKImcBBocX0x/O8p1y+UDfGav/kY8l9bqEwGG4\nuuvJtesA5ekG7ff+bp1ZIpPk+FavceD3mXKBi2tx5nvGwdyDOkBrmPMb4WYB\nvzds/UbkfNCAKsjB84ViSNCEz3MyBbWdt9A8KuFSzcTUJfKIW5VrtRbRSppc\n968mCUkTUeqB/SnFPXO4mCqHUzQZi4ER0PGBwuZsGdyx4/kLlY3bgSG+VAHG\nKCV+/brL96UUrfvbsI+nUHGLP7o3aBEQzXHmEvTINlh2nFlRtBjzJMJlHcy4\nf4QU\r\n=72Ii\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a831d4799.0_1600192299407_0.5656309249039337","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/typography","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a306aa488.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89fb8abeeb1011e7cb357216aa2a5e5ed2c1b39e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a306aa488.0.tgz","fileCount":22,"integrity":"sha512-VH06GE0BITbS5hsLGpthJzh6kZiyuLsgCn3jSRXGYogGnNoKAogktU0pgO16hA0yD1F1FNHvV/lWPye/8Qzmag==","signatures":[{"sig":"MEQCIBnfvbJT8Xlr+j3ZIL8r1s4nFgEHH2MzSZX7NVpDDneqAiAIwGnucg6ZxwjFpVuYX0XA5EBRrSbJEPCq+TIei34juA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrS2CRA9TVsSAnZWagAA4T0QAKLhO468SGDLqT2HPNiR\nl1GRZygU4+CLtUGFf+PKap/YVFXJ4PD7bOytHI9mBAkIzDi46EpzslxLr5MV\nAWKCMb2ZuaGaUbbPoMR4bkjtZnDivTAIx3C+E2QSakgSC9JCvGY+dxDyMbyf\nNE+SMSIXswpvZYcMJ8vovO2MvP7BsysIIGbHd43x2UNVI7LhFKkewAFCKuuX\ngwGQsnlt2a3MjruriOAcljntz3QPBWpIkhtmXnh9pADAGT9v2PW6RXAbKo61\nA+z2sd8ymenNUSsAU9OyWh72Qkpa0bpPV669Ov+u05KVh+rX2UqoOZGIfFND\n+kTPbyPXiH9z5sUouZbMUlM1mWkSSRyfqr1k3xzC0gWJetuYLyct5EvPWObn\nyOnzW7mVZSolYtaPA+tEVcRkYE5JF5lQYoTcuJIRd3QzdeduVFCPjPnYhHcw\nAUlYW4aCAi7MHo+tF0WGDA1QyJ7tWSbNM0aZHPpa5685x2y85er49jU85Xfo\nnOL2iVg33/egUMKONl3S81A5OKIi33Lts4QRl1Edm5xSbP6iawcCugaV9P9i\nPn9lxX8tS4GhZC8UpeXjlPQFlEu7pv/FdatiTROnviYTVxgmanyOma+8BON+\nstfpuOnTHkMgF+z2Q3Q1yvwnCfBi+pL1VV8/Sx8p4mIXK9JmHE+iYaPF98To\nzaRt\r\n=m0tH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a306aa488.0_1600304309663_0.6970591338116912","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/typography","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a735094f04ae621330c0e5043c4326cba3df379","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fd608ff66.0.tgz","fileCount":22,"integrity":"sha512-Y2nOtZC19nJN66EFCxu+Pfr6SjMjspmlu0l1GPfuxCNzPjR9w0DrfJR76W1Y0lpKgVPq+9XUpZG9w17Vt5cKzA==","signatures":[{"sig":"MEQCIGB4Dgf6XAyNIL9NnJyVJHI5We8dArIIJPPhY/PxiOB4AiB8cvvsgqorY7ETPqOUfPTQtu9IYfUCWBVtXmRrT3JWwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HZCRA9TVsSAnZWagAAUM4P/2MuYCIsIFAQY1oXvqbJ\nOJlsdYVR2M84BYJXnKAKEpKq795i2lJpVZU4XJ5H+pxqnWYdyC4hz2QxyD7q\nbM3vHB879g1spWaA4xFXh98NDWg5avHdugHxcVYZxlCQX1lgtLCXWHPmENDw\njrYkQzrVnUWwZzXvTjk8Rt8EJKltZdARE2xapsc7U/PummAoOFxxHOrH/hlK\nym/O8nVlLeoBjYR6vsy4W/TBkfNCwOTCfH+pKC11gl2Fr4sJSgh09uy8MG/d\n5aMExP5ThRVrxhJczvKRa/ecryjhbEX/Slcp41EYvDTu/qTV7Kl74ZDMdf/6\nSEDNkuhTASjIqAdR8yHTGrNYlMIm0ffR5eXrX45wqqzWGObHquWkjCJMSmkJ\nmmR+0c7xVo1nIdKr0vu9NRvN4qzMyphROt/SRl7Su42m8dOKh42Ecm/cNXxJ\nH0sv1PQbW1mOEpLRL+WHW4dRW0zBCG/IZF3BjOyqSV+HoFTOUhtARRhN+utA\nP9IOIiDLDYSUW5djWlnwBgORnakIqFTEwUB3cp2T+s1p7heruWFfe5uPNYmO\nxBzTmggsEU/noQjvzPALTPR78z5DjEPXsv+akUn8OMagc2fSXUilbtAMm61y\nGCHImTtZmSUUXDG9Wk1gSwFtYAp4Zk8DGVb6IYIHlj8QG4EIeTetxtV33QmC\nBzgE\r\n=HuKF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fd608ff66.0_1600352728828_0.13855703199755487","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/typography","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aedf6a35b6ad5d7ee883749b0e13c6525182e3e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.3e435ba57.0.tgz","fileCount":22,"integrity":"sha512-4iOdsgSJEa16GKVWF/CIe7rBSH2aF5pbg+5Helq2H6Cp3R/bECzqtxiW6Dywpx/ZEBOcTzDJiSEQlE78GPIztA==","signatures":[{"sig":"MEUCIGWtjKxgVcIVBSTG2ZI4pBqGDjSKnvpW2qrZUpLNDjECAiEAnlERBHoKlu5KUVY7IQ8La2xyO3nRiv56v8bN5CVU1Rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3XoCRA9TVsSAnZWagAAsegP/jO9XylSVCr5P9r/cy97\nRvlbX/eWqEWMy3kkuV1HG7Kvb7pUdykr3rG/74nOBPs4rD6M/D871offqou6\n9oz4xgCAYyhPucS5wJoY9+Vum4HcU0KFyJcHWdwjvO6AKpV1vBfMFwk+BGOx\nFTVBLu7OZ0x+O+tSDSPlhWkLymhF1qTBMEmvRHUrU/w3Ln6hwuQDt/R5qi/f\nsHstIdSQvXbWVw48WBWaEZ8jpPlVeiefpNqRiorcok0f7hPY9KCZSkINPeqE\n5g+e6ayHrD0tQJe1TlBQ+lzh0YMyXUECAPCi+cJRokwerI+pizPEIFbx48d+\ndo93bSfo/JQW9E+U+c3eGBSyljeX1DB2a2JOmi2M7NaG/5hV8GApIu8omXhR\ndX+sle553z7ieDqQeSzwSA6nlxuioJ4ZDFxrkJFuibqkojlH+3iDWIk5V3bV\nuHHgBnL8ZvA37Qct54j5kDDK78IJqd9T9Bnbg9sTGMOv8s62ncYClOIL+72y\n3MNVsPzAkfkqMYAxOO8EyubTs97xtHmTp0xowF4qrPQjzAFPtUTJZiBM52yk\nZqPx23qva2IXDKZzOmhMNk4T8Ffj8RY/hIxCCGUOjeb4OFLFeZsl4sc68IDP\nlE4PMPWEzSye2Dmf8M3KUQzXfKBG40rdGAmHUXqBw2TKIey5jO4Ve5hW5Pyj\nULIi\r\n=PYb9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.3e435ba57.0_1600353767494_0.9115356042038927","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/typography","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec14a31c6170f579738e519a94a4e684b77f6151","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c250ec52a.0.tgz","fileCount":22,"integrity":"sha512-Pi5wy+QPysyz0AQVmMGkLpo+S2rlrr3P/4L3hdncYULs3RFvuxYz1pB6kXFFg4tEGrpFfd24qd9RScgqNWMGow==","signatures":[{"sig":"MEYCIQDon6S5eCGcJph0NAn9Z04r3Unp8O068eQxbIPhpIQZIQIhALO7HWd/d7OIqzvKf61okGz3wNuOGNggMSQoKFzwc9Sb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8KwCRA9TVsSAnZWagAABuEP/jJsVgtyBayGg24WVMPu\ntV047oMy8OBvEWE52Boydb4s1UmWvf8gtwvwiTahUAV0XegvKacLzDbk4Wud\nHTE2qVbFA65jywMoGlPKSDZmUT7f52tJZ6kJ30VL/viwJrPDkBfRZllAxaTj\n8MHUf4FVTSqVczVvwYxSs0Ywl8fFyG0GvgHbA+89axDJNPr66BT39pcEbGbr\ns2+0XsWdAdpSSy6kZ8C2ZgsNqoJhiP/bRR38em/jN/tP6MvsvOikvuDgXmd4\nNnmMbUhwxz+IpFp1chk6kVU6FyJvOggSREoIjyfoJ8Efj/sP3R7HUyk59Pkn\nZGC2aKUC1pmH+UAPCqoyY3r2P0XGLLdLIWvgYDqnH+XbO9XJMuzyiVXyilcC\n7NAJ45ORkD0O42GSj2S0UhktVwpttiOdfNGKa7NPPNs99p11OZQf+VxDoXtN\nbLTus954a2+eTfQgZC1iHTNALvz6TmcmkLikto/RosB1p5anwZULE0ohccFA\n4CvqM5y3BCmXHmqW4/Tb6k6G1fIETjtIM1AMVO0XGjpB6O4+OXhqDjeaxy86\nbYbcIpP4MtPsR400aRrta/AkairSWyqDIos1+x1LRlBBD9NhPwPzA86qz0ig\n4dDJlJvgVcob0A2EPLiS8eTCP46pcEt4JCrYnWVS31RSZw8JXDhYRMpG+gYC\noKbs\r\n=Ccht\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c250ec52a.0_1600373423707_0.11968123003249875","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/typography","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b06095c2fdf18416c4495ca77ab27b7a88edc9b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.e34e411b1.0.tgz","fileCount":22,"integrity":"sha512-Bd8Hp+tNO4vRTwxGzNKMyA3dBkwi/+KqkU/YiMYlTnAJfGy/qz0apVioIfRCnw7oX7rxijVCXnci5kWW9MzkvQ==","signatures":[{"sig":"MEQCIFQAHCnbCkQ0rWGGtEZwslpTFw332hPBt1xNPqyd3irKAiAJ0ef+yp2rDct/XaXcMyNNn0LRQM/fyiUI+DycYMIr1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RrCRA9TVsSAnZWagAAQYkP/ixU+lznGJXm2GHK7iUa\n49qO73nBdTEEdQ+wcTuLsc11u4Pzx0ouDycQWhWjjc5L6aSkZiPOZ1EdnYpr\np3rdzCQv4QsiaKT4/rkY+YzslyUFV8JgWbPt9wlmbFNt3TYd6izKWLe+qi/u\nxJAfMJk8DhxE0cIpTNM0I6tmViXRoEZxQiY4U62E4xlZG490dghSFPq6A0gv\nhFZHLmvrM1th8hbbyCF6VwX8MXcf4w2hw2U4NhaTnJ1Kb7qp5/GFTi29MaZF\nV1gmkPe6TkbgdlXJKLSLfo6dbwnQv9ITh18n+x0YnKrGwVGlrTN6GZJ1pYVT\nmBO14KrzS8F4DdGr1Cg0ak+t0LBC4C6IvdeWNnuIfd/hFvSQrEmvxDnf6kEX\n/VzIWjv49XMEYt/hzhp9I/pPESSJY9d5Q9hdfLPpgiMt8wzd7M0Oiaofj5h6\nrv1PvAn6sPdxyGn5J8/RnpHt8/oOuAOSkr+tiSkCV+avS+rdCbyxLeQa8xtr\nUSmW48L9+b5APaUcDYWsNmYylDgwSP4MRMVF1T30xHDs61V/eZCIDmthx8ql\nSwkcDur1PajgVfGcHDcbVnHaMbnUwzJroNJynDpgEuZ9tl169l7nnL4KHNLl\nZLnTpeGwDwA33kdPl5UjvrbefN4joNFg+foatry/XaDj6ukMk8ZBK3URpwrh\nJM/G\r\n=Ls7M\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.e34e411b1.0_1600373866232_0.24386978928157999","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/typography","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.4e9343929.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91b5a8a269df87fe0a4a1f4425efe2005592c89b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.4e9343929.0.tgz","fileCount":22,"integrity":"sha512-BwHmJwWBTZjkfBWgDgSWqKMeoDeneUVH7ALaCJeTm6/lITPkjef5j/d/PKCuX/9yLPU+jlUYR1LvTYz3gv4G2Q==","signatures":[{"sig":"MEUCIQC2bDa25SXvDF2VRsdecO9vHdKSHnhiCHgEmP6RTEOdJwIgVQCaEPHluFTq5n3CAA6b1mOEesv6JhOnVy2ojhCAhEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pXCRA9TVsSAnZWagAA0ywQAIHnwLl4ly9kwNXJDrTT\nzXxWrFk+nb58Lw7ZO7b4t1oLYGtxpPN6RG9eCR22U0+oO/+XhPEtgoWmUVXy\nCL1A6npEEMsu91yYbnwcedNe7W/UPjGBVuYm2v0aaVBF+bLHANI2jffGR8TY\nv8g50rXXwTs1PzKoVOSkY9tcOvkQEJLS31KIX1ZIB4sq8fXFZF9mZWIFq9c1\nWpOVjDktiIGhjT08TCFxK5fyCG8ehbAiBwtPUzrJvc74DD+FKGUNOPkt6Bfc\nb5yqAD6MDnenGfLjThRjyJUkTgUY/N1RbPqZcwDOVq4ExuxBeojAAkNgsPsZ\nzBfIy95AQpHoRkATzxzCkA4z7DmUGLsUosJe4AuS9/kE1g5llW63cWIHb9zv\nPaYyWQoydlTZMPDuo91657MXYQurOvBoAZY3pvcYi/uW9NhBOwnOWOX83U2K\niXc3urc8lrdJGnjdz6DbglPza/ceD8AE70DGtXSfY0PxYh2j0uhhgGs0QLS6\nVEpZ8NtY1y/dsSK52zammjnlcSr5qb0EziR8vSP5lLERTqLiOIRoSIB62B/v\nXHjB0di5go/KZPdY6KnY2FlfGqZrBcUXwQ0WRqHUkR6YH2IxT1Z09HNRXhr4\nmXQeJA0G1o26Ar/cURnm9OX94On1i06edYs2gFBdS4459XTr3dSYV59o9hJP\nSmYz\r\n=JeAi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.4e9343929.0_1600375382242_0.18260939122672926","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/typography","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8f828c77e939a53c3b6848a78da50e1a7b08dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.4e5c350c2.0.tgz","fileCount":22,"integrity":"sha512-/ATfBZVD4pcwoPLMZQhJjwguVRHHoqpXlZIYrdR+FBDJe4J3neTVy0yjgOSxaWKDP5T2+lydor8u1VPeiroyjg==","signatures":[{"sig":"MEUCIQDIFsiKiTxja5v2zKTGxuhn4s31pgZD3nbEbZ/qkf51BAIgR9FtQmpuvp0/Lf1pFUCgpVJCxTiRmGpdc3x0EPRukq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaReWCRA9TVsSAnZWagAAdJsP/ivdjazhMqyUsJss39uB\n5D39da+H1K0wcxBsP00OqJWIUfadE5zWD9ZuK+qyZ20UmaM7D+dQmvxPbj/9\nKTDIw+3Iqv9n+afeqOx4t5bTvtVDRrP3jeZtkE7Oqf/y6XQfZY/xTirGEe0v\nvLlEgrN/zMxN5tHus+tXzmEtgDWgxsNUfPTHX4vAGcNhWR/f/4WQpCGnGioT\nJ4g1i4omyjlEsEAlLWs3IZADFtwB3eNAMdh+Kr1bE8HpBOWPaBFHTQKeLVFk\n9udsI+U26tmVmYtnAAYKBjNX0JFjXNrb31S/YrLmTb9oSYdENLgWHuCpgGsO\nFQn+DflfWGf1zBY5lNdlKPU0nRo4qBcto+av/V/LRUX2RoIMXnNybGf7tspm\n5ePoNz+enLpVOrl3io+Vov/19sqXNIruoIbINgzJGfr1QWbMCxUDcnjwMrrC\nGLgoAeFnIr4cuebAP4JH51qLvFrtrP/HGNs9C78eEeHcpVLrq6vc1rwefhOa\nzWRCWY01PtJ3hcVECbayOpn2MRDfFrJvyWhVyq1Nj+RPgt8Jw3HhZzEZ38hX\nbQooNAuyNzd2jYjsV5mcZXHgnAaZxLmPfwwGnGVAnW4c/WBgiqrhSuUm+y2z\nuwIPmZYu4FRrD9Cbjj5or583qlJqt6UtDzOPSunwe3/rZw/nmaLQdmTlVdas\n8+nZ\r\n=i7zc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.4e5c350c2.0_1600722838414_0.16102238627992604","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/typography","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23f24d3b4558bd6250c29cb1199be8723b3d7489","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.16c563ef7.0.tgz","fileCount":22,"integrity":"sha512-LHjO6v2oPeq6ZK8Bu6+sArjfsUUY64LoU2AzPd4uXEAxs8y9zAq0gDVzXQRf6YXN6WmNDTbG3TIKbY0taeEfSw==","signatures":[{"sig":"MEUCIQD74Vt+LdxY9wVUg1MfM8Geikq+wfUg4Kj6EbSicLALsQIgBzgaMSVnFRopd9/pxTxZZWk7dhFowJFXInRumcfJkHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalR7CRA9TVsSAnZWagAAN0EQAKDmWe0mvp4YapI6sTCj\ndDLp/CW27Z0MBFNFi0Esr2EqHrkv1yIxtaxw6vdbNo5BubgMf6p3aZ0kYETO\ndezvV/RCmLzhgzcbRMTwBXAFtLzX7AWm5YS4bvlndaC1q6L/12xI0l7nJlth\ng9cswB9+xeto86o6fh0KMtp3EhV/mfOIQRwIiMiTzd+wGIigS+xs6kttviAq\nGGAtIhGBujFAu6xQ84LwZD9RbQDTHK4at7wLuFlBNd0rLzwXONw3fmdXjTXg\nimdEuA6qyUTvU9Do5ltB9uGFoR1Wa9uw1B8W0hCCqctD0Wi9Ajq8lsVPCQ2n\nqS08KpI/xO9mwYcWyY6RqKDQxxdJXhxXKZzppdKOetqjzzQkRSn4YdOlW3+U\nNRaDjBH9pf7EcDLrRubxoWFpVilsAzvE1x1+S/mDbN+nPlHpH2HAYiFYC622\nTXKUJnJFFBy28edMDj1OLwhCMmKcuvmjfNvIiMLwduIF5T7KzmoVe38ZarGU\n4YUKC39vs4AsKZK6nUmGWFWEYQ8qXTU3eaikh/KeZ1jM3TR5SKrafpgwzU3W\nE9ADlmAX60RCOJi9YIROZH85qDJTLOwRgR9eO13wVJQge3jVSUYiy2OxKjCY\neg6WFo/Ibn5qnsP634qmV2YNpHbP+xivn5tGSKmYgophKtpyaBUeUCOPmlqk\n5PMf\r\n=25fr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.16c563ef7.0_1600803962602_0.5745285693816893","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/typography","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2776addc99c665f58d281a47b7aa97dc8294244c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.fd8af3d43.0.tgz","fileCount":22,"integrity":"sha512-NQcPxGeKAMHksqCzNayOweML/TH4izFmhiOGvgEz1nJThLKTPr+HORbDWG6XKiX91AEBChoVUp+WpkEa5hRMbw==","signatures":[{"sig":"MEUCIGHlMN6E5PeKK7U8yEo+skrIret97SrxIh+ILTDDtigoAiEAwMNpwiS4K4hUlZpqOJCqsIZSuti6znQ+GAmRV2mamWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6K3CRA9TVsSAnZWagAAg7UQAJm7lRg8AKu4t38jaBmv\nHuo81K4C4oXcKFzGAhBec5EkUtMGfguL4tZpOZuFeH/F3yT3qBU4X+D7hxSf\nDPu7fxiQ8wQA/oaJNQ9/peqRst5B1D1qfN8Aam65y0whgntADRreu72UvEFu\n8ewiGEkgnI98yqkigPnaGlaiIN9j5H/x0oc0b+d20oab05r9BYFeYbd5O6FF\nFsUFhZF0LMEPJI8E9YeSJGEINrpJIR6bUdNMxolxMCafzpg1Fuu3ecLCU6Sk\nZFfTymdV+vnQjbNasupjSzAZSyzct7xt0wu4xqUwXJ7ZERkwUoiT77IducEi\nUQBsqJO4Y46SiccRHliNx6ke4F6PZtDqiizatsLX1xD6VyihhdPuB33PDTgd\ntu/PL7AMvAeTpvmcYHx897jt2HFv66m9MmhsxO0tBY9LpCuxSg70JhNJVFjc\n0x8WFF5JY9pd5H4z9U6Pzf+brq+hqLzRynLPaEUpsIOIAA6lp00jEXOll7td\n3riFD0u2+Gona6hS897vJ7oeiSfJJoE6uI8x2vEJA/qZTb0OzEgibhqiZMUu\n+yyHJTIS6xC4D0fxYpzQ3RPiQV571tB28IcIKEyREjctVaGhSPoIb0TFtrTM\nOmWX/SZ5FSym89cfNS0VbSFOV1YdPvo7Z/UsuXBAJcNupKoQoTr3M0g3ffbT\nxMPG\r\n=ss9K\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"@material/theme":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.fd8af3d43.0_1600889526649_0.4827185075480984","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/typography","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b80352f078794a2850c91be91a5554b348ca79f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d4cd83a85.0.tgz","fileCount":22,"integrity":"sha512-cALPZMT0NbTd2sbrHHN5Lb9R/Ner1hg+7awTRz+5KG9ojoxz5X7SgiLRYkn6QzPmAGHTE2l6U4bIwyZ8zUlwpA==","signatures":[{"sig":"MEUCIBU2rQGKux5UGfJwZMCeiaG56hHdwFGSKjH987Ma6WU4AiEA+WvACtJ6+/zhDEQZhZSk9+KPQ7L3gSwOHQpL+u3ydrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtICRA9TVsSAnZWagAA45sP/iAFMpsq3Q98QDmrCbrD\nH/ceDJNvUoa5/q0cv97L3DfllMe2WY8E7hlmf8/9h27PrSMaF21vHkWSoIYh\nt1OgbzLhzdCL9hk4LBPvhaqLaztotJ1oy/6AWj/igBcLHYAdfumYBfQrIZu6\nGuJCXmHIoSHAYVWMEnLOweJpZWREBvRlShWJldnCIVAvS8hK5ZgDjQYy04PJ\nn1GJZQdxJREvD3FPKB3BwrMBL19jXfFOTfEjVGiPUeT//Zkl4yuN2+Tv/JqM\nTkEupm3pEjalsJ94eJqyxsAEG4CH1QuULRxZaCdO7Ibete1yKomShzqelfoR\nliBzmd3NrrkmMGZPUqLedCINasnRTVuhRxtAiYfp9ujg51AfJ2Agr8LOsGrg\n8fxVPikIy04PHvqdAC7IdPFjI6KGNu5ENMaYqHyEW0m6lTBrKqMvybQvF2fn\n3MomdEJwwRwRDysAYPGNwvA2yu474LmpebyUImj49tp7r4Eimtak3GC0kbqa\nHxC4xVWceHGwrEoJUd3t90E0cNtpTKOdkXtxuaBVndMXcxAXKnseZ2bOE7xn\nf3IvIl7ulnI5SNeILtir8iD4lCuQ7Rl8ZQSUHvC4dbNr/AwsQRlIsprwkt0a\ndjBiJLHy6ZFbw6ZOEEb3+7eYqFxolgpZu9N5CO4CzZP4vcAnN+KMoy8kZGPJ\nApjx\r\n=t5ti\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d4cd83a85.0_1600994119848_0.3662325484816149","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/typography","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3095cce0acf4ccc29b22cc9db7b596392869fc0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.199aecdfb.0.tgz","fileCount":22,"integrity":"sha512-weGbHDUjqDGnwNhxFyXvHDXhT7S+b+NN+P/gcyOcasE4lG0yLAyf1INLfqTGNNh6g0YkV3NiYmvMQA8weGxqPQ==","signatures":[{"sig":"MEYCIQCYdpSZn/Pkn4RTu9KM/i3nWKgMcPr4HHZN77IfSDd0dgIhANic5gzkwGCnI2W3bgtxx+gD8j4AsIoB2osJ7zIku1P2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhHrCRA9TVsSAnZWagAA3s4QAJNzMkFuyRZS010v/irD\nSVNKEnxDtulknwJmfhalQF4YVazdvId0CWEq+V5HrQEmOu+xMVXuPIHMOKrk\n89WeZIkBzNXpPXa1TNW8P6wtNUcDp0Pn58bhjxufxYym3xOE672OiPO/jr6x\nKaH9zlQ/EOXiJ0IudhoVpuwx+3TdxirdlRpxeg1Fa+5btHKQQqkqablTgAzY\ncsJxMMcpnSjIGxgztuqEg+zrQzJxvysSxV6Mtn2G798AbQVocL8ANHT3gjkY\ngrado/yAvzac+4ho8v54DhQ1mz17mTX/knfJsaMIlqf8pU2B3r83a6NkQfKE\n0ODOcA22kTSIqpKcyWnnnmSy9nxJht2P//I3yku+YDu5dQSbMRIrnT0qkkkW\nTRnGcUMawUUlUiAxpcCOsqv3xdxLHYMOHsragbzMSAIC+SzATkylMFVe9EuI\nuy67QNp18O+lzhO02DD4u+jjsyzlzpitIdKRQh0BNFt1eZrdt4aQZJZfpHIm\nLCnYpKswRCd6dXQXWNyzw6YUei3TH1t0k25TghAZDfxfzSF4wvsoUtZDfwpt\nBr6TDgWZXhnIVSW9tpVC2Vsrc0yLJydHEFDOZOYD1eBlHjrj6maWLplpI2VX\nv7+kC2qfQukUazX0vIEnRw7MtiHYvuOdQM1pblKIRTqxxtz3DCxbrIarsyfo\nXC/c\r\n=MNKb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.199aecdfb.0_1601049067321_0.15303955171944228","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/typography","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f34c2e0608c74f389ecc886088479803c0f94dd5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.38ef4501f.0.tgz","fileCount":22,"integrity":"sha512-xda5GffZgxb3J9+Il+UtYGc8xYQg2MXTpL0utS/KW7CPVZPdI+pNa/ReNeCupIUFndkuJytiha1g/M1jORY6NQ==","signatures":[{"sig":"MEUCIQDAsYvCgLbHSYI72jnwWTXOQj8omote3ZGYqQHI/LfGVAIgCnH2xL7pfefH73+yMtN28oxOG3xhSVyA9oLewMn0QBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1VCRA9TVsSAnZWagAAW48P/0CP6Ky1J0Wcw4prf+NJ\nDNe/c7KzPD6yNlP+B8/sIR4pi12ZUNAVDpcCw1bK61PYGtd6fTJm3ilG4e4n\nYhY+dnkpPbKJpp9+tgASeUD5o6m+t/K/Qy2HzFq4bF/p5BDIBIfjC9gjhKdF\nFHVi2yVE/AY5kvXyO2kt6VutzrzRzXFhUUm95P2uN84zsFMTIaoOChl+FvqT\nk9OGwuiTAGl4qMXiB3eqIvQk88VkwWnRnLBOCevt0n/RT04VKK9rB44eKimJ\ncFfyTdtwB6lMBmdsZz8rKpO65hWjrwl4DfIsU3Vv8Gk9tI0oCVgG9HQv02rb\n4zypf+ZSZPwEmMNGnmtC7+c2VpBmQnSZ+y3cuBwfc9r96xFN7TzRk8/LZdo0\nXY32PAmQ17Z8dZg6bj9YB7JyNfLXYntYNOEX0g2vNYFyQasbVAT22sWcnsR2\nKWMA+59mwjJeuHf/nebC9QOuuz32eGkHCTZC48ONJXCR0//n+CQ4r9O7GuPd\nm9JdzLeBoHg7/W3MP1he4oezil1RPIYInDOIYjdihCHbtB4cgnO3tRKW5YyR\n/sJIVl9CnKnL0W81WydhLKSV5Wbj1HmASpvfvr53/mocR+9c4jBM23RRx7jD\n2QBTxMtshoZMYC4BnyfGgIGSnB2Gv3YZS0u0C9GIVv2eosGhomX8u0rCKvJ2\nFlR1\r\n=LKCs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.38ef4501f.0_1601490260597_0.9162327758166731","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/typography","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"042d0de9dd448a957a04d06fd4d548882d695eba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.774dcfc8e.0.tgz","fileCount":22,"integrity":"sha512-j7pMMZph6tQzD1jEbx5kSkzNKr/6R3tVnBgJVymo823IoBc+RSIKTO2rtj8vNn+qMVLn7HjPpK1rep3Ks6KncQ==","signatures":[{"sig":"MEQCIDmYJuzuVTHi+TA/wydDXo2KEcKP53bI41GKK+q4aDj+AiB0NinieLqmaT4Zi6jHkFXPGQ9KQZ3d2UPtiqCSUe+oFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":101587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdac2CRA9TVsSAnZWagAAoAQP/2R+MDvRTfDNCeoPtI2f\n+Fsk8nYnVGfQCRAvZf+g8olE3XlDkG6T/AoiymYunjwsv6cu0v5bkr/uDHEq\nMH9p/EEEm48soNHZQcCW1LIu4eVVDKY+yNeMwMrWqOqEO/z7y4Aj8K2xqNhM\n6Dgt0vFpZXos98Y8emRzeYHq1oi79RSWm72FzT3P7++TQK7GhhjrgEtYMkDX\nwpDJD7v0m6wI2qhVkBsbCE499qTAZYPdptbST+3emKBz9u8+7Bsi2A6fc/7L\nCy/GFT/pUs/mUhSwR5uHoaweqgNRV0m4l7NZar83LJtDBlggT6vH8Zf1jXge\nONK86IFwSOTR5dlgUo5uL/46+X9ziYz0Y25LGLburIaCv3yJsIyaeTI3eVHE\nUQqRhaYh/bTIu5g7lY1Ia3U8JtseB+e0OLumAB46XmJh2gj3UGsiN7h/zBqy\nRxTBjtTHOqBzmPXMz1NClR5ahTzPn5URX7akTYFfh/qfuQqI7zKf/rB61CJo\n7Ze2MXCWHhg8onqk4hH97enhv2ebaGzrfAlZMIGprMvA0Q5zAMFOK3rpBO3z\nAtuumkiC07jCFeTpDU7cQujEQfxpRrs1VzmXRkWDD0JM8RPQS9TD2zcqm5ww\neYkgPMfuY216z7T66LnJHsq3GBXdUkkvatkd51kj7cc5kzQS/Sk4/8VAgw5I\nFbuA\r\n=xl5h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.774dcfc8e.0_1601546038331_0.898763033478575","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/typography","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae9a43b531ad0fe62cd9731b2d5c9ea64448bdac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.0f60323a8.0.tgz","fileCount":22,"integrity":"sha512-mAR2z7x+xR2T38V7UVbNq4VrHpFsL8AJplud8vnWsSyljtxeu0s8pgFOkQtioFvEJ46dVzbNp5S3DvUphtjliw==","signatures":[{"sig":"MEUCIE5MVtPgHCGBmKmK05kdeb0BfLyHRVU1ZDz7WFKk9TmPAiEAjPYP+UPflIyaNaJBlMKi9efwDH2Sz4tChn+96VR1eFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AlCRA9TVsSAnZWagAANIcP/075UF8yBtHKJQHXb3xN\nBRLym7KKowZG9gb0MyUynJkdyVQUEcz6Nj60r1cHCsd5XT5xji4XDsUGYQcZ\nCLT/z98etuKsHxUsGHaERKkIIsgrPu5GfXTEvO/IIbZp288L1xNQCU1FskiX\n31WZk7R2YxJkKOesk0rd0qQECESD3fI4T1eACaL5EeA7d6meRT+0i+Wzd/XQ\n12l+OWXVTq7u5VsU/PRBoKlUGIRBcMrAcB+KiD1EhehZJEXydvQO2z4UFwhg\nkO3doVVNt0AtNdVV0gMhuqWs+iDOnNDZUnsww/SHbGkQXYDt6H4ORNs0RAvb\n1gRQItR9SG7qGfU1q7szbSH7lmdKeXlRmsBW9JBtQCN25K3W9OcsCcifFycV\nbQzLEhiZzc9atNS4uqBMGH+cXftqdZmIMXmn4Vzk/SugmMvvmpweGQh53+Cf\nInt/BfYih+4AF/7fFRqSpC3DfHcTXSlQ1WqE/S8YpwBYT/IZED45ShI9t1i7\nm1lMDps/jqXXL8htG3ldsiidVISE3ke+VaMypESwLmeFuEkjPMBE79YhwKXg\ngKaSbzimAcEaXTMQX/zBI54V6JwqmWe0xSNM/MXWT9L7U64+j6BgXwT2ctJ+\nT/IVU6Vru2RS+/Go9DbGR51HnbqPhBlRvLssYfed47D7ee6kK/F0XMUTI88V\nVG6Y\r\n=3kPa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.0f60323a8.0_1602191397117_0.12386101641010039","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/typography","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.d71622574.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"377bfcd23a441b12d6082d142ca08d33d1fd9adc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.d71622574.0.tgz","fileCount":22,"integrity":"sha512-t9Kn3Um7YZQTTfgpo8CBM87yoAibjOZXyAtWvo2THNOqkoBhYOIwzxRD5NiJt3Abz26wGHTiW6tWX7cM6PiXZA==","signatures":[{"sig":"MEYCIQDxhsD/xljbaXmCZbzQf0PBV1IomzwjHFLIXQlFqepeKAIhAJZgvRBkxok904WL7+DIDYUhhQWriOBCUxejqw0kPBqz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJBkCRA9TVsSAnZWagAAeJ4P/AymtZya5TWICH10vCEl\nI67f3Bt5RPhxtj7JMg7vYZ/9G1a/quf6OW3mBhHuoa0TQlwx3BVM+eglDMji\nW/JawZXBX6am2yiCoYrfWh+sS13x1pMq96mMQBKwPxbQK65SJxozuRcMqp0A\nCGmk/RL+JDumKP0ONIioZdIJ44cHpZgB4giklPCJbxVh5fW54WfHvYE9Re5s\nci+/PiEIOLPlMWBqzlSD2IU5MDwkY8Mf2TAYDp4OOdKm5gJeJmXgIvOLRoSt\n0M9q5cIJ+PJd0gtKweMEFvcYT77nY+oL56njw6iv1/KlSAZnNxPUWPqZTW4M\ntRgm4m30s1UsFqAoYNnlwliFkyZWslnkKHzRZxSQlMlqibo4ZRGocYRo8avR\nxUFYY8HgyxsmxrE+FPZoaDfyMtdQcjrXJU/ErgAqiw1AcKSs6276czUT3JMu\nae1jMZg+iv8jQnq7m9F7khzlh4hgLaYcvquVqNUSqYMWaURh8T0jS+eIIBxG\np4E5g+bKdEt/CgVNv8yYX/iMPxB4YSeb2Ro1Y8QIWK1WdX6lMNVxVa4K2ayX\nAsr4My0ZMhS2CUyt4aXIQ/it/ewQNMO+ZDZByh+/BsWTkTyBGYl9OiH0x9zq\nae2PxvRIi9N26/gfl9B/KzJQpI1q+38kq0ry1iThApp4r0G3RIubp9p7K5l8\ncAs1\r\n=WyZF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.d71622574.0_1602261092246_0.014989925333239063","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/typography","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9306520bd10698be290fc4634ef6054e7dd0666a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":22,"integrity":"sha512-ei/MKKBQjhbbSdegcwvwmUbIV76itSJBcLxWr5CNWXBetUkx7DcAkI0xqyBIsCWPqa49Dn63MoHJJvxLSlh35Q==","signatures":[{"sig":"MEYCIQCehkjB/GXCs8/hH8uoUeKSBur/n+vFRjUWRxpUAeXgbgIhALRCvhi/GzBeKb5uG+QmdDM/YDhkXyKTTkr8ovcd5cV7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOn9CRA9TVsSAnZWagAA47cP/RyyLLv1kp0zA/CWpctE\ne84xCxELLEV1gFtDrJWXJp/mddBG44MXM7NGDJGUd/qldhTPXFUIzv0ESq0i\ngDoY5hnj0My0LmQDU/zq5+9R6m1O8oPExXsig032ckSRw88L6gNtV9OAHO9o\nvnjj0WrLU1ffLwNV1+MW6k1RIPbvqXhvySMgXIMBbukkA96YORdHpH7T/Xdh\n4Vo33uft50tTrlKt/sAQNPlye5+iMJZ03wgI1xYPEfoQgqr3DA63EKs2RVJp\nY0leQMgmT/tk6pMAMaV1l3y13IBPcpOkD5qpwq+93DhBCTlltOi3K68ZtVUi\nh/LHDTOhA+KkK+XXmSv3xsiXrw+FH4IdX2IqUXarLQiHAiKHn3URE53sIo0u\nBLca3FzI9MVmWWkOUiry5zrDOCRhIzgejR/latfTN+Zy02g/u1tWAsr90IRr\nrXqSQ9Enr7xsw3NsIbO/PUwYuTbavNLPXB/GgkUrDu2D7zyge2Yr3/Nqx71S\nZDHhEVnIlryKDbJjiMENvn/0jSPr0qkXkrLue+QKRK2nGir2ClfoBA+sa1ic\nyDzJGCiWW4WRg9R3Eu18cGN6THWUzOyaObXtuHLXEqdhSEZG1xTxxl5d1ZWE\nkZ1UJ+7v31XgrVF3cU5xAVI3nMbADocyIV4yEcsWLORAhfDhoZgg/AYdqNzd\n3+UO\r\n=QjUY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.7a9afaf4b.0_1602284029273_0.6978496046026335","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/typography","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52d43d6d8dccd95ab87ccdb2006a843f5196f355","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.8a39352c8.0.tgz","fileCount":22,"integrity":"sha512-usm/JcraVW08na0nRqqeqe5hPGMLEGMMg73dWlihx/oc2zpg35QFEWPTbYDL6smz6Cr6HvS2HDk2tUVNHEZKcg==","signatures":[{"sig":"MEUCIQCjE1RFcJoDQO2eY0ERGG1WiLPeEisge6xbI0FGewXHnwIgQJJKfdlTiup5hDulTW8v9CnzG5Shgn5EKxvdhB4iiaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZlCRA9TVsSAnZWagAAVa8P/jtolXM9E/6sGOHuwxpX\nYx2DzwzfcQbNrV7eZnjbpzXLQN6ErcB61FLuFV+QJR1B0fW3QB7G55USuQuP\nAVNSD6iVU4/C04zLu2lgoZWalSJKXbn4b99TmWooeaWd9nhC2U9Co1wKgZGI\nJmkgENBk7/GXHvGei+HSLBDQ3l8bnIhbqo84/AUnE6gujHX7UuPQw4BbCohW\ne2bxthGMmlxhWRIW6ZXGrlstkut1ea30zdkPnJk1Wc8jF7oySLke99oS6K0g\ntK/BA3olAwqLddY26OgMajro/u1Ik2YzS1AxWBDSx423hlI/tkNXdzTn2B6I\nKvo+Xsuoox9Muurl8sXFVa+jT+sFVX98BokshFfpUkjCNybUwqPu+5bFUB/v\nyrxjH1TB8xVtzgdorUse5M3I3XtZtGo0wCMKwvr4lnj1OpBUZboddABzmkUz\nxWAIYriKaFPVtEoFUdhcdqUR09hkOoxC3YOKWvKl06+UxpdYObYGrTaRzS/A\npCTy8dceW1kX/5OCFJ8H7syHxjM/1CBV4aJpp2dHlstHC4WV/Mu9wKOz03pd\n34/JEUCWxzP5sxZKQqrp5IYQLymZR1Wzt5FsHgY4EnHDo6uiNzbLOgHjFJ72\nnRHNw/CSkoFz/jAZ4CMLSPR4YpSYD6KKvGKtHcqnXSh2SgwXOeTjF8Y2tg1j\nwW7r\r\n=l1gQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.8a39352c8.0_1602524773239_0.9494218596336534","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/typography","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d01b7add630130fe509976292b32d35da45e6292","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.790ca85fd.0.tgz","fileCount":22,"integrity":"sha512-kq+ahr8tuqTwdn+6gvK5r84kCKR3xRaldeftG0Bmg3nB9i+1bQnrE7/WRsNceI/CWmQ4i5catl8JKbrAkDHDTw==","signatures":[{"sig":"MEUCIQC0dumesLd6035Z39aHO1YjdczIMsr1Uoo2RnAuTQKALAIgTxXDvt018B0W4jLcaCn/OwMw4U2h6QlBtjY7ksiUjnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEYCRA9TVsSAnZWagAA1zQP+gK5z2zGOLUphNc4n4l3\n2C1rUyvJ9R1XNWHWeiHReldyC6NCUR6dUbTYU4yii521SX9smTVlu6yMOQEP\nuBckSeR5Szs74DhyW3NX7gKaV4BkWSl1jIA0zol0hqG1fY82dmPaCySZJBxm\n934vyjHpy0JkZntHWe3P9PGuzK2K8xds1Wj1jW35huhu5IlffD7lSoPvG/6E\n6Q/jCzVZS9nGhkVAL8nT41/gu07NSuiBm0g31wVHW7Nl2t8SS/hCiavF7bE6\nkwTzf7+JHj27YN7QyZyuMNrlxbTPo9cmbC2S1GhuT/dK1rD7+QOC6w8zDrZX\nKyrEHXpzV6/k2qQoy/6c49InPVN0Z8TYavkQuRT6DQIv+ptEwxakZoM0zOEg\n5ug+33eA+hgx8Fat1nqTSOpFeAfK2wEvMac4Z7z5CWXalb8L9yRaj2SbxC+6\n7ngd15uKihRVdgXP0d6dvJA0ccfKVvlkSPcJlvcWBbeGoxL4Yi5kwGZIS1e7\nVYukzBwOLdxbSP7NkxRd8HZURebSHGZ2e06psvSXSY33WZj0dLBAroW6W5Vx\n8R62LLSaZeFNl/aAYL08Clb4tpiKge/vmeJeVy7ChKBj22W9HOt1rLplHo1s\nSGx+KtSppVxP5AQkyt0LA/Da1mkW1px0DH98VseRgcP/KE/1YdeV+6XGebg5\niLQr\r\n=oqXl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.790ca85fd.0_1602539800252_0.16731735718985674","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/typography","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.174c0becf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54a07c60832a3527e7ae143c94fa9c5a5ac186e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.174c0becf.0.tgz","fileCount":22,"integrity":"sha512-1Ap3Av5YQJTASkQwA4+UFc3isAkU2Dep/z6mR4vwAXk4smoXotkujSTY5iZ/PC37QnmeiW+9u/cGYZFDlNE1QQ==","signatures":[{"sig":"MEUCIDXfStldMet6HHc96Fpk74H0uf/PyVxM+Mh8xzbGYvIvAiEA0uYZOangXu6rEBpssDY5nxwTDhC+dna+LZGgGhnxrwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9LCRA9TVsSAnZWagAAMKoP/0dq9zQJANsdfYI3vTyb\nYtNCsTAOSHAvcQvxjlFzwoNNQwrSdN5e4GejB57ter7NYdjz5cE/jj7TPlM+\nMjQbShDsVbiohLj+W7E2j34I/wX10oQRcK+3GJOyFl5q15S74ib+YOcOWriC\n+48Dvnin79dgVyqYd9LBE5PVsU4Tr93B09NmK9cdnJiUkpm1Mp1FHiNJJK2s\nThhDRn7uZU6PNdwcZSQWs8wMbOKOhPpaBetubakxCSqwgu365B6zuwWEKXo2\nDsWD3zJYUPlFAcdRXiZYA6OG5xfMPe4Tw5sG3+ggchOrksyKfrncmd422mns\nwAknozZtP6Nj8VIQrWBLQYvl/KDIYhtNkWX4dYl7TjQL1TIuf8xmSSbC193u\nrZCnoFVG0MZeLfjs57FCS6cfxsIwuPzA8fgkEUwj4VdMkiy1sN9kuGcMLv/Z\n+fcfeK4xwGWToKSRrVa9+IFhtZnPs75zo3OorczWSIINL8nY3NKpVMYHTd3G\nxqAqqQI0R3wzowvgSmTWWrwFtt7bVaYX2eNwBzRL8TVJ/DzYVn0C0cPHoGsu\nmolMPa4bu/4VkAjtD8uyBdiS+MQQgUFCVs5hDPtKOrXvSP7NAIbOX6imYwuz\nJKQ4hthDiHzvRYljr8PCSbDeRZ4BWtayFyh6//Ulxnn2PbN4HG1ANq9nm5kl\nzrxi\r\n=a+hD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.174c0becf.0_1602641738545_0.6155790339767375","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/typography","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b3bc69286662ea816f9adb6b970e78e1e0ead37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c71ebfa02.0.tgz","fileCount":22,"integrity":"sha512-XepTskK4AG7wFJ8+MFjvFQwhCoYZM/Aq3ymMqsTWRktUPf5Q93LH+sHYAV9294crBu6ihDgGJuZdXNaukFVQvg==","signatures":[{"sig":"MEYCIQCixE+xgEodFnTatfznpwrlbv1WEIxiC0A9Scn6QL76ygIhAOx49BHMBJeC0QtxmzbKAfI0Nyi+N/AlG7/k5kUCHRDC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvWCRA9TVsSAnZWagAA4rcP/Rf5cjjk4kdyCSPBUBsK\nTxCiXQJDraryqA31rMrYHlp1mJtG7T3LWC3J4hZWdNCwqKbrI+dkNhUr1+n1\nNboECDU3kS9jfJ5vS/IltSMozROcS6dR5mM1ETxt4q92s2zz4FmnT6C2eOiL\ntq6tn5Q4I9slcy+AdVlgZ/nAXNcX2fyeHA/9mzQvMndXsE3ull5GfDpFCGFu\nyVQLsgUw+0gLV8sunpsHXCHNWVJWOm5rYRqI1JN2iab//aAx5L+3QfYWd3XZ\ncXfs+gpnp+vzSJz0ZMZPug9nM0mAGB0RnizCOB4lIH/f+7X5Lz+SsNR/ZXp2\nj3KQaPGjQlwDnvV0lXtmCV1wPdm+19s6KPhoMuMAuhhKO1+IHHiES8FMVAZH\nAvXAt2uppmlJ4miR62hhDPmRuEmz716j4VBztOJIyIEKiDeB3vgVoqx43xcx\nEhHhaPXefhTc8un1aSZ0CPb5eUKV+XKcNBE3l7BBwSU9jDSuCN9q2/xUihOm\n8HRNdvA7vMaY0rJwRWEzryW7jniJhO6IjSsWJUbTEX4pZ6KT6xr7f4mcsiAV\nJ9qX7Tjoks3IxHHJQTYu0C3wBD6jlS5dQw13z+Rr/wXgrSNBAfdZ7Ik5L0M+\nbusvatCpuxS8Wcm0H08zBndsmgiqt1CAtLjldjsy9k8SRLsDrKausjEHC7K6\nLXJi\r\n=e3nq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c71ebfa02.0_1602649045941_0.9958249578572902","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/typography","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cee96f9fb00b1d02543a018cac3d51a7edfb9c18","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.2ab716cbd.0.tgz","fileCount":22,"integrity":"sha512-S0eKZy58ewfLM09owHNHnPWK5aOwqdy7jYTRRSTf7zM43RrZEA55BZrQgK/6a+P8Ng0F59UFJTNtJHWiluV/oQ==","signatures":[{"sig":"MEQCIHZai1sf5Q6ajNBTLnTnDpkwIck3xOubDliO2c8ucnbnAiBU7tznIDF0pgN/1ryiMrM6NozpSwdNZjxiZ+8K2AnQMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiON5CRA9TVsSAnZWagAAyGkP/iE1i+pXYYM4BljaGv1z\n8MGlO7yMHvCAWdZnRoRqu2JrYAmJcgJEjOZP459/AhZSvCV//KYHYFD9AuOI\nOA5L3FI9vg0Rv4F9YVUMISrgRaJdKL3sCpaEKSgVMT/xfwBjF5rBNOUBCJGm\ncchA16GSp5shoch1O4IgM/QbbnQRdfmg8+NgkZvwvu/wl+Vx/n3dV0PW7ZxE\nTaBMPV4or2upTyCwNGmlYFxOU6RajwaFX6AP0zG7t0R+TAVpjjjNxKEH40RO\ne6tS19LVKQdOuZW8h6A/Ijtgb3HdXUp0O47TbHHPxteuaYDYXnVAb0C0S8vQ\n31FzY4nHS6NOkboZsOGZDKFBQFshDF2HHgThrMZFBORtpP1+roniigyXkku8\nvldsEG0wC3APXQromohxwrBWRpKhum2IIFHvyIVoKx7qYGVI2HjXmj0h8H6U\nLu8LZ/3nNNniok7P8VmZCdfIhMMz09PxPwvDNne1DPsvGlUB7oBAzBcqUeBe\nK//B/Iz+pDaqzGBQTK+Dzu7TfoCSKCvDKWviHJkswGUR2gAWKAdwnk3YiDhK\n3chXsgdMAEQeE4piYBegbql3xQhQF19F9A73Ogv9g5xPR+Iv82mHaJmyueFJ\n8a98oREBGkxDhL/s+WwspzzCIvo2/KQ8i6aGOQRDX0Bqhlu6RR2MMUvtZf6t\n7djL\r\n=DU/u\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.2ab716cbd.0_1602806648996_0.7692730643314554","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/typography","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c571d39c7e8e13a021c25f8e8ee5c0ba6a9337f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":22,"integrity":"sha512-zPV70Ko5uxXr+hO8rSe5GjhyixwzIIv35Etnjc8J+K2e7Gej/htIlfm+g+p4wZ+KUGYQHL2aZo9ezWqj7x4KqQ==","signatures":[{"sig":"MEUCIHXoMILf8PBkUk6R7zOdGpKuXz5+P0FSwv6WQHdsYTqUAiEAouJtvIYGHE0CYODkbwNtm/etKIzr0k5Nzak+OX10INk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ28CRA9TVsSAnZWagAAtzgP/1e6EOKxi/fkIhnLDKh4\nYqu7bcRltl/zTvyqS7q6qnLT9Buok2H5KElvwIylU+qx9aZipsZ/8/hHjWhS\n7banBFMgr8ntTPzLJYS00oA0Fn85W4+bYIHzAVe/AHFjbxfDgMJfFzoFvJ7G\nMKX/xk6UbquPjxL8mS7qxbdl4C5bLk43zUvcxg+qGViYu7LsPJ54NWrNb1WN\ngpdYgSimyIw1qgOonbOwXE0EE2k2Ww2dzoZMayCD5lTYNk0/7ufRspictXST\nmZ+PU9eB8TtjIvslbWYKoUFDuzUm6GfovGFBP7PkpXy/6IJnTa54oDRtR9Ky\nOmxtdnm6KIhFpdTlCBQzQ8cZ04wjC2/NcMvBvZr1bT5y+/bAaEgbpVYWM2U6\neGbzLZh56oP/8Bx58I809iDRVTVQG5vz/y3oGua0hFz1kGwogbi65rUTpk+t\naXkQRWv5ikI4BrxcuAigSoj6FmpF/U5PxP2dKwfa82O4xeJJjg6nJvUrTpDP\na5Xtg2UxtywN4LaxLRIEpbT0DItQS7HydrVegQDqcXVWgde4ZZP3JiujQvns\nFwF3nA7fV1MKrd1OSGRh1enEzDhPZ40R8yP8LXR6/7pr3fzBiSJeiaHDvx//\nhmUDK+S1GQk69b82h+PXAREy8IZ3ZW2yIwU86nm6BtO8/djbN3AD4vtfjCRn\np048\r\n=POIf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.43c1c5e2f.0_1603116476232_0.24991452537642922","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/typography","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"450fd6de1faac3631d54cfd1e450062f5c1427ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.ccc64eea3.0.tgz","fileCount":22,"integrity":"sha512-EyaBaQtLxVBRbgUVIrFzGLVTzeD443yj8pkKMnS7v+ehIbplXk02mAWi/OCefou3Vg0aovIZzpUlyV5+COhkGQ==","signatures":[{"sig":"MEQCIFOD5CzrjLDWctLOhJxzZIXHmEb48cxDmf0N2NMivKukAiAaUyWetfLn8OwkDF5DZM9OXC92MXKTt43f5hAoGZwBgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1LxCRA9TVsSAnZWagAARNEP/joZE3jIegRQ4C7SvEZ6\nA1OlKriiTBRuIdYJ7kmC6Akd9QehYzVmxbWGfLnSiL2zaq9/Gbx5wbD5GVVK\niNPnyDS6bgE6uLX5gNrD58c9MdcUZy5pHQqC36P9eH1SuD8Kal43NJv7VTeJ\nuTMqk0qwjddCL4/sLCvMszbWi29XHJK1G7irz750HMT6TO0EKTBv9fgxp94Y\nghRkFij7YEzO32WF3CvtJiNhswZFmoDJSOWC27QD0nHabKAplxQVpRY0xLW5\nPUJRFjpcrfOiI+g6xvTUdQrwClkfZqx2DklIRXjtjB9Phkm1YFI0RODQNh6w\n+qK+UyBFEJRHDCT1jlIPrMPcE6p1thisExbdKGETN9/Fd+gYeAK0Kbh3izPk\nKcQ7xt7gPjx17IrQLjISueuJk7eHBxIOM+S9UtppAkMGF7zjH9Pctog8b0Hi\nHBaxdtyt4X2nsRfGvZzxf9v55z7RlstE1P7gOhWDHcUxdm1ffcoXSp4gWbTw\nPJxrCmZYdddtjgpcUnF9qCm2gc9a80aOFsFhEQC33GJrKzj2AC6sN3vF1Oci\nvSBeKn4dqzgS6YQyu3qRLuvQfG/HbDsMPbdaNB1MBAtLgyDrDGIgsA2Jb0IU\nVj1w2asFowjcI2EsZ5Wn11JGyMtdRypF+GoAp3a3l5BIsqrlLksnGQO/97yD\nXDy/\r\n=zq+K\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.ccc64eea3.0_1603752688627_0.6234835552874443","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/typography","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab525ae9d58e7fbc21640f1a08a0aec9904d3d3c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.a79cdd019.0.tgz","fileCount":22,"integrity":"sha512-KX++CPOWGNy1bZUhzeKwDcS9T8VbpTFKk3lI+XGocPwayfUBYbZKNC/9w8xviW/J6dA6XWu6Y1RSt2GcUADXsA==","signatures":[{"sig":"MEUCIEiysHi8Tq0Re/vtBhaKxejUcVDbfCCIovD9yjNSNGVeAiEAltYRjkdcZXqTm5g3UH0WKpNE2fvKdrq/DUZzZWBh7EU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtKCRA9TVsSAnZWagAAqnoQAIr4InuRRk/iVgTSTkmc\nyV/qPGhZ4jmuLGXsL7rclYQlMQZbcV0DkgLCTYGOxcxTBnQIhlmLxTTRYs/t\nPdb1Q5QANFZaQW2yOfYBr2LjrKaWIBz4uUb4/FFn/ayVjP2Ig9N8vd2w8ahe\n9IUIw3ArpDnRpaDFSK7PFsKuM1vWEXY0PuwcWld2KNMSeWNJpeoPOJM5yUfq\nDNg9eZf4jvY8JKqV/TRmctnm25gfbC8WZ8E1L12ra9B1EjL6oAGB7btRYRU8\nRDYliADXmM2okqtCsS27af8S+a+45Lke4NuzgG3Cz4gtCPWWN3uqmmdNIwnZ\nXydloyBDKpqFiekxpdoGCFZNxI/BX2qglzhF9XYx33QYypL1cJX0A+CGpqhO\njsZGxrNr2N4xcVOric8XqXAG/ak2z+yXCmfX4DALntj4mJ3vxK4/LjI7zoau\n2S68UtsCHuwaorYeQITctl4BqUpD8rtB63bmQYJAbmOctjeSCG1K5o1XSz5B\nBIhM+n9rH8sk/OWYsWk//15FGz2alaE1MEXGgXbU/5lLw8tjE70ZBtvRonZl\nmXiBkG+uVF4DlO3jtehg8c8cofYuEutRLB9EgXcW8TgdBP0ANP0oEGiPWi7m\nNBohoFqil7+Jfjh0ZSRGbwv8uqBBdL055QjH7DGZsmOEsQAHw0NWYNRa4/Nu\no6si\r\n=XM+l\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.a79cdd019.0_1603816265564_0.8900584996633114","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/typography","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.596e98424.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d1de38bc6f793cd4ef1b82c0c3b320f3557cf7e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.596e98424.0.tgz","fileCount":22,"integrity":"sha512-5bbGCWsf1f9HfHJ+pwA9wn6R6StQTi6cOf2R6ugAazo7z4iNtGMg2yn0sm3drWx7RCIo0AZ2QUZ34QHdPj3znA==","signatures":[{"sig":"MEYCIQDzR7LLQLMPdSgQtgbgwCYoJUjLGwo5yClbAsW0AZTGBQIhAPNNgJ0+2zeCj7VAedays7gElSOUgdW8ZPJZB3RDif0j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZOCRA9TVsSAnZWagAAwlwP/1leXzpk1Bq+dKcseK7m\nXG9LNJQNXjQAhlbf4td6Us2Ip+FsgXLbD9oRiG0pzSd4YfOkvDPfwvzfp2DZ\newREX56WRRBgvYiXuyDZ395KWtyIUMw2bkPI1kjNcOxZCPeIpW2XnJQJGMHT\nQ9aBZvbbXai4akiPqg/tN6GW3ily6zaGrjL/jUaDjG7YKX//fyQxmtuhnpnW\nuGl7Jjp/cgWFREtQineYtTJ6kvSgzPs/M4v5kC77NJmCoVdw+/B0F56MJzdu\nela86BiKpLRKRqBNxzZ8N6oQm/7gHhsMsdNfuQnz3ISQc8I5O/6355xQi9+5\nxkR8mR4gqBAsj1RTK4tepPKTXHObuGaO4FSPEUb6kfeGv6ertVi6hvh5qo7r\nGobgKk+NhGgHYDLuVtpzCPrbNyD/4Zl3oke1c+xEzoqvYgxYrjS0nRUNOfE9\nwWcZkN7twSU+vXFpM5U7c5rLVaS4jE644VE6vArhOwixZecE6FevDOU8JTEe\n+AselrKvUI+n/tThRu2zItPBD7Ks9LI/cgTrDpv07uNtiIbpnoTi9SATcZYV\nvPa8Hnb3exhZieXMMJXBK2CaDxFFMeMcXS0b4vTrYVrDIaytdwgiCIt+is4W\n1BB7Q4RhaUouFrlU62nLniPm4YnfvjUcK55sjWfzDNQgVKTMjhgKMBOMaWQD\nl0BQ\r\n=IKh5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.596e98424.0_1603901005818_0.13302390021086818","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/typography","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1a304b347f7ebc16bfc9807a13fea0d1d02fd6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.05d5facc2.0.tgz","fileCount":22,"integrity":"sha512-a5H2IIQFMPSdFphX8BWRn1oEuG6jWCEkI6ed+RR511fUTWwu2FqDwRJG7jUE8SIMfZFFKfxM8iXGRTHacDR9nA==","signatures":[{"sig":"MEQCIB8yttlAGedcxZRJ6AGyBg1jSMey8i7HVdcZce5+2jZAAiAhduIrTdST+7i9lVodnmbB+0dQhsVKuuwBbPBhMea2eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhNCRA9TVsSAnZWagAAJnMP/2Hr4e+nMaEWvt4fPHxH\ntW0xo9hZ1DG687RdVIygSInA6WpsGN0BuB7IiUH8wiRqkAWrudHq/7+MM59K\nAF428maO6dkLkKxPopWCIC49mIEQ59j16ji/Uph9DxIHPpTV9BgK/MOz+sqC\nuiDyidJ8p9qiKCiaSrm3VYXKtDJz69N0/ey8U9Q4Ts4/KuVcAfg/Is/V4BFB\nPVVzlG+47Uyq2IG5eWu8Py8nXU0Rq5fU5IoH5o2Q+idi02u/2fiqW5vzaV9v\n6YnbZbaYjb3ZBaElx0Lhhhrg/0hXlpQBNkpomZEwOtYyDHeMzPx8XDt3CGFu\n26G4xaYL8VRjxemgT2mavjTwF0ff1gTUN3yWLVfFHEgYDWFy+hJYDIRQfQVE\nqSx6XTMNYRN1nRRYbswatK1Bg1mSBpfsAP/44tufeCyk0+XS3xdkHcVBnRig\nGq9d7qnhHUWw1UPq88CYg0FHKt3cLxm4IPlmjxw6CKU9/RSz1211ffnX3MPa\n/2pn14Ia+cocCir2MoPb+4vs0Co2SaFZ47i6CUE2lkdZcMYJHSOkz45+Nk9F\nLT6ZeUgZg4E1hjUMPj8p7zwjzxog8wQ3FSzgusedt77aXvK5fVmtq2QPe63c\n3icvcsZxroOkPTfWgg847fAzAw7KccinQCrxof/mGn3c3+KbsLnyxN0A/kAb\naHWs\r\n=yf+X\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.05d5facc2.0_1603901516838_0.6743199715743173","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/typography","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.291b3553d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1aa55098e268021b9c33113e3a9638f2f2bdb022","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.291b3553d.0.tgz","fileCount":22,"integrity":"sha512-IvcXMBDj6tPZrO0KrtYOoKWRjj1GZuDEbK2FUiSf1jA9KoEj5LL0FcMoH17/QTK513ua3u87t1ifsu5EhHMaYA==","signatures":[{"sig":"MEYCIQDlWuYemcrISiu8BNFmKFkQRETU40Y5UT/HBetHwlD27QIhALgZb2TLtCIWf7+VfuyV8GepGb+YinEcVT1FOh6WZE0M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4TCRA9TVsSAnZWagAA2NcQAITueJCSV4mJhwZeOrZY\nP0dqsgh7A+iIDWpyqpLTCsHKd3eYBVPWGMgeF6Nf0mvCQZPdDc12I2MSIqtT\nZ071kv3O62I0ca9ufgFPaUCikm9qWXL0qAYsZsyphU71pNhrDH5w6NiyIb+I\nZhquLiYvyEF1xD59E/iX1nn3PP2LNsRGsGiYSCObcUgqJAyQMiyZ1DjfMqnW\nzN0/j7+XHLf4tO4xcqXn7kpMvF4Ys5BvTDxMBIu9+VgDu/InLmJBWGqxcxRz\nKLv+FSqeNwAFNUs4feYfmXEB+QP4pALjLm8ziP5YxM/P/x7ZsHvOlpSfOHFV\n7gz4KR97/W0dV493Bze4dktupdoVe6Atxx4LIiL2Eyl8CH5YN2ltBxoV2nqV\nHPMRm6BLUMNJXzTnQmlY3HlStTIm+6KWMRpTRsZhYeU/buv7lU7reaFo+6v7\nUyZbtEjXvVFJKcW7PSX1r2wjhAcStF83NTbla7MEsaKZWv2wTjWbno4cIYog\n+vnOsjPxNnRjhOor5RXunu6D/Nhonv1dAzRRR1uoE1WFrE/Zv3c08e34uGyi\n5R4voMXSxOy8qURyxQ3O9jrW35C+eM7uxd3p2oDi4F9HkB8wsKqFTuw0mCUk\nwvGdLMBfALKcEZ9V85T89U8VzA1SjIFL6vbwCyr7PVmegjku4hq+W6ZINCeh\nXRXw\r\n=t13b\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.291b3553d.0_1603907090885_0.3692372412412832","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/typography","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c446caa47932e8a7d92c0de949e70d14a003768e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.dbc449b09.0.tgz","fileCount":22,"integrity":"sha512-KbAeIweTty8h2R/NVjYwyx1N4VGZBs67ZDgZR3GrlQQD/TLZteWRJUgAXCn1eLA/vlcg8H/ooD+xihbC0Un/rw==","signatures":[{"sig":"MEYCIQDMQpEira+54+qwrCxRbJeEiQs646XGLx9nj7qin5EFCAIhALnx8eFH/BsrvVp06Vqlg7YOfbBQXKLeF318MiMJRkia","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSUCRA9TVsSAnZWagAAplYP/ivV3jleG881WuH8QHEc\nq/4ueAOSXFJNDqBKuv5uwa39n+a9/nzkeqM/Ufb3odOheB8LQDjRorpDPvfl\nyn5rZE7B+IrzSwUnjMQy1jm+QK5jdlK3HGSjLDACO69Ide8hxCvzdocXsYkX\nkHY23eSs5angJ6mokxmz2CCtzEVrrBQgxYLqjT2h6y/Et9zxIm77epnwAvbp\njQ1fvfCHpepZ+CD5GXRdl4N27hoHDU4e6+5+o2mXQhUZNGzQegBhvZPmBRbF\n/i8lDcj6g/W/Yi4z6g3Rv+ZKHIVZLUq0EdRQ5YFrLCilHxZPQrSR5grNcjIe\nXu53AQNpll7CK3NDvrfU2msgyh/9TW2CT46m48hw4xr7j6T5ok1nbCnYwIGR\nZawLQfJSBh8lFfzYCRS7hghNPc0PMLUsDQykvpAXUOrbzDWK42rEZLwRfKyh\nbc4xvP78I5hGXtX8ohGa+YCVoYlpmN2HCnAoCUu0E1p99MSMhCPop1hn1/rR\nHJfaayfIZfL3VjFUVD4X5foFiQaSrkQMPtw3AhHns8IQKJfVc49c2QxDJ1/B\nHAgQVzFnFNdBCZ2YvgX0I+Gpvq6DCLHtaoJMu34R55GHmhwHhm1qYSa4iUYt\nONCpankQHu9ziHy3rvBi4S7O2M6MAibhYPmCG6w2rpA4vUo5BBMOUKiw4TIt\njwbb\r\n=IObA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.dbc449b09.0_1603908755709_0.6740825633546805","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/typography","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.4794b25da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0050a13a75ea6c31417ff70ed9507536563b4fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.4794b25da.0.tgz","fileCount":22,"integrity":"sha512-+rHhiOx9BdZSG2mYwXDBTcWSzLfLdw61yxnj3KgireA2DVzj4eAxKQConkEBVmHadcdn7HuCK7AJ8kx1x+wyVQ==","signatures":[{"sig":"MEQCICrE9xmvcTWl5KLtYDExy++fsLybvkPtlB7heKu0P4cMAiBJFoiVT8/rGBu3hkSPlk1vWdo4p2GpBe9v7uAs33GXwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtECRA9TVsSAnZWagAA0v8P/3S5kOi6S/X8fNVH/tS3\nTogwP6HgVKGmVRwNRwxBav0zvQD3tBYfOkYjHPamY1lqOHM2cdlJs8pCrCns\n2Q85NPLWnPMgfqZYHY8Mqy8UWCfuWA7SkZ6l63bwOqtrOfHI9cfK3CjUFWjm\nvlZz/omWJHq3tqH7zJ+a/AzQdF3DcHPwWv1F2uW4RXt0zJrFHHLm9ex6bc2Q\nydkgW4zNfeYx5kqrrUvoxSvtwogDV/BK3VZOwaCK0jr/j1IfpuMEZDMdMdwd\nwyIMzywWyw4jxLdvUafdhibWQBrJKdstjjmLMm5YfXDIoiCulbR6cHZ7a1r3\nRqtbOhAFRFGWKBS9VQzIH3mEuH0tN9kPtCJNFnb4Ej56smqlfT/A1xNsM8EC\nN8HRSKp3W91vrdd1bN9BtuMUqmjhUyy2hoPLzXHUUSiLTWet2LiA6orZKebi\nSzDOPfHXtJrb4sRDrNJ28KBVJSh5TepTF/3sA8ETDdilbK2IoJyXdSOulsCR\n+lbCIlMUvqVDdMyn4Cx+/Gu4eC6JJEIooGSyQPKhi5F4WFDwaXxcMBSLw3Nr\npl8Vu9Q7F01cz1Suh5VeiBhuLt8IEaU2ubh4djmsJP/c6gz2cGLlgpSCr6OM\nVbjzXUcNAefQ/MiDFuo9WQfhFt3lXqvwwXEjNTZrb566loW2JhftvJtNwbwm\nUOyr\r\n=TZxd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.4794b25da.0_1603910468241_0.311171532362682","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/typography","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a99a0f2e76d629b4958002a0f4812748f8df3b95","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.c61db90a5.0.tgz","fileCount":22,"integrity":"sha512-VuS1LtnWbCyNoOIVvggkVb6KVWMCUT+dCfXLRD7ImiEHon5F2eSkmgiEoEalTaFmNOV81w+6aMuy9FPXqgoEWg==","signatures":[{"sig":"MEUCIE9z3pehJybCKKNrzJNAXGSyOgK7AyQ9Qwx6jOTihbxEAiEA8iRX+pZrwE5uwRT5n5OoM9OAkXiAboTnht4zdzs71CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+UCRA9TVsSAnZWagAAfI8P/Ar7K1uy0CrclMqYGtpB\nnEawBIDX4tUwGKWm0BlnNS+FoOHurDMj9s5mdPsaEOW4iwNB3mWGMfA/QcEB\nPWvtSqfs4QaqMf/DTlldRzVgeUeuss2GUp393g8+2dP7JCpc2gSGPGKqnHb3\nfX5HyswPnfajkE45cCYi97VknntWK7XS9wBoWIpuDgl6hPbPqkMutwwir+cq\nRIoslLEvj8sn0I/rYVkdb7Li6N9A5nXRBIZxutsPkhFN4xta0wMU30l8GaIU\nFqgJS/yUZmyWjMIz2sPc4u9YBDinjFSmyVpBBXA3Q5DmspRS/wROmvl15uFx\n3/D0gEkr3kf8ViLCvjsTtzR2yIbv6XbKLQMImLfFeQxKP84geh3lXkc5SEhf\nK+C9ALUSTlxbT0e7SOWJFLclAqAvkhjHL6DaGs3qdYzggp8maIK7xNSeKN13\nyKF25YakEYlunBfOSpSNW+BQ8n60088DZ4hmp5DEr4VKGeQ/MiB7EywQyAUO\ngoOFNDKsno9OuIanqptwuq53akt9dEFURN6B3pIht2CSGvAAi3yA6mE/gBOd\nOSgRLgSPLxkFrtu6Qa3bmwwOLsF0oNuSmOTKD22H+fWNrupVn9nIGfxspMZ+\n9AtR0lGBTO+s4ukbtQwrrx+fudVSA9t6D+2PQotTFTwvq/S/lKFesyfy+rzF\n12cq\r\n=z0UC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.c61db90a5.0_1603911571737_0.6505195938845272","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/typography","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08bbc02827da6c675677010c999adc370cbccbd3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.6d9648ab2.0.tgz","fileCount":22,"integrity":"sha512-8b0y3ow7kK9sy63P7p2nsoYjkz4hNV+hBdftOA00zvx7fNWXhGq5ccxAfzYHNzSk+ruxNWeKF9x1tc6rUd3Rug==","signatures":[{"sig":"MEUCIHN8XMuo0Yj736Lpn/XDJPdfyNHIMxKCuj15H9mhve2rAiEAjrpK9te9Z9CjVaFQrcDz56L/1jhi6WdXlGCxUMkoRwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybXCRA9TVsSAnZWagAAgGYP/jxBFUucDLqorOPgKYEn\nI2cpKP8pW5XXcmYnIYqJSY6ko/vSFsPZ8//XwDlTy38pxzyqK8OoowJE9i1b\n2pGL22cLgf5cd02f1QjZ/lmquO/F77fOsDuGRARQooPavBQfB3slMopft8++\n5az6tG6aTYuRIyikAo/NGjKxsOaKmozt+oWyaPQYBJR+88sxnt4jrNGLHJMo\n7KUfaMhA2fazyjwDYPnkygWK6zEucpGD1pE9mSB0PhSS9iTmpsZHJ/NQ4e+y\nS28zGS4pvHrJ19o4LYnA7e5WcqKzBoEmEzSuhbHNN6c+3kC9KCKkcLU2KXr3\nyEj5sPEfkJuP1ff0Kn6qqnEZilrN+5FEVpkIdVfVEovkDrrbSysA263kyucJ\njyrMTlHE/Lz0wPz7UBKEOx0gHg3sNE30TLidDnNJPqXXwBNc+k7l/9RWMcSW\nGXRSmuftpeFlJh58rIeD/sqKwTDAAMf/LurocCRlvuhQ6XTYXdAIOiUyGKvb\n4eAJ2Xj17XmQIp1selKvAil6zivjP+gClUixEZsMUGPJu6ggR2kn7HwYnkLw\n8UtSqVsOmyuDZPuuKk5IsqBgvdmoyY78hEbNXDbWtkAwxhc8v0PGQDjvUhgw\no4Px4osaW6zcs6M7csuD8jnjc6JMNpcLxdu+uOp0Og8CpoMls8mU5O5aQ4fu\nvxr0\r\n=qZ/y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.6d9648ab2.0_1604003542865_0.7208124852356617","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/typography","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.5511c5254.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b22afa5710d8378f19e58f20649c37edceb3780","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.5511c5254.0.tgz","fileCount":22,"integrity":"sha512-2Tbw6q+EUGM79UgkqipYAp87GMLkN3/E/AICO4Phe0eCXnZL/2Gi/12fnT+drrudVhxyz0RbW730C9knS14fkg==","signatures":[{"sig":"MEYCIQC7mjTVDfvrDiKKzmQhxZtMmtTcLg+XhyKu8jctDvrcpAIhAJPiJkRrUYtYVGxiaT7BQ8fwvqoNoiSbcjTPF7i6WUey","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSqCRA9TVsSAnZWagAAlUEP/i63yt07XXGzXdjtbLDr\n77zhVTZfK6bjpUlwPjWRMUQg9mB0m+Ja0WjfNJpAlHYJ5fRhq8bYKptzk399\nXOf+R8m6Upy9HDli2yzHYhOFchY7vDk1qOMUndI1d+eyM5zB86e/48PstF+L\nnWMN27b1i9icCE402FwNgDbLR6T4AO/k06CyB2R6T8TquIspVClvocXno02S\nz9hDzmctLpgtX2yldi3XamIq6j8a5fmueE9mYsS6wy63QlJ/+3X39ycYdR9O\nbxZRxDpzxvnbe7AtK+YgEGdXiIWb5M4OcwcRHSKeVcZHmEqm4N+S4WAcvsrt\nFlXVbrnuQacbB2o3Uk3bWhUhONF9e0hR9w4jfVfZbIXHapZ8HzyMxMddrUdB\nbL/j7diqd4hwxjhqzdj3WIQfxh8Ld1PfB5+VEmMt+yXbMaaVnkUml4TiCzHi\nSQsMBryNyk25wHwM6VCEe/bKiY3fBizMNQdQOfUwzLtE19EaLF5yM7twMJqu\nQc9Hkfy6yLfEhmT9RiQ29Curas2GpSFxzI/5OLsejaXp4mI3XvYPS9HuadK1\nfuPPaobf+8oTrkl+ulPEAryZ1ZNtjfDtU2NJ82rKd5dSUnYOSU52UJu/tQwt\nTrCwcYwpbwv3HjSDla1AbCxmb/dpZtu3l6GbtZzjinH8aFVLhijORw/5vS1O\nblX0\r\n=91yH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.5511c5254.0_1604080809967_0.479952116341001","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/typography","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bbcb2bc4dfa2683594d03e672e09cdec841d2d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0-canary.bd6e302a4.0.tgz","fileCount":22,"integrity":"sha512-k4afj/2i3sHsTgiEd1VWsL7lYAkIzNVC9TOzQU2+qZeLzO3oCX0lbkUzvmkGliwxaFc3qmAC41MIE3xYSMhLlg==","signatures":[{"sig":"MEUCIQDgLXjhq1OFzfjvCEXNc++ehPgRt6aFod47joNAMZWNTwIgTyLMr2ZxDBMMP5oOPOCL35NBK9xisQyKaWaD5rg0Qqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDwtCRA9TVsSAnZWagAAd+wP/32+X0qnHURLXLjZWr+D\nZWUuI9qxT7t+MTohWG7n4+ekwfb9dOaRxR0thSvpXqZ0Tpkq0/qN1Cgz/I9S\nmyqZOWgQGPHv/Hxy4FiVPP7yfC+7Ilr7QYn+yCxebzenP+/2fjCHN189nmBr\nKv57o5dELUhD6ZJZ4pmtB8+tTaPXLIVon8DfbYLFnZajPIknZyPvT+VfpZxx\ngOqt1gml2EKLdXETaLYBS/UKBcMXzyoQ7eJMsjgK9c2k1/DV6ELmpSsTdu2f\nIENJayFckQFzy67RaYoen5lzmLP2HuNojQ1PhYzMMDX+Bw0toIC/N868MARC\n9WTgW4pqwlytAP/P94gePDpNGpJgXWDXID0p2WHrWrmlvDbHGTBbG0m1LTuR\nhn1RCZxkRTbxsUavzN1R9p6BC99MsMpuFx7f6k8N3yVeRICvVX/JcrVoz6FN\n5u9XShoIAO7EA58l5dkHnANTR7W7OfIjod4/udnZACOzVRBKwSjl7dR69udf\n2DSxpDiz1dYhlDKXJUodtbehlDxnF+iUqLMQU0Kxyjxb+/03DwVNAuVJgvUg\n4nTTZ/G9cN6DCDhb+U6V5PdAT/UgkmCy6iYse7uIA5HXxZVcNmWhyKJ77eoX\nq0Dkyjl9wtp8J90/blPqcl/e6EbifbhyP5rdTavG+9ydxts/bI/eT1PqPB0a\nd2Zj\r\n=Sy48\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0-canary.bd6e302a4.0_1604336685482_0.03872903026051122","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/typography","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"158c55a015a943bfff8b7c8a8ac9a2d6599da66e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.d6b5cd418.0.tgz","fileCount":22,"integrity":"sha512-rvLiBU0dnK6Wrq56hkPn/g/MVyl/FLATarESPHTCnHwGaTtbiAVrv3tWe7ceaUOOFU2F1TPZA+5DXD02NxeGAw==","signatures":[{"sig":"MEUCIQC2W31oCoC7eVJITagBVVYZALOc193z+bjBSIg6RvsIcAIgOmnqAJ3TLxyto6dTLKbNHP3yO11mRIowm9poIGsIH8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI8sCRA9TVsSAnZWagAAwbwP/0yORjKD7PrWfzVcIHu3\nPc+m16GDVKyOiYvuC3hqevdXjZDWvJeawoaJQWHjGeAN3pIwANb2L3IwUsgw\n2gVsDLyOrVN3KyiWzJKbI/kaJnBEjgVFd3uGcaqcXlUnK6PSmb8eBr5T5O1w\n1gJcQb8Ad1ScmGZEFyL4gnz37HNEFr4lm3Pvoo+sTzZkw/2U8YFDYGoHvkOk\nSqxhOtYzG4D97wAO51A0WVqCcqMZPn4JvypzE5QPjNOHDip0/oe/tR5BSIF6\nhEVXfQumjRH5662VgI1oylMy1FeRp/vDecIXhsGMCI7lh7yAXFERbVInFv/W\nm6T1IUaPAmuZ7gi2DrqR/KGXg7CQj/LgiR3Uhdu4qmM43ocwNSz8U03qwNfm\nekLVtFu3UOEgzEXYLiIqlPnCfWXhLhWGMnuMvHXuG/FmUBo8zIsrp6y9yUdN\nx/VW/zhv4If5dcpeJ73+rkhXVNt+l6lOVkSA7p3LJAj0D5ZLPCAoLg2ZoXOL\nRrvba7EgpjCFF3BS+KDZGdrFAsf/IlAC1DPQWltOW9GReBYicR6UPuuajlHC\nwLFFJf3BkjyOL8vtZrnNVLgeXv94Ry8g3ndFf++xf0+gfvjwRC3UkThWZ11S\nvIhmwDoetkqWC1/UfI0l03YWd6w+HC9OQnGia/21hzo2xBMj5Ryq3Bd23NKd\n+J+L\r\n=/jZk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.d6b5cd418.0_1604357931608_0.699618555450551","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/typography","version":"8.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@8.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe8d5f43350857dfedc3d152356ff25dfa254a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-8.0.0.tgz","fileCount":21,"integrity":"sha512-1CKckX1JStAh4JvOGwyc3vJ8ggGJXBZJTZJDJNmXSyJeL8SkLdppeTjr02zN09VNrVehS41ArhScPF0zl0rMzQ==","signatures":[{"sig":"MEUCIB6vkDJ8ASXyYt1Pz9rpbc69miLaFehUWTEbEcsPnRlAAiEAlFx/Jfx51WQT9mnyL6VRXxm31DWdoKmae/B73dXWwhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9FCRA9TVsSAnZWagAAmQwP/1gwCRvKqmXhtVdGfx0z\nvdhMWqyfu8qlGF1x79iG6uqEYdmONyCIPG75uL+q4BCyCls/OTa/y7myYzit\nOBwCydk4AkjMPnGI1gp/jOEFLeDNNemEsScNPeGhFi3f+IABaFTpMHE/CRtG\nc+I5I3hJqF3fKbxEXfHOdGr1QGM0Qq2ggYYuqiOaopO+invY2SN5PCagRbBC\nZYJp/5/7PqGHKQhwNyUzGpIn9ZWlrcKH4D0rihYZYaiS4a6Y0BezELb/KsPN\nSLAarNbpoNEI12c9FnLrYr18r9nu8Nq3NtQS9jbGkrGXBHeMYggQBvCHhbiC\n/tQ+Ifa6J3P2+gNyWjcz2MVTBJQx6ENo87Pe0fTol+QeWbyHUGUEe+FLmDPI\neTu8VngqTUIHApvJTmvcLLEmS5VTbdlxhE8bU6W/uhuzmLycDN9/g4aIFl0s\n8ohj4Ce8HDKOb867HRC7MpYGN1KKFGTkEzGA7Q7+2R4FWRxeEAL3NOGykEAK\nEe0oOYZ0ElG5avYxUlQIq5J5W6TrrAV9Uro8Si2PLjYBuq5cAg/EqF4nbkKR\njK01sPSOq1KsQaNH4zTN0n1WhdNxvYHVJ6sO6AJcMnRynog8c7dftUaVT34L\nbUICmkqIm1rd1zWhNMMCloq+40KBHS2yVgtogv7oB2xX/tNBWNzEH6yzK2p+\n+29D\r\n=vtJX\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_8.0.0_1604357957092_0.8127084921119501","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/typography","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d784dbd7677ea8cf49e1b7d5ff0468eb19bcaaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.fdf9a2634.0.tgz","fileCount":22,"integrity":"sha512-hoOkYZVT5wLgpgWiNOx8cJD8YpPWR1seDe2BhkAP3o0QnH52KWD6epcbMIsRSRS13CHaqPLV32xSEyHeXBKYew==","signatures":[{"sig":"MEYCIQC0T6q2eZLmwq5e8WeYQot8A+YVHMMGeYV+uNrV0alt4QIhAJ9e4stP5rHgkYLheOx3J/9+0A1N+8EA7brzejdymf7L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeXyCRA9TVsSAnZWagAAAaMQAJLTr9ClsGLmJRToJTpN\nJj1B/q4GBMx9Zzi3HQQZ4tloVwaJCLqKQdCCodQqpvJP/FGjo7Z/CEzabmGM\nUQWe0/y2r52MInEjOQdptinsrMi3PemSKSNP+7+elzaBfk/y87+yc4qvh1Eo\nxNXMyKHcy04RZ/PfsbLX3ODjvf8XLl+AbT2cy5XlpSKu5U0EjI6GqQeg6hqA\nLq44VMKyEHwRgSg3AeErfYLZP0+OJg6KwGaqsEdvRrCWlSJ67JPyPd/lrhL8\n+V9XPgFPar0GsbSkzG7NvZj+dwuViOB8gYRLHZRc3z5BRzTysij9SEed5/BD\nP5Mb3czGANucHKM4SvdTdCau1GC9Eu7kt+cSUpgZ4OX6YJxzIBVIztGUCdx8\nG0LPn1UvTOcsPbQhK87a+99/pvWo1m6/teNSXW5DE5OXjc/t30MAqm1XntCD\nUvZuU1N3dzg6rQs227P+Q/pC8cJys5I7XgB7sFF4bG8Pfw/RBiamHrPl0E4W\nUFIMYFUdN4JXdTgbpUD72pCOKhDQQGhI1sdiXUzYtFeSXOUuankvkAWouUFF\nqAgGQ/WIc73g+3mmA1Dlx4MWumoP/JFPyPk83OudrYI5hWYtE5251Nv7ARsA\ntw8xxW0UnR6feq5oaY4Jw5mAcpZ9BcZJLZqPIq48kfN5BGFPCV/kFdZu2qpp\nfE27\r\n=BZMX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.fdf9a2634.0_1604445682227_0.35203648389584075","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/typography","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"644e19fc61b06b3425654a0c6e66ef0eef045af5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.4a86f30a0.0.tgz","fileCount":22,"integrity":"sha512-6LB1Mvwg076RycnFcjneHmGew+yUGGNc00u3M3KeV2MAfKKfXRyRIUjv0GDniug3QKkUyZmzpI3gC/Lru8d2sw==","signatures":[{"sig":"MEYCIQD8+qYP6rpKtOtncswhjxDLM9H1k0YMwjEtWdyvDe1LXQIhAJaPV2a+2fhwPMVMC6egHydLGzUBoe9JANpGFMB0d/Lh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoedvCRA9TVsSAnZWagAAVuIP/Alz8HoXDDRjcIkCgvdg\n9rgA7jAUbmbZbKlaitkD5+hDjZcb9Rk1wagImwe9UIRjCezOUt89dnpYvJ4L\ns+K4wQUwoj7jRgBso1B/Nj79d1UCP+B+e9locScydjJE2D8SPFbBMlnSQPDb\n0F5jQjkv1i86YBntDcuwCG1GgG3MXd/nPzGQd9nwpVSSvwxgsc54NanxjEnA\nGAjCWDWS6+FePDlKt3WD/7tpmp8A90zgWrxHH2/S4XjpmvVyJOzpqag+fp/x\nnYmvnEk4fFQ4rbrbsa3hYo0k1O3GvKYnb6CJEGZBn50Odwm4RT4iMSlMpfCv\nFQpdbIyqBH7jzrXRcwxRIPYgdY8YH3CjaWKB7Uk/mS8NtmoRlktr4Hcaf50l\nDqCbSJ4o5Cv/iscFUvypcAy7k4gOha5XMOzWqv1JqOlaUJGsaI+16029OCnq\n/d0kvbq4fSdAnAdaHSQHhVVafS0kDl4bXgoTsHYgRK/0yfc9xA4fElL9c+BZ\naj2STN2Ag9PYllM7w/f4BbeoD9bcB3r5B7WHMgLd7rSMYNFYJWV9vGRnqZ/X\nbbdBnOu4WYNCixL1Sm0xhEN7IR2GZtPgXhc+9cL3ANr1WYd8eSSis9yl0kUo\nLWh1sq00j/tnFUjEVvhyql8wNkrEpNf1HSXExeIkRc8Rz8MPEAL+skokcLH3\nroIt\r\n=HyH4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.4a86f30a0.0_1604446063196_0.9740289462065288","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/typography","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a5695e3f8ae6076617204ec715681b7b2cfc82f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.fc8b045f1.0.tgz","fileCount":22,"integrity":"sha512-aENS1ha+afvcEXXzj+9S9b65qMgW/jhBAir46db75Je5ffFYJyBofduCKHtsepdHo3oS67SmK5kg2QJ0YUpFsQ==","signatures":[{"sig":"MEYCIQDONJR7yEUfKALNbyNW0/25sJmiY1RdR6WQy4WP2+ySKAIhAOqfrjgVQb5Z0isZxVMervaHkNfB0vnXI2cpONDKEpYS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoembCRA9TVsSAnZWagAA37cQAIFLsV9yXTc2qYV2p8wk\nxEPgDFxk7Tmihlx5p3ff+2PQMAf3370cC81b3/bQMiWgF8sSWeOhB2Zi/VRa\ncjoF0jxd6mJC+wIZwW0ltS99i5VMG2dqAqVbDwjYf7jJWL9m7YW8cpU/BJjF\nm7ESiGEIa6AxEX7ZZR6SpLDD6sgQYbeJfWNrMVq72lOisY4tzwx0EdMgNaMr\nzRQp3PxGzTYyLs/tbGipj8+mTc+zBfuuPvm8tVVKGs4T31YvvS7J1ZWaj34J\nzdEOl219aorgDuLfxVvHys2rkGsNk0G/n/jm7NsnaTLUfWOwrCxUI9w2fnhW\n2qcjAA7A7MCOsXrJKLNHgvWpx8fZGJ5WkGOWZ5TNxJQMyIH05YpJ7s7tip54\nkZVs345p1s3OjvOMG1X86tIibEpsLPyMdKeahOwZmqYddY8L5XVy/ZN9qGrv\nQ4POKqhT+ttyCmFfaAye+h5Jb0XCJ6JQ9Edr7vxJ1yuF6MyfcvVcCtUplEWu\nFzoeTu7h3qKluvHRx0FH3fa71Hnpo+zH8h+0bHx5kxU4vuUc4p+8Db2DTbxJ\ns9fIBYd+f2NUAxQUH8F07RBakW0sYV7cr2OVvHsx0GaGKvC6J5iUWaXEFv+Q\nIi3WtqR2jVmoSgW79USSD/Z35tElyILojH+K4a+avpr6UqnA1ayqjguhwW0q\npRLD\r\n=ygIo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.fc8b045f1.0_1604446618801_0.46919330885354427","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/typography","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4010334907bcfe0e41a1865973791dadf863b35b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.a0b2db26b.0.tgz","fileCount":22,"integrity":"sha512-VV7vesHzZsBs+w2eTMb24DCPuWhP2nQ4clXGAV2DK17kGv1bHrhi6Mi47JptG+f525CPQK0PC20ZdtOueGiWIg==","signatures":[{"sig":"MEYCIQCsM5YTLzMBM+jAJHosXFD/8looR8Q+dozMG/sFzuYCPwIhAM4SQemq0SZMTL19P1FrggId8Ef+awp6xGT/Y72mX29I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofEQCRA9TVsSAnZWagAAhakP/jhy2j5eUVY1AlVsIWve\ngK/7V4QefriNhxz2Q1Xj6B+zC96MQ1q1pO+TGpJ/kKw5joo+/Fp8MgdBqPeY\nMtGUHIWTP2tlFyUquB7LAo2C/u7J6x/rnm8r4xWScEmCUw23L0FC2APG5xpn\nuijQyf7CThvMKmSO6ZHwXdtD9xwyh2vGIW7b+NjPHwynSh6yx9mO8OVG3n8T\n7FWE76dV/oBnHfS4A8W7XLhXVvr92tpTUgKNVOa8XEiBDuRUDeYnzjarnnDv\n9U/y1/pW61OZhCWm9kv6RwUmPBnm5QscCsr6BoRt6De2b1kvPjW9Q2nRBneS\nnIw/o/9m0aNFsx07ZxPwpSqQ0+WykfAzXqHSdVZQqcFaGVVlZ5oKm8K4wPE1\nhYA6h7p5QyyLy/8CpOdj6qNFfiycowk/zg4aYZScqqjhEHDy6UN6FnH+Flq+\nVKHwjC5FpeghbEzTEQAxz/656JLxKnlNmdHZu+iX6LBxV+9C/73LWM/4MjVV\nsvKXS4UmGn4MwkvZePK8GxcTIgOuPSqc+qUxV47AdX+wQ949BpV9Sui29ofG\nnfpjQpBX0lL2MWuISN4hml65mC6xo1NVzA77yuQcCGLjQDRV448FyIlIacBi\nldr0YnnsDoZT/F/2yPNAQZ+VksRFMGmku0vFzKwifUGPh3MlsrFFPrK94DTV\nUD03\r\n=yv1y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.a0b2db26b.0_1604448527291_0.21976256412665496","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/typography","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.419e03572.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccaa6fc797573980a293c4ebe99b96563d23c25e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.419e03572.0.tgz","fileCount":22,"integrity":"sha512-ITR6ZqQCKiPeTbwez2vorlIHiVuj3+wxyi6X45YNrFgn/IhjI7PZYY/5vDjq+wnJZO+RMu23H1OwN+0yEXVFMA==","signatures":[{"sig":"MEYCIQC6or9SNu/vykvFaXKW/fUt8Hg94GANAr1+QHn6YRpJfwIhAPwRdRphvKlxvIJXLt6scED6FH86CIHpxUOD+VMTUO+F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTHCRA9TVsSAnZWagAA1u0P/3ioWMV0Z0C60KlNVsya\nF/3TyDOktmHspjMfESxVf3FVzraJLYSWzSBy+0pxN53Mxt/NrtRFhmcmww7Z\nVBPonYhyIQNNnRygUhUzwNwY6xYkiF2sU4MtTe+dn3+J48luyRzR0BfmI2Nr\nh3NXgWyaykobSVkN7zc+DhxBR3cq1fNerqmpw8Q1bCKbX5wEM1TziDGNn0mp\naKrw3trn0fzEH8UFaLphZoAtiBfgYBu6j0HkatEPdkHzaqG2WPwhdy7aM6iR\n4YQ8gHsYVJuoWaaYGdT9jDMs+0f0DH1MghJCzJ7ZPdCd0fQidxIugXE/7V+S\n4kGRk2thA3xeNE803b99lqFCxPtUrcmx7pH9HD/SjhJb1kCZt2VhaG1f7ohM\natZDTpPkYox6OAbBk0YhvsSNPJG93o2C4trF0wm0Gzl86WH1/4iuTqZhl4Ik\nkD+pxDn+QB5sHDwwFQC+3sKWHdxruCmzQTPjBuwNpMpjmBSy5/F8bHJilLii\nK7PumG77Y/hPTCFqZahBD+mjkXaY0iYRZjaWBpDsZGZEJO7ebtjBg5MfDp7R\n1nJA0lNv6lzwB59fFSS4u11TLYtztQlkDu5uIjIPr/WGrQptP0NDdCbDkNAL\nuoPB7yFM0/aVn7XTxAh0P7NxLjkRETV0Wb0bpAtvE691QCq420f4IRCPpq2F\noDYJ\r\n=CIsh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"@material/theme":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.419e03572.0_1604453574923_0.31745707611554597","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/typography","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.a432ad542.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29307293c4714709e40201766a73ee7b3ae62e70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.a432ad542.0.tgz","fileCount":22,"integrity":"sha512-S15SV8E948p0FjtDe+C4DYBL0pBvzBc9ASKqYxoO0cPoS/haWWoCSL4x97evdvl7WuuXp43+/nQmLaaVM8zusw==","signatures":[{"sig":"MEUCIQCQ4OLR5x94XZOUuL3bMwpWraDSvvgJ/SiKbpBu0r92FwIgWn90WN4xqZ/peDFmIYYFFiONi6tKgBu+7qufM1xL33s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrMCRA9TVsSAnZWagAAfccQAJN4JW/l8WJPV+PPNzvL\nGQ9KL/kUoYzoow97u1v6sUxhsv+g02UqDbd7vRoNb6xllC4nBqR9sodBPy0r\nAYYCuIbod5n7qp5Mdl4czSoUPhpuVHlp3qzM8mUVBdEJNB+XSDyakSHclXUw\n3pRxx4R2n+sJK2ae25EV05we5xOGiQ8/BV58ntWXfB3zzmRtCP8e2Ry2Pcek\n+6/qE257FvH84ZfkvjULJYhPJvhA9lWlfk1SojtLRYldi/gMynpGPd+I3oQT\n12ZOWVv1JKxU9Ogaj7PagUsK9qfOjIy1DM/ZT3y6kqESr8VrSL+LfzyF9C3F\nPd+dze8F3gj1w1Qxql3qmtQSEgDTDRGdW5354a8AfZvKf5xhRl+IvPtgNkKe\nIX069meUCXiZpdb96P3uAc0jbZnnn1Cm81Wh57CIXb2Uv43EVnpObD+/ntVC\nI6iUXkgL1nbAxZV6pmAS9UAxzgQdKI7wfeAhyXVNOj2I2cIK8SdZTvNQA1E8\nWlabbMdtg7ojahxCV5BWpD2eHpOYsOrilzdNs3asrRuRzat+MDq4yFFocHFO\nCsHKwyy5HKrsv8eKAUOnPsMUewm1PlGrDz8bPy1R6Q0oG0NobWBQ6os4FX+L\n8BcKE8LGMEEhCDdS7yFUSEPGNfWy67kxYFQe9aCpx8tFF7qf3uAEPaXY5AKw\nAZ2y\r\n=oehd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.a432ad542.0_1604627148287_0.6315835290116061","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/typography","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b1ec34400b30ffdcf938f0077e383a87706b97e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":22,"integrity":"sha512-7rRGXEpZWJck54zIoCl7/7i4H9RHDGapM4q9ntcEbNKqS1AS7Ov+On+lvyUcy+HxZg/7nBV4qs063EadDbaZ5A==","signatures":[{"sig":"MEYCIQCFn/AQqlPNcVaf9DolYFRBWuymtMzwmMWfPjifk/pqlQIhAJ9XZxDoRNorEcVvP+D36Z0/tdfP8igFjWp0RcnMb6aR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9XCRA9TVsSAnZWagAA6DkP/iSWseIctYVER4XYUDD9\nu+iB7U/CyVFIodRLnfr7wHOF//RlftnOneea5Ow7hQNzjJtTC1nfYb1RnX7N\nw7GTNJ0Lg5UurBWIuKBow4a0kpVOdjtvKDxM4N276qqtIO2Dv6WC7LPyRrP3\nP8JfCqU78+AFyH14wL9WXNPEdoUeVD9mCartCQ7gr0qYechyjCMLVimWO6cm\n+hoGgrk6ju/VcibIwxDsIgE1469bW/BYuwNpnNEkCObAN+4vx8BlxB+L1ci2\nkZ2GAtfyCWZw5tCkdOlHdwUesnkHP9M4f7R4pf7+cFz7t3jeV8N7KoG5byK6\nJ+Cf14+k9OMViMNj/QEYue2L6HbAMZ1bkV2EdoYvPAHvaG9KzYBVlIGgQKhB\nvjJ44QAPK7JBi2Xi5bR568/oPjp++wBf+3FoT6rh8ilPrwkSFJumyTwflNFx\nHtTNcly1bZ70VEnhaYpYpyZtaai2+MTq3EBl/r0c2CEruF0llJ8BPEeT7F9L\nkn9PmWOz601MrGrdRgqwvBM+yC5vq/ywvByBt4kyoh22fyTmXoDHDVi8Ls2A\naVqr0cHOT64wmmrFWSS89BnCQL51cRMLW4jhSmUaWIInSsiQd4iLsoR8wugP\no5JSNlmnBKY7piD5X4IU1dNMIDw6c5Pd03LIv+JWeTQkrluINAe+KTSOW+k4\nwkiZ\r\n=sYDj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.e2e8aef1e.0_1604628310522_0.6465752235946234","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/typography","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4551fa2ee4cefaaed296de0631ff677480c58a71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.ec6b68b34.0.tgz","fileCount":22,"integrity":"sha512-/9rZTiILqU63mS1Wg5vbP3yV6pen8v5AJ7rwew6oyx2vOHeW6akG/dxsa49lel5RrdVE8TISuT8vU3tGUL0kTw==","signatures":[{"sig":"MEQCIAEby3/fssW80l4O1xfQVwB39QYqcFycc43xBUeptMk7AiAZW1+jpi2IDKhHp+epGiQyBodjiLbR6htd4jvhnqOuow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxWCRA9TVsSAnZWagAAPjEP/Alog/fsFct2vAVExBpJ\n/iy+ZuEhkLvBtugh6EEuDjN7E96nJ4uxkzGuBAf+L49aHerDp1H3kw3BOZAG\nkOBl1vMnWX/gm8Rf5I7jgDl26RazAAiUp8gqDEpxOUmjVRjEdoJ7yQA08zge\nza5G6DMSBGccfHE5tpuOTKlAxdWDS5pcDqJXklRSvJ//k1oDVY+f6THCtetx\n1C7tfBP9zzDEZe2dz2CScn+6lx4ioXHcGxtiuS1/tEsHBznd3AZBhLFxktHD\naSvj/Qe1tZTS7vtjmWaRZ/p5A0o/SW9dAaUTo2u5eNvkzJVq7pKzfVU1P3pO\nBV7Dl1fBlrQPNJVxGD/idOh3nx/EYtOlYgn4u5tW4WwxH0vgIm76CY/HOJiI\naqi3cpVgipyxntrVYQ0MhMteTT6OVSQQzP7jhRZCtyHWruWl8NbBRh+wwvhl\n7DUb8GBmMFIkD34lIiHDdhCeRaC13LyBWayrSli9hmEd0hBvPRiTzleayFd5\nAH99OyIvugPlhTqdp20E675C8F5jyWciruj7Y51YPhLSYELnpc0UZw8XIfb8\ndXWaA5/hozttVWddQ4zpzjDKskNX8t9m3SGFIBHNJobHunGBkf0UyXlZu0jU\nwciPwBej+hcwL6AptwJiV8P/TvXpBO0sn3nXze6IU8VPxlSAEQdXvblUeqHr\nHIOD\r\n=f5Y8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.ec6b68b34.0_1604688981581_0.9982001632654214","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/typography","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.b39094d14.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82747bd59c246d84404927aa7924c5b49172d74","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.b39094d14.0.tgz","fileCount":22,"integrity":"sha512-sPpNp/2i+GX2HSchfwMz0Ko+k55Gbzdk1Cx5ct9I8mnntQXq7Qbgxyz5CFb4jnmPhazkxRpZ2fB6/IKNVBJX5g==","signatures":[{"sig":"MEUCIQDZoGEMpcvkJNf8WM4IwyUiDkM8af+qCVwifem2nUcC8gIgN6uxg+axjO+eGnOwuLc9kzgHj8w7bhYqIlOOu739U5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0ICRA9TVsSAnZWagAAblwP/Ri76DAZdt2wb41FF3b1\nL0fLqookSPeoO9GSTMEU/UJr65MZCLzmwvjeDIHY1feePjWkVvAkYGqYL+uO\naPeW8Aa1myMlHsXAO3qJlgHVlTmCatd8MsbBBiAMkNtjg7wZtek7LSB+OO2J\nOpgtCcSpfVj2JsGmWfA+TZd7U4iNG7kv2glH4/r8KQNGAN0kEZGNzNnvTOal\nU8pnCjqcY3XNQp5sh1rKTLZEO0uvLGI0kwtOB6UxZqfc2XOChoW7NlTRGWYE\nnaFtywrD2JDcrPwHV6mGMWqGDmw+24ijAj9kRV+5x2bsGAf5om7MkZ4oH0Lb\nF4uAJ1+qCe3E/LOGIghuCU2lJTbl+IleLaKZorgZX8EWK3mw32JnPMWLlmXd\nkt86NWRLCzjVpy84Y0wXa7M5YGvn8rmDBgs2Dpmw39192+9ltvSPhKb287DR\ni9iHsFED8Qf1+WRo0nlPIoGXkYAGVHMEdYk/kNuh6+OCgibWuj6cbX1OZKrY\nFTRLg/3+jHdCK02pqND3Y2ObYnc3Jc0nMOyKycLl5Ayn4MCCkMMIrdsj9Wtn\nnRn9+p/0zy75EjrVUlj8nAeStJzOQrcBln6p/a4J+ZdvLbNLEHfwf5vR9utg\n1nL5vCu4jvEBu1z4rp1uDeAlezobizf56d2BX7W55Azac62uKDgduVRdgmAq\nro2+\r\n=eY4X\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.b39094d14.0_1604697352061_0.8770954280647052","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/typography","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.8648b8258.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9cf2e67977a3010b47d68985d3ecae394a7734d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.8648b8258.0.tgz","fileCount":22,"integrity":"sha512-SnodJFwNU2kl9u9IHnLHPzCxV0eWS1vHQc//5vwq/G3/TqPpqb2dkmvMbTOdc+zmIKR2M2EIEv0mAlgkb3B5vw==","signatures":[{"sig":"MEUCIQCY3dWrMkQB1KuRkkDzdf5QnBp41E2/mbsdcRudFxLAEQIgbDWGhexB6W2TZhca9XqtB0sn1rhFoh2U4xu0mffnC3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIRCRA9TVsSAnZWagAA2C0P/2FnBviBTuzeZGnpSUnP\niVsvooR4hLByaFRUhfuzGVcOWiZRaXowOEpBLQuZUbr7W4cTmEB1sc6jyasj\nZuPwWw4ExmZzG+3yDY+CI1P8sN3gEk1uu3oZPaNSUlTiR6GdKzhY2YAyn30y\nlsoLLsLYO+NEQ65qJQQRRaQ3wmQrktKkdyb1zRyBJbytCJMZfJZsfSespMI1\nqj+fGH2Qcy8mXYJaxYWG7Zr/W1q/9IKX1UzTOGpgy2wx/FWFeALj9Z4Dh3VZ\nBkqV93l9L4okeui8Xw/55DE0FPzz+f2wS1mbZOd5Gqw4AGED2RKuLCcT0aAo\n9p+G/FwztnYBICI/KLGUmBOQGOWWsFCiBz3NuFr5SDez/Y1nyF/KqXci2H3F\nuTji689g8kYxH5bnjpiJMZzhUmUnogP+nmcU3PoXFS7xER4Q1TYUCgDilr4W\njiMRQlSHChgkRFKxZHdjdeCOuNd9IViC2Cu5FCc2qLvMFxXr9ocewLdE3xfg\n9qyBoqhnPzVIVKP6f8vthi5Z9nWvPvnhrBz7ADDjYNSLr31KcMEbsy2F5yQw\nHf++goUB+1UXnsjgYd9DXlDl3ozQC8DTwLxwq8f4JBxbaCvAYwPpFps3EDFO\nXBjsNlKSnRSlTnl8CT4dHoR4TPhivhNPQyoZMpnJM+vVusljXjzp86puFuoN\nwbl3\r\n=5zXo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.8648b8258.0_1605177873372_0.03391277151803296","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/typography","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee00a407bf8a7734ea5077402ba047e830aa73d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.240c5f74f.0.tgz","fileCount":22,"integrity":"sha512-ZDqT//AjnPTYLF4ILd+DkdJ6Xif2rVN2fwgEfVXxmz5ME5cMGXuUtT15ZummF5X2j6Vu8Crx2+rRxCaWMveZ2Q==","signatures":[{"sig":"MEQCIGC945tlFunpa9jDrC+QhCYzqffLsOUVf89UpxpPjztAAiBJZB9dDJGtQd1XrhDzW0AkurlIUux45hpCTe9t3MPMUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZkRCRA9TVsSAnZWagAAepwQAJrFwbpI6q1ZGSARJaPh\ncsVqitr/tpUs7Tb6hz1ReMpHpbt2pSMdrCBZhSl3yo/1pJ7McY2xAV6ge3Ia\nQ9h8hWLU+7isX37tC4TcQ/k8E0sPe6Cysacf4mAfOTZ3oY9tMesHUPPwGS96\nYyWLz5nJX0KqGQPOU39kaCse5D1ezpDiRV2p9ysds+Kx3qrkVxfooaKf8sCe\nQpBazvXvTH/mdRmeGMRroTbUOxb8uaEcm/VYpfYdnnADXtT0rxD8dNt5qK73\nBJ344O8bAZ/f6bm8sI5m9Dlm8T5xa3ZpV5y3FdERWXS3g/XtB9zejDEGPWH8\n0sUViGkWt/nGyTdj7KyjU+zctyq7wEZXPNkvpo1T9Gm61SdQFKzmdk4Sr+EB\ndzx+kbjjrsEq28aCeKYdzwM6cOa1Tty0x9y6AB+vqNQ8PLpgOMeVdD7R4jAZ\nwWNPVX6vrZG3//vtLpQDQzy7Cy8Diuid66PIxEwAqDFZR/jYk37PA2dyXrXI\nUUtMu3lNP1k3eNiZd/ckOe5X8XqcYpvwY3+jUjezwr1ZI8Rgdop9HjzgDEgS\nS3Xtkhp/hTOphINPzu+zC/L/c50aRp+arPpwFK6u5VJwkQzQCFAdwQS+G3jZ\n9OlZVMgqTB25yWoaTDrXiNvZyUyTW9hT4/+DxiN5GjIE8YN7EdymLGeOhZ4z\ndM8l\r\n=KsY7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.240c5f74f.0_1605212433165_0.725885252403911","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/typography","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0d1d53faaa90284ebe8d79ee04954a9758f398a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":22,"integrity":"sha512-Nmh/Ay1mmBKPxEFNvf+Dv4CQmrpwiQeSlgblFbkWgM5reYn2K8aAU04i0hikLUvHA40Duk2pMWApTFxHJQK/jg==","signatures":[{"sig":"MEYCIQCH1swcQFbwGYN+dgFWWE7r01F0LQeDK5l2aLFFZd0CWwIhANrBVahz4VUKXvXRS+AO7H6DLtpQiRsWUH+zk104wEjc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnMCRA9TVsSAnZWagAAAysP/RIoi6NOzsO6xFEU93qi\nIvkQzRWRiPvl27FhFXSuNZ0fB+oFj2QdkPG/v0bNtw53xP23MPVPJU5tnRcH\n0uZQdpyhaLoUTF2eH+A6ZebNbeK+NxXr9j0sCyTb30H+0LrdKgAOizNrm4Ef\nzCtLCieQMmgCPNZOqt/+QlERB6HrMOPnIpas/K6GMimGPyhb+BXIhYttVUpG\nC3luaxI958ghUBDmuGj9OjLOTgw3+t6aqhjmsZkPkZAEaRk9FSfxYsv77XLe\ny892udJZdQGkLvLvmNU2MHKChvlLbGFle0spfvusWrzN837CdY8M5uHpEhVa\nE1HoUEXYbOb+m3zsGDTDx72DqRyeSUYO5vh5lVUdo166l3k5lNQ0phZYMlU5\nDKzeVQUKgy+av5wD4+6234lYj7Rye4I0zHL05d+fUr7uQqi2t7nGtJKsp6tf\ndn66nDB8anD4BgG0rAy3xn6wuDLN3DGDnI+JqSk47PtoM+VqTUn9pfV4c44W\n43BrNye1fb5gjYRMjuQslqNnAtoXwRQPHwgcZ9f+cFpssVClsnOrzUHULxuL\n7AdJFU/CADZfS30kMzV7xSavO1CP2zwI43t3pYLh0gU8fev+7/jLd7F+w2mj\nQKL5SkYmib8WA9fSh4XFbvQc7iberG3A0Aa68PBVYokh+yr5UCWbsUXMSROL\n0rAn\r\n=wjXs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.6cf6ba4f4.0_1605552588222_0.036870421207411797","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/typography","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"481c113f64a2b0801432d1c0d0dc46055a1a1805","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.07f3e01b7.0.tgz","fileCount":22,"integrity":"sha512-VpdrvIVLM1fwtqReDgL01XULuZ6T/G/7uLgstZRJ3e/WXtWYyXm2elajqxTqSV75w2PXkdIJ9jOlw7EweMSGQg==","signatures":[{"sig":"MEQCIEQUzZSIJf9t9dtnqbEQNEofN4GqJ3NELe+Ekhom/s3vAiAXw8I+PNh+UAkhxnLeVEIn8CqI37FLS5wHZWzTazX4Iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvL/CRA9TVsSAnZWagAA2AgP/30NJLSHyRFbxQ3Lu0//\ng6m5klc4onD/114Yq4i2UtobnaeFqIIAy3vzUy4mxiSZkhl7J1No30epVpg2\n1Y+FXGuMbJmdeVL66j/bHyOsv1ZlhaDLqBLyM0mIqExTlYxaV0kvP7T04338\nzFqQx6vCLktdl4lRL9fd6xjs8ra6mBaE5H8tGmQnDamlXbEnWXe8S7cM52C3\nJqwlUogSKNFSXadzZVPcnfxHcLe95jjlsK7gLhK/cnuwsOFPZtghTx0eDjSt\n2r9UvSb2cvbo7TQC8Mnt+3xDX/N5Ku/+RLABUGp+0kU8OsH6HCt5d4yY0xhi\nz7c3ooBi1zr48hJhrifjMcypTVpm2u/Vqyr3mM++88aH0geEE2Xym+uiwJ7F\nE3BkkSs8xE1AHf5M8qLYi+pU1Qhu4rvmmzjCSis8bcAtqQZVlgnjgyuoZbbG\nvgtNQuJYFA8TnsUsDB8IleTO22VjOpkvBdRQ7Ht3oe4kcIgvGLTnE1CCDQCl\n/cQzoZeadlVFJGi6TX5Wcgq1JOGS8hfpCgRECgfSdQ2ZnB9WyBd5dPXM5id3\nGJA5i/zksVEguSM1Dwv5dtHdIHCBnWuxVRm8pZsj37K9uMPQnKM8tMhXIeyk\nEDXBI/f/4UcgGGsgYzWh0PhLaOmBvaZWzilEu7YBnUyGvI7HSokelEc0EzSn\nd1/6\r\n=96nc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.07f3e01b7.0_1605563134571_0.689268546123776","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/typography","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.23491cf85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f87913869741d63857ca3e163b618ee045eff5c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.23491cf85.0.tgz","fileCount":22,"integrity":"sha512-lDPDoWBDWub0vY2OX49XIkTkPinH4f6nxiNRXZL8ItESkiK3ZqvqN50RA3m5tqQwKJyapXBGYF8eufktZUp5lg==","signatures":[{"sig":"MEUCID7CcE5UqVNcv6O3bWceHJG2VBcygFVuw8P0/VQoQ+7RAiEAurjZHpLfE3wFHqPckn2V9AVAwcINb+dQz1wIXv8cTVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxaDCRA9TVsSAnZWagAAwt0P/2KY4mnTMiHEwcTRnK95\neGMMmRU3fn0Z2XeKcSaf5clRQ7KEjn/TfwPXoMDc5mcjhqYwes4fhb/TroBx\nAiOlzeSwOzqfr/zVtnwKasDQsOua7buRxWFctIHiwdggr1utKlgU0ZbXnpmX\nnx90CL31omkTwqvEtX5rsWq3oD2oGyIqekd8NfevUP3aMaUL5BSnT8kFTqeM\nwltexC0ou6C1OWupvnBAVVIsZAYwiyKsuj2dVnoNhz+UizfHbTB4WGmxRoq+\nm46pibQ8niISStVBO/wLr77P5jhlwdVChkQZd8sUNRPoRsHwUbyua4jn3X4d\n421BNP6pHVq7W5HBloy21L5XvokiGXZs6QS4bk8oFXanDT+Kayr3tmaLo0lK\nPYn+WaesWUrJbJgpo4+murv42iP1/UQKJLTXAid53+NrJbj9c+ccN8Knkin1\nrTGWtilbnXgxGF4paNxdZCvoX1+Y68hENcCmMTXZjPJcX1/0BiTBQK8qHZsr\nEoNjZX+rGqoMn6MD5GNLaB2NLbrcspRgSr0rmWBwfxihzclnciDZxy+VZDKN\nMZxeZWVxJ21HZHhtmxFCXRXui2AsSCQKQCUTmXQOFf2RWmXHbc0QZED2C5Z7\nUOABDPYp9ub4JVQKAjbM1rZmhEIahLbSSrXbtIvJSET8yI32C0AjcSBslGyd\nkDZ/\r\n=5RRI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.23491cf85.0_1605572226654_0.8227833952831674","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/typography","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"421cc7865349c7de8863de8cb3641067af8f4f2a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.b659d4fc3.0.tgz","fileCount":22,"integrity":"sha512-XfjZYp+u95f4WYjZGzB7F9x5cvfE3QqVr0983KYJJOrOEp7qDfiHJVV3XCsTrMOMmjLbUy+2UsPqCoQGZduUuw==","signatures":[{"sig":"MEUCIQD7MdacR2FcK5XkdPRmXp01nPK5uxFN52Ii2osCszTyQQIgREdbP9Fy6d1lswgbwEadG6ofhHma9vuD1vtB4pUNkrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhaCRA9TVsSAnZWagAA64kQAIX2Cv5ETmTColLUfU9C\nLAqxhOF8Ue8thajACcMoAlveGLnYsPe9lqloWriFdLHev8O7oj4KWHfNuJ2c\nK4/fiDbjyOobyRu0p+P5Qh+Ty+Ym2h2nQaVfXtpWZvFubxRjDPwvMYoF4zuC\nOmDT/3UGzl7DKKwKlxCm1p5cwHFKz3BoVpCYXmz7Ebh5dwRglwGduNkF5Ihm\n3AWnIPJR4+eWBTRgtJ6p8QOpl69yWxpX3FrBTdmNvU8qG4rbT24e3hNGQ+C7\nrJU57V9OyPD8wsrF5A9nhfBKGcfjhmZtG76a0arsIASb2alENlDIXxBmVJqQ\nHwRL3rxhwojyY2x1j+oWtxtl1vEpC6eEYnYbVN7O/bKFEDsEfhbdDyA++wdn\nwF1vVYek6CeRuMrDpRU+OfUb0MVjN7huA7chbdHaB5EPi7pN38lwfTpPGg+Y\n7gFzU+uk211/g/EKu/SiLHs+UNXmE0xLl4Hd40bU3F1x2y/bX3kq5CyJZe9G\nYYQnfQ0sb2qz24HMpxhfXVPxereLGdufPpGwb+udRhcDQhXgFkTREvCfjuC/\nPDGaz2bz2KA2tjPm3s6teTWozyIH7No4zfbmOEtnL7vlu3E4jA8mmOJnOqAU\nwR8PC2lOJCjyA4jwBTRlsPFINN2VtitJw9zbeBwUyZHvtMNabDFkmYFS9Eyx\n3LKl\r\n=fAzR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.b659d4fc3.0_1605572697607_0.546001304157272","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/typography","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b74cb77a88a9069854a405b4029874175f5a355f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.d8a3aed67.0.tgz","fileCount":22,"integrity":"sha512-MsTukUIA+kmdZZTq7/RFeRVWRAzD7AjxLZohN/zc7EY+iv9E4GsdJJoKUJaoZI8RW/Cw1FJdr/v+2VC7n2PMng==","signatures":[{"sig":"MEQCIDu3ExWCy2ExhCOYYlcvwUdWU4IwQJRWtUjI/n3oNrfDAiBVjfcMwKwncixEUbt/lrMtYM/QDsGp7T/S275kplUoRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+vYCRA9TVsSAnZWagAAowUP/jWO2G1U2/Ku5aOrjDvN\nDab22XLoen9nq7R/I+q3iY1Yo8AR0sq8b+YUXiGSiEXD00Nt+GnSoxeedAVJ\nRjINPnR3LFATlwhcd/gNzB0Yhpsg/w0LsIJPaLotDIgkTasep8O5MQn3B2lo\nKlRfY7sdNfwr9Iel9pX1F0wBVWYDadZjPPm5hDazxGM+Uuzxa+neAFpibmh/\nmx2UAztbqRDMreH6N77r+3hKiG7iXGkj7c7Z44brPjNRC/kQ2zjZLgtKzf8L\nrHdeg5Mum8909SUi7N0L58PErA/4GvSfzHI3xV3RbE57WqG+JSRR7tjdI8y6\nMNDoxhN97rec4A2RGWVf40cfVwgejNnIfQq2nz3UVCP86+CQ9rTc9j8DHwm5\nBCXkXDJs26bOvSuY4wtAJoOXw1EZIQ9kh71xoUCWgR4kC4GJ7hQkt6gjp7B8\nO2lyhYFN/8qCy8ardtbwErkJVocpa7+wYBk3vIXx2Ic9igsx1r7SgKgB263U\nE4sK2jUF9ny1oDRsPdkZCJD9OxgDTnuXUNnJU9qOfXXvvDGEITc0q/RDciZz\nsDCpZE1o/BIPM3aHkx/MVz1xdRseNwHhn0NCw98e2xGnIkmik3xw8rYW2ZQE\nj7L9qnm+8Rj0T1Ae2iGL6s40xqVaK6TQj9gjVwuc/N7RBCBvF2ty2+iKhe41\n4gnN\r\n=jrng\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.d8a3aed67.0_1605626840273_0.5540513344297027","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/typography","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.482ff9091.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1174cdb67654e517730ebb0e673ff2b3aa705728","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.482ff9091.0.tgz","fileCount":22,"integrity":"sha512-04r2y0rQxIG9Pg+1AnM8dOU+a4gNDl2MniBNaMeqNZRgypr4biyhTRNPAiFtX3RMBZBxCgkPr9ffcC9Tu5yUWg==","signatures":[{"sig":"MEUCIHz0RzRied+OZJKHY0IcjsAuVs1b6SW8Bct1MnBtsKf6AiEA5FpJahM9lzkqfz/g5IsHSz8ucfgMkxIcibZT6vjPB5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8iCRA9TVsSAnZWagAAkXgP/0QTTETdZ9vBA0gD+NFW\nxJp9lc7sNwTPWWDinOxp2XXviQcfLdKuzGyUCD9tasxMKVENqp1dwoanVWf5\nxq9E5Ei9lzmQMNzde2MMbqNwQ2E8I5BEZioiCkhUfRwO/jgbxOkKsIC5TAjz\n+mE6Gj/SCfKCnTQdjJ67z06mcqan6/490MFTtOw6WbEIsAFmp01tNLrC3/pF\n+w9XG0SXGy1l/dpIf7JjlnAc2sR9J0jhfE6qh/Q2MMGjVMVaC//2kI4Xg2Mh\nCobfx9+MPVlXGiYGn6z0vh7J5GBmbh5b82Jh/UOW18izatMUYWbv39QSvaMs\n/PJkYoY5PLnLtm5JEODEVUn1EQYpSmORg5s+jzgPr5G0YpjcN+svLOsR8kcY\nbIjAqU/FjvkwhwPkaRGO4YDOH4otrNx+NaEVx54kKNMh/vavHMBMXkXPbhJF\nZguZcj/niF+s0avEPKU+4tATlpmkH2RL+EGfsNYiT7rU1Tql2ELvyrqVxQur\nIuhurF2/owDVNUgRyJMx8beOg6+4gyfXLVYn1fOFeJQlj86Hmv9UoVr7I5oe\nCEVutC6Y1xt4s+CvKMvY8fyRe+NgSxLDDcx3VrTLOLz97Rtquizse9qHEwyK\nZOf/szJGWiVMW61Ck6eO7fOqkj0ZDqZooF64JY3AgtEfTmiVGzh5YiGFfEFe\n/M8C\r\n=6UsL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.482ff9091.0_1605635873598_0.7152466018633121","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/typography","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0dff5c8e9282f9889043c56678f8183a2089dc6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":22,"integrity":"sha512-bT2rdKeR6C1B2/8ypzvBoq0oXnIXOvFfAIu0D+fgl7NrDpMIsyElIeHZcTtQwcktM8bXgr9fl9yfMlJfo1KfkA==","signatures":[{"sig":"MEUCIDnc207ztVv8wMOyc9ldot6jkhgfe0p9MbgUWYROgCoyAiEA9qYkOlsvKu73vrfEWrPwMJC6O4GpaDEqyIx2r0BMYdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWtWCRA9TVsSAnZWagAAeFsP/ROb79/lubLI+B2bL32L\nW7SDDw6Tb1qqgDl6CxNTj4wB4EA86zLLL4u7hnwKp0ZE8NyUyAxnIiDnxd02\nTVDeQ3m7d32pDCZBYwgh79YFP0KfMDCVwM5KyPH9BVSaMOWOLDxfhjLCNboo\n4h+hTByJwO9M7IbXciorAwEry4ymDCyUH1XJu7fDICTAxM5iqUPUNjK1/BWb\nKSE1m6Vj2SupwKWKoX2ZincHTRlKxiSaj1Atyfq1/oTxYbiPC2iPhkNgx0in\nAIDZnmuNadfpOWb/I85GsFGMwbAdZuKQuGNC5vtTWobbs6V1vHboSMPvlrXu\nnXOfSNCToSqgaM0yQNw/HplA6CqSvz7XQOITApKp6aFZ9XAiTn+HbPlniSG4\nwPB9XqOYp5x0CKsZAjuLtb79U16Ix8+okqyk18IU1wYlCXBUKuHY8i2BkV3C\nHalvvc4ofgzTeGbhb/MdiGukhJewKfyYXNFMq6ax4zcn5GVH5p2tcyIp5V7E\n97qFn2brgNAPx4K3L79Ad8xBJ5L71ryqcH5ntMAx8FX6WsBPtYz1g04sLTuN\n5dbVhnd2w7yIwim3NEte8FLOrmkqTqDgk9TkE4xjWSZLGj65L6+grTRSfVf+\nFtn04AXocEaqdHcY1w6UPp4JsibuqKNXO1eRL9fHXJC9z2C57LIYe6Wrb+Ds\nZZff\r\n=c0le\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.99cfb6bd5.0_1605725013134_0.8338454539220459","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/typography","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4c82a4d16e18d25a6f1f8e397fe494e7b308c4d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.b98d15d90.0.tgz","fileCount":22,"integrity":"sha512-/ME9z53rksjrsrfcGKlxhCLfbK8z+TnhCev/y3il5w3qaHSqquiRKeoG34DooJo4KlxPkQjqr1tXy3lbx9sbdQ==","signatures":[{"sig":"MEUCIEGXsooAtqfM+IoqHaQ3friIyL0GhgavjpgmtOCnUyTwAiEA/jVyvC7UQVv1PyYx8PYKX+l4AG4N8qQbICvaDOG1hFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGECRA9TVsSAnZWagAAOkgP/j/ye3RjMi702JojJcB/\nf+e/+GY5wImUtNHgHcdSeBWuks+ueHE/LtbpSRl0s5GHa18Ux3bE5x86mDKo\nJCOgY1rv02sbn/v2Ux5O4XRof8hJf54kMHfmFz9R6uggMCLDm9PwGofvMIpq\nFFPaaYhK45DNHKhqOrScIRdlWbzcLJ6lgcMziNi+TVvlcrLGKZ6JfIatHUH6\n/Vqfq7i2VpMR+z2ZlkZ4WzuE/8d4AmVYa/o+ie09XFcnuC442zbcBJ2cM0uL\nH2tDgp5BSr9WWKJGb02Iq3DtFh58xyW+ECNYYGhh4N/IM/kjPNtdsYPplzb0\neWXbEUQMqMopROaes+f5PhZDiZ2wxXTbRlX8D1qeO4T0MOTeINpoUfNICENe\nJzTzva9Gw+MJF5yLgj5Qb/jBrxJ0k46HzGVhkQUkIGF7HlWVRFkTxjlHVxrb\nSOGwtbUzx5L1wqUdLeDUiUooABWkCyHuQ9MD5cabmBhe7hO6lVAdaz92QF4a\nmYgRCdTddu2l88VoRXs4RMmaNevhnV4gYztwYD2BjOSEMXR9uv2cr6fa+wR+\n8yBC7Xcbk0s1CmbHdAQGQ+KTyKqZ1PPmwDAhJhPrjo/KydGzPmerg0Veu/bU\n6eQYstzlfVLhm3efZoL5d1AlsuKsyuuxB1s44ejJMOdClxELDyr9LM0+a8Ej\nMwN/\r\n=M1KP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.b98d15d90.0_1605738883459_0.9007059130307493","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/typography","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d67c797ac6c94d8be945be14f13f6abcb99ee9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.30c11bfc2.0.tgz","fileCount":22,"integrity":"sha512-Jb/4vLcNUj+3Lj1fr1MiKmYLCTpVuNNXpuMz7+0Ydmxz6KvN7v9Lts75eKcpKdirZZE8iSd6/e/U/0+JV0OouA==","signatures":[{"sig":"MEUCIDz3axLlKUvJcMsBjx8XJvcViaQT74V1JefiyvL59Xw5AiEAoTTuTSN6WdnlQ12GZaIs6X2TCK5TU3zSfzqrtFDPrQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmhCRA9TVsSAnZWagAAFOwP/iOdP5y+ZeDn699Kg+jr\nSwtPQt7C/p327BmqadMvEYnj6RTnmJXklNFHmDi2Nsi/8PozKpSzrGwcd2LT\nBbgHKzeoMmJaxRfWrmAqCULNCK2wOApSI59aguS9Zdin3kD9NTfaSyoh1XhQ\nO7sCu2j+SCNWCvgT6TR9FyWq13GUnuZPFMRaAc2f8/j+rj4cCJ8CPzz5CekZ\noztG13uUOpSP/u6IHyUNLb6elRpiddeNdMS+W/LDBC6Y9sJP0ljEUosHF/np\nncj4F0bv2CgrAetZeAFDhqp13dHWbaWzQB1a1g3qJwp59LvjqV2+MYe9nXUh\nah89xgGVOp0o3oZ3w3AWZyRC3/S1YhLuC8o+Ryckuq5q8Al0fOF9qQFdqOwn\nzRP0g1GvOsP0xf6sMZ5L5M0slM2QbZiPjnCt7z1hX44EpmEYHx7CmBFzCgWS\n8/x51+JwnlgLMV59SkmY+3nZlEsd6qTW624coiYL8kUxwKvSZNrZF669pFg2\nzGmmHMqBxJBc/9anw0KktuxijIDHT46ObvePszYaDxjjN7HZs8qI804wgQmJ\nt6UYzp4fHrKtAJTnT53RCpqyS94pD0mDEi+t/yV/ryb7+wlFG/MGyAvTdVIR\nQ85RU3Z//XG+jzUeNckaO+14snJDZ/4bUSOFtvab/HskJ1hQu8j4quJOzjOi\nNmAf\r\n=pyMe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.30c11bfc2.0_1605749153088_0.5045110261853012","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/typography","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db39e0ce72075d4a0822b81a9162f91af5a709f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.1b731d51b.0.tgz","fileCount":22,"integrity":"sha512-IOvl8zD63dufAMUAl2i9dOfqTxwp9dku2lHC9Km9mplXWn3eusgUBvEfbiMFxQ54oHGl50Dz/ibn2jut5KdDnQ==","signatures":[{"sig":"MEQCIDHM9+JCwPilbA2NLK9Syc3OTmo7xTdY1E/BH4tqyctrAiBhDfozrjUqCfj7Cka9Otq02T6YVwjRORid302LoTjyZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7cCRA9TVsSAnZWagAAqBYP/2y+cEFx43OtbGvJgOqT\n4F8t4na83u0q05ZjKQSMPElIyp1MZ9SC9IqJSE30hVZly/FqyjrWJu7hK+dU\nk7Hm07QkqDyK0WhpMU3BcoqEMnxGeFm8c8qtwgho9GK97v451RpGCFnvvK/M\n8WeGVCMgUNJnsfkcrd+yz+Mjj13WBV9RVFAhTDiS4tLEOI449EocU+/ILMrp\nzA1XmJKLQ4//Z3UEaFvYN1f3CuOi6gfK4XsQJBjBnzKpK4b6+zim8YACsO9W\nSJUZg7SVg8ii/DQv6NYQuuqTtMtJn9xyDQjBQFsCoS2pM/z3zMOw4bW6p6yQ\nrzTViYox02McePKJDT6oHCZslXa9aOea/Rat1KfOuxMeLWl0JzFY8fx9CC3E\nurS2dIfnwUBeA7mLzuZQyHTj2w7XD7QsIdFSPTSAprd4ysdkak9feRBAQVKi\nP9f3Ng43sYXPu5V7UJ7qAuTShHoSxccq/jM4u8/mMFs2RDaqVO9xgj5dqKbP\nPw6H9bpqqhxsBq9GZVBetPkm/5L0mjlVDABMKjR7D/2AnOAmRaUygbntKm7j\nWy9BCbblIdrd1jT1rkPAKk09tuCVcojeSmdonjM2NN8c++Uovzjm96HWxI1z\nQV5Gsg0SvbG1DsM/RzyEvjC+SpOaXrpEWQ3fbJ+nC7gi4zpKfM0idINfiOYs\nahqh\r\n=YzEK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.1b731d51b.0_1605811931719_0.8130901334323803","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/typography","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09c9ef9dbcb92b212f5b9915120a97ceda24e1c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.4ae94ff78.0.tgz","fileCount":22,"integrity":"sha512-dAXNCpWd+sIfzrEVXtwHWcPpAp63+Frik9LvomqwoDrC+mEZ+wNdOrqYlE9+awdbZ/2QymGIKDn0ROsHSk+/yw==","signatures":[{"sig":"MEUCIQC+aCVzV7mXy+oJ2XLpnzGKsbdI/irzH6C+j/hnBftmqwIgK7TvcjGalZ1PxDf4AK5v9MenRRLxiVQhnM55VDwAFxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+NCRA9TVsSAnZWagAADm0P/0R0RdIEjf7bI6QeXNyE\nWL0e53OMaV5UyzWsNPvRUb8/YAyU3SrvwKPA7f/qbCbtJ2YLion1HkbDtM66\nSO68oxDzI/6TdfTYusg9tL/cxkYWbWB7JzN+g554HtMzHIJyb0TzDPXA7E6u\n5Gi9IOoBX9gXwOfyH75iWRLee3Sxh/CclVgArO8/u3TPuJ48CCRvm7J38pov\n8oxS0YepwgfAuYUIW6UG+TRKH9dt2uI6oucsOYWqb7Hqa87KXiKEXXAego8U\nZS26nAV9VTBlAuwQBbssJNijWHRfVI95q3jT5MC7IcGayemzenOQiwZhybFX\nMW/rH+ifZ60ZhupZyPLNwU2axDSD8iFxWeDBtTCiHe33IXVCSa5Vsd/1N4W4\nm1+spuhHEYt7QOPkmgT/ksljJc3j4s5cUaAnEewDubF72YS2DpF3fnVs+XkK\nLvxzUkHBVdri7Wkx3fO/cujMeDyS4nEtmMlOyDJXNb9Gnv8HBU02XRqbqtfG\nEFG4YPE7Ko+JMfkMFYqQ2JyUFLj6NCWKqAQ4MB9U5h1SMGSa0ajmOt+8uoqD\n4XPKtXzuwUReMyjvQbmWO6Fzs8TWJe09QTxGALUkO4Ql8FZJq7mdHM+WInBv\nBxZfUmPybRYC4hKLbzp6/+oecLqJgwxL+1wDbtdiDAuTltNR8bH7LGqN3hKg\nolRB\r\n=8oGG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.4ae94ff78.0_1605812109387_0.3355728479608142","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/typography","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81fdd10ff7143b22b0d395c203e7bc6bae6d8fab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.7ad038e1d.0.tgz","fileCount":22,"integrity":"sha512-QdhMj+eFb+GyOfSyX3EQBfqUDIDskKkujlM7CVliLKziCrSK4WRs5ROzm1DPbw+mpr/HoR8+NaPcfCLsdjwWUg==","signatures":[{"sig":"MEYCIQDIbpdsuVzQ389bFFAQHwxdyXt0o1SqDkMwO6xzdKUnEAIhAIgbd5ecbOcIB8L7M3w8dW4hVXC/lXbcEmIyHWLaVpz6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsTzCRA9TVsSAnZWagAAfikP/AiSmrvDrEsKLyAapaik\nbzgDS4k3yzDm8S4oOhGHMqE9+PSqZ/sZEjjnA86Aavo6aqreBGpyVChJAyvN\nX/txbP8lxx7+zYbnlR5KNuNYpEJ4BCbHHFiUMvZOXpyKSfU+9yJdOZcob3Ny\nRPO9LL+MPY1doN3QBM9vtbuiU6HUWQOYTQ3r0lWEVEnQ5nvXYdG3pYZw8Dvu\nSJyJAp8EQOIM9iBlzUQy3tX1sGJclUYrPwGgf8D1VenjobbKPUwxQefh7wZ4\nshurXN2LOMMb+FwKWnR5vixUCnl2U9fsFC0MXDezLO+YFcvcEbbG9vgino0W\nWSzCHtNW8M8cXymPkChKHUhpsprdM9ytoL6/Vmx7oVsjhiBHh0q3Ykj7YW08\nm5me5xicgPA0QcudD6MG0DX94AQtNidz2ot5xFol0ROUdEj65zjWeSLGYGF4\nMt0Y9wdUztavwkdovun36l0AClJBiW0p82wEiZGv6ShVFhzvshl+0C8x/d9d\nb+PGEhCVu6wCuNqI59Sq8Y11M5dWzsNnygTqUOaa5ZCM1LnLEe0Xqlwce2I7\nwan0Ok08OMOa6ItWqkJKP45NZS1TPEYEvt+Wj3kyaS0MXw4O4B3MykSabdJ7\nusZoxj6/DLXAE7jKKgT2PXpraBVEuPT+tYAT+OOAPGcnpninRq5Rh/w/YyKf\nwK6w\r\n=Ie2M\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.7ad038e1d.0_1605813490946_0.5207368778149741","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/typography","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.a41527604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eee44bf1aff3f1237279bc99303eb26ce4a2cc9c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.a41527604.0.tgz","fileCount":22,"integrity":"sha512-qPj+z87hxNS7wJLtYXuD9Lt/jIDstSRzs5dDpdDNQniEuO311HxfJggFlW4TfaOZsG5Le+yJTym3F81JAcMXzQ==","signatures":[{"sig":"MEYCIQCreKfqND2v1lzQjZL/NKH7Ac6848M/xzNbVSy7a4x0pgIhAMEwSU/QufSO3rhI5xbQBvqEjImkd9mdVlViKyC1Zs1Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts69CRA9TVsSAnZWagAANioQAJGjEUZ18oHcyCLesFjf\njayA4J/zbJetTALfS8XIZ9ellU1DlrKRnBxzpWAHb+rceaC/KiPREhZKpbXV\nwP1SIIlXECzc8/Dirmdjb55dpIoiXY3O7ayLxlmyt8S5FNONip6+T6ms17P8\nHBhQX8m3FNdTN5p/JsiUE1jrTa8ixuv8CNtPJ0jhtpATnIQSL91j6KtqO74l\nom6mH7UYJZg0fwaFyNSOGYDvJ1EHGw5HERE+bBaiOGUXv3h7K30CVCZ5q6DQ\n6i/NQfPjPQ8SWCqe5aL/n8kxS3YaQ3OrJ2ANMu1/szgXR2o4hoYgJwQW9j83\ni2yXljz3xLwvNYF79UMwJ+2nnK03DAFX8HCVyro43A+unp8EJBtMw3CLfEf1\nyuYruFsMTm0ht2ak0DJCAjCuEO5JcMytiMskFVgLhvft+OL56lWsPLbPAXN/\njHKM829tB3xLQCtHMJeJrXid5swqk7IzIIjozsG4VBJfGKgJPTVGltOERlVS\nO349onqCv9ApGUr+dg40MEBhMyDZlndlI9dbbCnqkDHGWwabv419yj4aQzN8\nZzRftTe1JxAkGp+8TpIrJZhKtxUkUUrP/l6h0psqqVDzaQ8Emik9xb+94Zuc\nASUltfKE3gK0U0nt8L4OwrsjKPObht9mdzzHFF+ijHV7JhZwbIccZXOC6vTv\nobd2\r\n=6FaO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.a41527604.0_1605815996911_0.9189755015739762","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/typography","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e28ba06580288a53e472db9ea6ff17c8aed3399d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.7b0e2b377.0.tgz","fileCount":22,"integrity":"sha512-ccbZE23JoaVJ4QFZGWOd4Nm7VRVeEP8EEatG+n8TvXuDJpVnUlvTg7a1S9j803trjbutbeDKw0u9OHHttXJNWA==","signatures":[{"sig":"MEUCIEtX/sL4W/BUthJjQFfnh3mnYHZ+nC+zNMOK86ZJCwoqAiEApgnpznmsob0qNRoAWDgsg7q0MkNNrcXu0tpmUKSjyYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuElgCRA9TVsSAnZWagAAiqMP/03T9kfDO4FSXYZZd6cn\n5i20tgqPo81ROgqUt6m2bXYXKSEw7uIyUK8PrOxGWGWmc2IOAvs/ykJV9wl5\n9mIHql3A7ppHtByeNojX/VL67DHVd5+/zu0bSirVzjiUyzDk5MTyyOCb3pmN\nrtZ1s11mKj2sT/OTTwgT1xzzqsRskcJiaLulnDqMDqfyzm6wSOWnlGzFVHz/\nPoBvozvrlKGOo5ZcN0N13Dnx9Frj6g038AJfP7NiTQiBZZSlo9v+JL+2J2A+\naDWOv3bjFruX/4sB+lRWg6lwLeabgDaFgfOjGxXJQBde91tLAj18MWtO2CAf\nbwF5Z2A3wl72+pIyTk02Rl9OzPDuWzzvzRPcChKLsqyxdxMXIHQ76m8SNYet\ngMtmO9LcO9tPal+MP+EkzOBxQ85Don+3Nqdj/bRfjpv9gYKsSklKlyG1rhE7\nOV/lwpZuq0ENU1ZZBrv9GnRg4jY3CCyec4QTq/8hkSeXiPxMhFKJ/CWyxzeW\nMJLmLJ3Dz93RxOrkuivxlppwWTT1d+1R0O/HvfkWxDXj+qtOcggVtEHVZhhY\nUUmcTHuudHmYnj048JIU6SAn4I+lexn/vyev/R/EKknL6ycTijzt+5otBK5+\nzq7rccxyhXJJmbzReQUu0knlwvbdxLRiId5kyEEVOe3Kt7xhMvUhedc+IGhN\nXVJ3\r\n=Tvdu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.7b0e2b377.0_1605912927548_0.7291809510246869","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/typography","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fad0ea99a690ee442fa3a7232f4563ecf792b17","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.c927a5d05.0.tgz","fileCount":22,"integrity":"sha512-4tin944SF47UMqxXV/EM+vPyeA1bDBYca3kZNfPE1fKzn42sDO7smWVM980M3f02CMDT+glF113b+dT5+RJW7Q==","signatures":[{"sig":"MEYCIQCyamKn1ziTjniERzUyTGhNqAj8RuxRZr6C9XLHYXqEGgIhAPAq1s5j4kOo0TTMEz+3kihifb7Q9TYNItHqmVA/49GO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHFCRA9TVsSAnZWagAA5TUP/0F9uTaYQT9YreQmpmvv\n2V5Hr2W6MIhtpR4mzyzSAFFOHjafz05S6Mbfexd0De45cHESC3XuwdJnfz8x\nhS2UpsrW8MRDcm8qJkF4MMgBAhja8ZVIQgAXf83Y7qlIu6/vc3hIRU+cvhnQ\nH5Gg9gK0cNc7CekpFlSjipwcBzN10O3OUrd/HFF6W6tVWfSluCOvAn1Aj8b6\n5cr19Zi6KDzue2ZBnN+ywmg94LrIdjFS1RF5TUQwoBnXnlZ3EfjfSXp0d6m4\njrfApxAQ3AIJYygDJNkdBEXiz2Gk+fQ6CsNGF+cjmZRf+HbCta0PGRExiGc+\nhvp566vn/v8nQy/c8ZwoBVS8iGYqnDV7qBGlre5QWrRjiJw521UsV1xTx1iC\nqZaqpFpg7I5/henLdIdIZ4r5Qr9vZQMVImXM4JWaJBPLqAKchzPkGSEAfJkv\nHf5kGgwv0nOh4lv7VfBe30Gvt1OE+YQ7rQE5C/oAkXWfm50HLSx/FVzh572M\n6MqEJAZXOXL6hwGDqiRO4/c9+8IYQElpFix4gw66AZda2cbvlALeg7C3PTgS\nrE8mSQ9+7QsST16Q5/d9c9yTYe6fM+GpkUE0E0WJaH42r+RTG1PTLT3CkSJp\n/NSPUUojsTnNRDHnBLHAGTwE4AbZxoeenCwnDKk6GHoecpY+lIZW6wdOnBxJ\nEi4Z\r\n=J8/F\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.c927a5d05.0_1606160836554_0.08193200405255796","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/typography","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.b349b5185.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fdc9c65ef815710dade738cab1e300ec76a556d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.b349b5185.0.tgz","fileCount":22,"integrity":"sha512-B2Jfcw9oMhurUrbvjFDKZhPa1N2vAgpkMkE7Z7JlCYy1PBIE3Vm4YrqUhPjIehdTCaPc+L4p1tnS1IIL1smmlQ==","signatures":[{"sig":"MEUCIBaxFKtw0cFwFpsCZ4VOG9wNwssLXu3s1TD46xdFtSW1AiEA5oTawWo+dWXzASMnYH4Rj8PGSKxn8R68F2cUPa624YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4VCRA9TVsSAnZWagAAWeoP/jEcSEHM975/DwX9jWHu\nnlxds+DH6GAheQPBh3iURcrRCU2Gm1IDIa5DchyCuf3Iy9anEFNEhwXeTwP2\ns5nq+H7NEPt8FuS7J2kxGX0vx6LlXkACljG0yD3BUBD64yFnBV2H6T9hCDoW\na/i1309TrtYsF1luZc/W5CA3ohtq0TZOYy27af8jW81Ba2xB1At3RpjToXdz\nbyZTYnLa1LpYz5am9wB1A5dsyrzCAYxHYKBvYJjSLiJfW00EGx9tpy4GazHH\nSK3a350xgAgmmdMTrbClElj7y8pipRlszwepfg3WBcuebG8gEtTzsvd5TaUR\nSlkMz+BxpseDXgSrS2G1Gw+5gYgwwoJnmV731ODQ2hhklo3EM+xDzbjTNrKD\nTcSCaULU/AW8UPN7QQoCEiCkoB2A0f7tnW1+8bV3ld0MoxlgZvZWLp6N4uW9\nGdtgybmLmvDiuqKa9OGZ+SvLFG68UoAAlOT/YWesbuo6BUim8fbqMKcjcQc6\nf0VA2N8Il3xTgLw9apAmUGM9/ulJG++FHaJoOOHZoU5HvD4P6KPjTwGn90qg\nC1mtY4e6uorhPuUdE2w+prdpiRnHDnHjkH0xqj/fqB/5XfoZZ90IRlEra6Ro\nucztTnP+Wbh0J678iZfXeVYTVRR95fYtg1qLjuTJsJ/zftFnhxLvo9MBzXHv\ndEyP\r\n=155o\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.b349b5185.0_1606237717313_0.362603230133415","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/typography","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99058e1989a61a987f4b579dfdb9d379f4707922","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.9083b7d61.0.tgz","fileCount":22,"integrity":"sha512-uwtPQb+vrwhXrqjzEwfCgM6r0nTCC1X0s8WZYCp6P6hVWru2R4Mm7I6iSjLZ3PZlzWTqaHDnCNLswl3P5+EZYA==","signatures":[{"sig":"MEQCIFN6sjDI1l6G4VaIbJs0wUlbfe3SofFdqfC4rq20+q08AiAZo5jxNd5KztXqBR+zmsKpWREINd7CHtjDPQUh19Y+6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXfzCRA9TVsSAnZWagAAnSsQAJtUWWCRtI6wU9ZSauw8\ntiaySYpe1WaU6CLb9UelgEgboE6BIKc/cDZg9dCrD1ufpdgyKQhXKmOs5FfE\ntEKJDAvrxrgckTey17dAH9I2J1N5SE7oes4TY2sxTarf61uwB2e1I5D21JLt\nR8PlWPSgG0MCIRExITHlgZdoj2LCQ4Uk3aKnC40f2cXG1q2P5o4urBRrIrH/\nvyPQ2WkdXs2Qxh+o83B5CnfsxvQRpoZbPGX/nw/gCMoKg5+nJ93HaGMg+fCY\nSWr+hpQwgEBnwkiSXJfuDoS2AtjJSqPOQCPqa5lwsCusAX8ocP/SvhbjpE81\np0NmP0OJgAS4sae+bIdiOPRkUwgF4FZJU+Bej22ieYxQSccQtnfA6SareBcR\nCJQO/OOkjg2w37pE0jXEG7aj90gOn250xzxtKLHacNvcHxkVyxoyuTlUCtA/\ncUd6dbS6zOrlYAO0C6oMc9Ns4kHljfUZcuesd/RCKueLzge+d8AQyYVmix1p\n6c4gNLvGzLYbLeMfFRFIVbuxy9bqli+eIXwq32vmyO3NAYK6Ld5JDo53YfVy\noMK77ruSHMCXVy2vEF3BKYJ6A2d6vAlky5Lp3VCwyfD+1ULz0svQA/5YYbfu\n6n/4/RQqr97Qo5x8IoqX3hcAncXte5Blrdz8L62JtZhstl0AHDhkzEmuJHrD\nrtGb\r\n=6D7f\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.9083b7d61.0_1606252530462_0.27905949704170796","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/typography","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"414cd34d28ef1e6d4b4788f7ba9d23baad784500","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.eff7b46ac.0.tgz","fileCount":22,"integrity":"sha512-mU0TWJexzCQCl/YUw60AcZmfBfnt5+iEdXNiP+TgIXE1L0a8ozXV7wG77kj/25alPTOxh6BFBBT2FuArePZyTw==","signatures":[{"sig":"MEYCIQCxZUtVueohhY9wt7h9HuyQqQbHueVS8DcAax89Qsrp8AIhAKzdnSsDa0HHLEjC+Uriixo/YzC6qDn/pc/r94Nnqgt6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZerCRA9TVsSAnZWagAAnboQAJ0l1ARkFlukkLgZznzX\nH7+O1B8TEkSLXeBFTcaWbLYoUx3YtepogTMhydvQ/UwmgrhvMHCwGXn2XXBk\nLHJFx4Fy6wwnE1uO7GFxbBt3eL1lIvfVHXlxHW3wxWiU1Efe+zZ5tRer1ZIY\ndo68SqizpR3Q80TJ7ANe19F6XEnOGJG6G9ukvtFWNqGD5RGCHgZPaW37oa9H\nSMD29+di/VNzFxQy7ScAXqzt7/+oZnPd2AtTCfavAzIkwEf2hepHP7W2e8JP\n0z0FqDkwONCRk0Zzk9UTANiM6pPLEbMjA5foM9+uytSgkUmZY9G6kvX9T+da\nA82Yh0aDv+1s3QKzWJFSFbbPaX9jflvceMLlafuFsxT4zKSedpStAq0gsiRQ\n0mBW0qJaQksmF8dAvsxuZI/ofJtDIeTaxYbDR72XNzsQ1p+DH6vsZyOpaKlm\nKZND+IS9hkTdAK/IU5w2NZ0TS2Af5nsGnDsSHxe8ckJIM0N1ZIcfwQT20UoP\nUzokwtGC7Jj35sSCqk83BQOuxGHEMNQk69sKrVVJAUUr8IJbQTTHqPzB2dhQ\n8mo1jOL5KnWcFtJUh84muPyyNkLCvAQiDnuPGeUqJ1U/xLR2yL+Q0iycC6p2\n6Q8ZKpMcgFzbd18/selO7U5TLmTuN0wJcLTHMR6OziSlHVBPulstbuNFrgL8\n7f8d\r\n=Q/HN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.eff7b46ac.0_1606260650551_0.9654266015867239","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/typography","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6da1701db023da30911eab45bc046ea55245690","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.ae27b44b0.0.tgz","fileCount":22,"integrity":"sha512-UjQvC2cPes+JrtAczentRhIKBsSH1ddwNevhEUDo9p3ZImSuDVwmuVsT6KoYJq92TvN0xhywjAzMeYxAH9g8Lw==","signatures":[{"sig":"MEUCIEe8vW5Yaq4YQmHb/mbAPf1kGvCXv+RR6Ts4jdFT8jG2AiEAmt1VMVWU4xvrmLW5YR/2ejoKsuK1U/JCDx5dzI2QOVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkTCRA9TVsSAnZWagAA5aYP/0vbj0vjGfvidZH0149d\n9uTEMV+0fWsr0tlpyW9t8qc31Wj89QSGIs9kjT0M9skEBP8QWzUGcaHW4LEs\n1XeEejQ5mtA8UbLftrWQyW1koshiyUW0jlJsrsESSvKcZy7QMnPCSyN6SZv9\nhd69QXmn9IVozSynfY2adF4NRU5vbUaQ1EHPY5YCT9BNgkTE/NbuFwcS2rrP\n7okhjhsCah2d06ps8Ot1GMKxhpTzB3KYDO/z04+pkh3uWYbFDrhGpcKN6fNQ\nKjCOAq6HKPf1NxQj0zRhu6r9+nM21+yO2hdnV+m1aCMOHWX7SF3NupBFoIzX\nmdZNDhF1LaYEe7ePNljtXvp9G7/1uyuZ5AiB1yG5UWCWfguQvPTC3Q84iQXh\nQDiJbMc9F1444J6WuQhz8PAZ4AKkSe+S1NIiAYlbMS6CtWHWv77dU59DYfNY\nv3xIG0sdqYeUnPSMMSDSAVLQZmd0J2FV5BposWTXmSg/xaL090NScKgwXJQU\nNUudTwUMqFTgqlRdAAGsweK4MGJkYbDVBXDh0t1S3gS7ewJL4C+YqktqfzTs\nTsh9oVnrvtSX941iV4Fg9sknhG/Lv+HxfAWU4GoMyjl/fssuyuHfaT6zHtF5\nmUTzfxwE/oHC0GDuqQK9I8DNAMIk2oLtL2sBe6N3xHPGyS0Nc8l7/PkqRDmx\ndBLf\r\n=V42H\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.ae27b44b0.0_1606318355466_0.994357534582224","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/typography","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e25d267aaeba3a8e4a7b2864adffe2d105631d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.2fbba2554.0.tgz","fileCount":22,"integrity":"sha512-/49Rgjj/ySdvyQdNMKHojJzjeoc733oyD1n7UzTzelek/HwAp2AXWB6k599ylR5GKHA0Rs3mZ244lA/40gfygw==","signatures":[{"sig":"MEUCIQCe9mlFKYV5fVSiHU1B1KFr/xoT35drGOKryc7deYUGlwIgcH0FJIA2RF1X1GydgeY9zNhprPZliul6uyNfTyE3R4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS5/CRA9TVsSAnZWagAA/xQP/00nk/joavQXVHzcVsWW\n/GoqepULTI1Syrj38ban+QXuqI94rGBSVW2cOUpuTdod038dKRAHAj7NdbjB\n7DhZQm9BZ9LyFR3tKFshCTWver6KuLJBB+BM8ULjf3BoQYD4ZuCMUYhWeTFE\nUycQw0dhNC/fw07lhsd/zxXYjugHFq3bJhnSK2+l8FIccKZv2suA1mTUO7ci\nlEaOi5Nh7q9eZwSLnpFMpBH1nlk6G7bdflOssZenXrNj41wtlA0KKyoGU+b7\nx3RByn/LbJ1T7jC7aNA0YYmVyc6A4/GOt3ctC5U+DVNjMNe8hmtpxNYLMOsl\n1/2bb3xaUUDvsZ7rJMjs3o9RgcSP2htT/Vcs2SxUZVPuQgyYQtOxAoly+E8F\nSXTYDqxkFP5/PO/VJbjZ5qHCn/IKU90tzXn+nKlGpg1UFyiEXrE4+SRKxJXb\nW2nO6lUTscBGYR5KzBpVEf5+egckv669HXXeQUcLhn5iTf0xAVaZyXNfFQNM\nWw5i6Qz9xadAtsDlle7+1Qo00K9r9VNp32JrvP6m2+DOLE22TMdx7J1UNAEC\nYuOFA6eiyy9bjrRFirtLoAlQbLOLYxta1aFGnJpBn7yOQ28FWkUVjXNN1nhA\n4SymNsXw7JAqScDHdrNggw5yy9UgMpQwk5MOxxLUZkWSUoCPyu6+TpZTNwit\nUq03\r\n=q4dG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.2fbba2554.0_1606758014735_0.6857451784040933","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/typography","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c9b6a632b5066d55348b2867723c1e7711cf92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.6d8574fe1.0.tgz","fileCount":22,"integrity":"sha512-8KtgdbINVULTfXiPdvGXK51/jUorJoWan1yx6NjiuMTPdPggLAJ/WmWsKmZvBl9GUh1RhpH6JjV+FuNSHO2KZQ==","signatures":[{"sig":"MEUCIFFvSn2UMxEu/RhdKKbTQ/2VMHB75ULX4UTZ4LSFaQivAiEArsQdkrDUxE1PmgWig/ub1JuVTC5zS1YEz+uVndq23ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTETCRA9TVsSAnZWagAA6l0P/jwitQ7Xc4lZuhHJOfaU\n3AuEq7uZM8G2xvjky1J49NZxXnA22CT6Kx9uBVXf9SqOQm/rbLMN28Kt+5l/\nSOxMYpEjWFeiaddGatkWfAmH4dSGnnjZGE8JRJ6jY0nqSb71FuLKLpHEZelQ\nd1cR34lXPbBz+k0Rwm/c1nAZEVC484ZwlrniVU2DrEMF7znScviPsHyPPI94\ne/2z3CTs5wo422HmrzGVfvgKLnq2mXJCi0i+zp9e4qB80eIEm6r8YDKze79U\nYl5kAWnJR5RWzvjKozB16rzAk5Js19EO4Thz6JIoXSBQDKPhMaktrGHJId3Z\nyPse1cN0SgvnZAXoxDcohTl3wg6f0mVVuHYAX7R7+qGAjvv6M/y7OvvMmNFM\nSpiJ/rJvT8TG/YtqSVLj87codR+i7cKx8kdazLmBMl+7KnB3l7/U564VJu0S\nCIcv5quH5xYdS39UDO5ZMTEjJx7JpG+oAaVPf5MogPw1Kzmov0ylXLGgsKkT\nFN8oXS/nBn9bUx6Pnc5o2FmI52VqJ2V4X610Ctq6N2iAIozLoq6lqyoqprQ7\nwgjOoVYYPhT+tv2+7pqZ3ZTQwwvWLSZJksDUKcx7iyU2/8MXSsZzmdJPVSW5\niEMTfKiq4jyw5KdyFduiiTocrzvotARpEnEd7mGgOOYb1KvGdjixaGlj9BxY\nGOiM\r\n=erGB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.6d8574fe1.0_1606758674645_0.657939058820433","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/typography","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"056505a7aee093c21fd38911178f4b54d475ddcc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.fd22355f7.0.tgz","fileCount":22,"integrity":"sha512-xdjcl3InSwGYTA4TuOOykoXZ7XdWAsz03Qi25upY72Ohg185E67StwzXxGn9TDT7HgBXhVhACvmAflZ8FP7BJw==","signatures":[{"sig":"MEQCIG0VyOLGu/dzs74tgTjwa+JqWCp0eyUqOnYMHknnAwRXAiBYUPCsXrsZe3Iiq4zeitJB9bFFvuYQlunFEGL5qfuYfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXlICRA9TVsSAnZWagAAkWwP/RUgX5bpTu2I3wOSmB8E\n7xPX34oPbRf8kHJpmeyOT7ujIfwKmzQgGyQhwx+QQ+p1l9G030rHuyhSju+E\nw7UAeK+lRSUtKyx/JrYVhDGyCrrl7UbI6hqxBvlFwX88LoEwH8O2Z7hL0fbH\n1X1sAaigaOL2O/S6ZQ9HFriJzxX2Xy9JifCXhObTT2xG/ySnsA8OYP+kfGsb\nZii3ykNnuSgUEekHzY3VAS9pKytgevq/RQ6aDHztgOjZh6NPfT9p1B18CTbk\nw4YYG7ohxzaYm8he+9paF4dS+zJ1Alz7rTLKoEJfMi8FdL9JzhCAbv6Obmsd\nfs/+SJmpUoTZfRS3BzbfFBE3IZ7zj9Z7BBsUfqf7v/tzVqoeOmofJpuW6jWp\nxhU/r/n3oRxAudmBZHlxcOx7tn4LXuCxNS2/jsnQR6/ABNlpsDnB9S+9s4Ag\nCfpPPWLes0kzYFukLZb4+K1Smop+WHpYPr974Itqhl/7MNJr4R/knNlSzC6h\nfuxvKFGoQxiU7kem4mcogUayWym2Gk33ZjN1l00c7RnBtQSI1vsEmXbmngqL\nqRNZ18TjkYcSmdBsij6GUcAxBwLmp6w9PGuj+ldjeD9dQeD3DtppHOZzkexZ\nF4kMIB7ysRJ2geBeFbN3XGxdoSZ6X8hBiuXs1nD23pOx2gd2S3tTD5jDlTa/\nyZh5\r\n=tvFp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.fd22355f7.0_1606777160165_0.45073918572361715","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/typography","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d334996a060942a3608fbe7eef25b7e7f239de88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.c4ab98722.0.tgz","fileCount":22,"integrity":"sha512-ZmgWnfR2wVfrZZBG+sEVom6wchSjeZbzkNKRjs/yeS7qP6xPKA4QF+EvnwZXOmY4ua3JVD2J45QYK0fYdTRyRg==","signatures":[{"sig":"MEUCIHbx7vGRMPOfZbnPvJR5vWB/PzlGDieh8I3QB0inyMPfAiEAkgFib6GcBbesuqXmQy7EI3dwNuz16QaCbD1rqVJSI0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuY5CRA9TVsSAnZWagAAqs8P/jR3IQ6sMitmL2/8n5mL\n23MSzvnag6uN5EWC4qivRdsmupd4bmGstcwpkSmtjx0VBgrhN+opr1cQuBIA\nkhEMSN4GfePplkvD7npYte4XuNMMfIpxOVgoQ/gorI92xUPYAI6kr5CjPU1v\nF4knBDY+6KqgUIKgZA8scgDCOuoDM+xaXaZTACjjD1e8SkxBYytCZ8L1XD0S\nZYQh3bULGm7SlUofl+f1V5gbOU747KPc5jFK6TiwGqJD3cG3CMEcvRAtBSao\nX0IM5Yzwn/+s7jheCTwPSdjxlA4C8x/jlQ7HzCE9j0ZXpo4xrWfZqiBVhHOW\nmLnfpLWqx6OAKUec0lQn1NCkwCr4A/Heyj7BSUledeJHUl2Oq3wHJaYw2ai1\n6D3/DXaOoI5zPeKsYqgxpd69RGqTNaL/6HW8T04pnuBIvC67q7bivJd8D2kv\n/IMyl1Uu9nHUtiUi62aUABV1DEaZn21pWeV74cFRzLTn5xX2c6BBJUsESgc5\n/Wua+9HtLkh13LOkES68a7g8RzoYMaQcY+QlR1wwyEznHo3Gjn3o9SB0c6vW\nCtldcG2WP1KyOb0KKodz/auDQUtilED4f4hVEW4lAscLT9TNTPyLcml07EAP\ny8o0AmUmIPVKQ9mNyjr5Kh1BxBiZffs9ho3YN1Bc13I3OrbX79HwzTGHVZKg\n/oxC\r\n=aw/K\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.c4ab98722.0_1606870584465_0.5331925834897715","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/typography","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.977585650.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51485b1fe79e096a8a68c843bbf986738304c527","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.977585650.0.tgz","fileCount":22,"integrity":"sha512-fTdrNePs2qrWLr0jiEcUP7vUrKtha9UloUwUYjwV+srXolHNdpLm9y+znWgKmxyOhAiGB1sEoF6+Kj9/Uh6dtw==","signatures":[{"sig":"MEQCIGQU0isgHvvxof/RyLoC4EMs46UhE7hb2kEXLTEF11AtAiAOmtHpJnXMJYaKBnjjK17EJmNrtCaMNlw6VS/tOOaTUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6erCRA9TVsSAnZWagAA8fkP/2pd57lMa4SMZ6UfB6Gj\nev3ykYYrjBeoBOOZVFx/16/sRXFAhOjm/LSRrs/dt+Q+KblOo0S3qX4MbI6A\nBRIVIQvrrRjqawkGLuOsofDlnSOGoByD5QRnfjv0jYQeISjzSN5Z/N5fFbNs\nI/d/YrW+VleJ2Z8vUICFwRcD9Zs3Sqg+CU5uGCdNDkILwEMK9M8RsyPzUwC+\nzEcGcdboyAjbYIju6NfpipbjsCHEx1oW/4q3wk41WbSy3pfXZvkSM1UqTP84\nS2lIZVvm9UnC8vicGhutO2+fTUM51il6h/7W8TcZFWkoj9wuXRwudNntzZdf\niQQ5ZltqN+vXWQhY6ot/+Al/3obu1Z61Iyups7YyX+e6xNGRZwGAYT9pTfhP\n1CM4/sgyiktK/iw5NNteTpXLOFIgZ7b0F2MuaZ9rjvnPgtwefGbGTukXwlP7\nRRA5h60F0epidZK0MEvhx8T2xYmPmGGl1bLZ/AOc4Yv2WRQS9nU2GpDXCmTL\nHqPmTdCJqfq5BkfGP1nkAhT/KVjjV9/l0toe3j9RJAnyqb0+y7NcClQFkVuH\ntqm01bqlSJcUQU1XLll5FAn9U2SmoXISvY9035+yIOm8CzC0Qk+GcleTJIw9\n1maWBSDBt56/PnpQlKNNsuLibJhT5BZM3QVNkixysyX9TkGl0LNuVyD9hcgH\nfUXH\r\n=bdqm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.977585650.0_1606920106839_0.8192913939666369","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/typography","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19b523c087535f7beb6341f2ddac654908ae67d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":22,"integrity":"sha512-VSYCsU9+qg7nkct1dmBZUarBNEypAIJbFYSPxj/RFmZETpGLVdekPkUdILGpQ0Id+x31kbn6Ba6d1oYRYUxVtQ==","signatures":[{"sig":"MEUCIH/tp3eKN5xJECdFn+Zwpqxup8smLTX7MCuizG93SP+rAiEAjvQbZwz4U8lTW4iwrf9YSeremanmKVY1QWj+F0B/AOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6l6CRA9TVsSAnZWagAAcrUQAIhhD7QXKo34mHjmkQDa\nnXOUMhCJm7fUihLeOiLIPP9MMj3PxHg5lKIb1aOIolfnPktJwKksmNzUQmZc\nfLaUUiUXHpN8FxBsT0nzricrUhXj8mGtVd8po/mgxArAVPtiiciC/FmCIJWJ\nlYS1W6o2ztY5UNsx663ayA22mNCers5MaLz6pp7fBJXE2BInW9LeAGREF6Np\nZQshpOTb3z9r+4kXady9gKVLKHH4AiJGM4ixcrt0AGQH1Gpmbpc4TJKnr8Tw\noOqapiXDuv2mJAFvk6qkx9aB9sn4B/mMlhmUXVdJ0ibYtVA50KvtxpTS6nA4\n11q9hy8skhxQ1LTkxKADtP7j5YnHwQLEUfJ5WZcX1/PIj0aGGHhIdLuI0BM4\nYhxijcwP64LAz9akD1VOkPUQrSXGemHri7hCU6zz9sZeppX/A3t63bZMJF67\nMMN6KmBrA4Kus3Z4bDgH9u19MubfRGtf+FYrB/0HQWofq1wFYeC4rGIzdtjS\nl+Lz+H0Yt8GI7mMxm20woXQZpYzbuTCJM6/zxMwDjXTo6aHsy5OMAqqGcryd\nFMGYoYIUEYagGpGqx8svfapB6PQz9bSeHNeJNPxWyQx88PmIZLoNyJpLwsUk\ndu36ff+1oVAASCBSDpwOmm/LvCoBSWmwRypwLmyPxGzpgKMdZzTJ1A8rKkPp\ne4mG\r\n=IuB4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.c7edfc7b6.0_1606920569848_0.2162765450820816","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/typography","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.4f3347306.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1901c8fd08dd9cb442bf0444c1ced60212e3dcf6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.4f3347306.0.tgz","fileCount":22,"integrity":"sha512-a8yHy86D3WTze2zpQmeFU/op10PhdAZ5418RUGTaIxGY88V5eUdPT41XwDtssAkxiogPIgleHzaUBiaFP3i27A==","signatures":[{"sig":"MEUCIBf3XuicWOPHm2oKItaktJDpfZuOUeyduXRxTOBHVwZZAiEA5nOwXBymtnp7DIae4DwhqWNQ84u+h+bdJGQo8Oti7fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx62tCRA9TVsSAnZWagAAxycP/3nDX3jV+SRpH5JDNw2B\nXtxEPGEP9p0hCHtNs9MMF4Ldq7o3tW5lzBwVSyFz0hEfRHiQr1mSgBCX+lVY\nTQktemn6fu+PHlGA1PBJH9ceGarjRn6DbizjK61qQGyx73SXE0aBOdfNFrZ/\ngF6FFJ2Diz4yy134WwWj4hKoQqnMPB7irJQu5OYT0O/WEbYfxtC0SnagNdbM\nN/arP9fjFUMsM32PfxdqNKFNqom4LCKwxzOxxGl9/1YsA7J+jvU4zVjHmQJr\n7uwrQHOrvKpatzgkpnwpgZJbwy/DsWw7gQhqNwbM0/Y0SR8na9gYcgB+GB8B\nzVzA5vAnaTIHENJNStBQTZ1vc0E3FLWZZ5QM5k7w6zLyg1zTDPvOWdlbVeeg\ntti5I/277jxYl3UD8Ganlq7yfGbqE2J4PggoaKzDwhRgleSzfBhv4G2vlOUW\nhEjVWikU76IUWuVkCnvKNC+QDDc+QqnjI6Y9eBj74fuPdXAzZRy3zDxgCJTr\n+x/WaZfcHvHULOAS/eNZZbNZVzmdmhVv8dg/s//NTVUhr3/Vy944+3eBmgHi\nOEHAaqFPAcvSz3lirs0lGnAUx6XSWbmF6lrimz4UoLkvoWLBGJwbzdFQ6DcK\nGjfgw6kba3k0feuaBSOTxw7MdYupweiBaqguGBq1XA35QSwprboPIcWB8bDm\na/7P\r\n=zCns\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.4f3347306.0_1606921645423_0.14436070666744394","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/typography","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbe195c4c3d203df2af544809184ebbed6c4f40b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.37fbae10d.0.tgz","fileCount":22,"integrity":"sha512-KhK3YRdSpcFYnuPiJhBA1DH0FG+M/iGbx/tAUvQ2t0jyqPdVIy4Nye/edwJh6YTqSbVpqalQ6f27p1IN6OkGaA==","signatures":[{"sig":"MEYCIQCfFqcxmyDJRZEAHj17M9r2Fbpu5Ft5n4g6bEvbTZZ2pQIhAPJKPtEKHQKQaee6ubeQ5FD2506RgGYz3jyCE/TWiJB+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9nyCRA9TVsSAnZWagAASBYP/RQsQM1OUVKMjo86wajc\nCw3PfhxWMibeC/D8sGTCdY56EY1nDt5Nly7lYX/PA/zO346oub2lly8NMboI\nOdQxM3OBQGaiA8JwPYsLUlE7bTomRGXPhfUfdxg9jq3Ln1SBFRZ+lnkcJbsZ\nqGPcZH0ypf6YlBYfOo/50XGXP/HyI4P3qq298KTL4I5l1MGLKKS+FVbqHCB7\n2Q65SgLBNBOHms+doa2JFQOSfIyO+gTO6UK9JxnqcO2OuxN7V5p4QCalanTV\nazt4C+proeNJhFY4k/uVsvc8QpheFjd2mBJvwpvF1X75FeihhSTQzDQXbE5u\nBWsbkW7qXrDJY+8bwNNc7Udj/VIa3Sqg8QHp4ATFOVmBgth5Wtoh53jC1TK9\nB9s6ljcw0xVbOCocFZZJcb2ksAA01ga9F6jtPsTkusX2KlZ1WNGdnvFRRnNT\nQds//cTx1chZKxP7exuD7IrbcRzoDLM+yygpN0pxutMBdQeMe7kFYXQxCIHF\nhOfrZSlVWi00P7xUmSj7hWoRuSFPKuc4t2R9VkWEpoLWvEHJVrSUNdaSGfYN\nG6EQGllmrADVhNJZnG7qdm4Nw6CUtpNUWTpUAsgNqwvXt84elpJ8X5jQrMnL\ndKLAZVQpv+Xl5jLICfqwAvp1RkqRwIWG1kJ8qpHKw/T6NP4bEUeM7UgghTOB\nfShG\r\n=9Py3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.37fbae10d.0_1606932977967_0.48381218575790697","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/typography","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e87a7c9e79c27363543f457afa7e7397f3aa3e48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.11da3c0db.0.tgz","fileCount":22,"integrity":"sha512-inVrTWYA9Rtb7uOCflYFJ9d3f3RKC4elfsImqMjTemkrUkaJwcOPdevMKzfHRG6mTl0wRyKRLQXd2Y6bdiFImA==","signatures":[{"sig":"MEQCIBwf0OVnT2xhXIS9ULeAVp+Yk2FsIVxwyT3vd1gd1RyuAiAfQZQEjbVv+lszmoWFWEUD0G97pdQEWy3veSYuHkpzGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/d1CRA9TVsSAnZWagAARggP/iVN48dUtLXOt8r/1l6Y\nbmEdFXsnwmCDseGSGymEsDuHR5E4IHjZ6x3dgAGlRb3/jR46quv1LQuOwDS8\nCgcZsIt9ZuOWG+A8M4eyEHsA0zBk6ZOyHlSFSpsBqfW6qYDtPbxwcLy98INJ\n3Tdq1wHvaRI8Z12vO55j8f+lEjDWoxXPfnn+hetNYV3kljw7fyJVdw4yXAZT\nx3RcsZzqmb2RQBEHqm5vy+N+HW+DU38MG1O+LrfzwTmTdvZHLjZeuhwadj56\nM1zUH1AXBEYtRAyzB8sTSad9Z1/VzF84uN+7M+0BfRIBg9x5SMqUgI9MMY9w\njkX+ataPuKvjZ/ztqI9R4+h8qOzhI3mZpyrgZKEpRZJJ4asJRExWEMAyv+kB\nh06gPvO2Z2FdAvL+/iUj4OuRbmJ9A+kXQs9yjWL+iYBt9AbYTvLcumlP8Urb\nAljmkmpNZuwX34wiukSeioPWoX7Rcb2Z/jyU9famSeDj0HEvsU4Gb8WGGt8G\nzKf3D5ir6+bBlpJjOyrUF35A2t4pkUR8oIk+P66qUgpBMMRqZnWin4wGS08V\nJzVH96XJbGr32iE1ssJ+KBa7x0F5poqxn7FDEBXl7EO9mWVvfNbCHUFUURan\nPNmuVj6HnshqO2xopJXUZ/qmBFPU0c3DgUoQ2YMvXhZcQYnAhRlv67Z3raF7\nS67z\r\n=u2j0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.11da3c0db.0_1606940532872_0.5247505278827347","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/typography","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.489d4c219.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ab7df5b1058479ef97f98357caea6610e6ab98","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.489d4c219.0.tgz","fileCount":22,"integrity":"sha512-qPiosGVnK4uUJ1IBcnrqO7c1rk+wbPidDyakSbHpqv1U93R5BAx7rUwXoIQzEk7YFuHoTwhpaKst4wVI/9j5HA==","signatures":[{"sig":"MEUCIQD95e8J34p/xBCJv+InVZgVZm04cifidm90gSVCpFPl9AIgRZ8fV9Vbsf3hjAC5lkgKEVdw6lnrkhtI/5Mw0cUgGtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRZCRA9TVsSAnZWagAAqCAP/i0jh55GZVCHds0vy6Ys\nl7/5GK2DEdWsgj0VbQydlSy+AKPLmTgfdKz/pdykXo5cWAjU/YYg76ImlEEN\n22RMjAtT6Tl69dgIXOLC3CUIeocUFz59D5bR8AIih3YPTG2Ykjyc10wOBLPo\nlUZQ8CSHcVJ1KUK20QFhIjgkcda1v+n7Vi6phk5N7I539CZ1vcNKkAXUM/0u\n5mOFUGrhLfwVQyhrDHYMd/AOvA5LyuxSkiuYxQeheGodc/ao8StTWEZv2KIU\nf1hPRAuikTQL9qx40QKe/afBhX9x3vaYhWHENmmKfJ8M3JNavsOJT4OjaQXp\nvVKBXJLPYVwTr5eIG9+APfsBLcv+R37zploz6WLpRGYMUUq2BWDpbfsCcY1/\nAn4e0OM/Voy9YSQsZ/dkz+zYCgQYh4WBHP6ljFFY7GFbkvnTA8aKO/FRafjh\niDWh5QJPH/VaxIm7mIO2FtWrQ89a22MYvTSr26awIshXjhPg0i/y3pS7jTFM\nTOUikd8crLTY9gglmc6GoTbuqNi45WIz7xo4dtKZXyCHSUUcgqQzChoTrW8h\n+Q0kzEywKflXjFL/Cru6z4n1GtL7niIw8E+CM01du6qn5QES2JZKGQLpYfe0\nJLeP1vCALoimGw/qxFbNsIaSSNFtMBGqDe/jiZM3Ce1dPxYneYNjPr12dAj+\nc1l3\r\n=s+c5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.489d4c219.0_1607009369206_0.46259106621900226","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/typography","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f7855e49d01abce0a152d05fbefe27a0c5ab3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.6557a69d9.0.tgz","fileCount":22,"integrity":"sha512-YNimCdI9PVatGwvHfJZRl/iZSyEWKVmSlK7NIgYH+dEijfdhKpMEJnuSApPrK+9mIvDiqbzVsOqPIUIh95acFQ==","signatures":[{"sig":"MEQCIDHjaE3kw33yG0zA+IMxlGc62OcFpdvilIQmblysSw9MAiArX5ztDoTANE2Z927pwc3HSvO7F6/IzfLTy4ZEILoyNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQchCRA9TVsSAnZWagAAGGAP/iXVoQhx61DxR6i8MHNS\n74xfL66f6puaw9nohsKpM0dNAId89fpsm48bJP4Ng39hvKeNkV/cmbwkihR6\nPnEqZSC0QOV+3QbUePWUZQbex4w2Q31vnKbH6Y7Yl8HimntMpFdIXOvJcBWb\ncGgwOISmPqtqQookrq9vd/TN7tn0OGQ755FGH4prj2GLRZm15Y93IPZLu3dg\nHadwRpyB5SHCLXTFD3Z+F8SNM41TSYyaTaCXlv/fTVDizKcVovisdoB4eMEA\nn+v7yo/3OZmv57WKZGLW8euWMSBTMG9iUbpuQ3/06cF8oRDUikW6ETXh/snF\n98CDSdclC0iEWW6fb88ShXt3EKpkTBBvSYG5Oax1rNi+yDVbkffUwc5ij1LX\nuV1zO7YFDkOhsJjk9b0feiJk9XswynrQf30ckWXRnl+U/MpYF/Cm3bQVWmnj\n0znlU6ITGbFRuw8/XLqfX3SqpOhJtbUUs5XwWg6ik7UU8NaTroAozOobubWZ\n5hBQDOEk09J5vSqzDdgqGR1U3LzMltABgrG8KPXlHMrM4XKBBgEoS3U7ZUwX\n8GbnnPx+SFhP15Kv1EjwEgEvn+ZcE9lQgI7/ccWeXLDhhHDgPW24LG5P7KBa\nWa/3aukY/xl/Oxf3sifghorXn/JuTg5Fa/dK13zwPZywrajXFkREm4Di0Lve\nqYiZ\r\n=/87Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.6557a69d9.0_1607010080946_0.18953981632525174","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/typography","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ace6f98b173eede0b435087191070098bb16a160","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":22,"integrity":"sha512-0KeYV/XOAJ8X+oXAe324FZs21/2Ftj6KBXSvJ8aQ22RKXUw7UE3YFCP97T5v6aU++4HOQKbIW2ZCtYO7AU6G7w==","signatures":[{"sig":"MEQCIBr86kFKsjuWiey3FraU9z4x3awnGY6DzTGG2cAQsRb4AiAOnqWRW7cr/Z6H/9MXIskmIMqV29gF3tdOJDiyp8oxnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQsHCRA9TVsSAnZWagAAYvgP/0LOeoPdVP9vn1lZHL68\nFaewPZjh0FU5XSyn5NYJTzas3C38HeFMv9JxLiVCMjdSX0BFOvszL1VZUpEa\njbJBd4+JDy6XFam8uc63LDMKvZDVje1OfHG9rIj3ikVBNXflLApyPQZy+DmM\nOfUtHO0R5ZgpfSpK6t91dnEjUlH98tz1F4la7M3+KAT9mAgtQOLb00CTU8VT\nKjmCdb02NbvPbdoSQW4smqZztHqjVeizRZSlfMUCTrgbtJj350m8TIXl48Yc\n6xmsWfdWmyE/TeaBjV1upC4oI/2Jrg/aojkZEGxZwwZMdQOfSj+Rpoh1nmxj\nseyrsOE7Js73KOC/MPSFcNV1mX2a7pkz05mNOPiOAPid090myviMsdULWc9v\nmUb/WZ5iIbycrZ9b0hID2P4d7TZ6osFMJtOo/1x1PhOZcoXKCAGaEGpki29S\nevnmviTrBRt89cBJ+N3WJwFY/RBnZTAxxodEwwbRH8YhefIt1GDYcoYwrQoZ\ngQcNxIOgjyORXh8IccThJ95Tzh/ttYJ/1q6dKthTlL9igsr8FM9ujbb8wh7g\nLf7oTsrPab8DRjOhyCsJNJ8JX2OmLczB/QxZb+vA2et6Eh8pSCUv+id5+Nra\n9glFPdcZAjRmDNpwkdbBHPC90PbNgA9XnUFFos5XwQ72QhHtG8VOFOFObhRV\nKas1\r\n=BoNC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.4ea1b7c69.0_1607011079166_0.8221166062495702","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/typography","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc7a00dbaf06108839cb09bf16b72a150b9025eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":22,"integrity":"sha512-+t94T0nM6XZuFGzaj/JSVl6dLW0oN/3ER06yLLCn8p3ksbuJYX4mo+6qQ4c7WXMZ5JJKwlqVr9aXiS95DRKKTQ==","signatures":[{"sig":"MEYCIQDaK+qt6omLuGp/x3wqyGv0DKnxPM1fMzF4Crh12ZEK0gIhAMf9Hn0viGteDoupyWzVvTXrIfXgdIc97LLS2hM/bPlS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnaCRA9TVsSAnZWagAA8eMP/1YAaJrELppCUu1R1NhN\nOp29TBn9SjB2vleUMNU6NB60GMB829R5CvRfSokzqNat8+KgctxLEFMWjX20\nFlF+BPqg+tehUXsyX6GHExD6g4MLWN+2/VZJq+BO3VfpsEJM/QSSf2BbQzCR\nnaMe/VsgCK+UiIqOnoSwGKM+1lP4JPBsPukIRNIYlPPOwUKCFHdJSnUjrbnA\nApVGsHG6IbFkJJJYPLp4IcIFVmVYSzRSbWUxAu7Fwkil34EWNOq4fUbf09ae\nXrx/7NcmX3Is5A4Qb+cI3TUrbpKulBQPsbQqzfKCXqBOY3mTIufdX9wrpq8e\ni35ZonozmQOq2VvARXgMBchV0A5/ZfRR8O86OYFC10J17xnwUnkFiJQmkxzn\n37OC+LTnzHuKCU2ZVKwvSVe66o+oTmYam/nUHATc5K8WoRvCcFqMFe+qxr7J\n5BqikLO2m7AJmWpxdIFxmW0aJqgMKiFTIbz1iagUrE9KoexgzxIIQSWVGBqa\n+4uQ7G/5lusK2KGL0nmrdkLBQOnmqbBTlIIkYnv3zrCsgjo4Jcs8FYjEhcAP\nYiyG8y40sVeyz+uiY818vmEHLBDK3qi9GuIqH7RX7tq5MkBO9bjlZmLhkOeG\nBxEDdtiTitkWT65ssvdGEEjhZJIC93f0vGqdAdV5/Q2msHzbPRQDWI+aif/p\nQLOD\r\n=qjzf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.eaeb78ce3.0_1607014874242_0.3913897425665578","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/typography","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"340328147eaa86efacfad601b6dbdff7ac0388ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.1c156d69d.0.tgz","fileCount":22,"integrity":"sha512-+JgMe2fIP+lVh4l5qXfjH9/JWd+LnfDEiVr2clWHgAc3pc2LQm6VVgUbNkrX3yeWql0x7I/inGfQovza8BeYAw==","signatures":[{"sig":"MEYCIQDwZk4gmdHgC9lCSypq/xjkeBJNRsDL1oifVmDikWCBqgIhAJLSglEjV8NKq1NvlX57VcPMhtUbqWKGnUFmOwMTIMDF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU4xCRA9TVsSAnZWagAAO+oP/itZvkL3C5NQBXORr6nJ\nXIPUR6qCwWpPE4i9xj2OwM7hWWu/d8LHkXv7T1tHakaSNgMQHrygC3r93log\nfR1EpYFRkwH8H+ja6idKA3AYv+RpDs09uxPTAOm1ifLvM8ELJgwWo7C1N1I9\nuaMLa5f3VxyTwUprikz066nBj87q9gPuVA82MlX63GUGV24rGpcrZyQB8VGd\nCuF+0Z0mG8S1Mirk2ExNrnxUGg7Qvf2bxISB2Z09hiTFlB+zpbZF8nrR9gj3\nb5JuA/X6utJpfVlpNMyrEEDI3hrxWe1ruo1bXkbh8GAgihIYTHCMg8/kZm2B\nusS49U0rf4BqKThqcUhHp5V+t24qvEhfuE9ApmPfUXBkpGrDTqMoDr6+F2mJ\nX1fEYfoBLjYPgWXkPXsGXxChcySCMwfrK++sgor7vK14vJe/aiCnPOtBFDod\nQ62JX7rx72e/cgmzNDtLUTWpo5LEqPMksPHrMgw6TF/ooxojluxswLA4euKf\n89DZfQXpJvFTW69qxoZfXkJqmCx/IEHw8sGjeN+wgE4BZR0/K1ztkxoZrmgd\nqk55KyA5NeXQgcvgxZaCO4g3PVq4lvZRGUqTOY49dPA7vpUcXjtws1Mk0l0E\nAXbGgwfzcXdvI5uRiUoku/AETwBC+imPtAU8fB0ODpoGxVMouLKXM5jXwE9L\n50BE\r\n=0EAd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.1c156d69d.0_1607028273331_0.4969786487053942","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/typography","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.832668d33.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7f88a3fe0eeec98b7ed5c8447056833ced1c662","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.832668d33.0.tgz","fileCount":22,"integrity":"sha512-bewARjlzzoCjOXSRQt2xTuSeaXzSe/96V3yiSiffT+UiJfOQRjfxO0sUG3pajzsNrgNECqvNA5Vwe5efkhpIjw==","signatures":[{"sig":"MEUCIQC3/gS5Y4BLjhM9wVVJ3nYUNgYsTtdRiay9F30eNjfy+QIgbtA6UzCehK8zSVspT1YhTr4ys4TzS1o/pNE4HpigBb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynp6CRA9TVsSAnZWagAASyIP/1r8A/WykDGKOIKWgu8T\nUwLM2NuFDU2mUnt3JWgGh87xx/HkVC6Ku6zgrtc1nU5oVZh4pipY9/WSa8jb\nKcvhYu8ADvkpYwsUM9OiEklmhJUTXLM677ZCF7d/LF39UcDg3CR49Oks03Zt\nwV/sRyE05DMBvFDXvcYnhrZlnZX83UNFZ4PWgy79Pg0u0TeqGGx10CKLCYuI\n1u0sy3klsNbln/erUxOEf4w3E0Yi+x75p8re2t5OLSkL1jTvnGaTvQrF0vfj\n6gpGpbv3hVGld3g/7hiMXge5xemYDIO7RwrXyucdn5Cy1YsbM4eXNgpzkWdS\n0d5E0c80Fe70tkRp3qBEOV+VN5g1vEQbEAitnJqU75UygwJ3aUvhu0yLcbwH\n2WpZ6OLySgO/+wEQSvjPsAA0sO64NQNOk68ydxRxJUckW47vm61Ah595Al0R\nF/mzFTZD7mqvD9S6vn4upBwCizgwkPpy79c85VP+zailzv2yoFdZjQskW3Qa\nrKo9aTtklaAk2kymTQOyytpooXoHOdAkGVfhwpnMrnMxjGuXT2AXpIYMaEHC\njQ0iQqBkMMgSJ+4kXWj3fFxF7SrmDW6qTk+D+IO1f5abDcP01UOgTyNc5ydt\nMh9Ydzgf8hLVywPURfPz8dx2uVBoPHKhlmR79O+XVbeEWn9mq4zzEipCZ5yL\nksR3\r\n=S49Y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.832668d33.0_1607105145627_0.9872146591027213","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/typography","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.4321323e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52c0044efe4112dc15a5baba5f9c843ebddde9ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.4321323e4.0.tgz","fileCount":22,"integrity":"sha512-3nBwqSn9ga70UHbcQQgn+1LCZciW3fqNDlw2iNEv9UzRHGCRm5LHsVL42y9EEu9M07jViEpYXH/JCx+X02WP9A==","signatures":[{"sig":"MEQCIBduSARC4R8mLRPnCvf4A5OJeXBOODpiPEFxPfz6NF04AiAPWobv5JD/1V0t/oGaY3nT0aIdn9C72py3sONvXx7J9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhHzCRA9TVsSAnZWagAAOfoP/RAhSyBx9YOkfvrqCsc4\nJk5gZB6a6GbZjor/s88P/CNzgr/y4Xuf1jyYevwf1uZsFHLqfSxCddmUcS+C\nTDjpysQBNhm9GMLTR0sd7LrIjREKeUjhtXApwBW4SGpJW0bKzaEjiofNwPxx\nEPBD7sua45I9mEgMsFNDLK9kK0XTw64nSW0SrULv1Wog7EyMNOe9IRoEuUi/\nHeAyF35TsnyM9pOmS2nO9f77gvUAD+CrBYArDsyTdvrMloER3nlktW7wJV8z\nHrljLsi496n+oK7q5/HZ33YiYd5n0GKIzvtrnVlt9rJ+ZUJzJYF1YKrvlozJ\nATJ21UBOXa9S0XaMFAANxcGLJSWA0IBYjMPcJn1ItHeHltPNPls7q1YdL8MA\nIW71NBsE1d/mTAQbXDuNvHbyDIABFtBQZcHV2BU4Ue1+ArdsY+Kxx5c/DibZ\no+HhLCfvPTjE4zY9UJvibpeykuXDEoY11dEBWS8b4bQyl0GB9tcKKP7r6sSr\nUjvOH22/af9ymlwDbLAmKAoSLhPEygaiDdcXYVpUypD2eyaY2oF47crjHYzn\nlDHZw0Zr4QIHRz1jKvCYkViabjhS9hyPqRSPXvqPRVe0YT/vV2tDKsMieiPi\nhLMBdoFFDd8UAMUFBwEpe+b4mdvcVb6N/oW8IVH+XLIDtbTs814Mnf2KdNAj\neJSO\r\n=AZOy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.4321323e4.0_1607340531419_0.634711558431132","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/typography","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8832b658a246d29ef60115b60e713e66cfa9c902","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.2d5f32d41.0.tgz","fileCount":22,"integrity":"sha512-nxgHjowArMPhnC7fy+qJ1Qy3Mb+P/501mJp1kn2mjSLY2UKeU2SWFiyLkMxFQGyQiLxz7/fjVjuFvVpiEBMj8Q==","signatures":[{"sig":"MEQCIDIT9Bisx4vYQy7/X2/BYnv/ZR4tqJLzQrSLVuBOoa1nAiAsUC/CXnjT0ERAdv7VYl5xMHcNGap1E160o0nCjS9KoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzltHCRA9TVsSAnZWagAALx4P/ilsRwJzZ98vaFr29TuN\n2ytOFXcU5mGFY5Sq8f1ylACd/sILJcOeQg1v/YEOuPoOZIi5rGVe+3S+c4Rt\nfWwROEL8Np2AF/jDU5tACFb2hktiDMT0u1DNRBAtRO9UWPiaKA1hbZWCsSnD\n01s2LIUXDL8oNfbHlbpDvtsd/HA8uhq8NmqnMXEWVtXCphcQFg1i/xVZnmLH\nDcWu2QRStnYI4LwIwiulFoxqMU095PjB+IbAvOFnqDxoZMvv8BYPw0yv/o4W\n+IhZxwd2pszKYXVY0vcRx2nm1hzFfTe1FIqGhnG+bOQlaU3DPvHZMY3OFyME\njf8Gp5FrFF9BZ2IAcr7VyfHGaYnHLPT+or6PVNeCdIraWx7bX4swcZm3avta\n4RdSxD/MWJ11LZCHjhdfoMKTIdy3NzQ4t614BEO5vMio+cGAHlcTkWX1iMgU\nxe7GetHb83euSHV6i9cdemwLFIxEJB0DHox/NyGsHCyX/8/Ky9ZzWnbx46ai\nhRx189+VVMBxIUD1itIZZKOFeKHjWzrBYmH+wRsApK53SjfGeYg/jpMsxYaq\nb/2tgD6wT42kVuptrN9bSmkkiJ9HltM9FpItwBHFhaV9UCYKwVc7oGMZ8CeB\nG+IsLOiOLurur7TZPinvtqkuU9UF2jT8P91mk6j3ADmI9qV+LP+pdudXcPkg\nXjWx\r\n=2Zjj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.2d5f32d41.0_1607359302603_0.5236086206907662","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/typography","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.8239afc64.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4483f0fb15abbe280f8f05f2bdcb442b61dfe357","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.8239afc64.0.tgz","fileCount":22,"integrity":"sha512-WYPxRQWQatFv51YA1MzV1uZ867G1TLCxjIba9u3RKLsJ1sGGF7ll/rb/GwAqWWCf7cO5MJsdyjHUHpNRHocCog==","signatures":[{"sig":"MEUCICTDYzorGabFo+xfPcAcr4YsStB9kziwcneORVll2zWQAiEAuh6AfP8D9sF3igvVux9XInZViRQzpAgk4bGLzOlx5hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoc/CRA9TVsSAnZWagAAvKsP/AlnzofAX6BE1LIFUn3E\ngqhR0nNT6nR0CmyZpZrMWxld6SG6Tm69ipqF3xTCSlxJK9NvQ0DO6fpN1Py4\n3R7nTsnwapCxWaE0aHzP9Zp8zfMnWC4gWJddgEuXFEVqdSMIdJYEjX6d9f3H\nDffrAyRAF2PsXI2mCF3JQdV61VHuSC10z7qXr73KWtk4l6HFfZo6qq9rWlqW\nYWmo4W0IFpQNSM98C8MBj6d1Rit2R9L/8bCMiUQoLckkULpMEUNRBIAIHDif\n17k0W2HE6jf9cF1+kaB+Ym3vb/x5ms4HFEvPm5zJEtWl/tVPN+e9SNWcW6xX\nh0GwRxPGcTlkoOQ6tKx9QBoYtuG4cWPPmU4E1BQifbeFCvbTg+L+YrScl2iP\njRGyiUVWgXWOP35puG+CjIfKcAdwJjU/bSkFVX96IA5+VQmWqnRCOqrinLNH\nQ030CNuFY4deVpZCEhidGLsn8u5vdRpK7W++wAQ87wewBgFTVYmWICsshHaq\n23njYk7dFXkW1cXd6RWmggM7If8gofm27r7rDtqXhAKh3hfoaB1uMwslIRPI\nVSx4o8nFmJR72FfFy1o1JGsCPH7fe3laBmtWgPE0wy0nK+QsLuorpKyIs6b1\nx5+enmp1rBh/Qug+PJmiBFhYDuDlSbWFkxtee/QR6LFaD1dFVUnhKHw94I/U\no360\r\n=clC3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.8239afc64.0_1607370558656_0.5344018813538765","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/typography","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.6871336f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5224755c089212971f26d7c3dfadb1d4b9fa515b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.6871336f1.0.tgz","fileCount":22,"integrity":"sha512-Tyo2TsB+IU7tV/nMCF8HIRJyErbjLs8cd8F7nirqkTheDlnxcJcj5XFippb+D3HyO1r53XVZgp0da1DGgGYzsg==","signatures":[{"sig":"MEUCIBTSV+GdX+D/koFncoll6DBcjAFW1Tt4o+7vZpeCPWhpAiEAmvYQASdKKWX4aOzUiF7y/853u+lbUn17qi9obg0X5e8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NOCRA9TVsSAnZWagAA6GsQAJliYX+D0UAwEDiy6Wys\nN66Ld0mT6pS13Zl/DcEPqdIDO7HbDNv/51F8wqzMYqx8Rewru/ZOR36zSz/i\nVv0npIKP7cz3BCbOaaNC39U8DAMV3P6CHsJLWPSYorw8fosu0lx6J1kYpLSD\nYpRd8BhXS9ne6XTnbsk3Xdh4jxhlUfhoE8UO6C2y1/SCQxkInPiBVt7nejJ6\nfkUFUzHhrNUgIFUyBz7H6EMJRnwTl5nZn9AEnycIGQtUCl/0C8FdKpOl7kI3\nBvdBXottkVkFa0xrht5xvzp4Om/dOTj16D5ZdJGkVu1VA0IBJ4NOPe30iI7+\n2yYKk0BzvX9qvnri92AjYdMzKPJ6notZVjz6q7A//TKvSMD50FpxxLNjdZTc\n628bVhTXGA/8S0/mbYC54k/9XvfEqkjRUOqR89HHo+vffTWUPBbKAeYtlNo4\nlLI89KkpiyFlHJCIDaMUUKaywf47/3QTUUDHiJS6QFFXpVxQ/JsY3OKcHcgi\n/0veH8Oco7o7Sg4hWV83opYoIIVv9R6985+mYhDvAMhlLClPvuYb+MA4IkO+\nhHXuGjopWQsbgQRmyMPSy9F3r1GZbdEt5vwPiG3g0ga0IbdrrWadcltuZfUd\nktAGq1Dzpv2wNaKVVyoNsAhAtn8yZpQMLpUuKfGxG2rBWtc3KCiKSXw/4PQV\np2Ja\r\n=YUNQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.6871336f1.0_1607443278005_0.20562447165035902","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/typography","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.9f718da94.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cf16668714084e555fb35e8f30a40c7f673bf5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.9f718da94.0.tgz","fileCount":22,"integrity":"sha512-r9TJURfoHv8O6wX40oc5LF/OL/rokjm9DR4H/oRhOx8vv32XinrrLgGhcAkhT1+ECjm+CmFkFjDexxi7IkRL5w==","signatures":[{"sig":"MEYCIQDBIQ2yn6cxhviN72WurmgYtiRBUcrsSj8vyEB1xvbrEgIhAJYop3MHr+2gyyAsoGb4myMyN24PXbhvWNpPHcGYw0Fh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YSCRA9TVsSAnZWagAAwB8QAJWqBHuPcxXXbpATcP4j\nhMwWP7hMjUODNs7Gdmgq3yb6i93cNgOi1KBNVEluTVeJHqAk7dtoYnBBXm65\ngZy3G4hDZ3Ipibj4XuSNjQ577yHh+ryB/24gXWgrG3rrSFNtnXueI7a8RGZ1\ndBTnIL7uy0XhWMqcAPikUbp0/cX2+mM/B2wfQqudJrCDt/giU7DjmiIXBUvB\nxEAFeGGtV/OER11CthxKHx5XPIlQR2G6huVMSHclqP+I9ACGWIysawLYB9Vj\n66gXNY42x8X6cnt+cdfoF069iF8T1t+ROq4zH0uqa8InBOK7Zxuz8e508lJq\ntlWQapa337O211M9BL6MZURywF9YcMJV7QUoYjA4H6zSlnA+anGfpfBAm0Pr\nQG4+iS570FWyQ2/OWbtjah0U694tp3fTJ5cIJjpM4gVSwQ8ezdDlGZAklnoq\n7FLYIRknGxbyZ3DPrFOqRapwtgcd7sjtvriafNco+2yIoN1+Fs1rCgjDg+De\nTIUDLdn2TUkEXrz0YkgxSu2R6W1Ri4NaA5uMPbEZt9+nwgSOR9I3ONq14dWD\nHhjN7lLHCWBngZ3V9G4z0B2uUmmZXVEMQLPCpnZf+7fScG07YL1MRzbULRVC\nwjwL6qRRykTlcZGC6/bWjzcmDKjlh2zSReqYFyGtFkITK7TsQ/LPkLWPawFI\nACfN\r\n=l7O0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.9f718da94.0_1607443985760_0.11729987976333978","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/typography","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccded419fdea40b9bd4ac6eeb33613985b59f7e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.1fccb1418.0.tgz","fileCount":22,"integrity":"sha512-XlQEgNrpwzkcQGqV0qMniVn3QMKM9fCAkVUd/CRaqTmJePeBLaJtRS4oWBUcLJQ3fj/TGiGqwObf68w5mjcciw==","signatures":[{"sig":"MEUCIDDmHtXuxpt5MPz7GZWuA+0uAzAmz8RxGxRgwEnXq96/AiEApKqXwpjU35NlSFxQo2feRKy+B2sk9zqXA5xHt2QOe40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mWCRA9TVsSAnZWagAAYhUP/0BwcNm6TzVTbGG2DiI/\njZ0tOJx2rMLZgC1S+sID++wURtM89dTjIcZQcxFn6ZtJ2/4W9nZCnsVlXP4Y\nM7wVsV3J9XEhVbYzeuEEcg4Ab5HZcUwPO2UG9NGMkTqWaWysCDStYsL5ySec\nhQPDStcSH4LZXvHz2wr76IycO7Frx1OaFFbrYC0IRRfLMMaEJWXlQbo+8tI7\n3hyY+Ds4h71AasQpU3Z8Q81bZ01e8ZbEx07ygsbC5HljHebnaamHaIPqEAXB\n4wf1ZHgCJCGpR1vHIGYVTl3Yh0DNCy6+TdyUrZ5P84o3Lo/YquyV+fY4R8yK\n3iu1Yr8YPy0SNKrwKcGU5fitRXvsMwdiwvNnCws0Rb/CyA2SobnKXza+Np99\nHiUuGNBMxe3RhZxPtkPYm/CMQtOMcLchSxgskMKO/LHWEoLrpD1kaqEtcSuL\nsjRyceCgslF2lahPdXDvjrYl4P3avZh93AHIJA44Vc/8Z3ny3UmdWL9/5UI/\nnENLomSH6Fi6xAVQmyTapjPskhkg0jEKNRLXEQg7/kWbXenRXpWy/p+FXZS0\nym2TRBjYyt5yfM/pEgIb3MwKNYULiHQ4iZcu/3jWHHUC+z5xHROTmNPm4ePa\nV6B3r36BAoio3GVnhE/FjxtiB6D32DNcWXuxJCw8o6wKb24bbXiR2xdbfsyk\nvJ2S\r\n=a/Os\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.1fccb1418.0_1607444886263_0.7552544243172681","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/typography","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.afb68894e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f2fe31a76dae962e7b96fe4ea2277651098bf00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.afb68894e.0.tgz","fileCount":22,"integrity":"sha512-UTDv2uFmP4BKxkucMzzSukkhSElassr2d9w0sOJjCo5IhYisq8qpunPdO4d2a2A0jFAwuMVPehFVBxmOsRz8Ng==","signatures":[{"sig":"MEQCIFRgStZssHGt8dXaBxmraG7lqQN8HC8nmM9OHlNBb2QsAiBJG0NkphHxJRBNfzCQShCSng/5s2ey6cG9psaJrHxItQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qCCRA9TVsSAnZWagAA5mkP/05pHmwzufXRgSt8dDov\nIV7MaSAfXCsq4weA480L1SBsCR2zB/pcwQOoeXJIXUPHtDZjSNecFhOLuVPq\nsDqNYD56QPPg25WUstRfiN6DyAhaZpiiDRmj3uW/Q1bLwZGOi32/8rOfQFFI\ne+Gy8yMeVsfrhRbQ8ROY3bQ6pbscLEydOgGEcVGx0yCrJ5yUjyK456/pZWsf\nC9VSz9YmFAaBtEJyY2J5+iGn6T+kM8RCMM9QroWSaaodij9MXckgxFASnb91\nhVFdqLKXXMB+I/XX/DR1f7HJsQqtB4cPBdOPwGc2GHQHX9UAFrif/ddq5dAm\nWaKZi0jriydR4vdcTE/Y8fe5nJJ8eJ2OFJ9fTGaj5vBVEPiwspzbBZF+1ZSn\nvlv/nNyEc8RwtUUJp65Vs9mFE4UsjA4+Ll23YM42EkwPBFdTADtDk15ErXiV\nX72iUF4F5JCLciPHxOXyxq/smhcHmScEMH2WSF7ZmMR9zeLwzG3hz8TLW/wM\nwSEHeTa+d9PHBzn2/C20Ol4S7iRi+Vnt6k34DrA5ZFXXwBKAhcderOoqnPAq\nmbx0FFXQ6fCyr0yIJ91yVeO41LXKtOxfIZQPgFPyYAzXrvidFuEyBlN66DGG\n67HdsNf3G1TAqFGbXF7QxPSUDqAKNSs0dC6Pi8X8jadKEDSj601qkV/Q8KK9\nNXgX\r\n=e4ff\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.afb68894e.0_1607445121440_0.20709945482882364","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/typography","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e764fcece027e4e52064edc69ce537f243cb9948","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.fd88d40c2.0.tgz","fileCount":22,"integrity":"sha512-OWVQIKfSVJ4S0EOJ3O6dbfPW4wYKf1jnaSHfxe+CZz+zop5y5aHT3a9/viTl7Enxexf0CFONKwcEFfHjqMj9Hw==","signatures":[{"sig":"MEUCIQDq/rvI2SAffBhxTdiJrUH6JZbgR6jkdqob3E8tLfi1fgIgCXB9GWzqUV9xC57nOuFonNMHxLspsQF2bCA0g4Xv4lA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz62mCRA9TVsSAnZWagAAEpMP/RQd+6cQ1nfHy/2n3/+T\nQpiJNVmmg7KPzuMjiLluRuqRl8Q1fP/Hy6CSD3EhqrSYyntz4fTaBUTrfaKx\n1v0Dj6pH18qP29vTZelJIFoImwUuBLaQuC5sCbZfbb16AsiZpYWb6v5E3XkJ\nWpoh8/XLX9z924fSGMMTvxv5iH+OfZUstBKQN2jvJD/tH2xh8r6cvRwedJtl\n1fzCbFYHTvHvtmltIQHy1Lgi8X8t9RB+x/6Hz1LbQvVT6mZXJjXJFKjpKb1p\n3YNo75BWdshiiRrpstGpe1esFT42xrvrNN5lIe03vg6d3aqqJ6TyGzRlN5C7\nmXFfFSiAoKDRNGuUSVFch1KDIcuTNyt1pnUDa4hMOuCED4TM080CWbA9izE8\nnKj8SqZdxcIinkM4vxPkqpc3v3UsR583mX6VaJ7Ev5UB09bsbuQUT47CfBBA\n6o61SBxRkb8TGgUZIo2TBPWG+dYpgyMKJJ/t0qwJtjVZQw4aMC9ryPBfsCv2\n8adP/xgWl5VF+JZIh0eV8Jxr6EacOtlDMRVe+Kt4c8VWNO6w0RktiitwRgfR\nWAwfUiEHKET5qg/U2Nb5I3owC1Xc5fb6qlqQVvk/GeJo2AbH7WLKrXm6zsKZ\n66Rgf1kIw8w/35YS8bXwCM9TyZZN7FsR3L43EvcGHHx1/MR2uPxg5BcsMgVt\nbNuz\r\n=QUwG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.fd88d40c2.0_1607445926345_0.6549690411217446","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/typography","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12f735daf10705416aab80462a828f3ecc92e9f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.ba9e3109c.0.tgz","fileCount":22,"integrity":"sha512-lgZKz3WDMIhz5/WKO0uBf/JOyHJQQOO9WGWRPT4Qgq/h4hlJYiy093kytwenQL4m3VFlIxk3mecayS18YJqnRg==","signatures":[{"sig":"MEYCIQCWj2oDEqBnFvx11YhICOjTAi92ftf2euKBAsxZdG4wCwIhANQkkM3yv9e+wNvHBqr8ynKwVrSz++lPzgg1DNBdQZ8J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85kCRA9TVsSAnZWagAArhEP/AjJ23E0QFI5gz/wKVtY\noc/mgiOd3dy0nYIGE+2MbZFrmUhg+DUyuV6MBGalpNsfwK6Yg8RykL0hLV4W\ncxwpBYGJankGQ8XNGeD/pO0LLUaw28KK3XiKhMNPKERxzNdvJakx4TUt1CH/\nTn9LYbhlYU0ki7kbST8td/xL355YoX85EZh5acJH4NQnq9dV9Oq8wGhthvHW\niSePlzz86pkC6sGigLiS8L5fHH5+swNnXiLzNVe3zwUOZG7adTWpVvWNzkFf\njP6slqCDF0LFczKggjwqBUywd3YdA543mZ7v3+zOYlHUCgrQLNLHehOQxlVR\nnJkeWdOVAYjczAso2Yq7PvvBvMRJUY31eBLdDPjfA+OKY/oaIWETrQlnQxUx\nD2mfkhqhAH1R5oteCQmoZ1W5CkuDSfY9H6q7pit4N2c+96FvIHHZrVNqcuIk\nJuVAHBRSCXhiwDtpCeqG0i8/NJBHQg11Jdi7mT2zqC7hUffEt75WCyergcKG\nvy7fsFm+GPpdAvSwUg1y0k8czpc1nQSTsNCFcrriNJ0o1xYJy9xDOnQyBH2S\nmGg9eloYfwhmL/Y7lfhE3v7KlY5Q/+NmFRG8LCwl5nclawxem2nTyFMF2Qo0\nxHj0E1IO3UzPni5qPKeVD8yALayE05XfxZLyZ+qmPoMl7e20hQsy+o31JRna\ncmsx\r\n=beUy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.ba9e3109c.0_1607454308170_0.9867574983987573","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/typography","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3ec69643c5fedc0a1e620ebd914b4477769a00a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.1085c3b2d.0.tgz","fileCount":22,"integrity":"sha512-kxd6dXIYXOGonq4gKnFLHLpxyRQXrSwiOgC3OAJXBofHlJImcLoZPlia1TWvu3de4SEmFP8uOgSIKqm6MZp3Bw==","signatures":[{"sig":"MEUCIC1OHPDoHHZRbnWKUcVLuE3sOEamWR/8sy73/alKZmtDAiEAiG1yle5+QM3G7Wq9DzyTAEE4umBlPzpjAPEX26ktusg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SE3CRA9TVsSAnZWagAAHwUP/iIhloWj+O0tWA5Oh1G2\nV10KAF3kJqBF4W7HIJiiXTfVU0qY7xBD+sbRRjNYooR1tqmkyQ9ERtnLybrV\na7vIcMnOtdiw2sFEPdZkJk4jKGEELyN+cAvHdh+prvxayde2y+Cclm5hU8q3\nb7ZUVN0KNsqQIyVpWXZym8UPJ/DWoXFcbGdKxrmRlGYg7JTCAEozCUWxkFlt\n2diM+GUky0K0lwO8mtu+fgY2sdzZmzWQDLfnH6irp1SPH+Ji0IE810+iBPlW\nyJUG/bhnrVVOzfvSzgRgIo44d/Naz03SwzFVwAaeiJvSh7v7ujbhUY0Su7Zb\nBMoHUbBQrZS9MjmYUlRA+OVaSlT3sXWJzRpZo9xlbqBpWF0+GvXFLaR2+Gti\nZWnfjRn6IF2/i2pYLyU0fD7svVp84Z1lf8wTBb8q7vTVEz7LzU6NKTHgpsc7\n6NUI/JLIQHyi4TkMMm+FC/605coDqobe1iXZmFVhHARn08dggKAYhHVwkVAH\nLOlQ/BQwCpdMlvEIIieJONV8EMhNkCzsS9g1zpJEqiNH7ahfu8Ju9kR5nRoH\nFjCA2qkvxsAmQLjtDFeVCWQtlBP8eNClErrtBqbKUc0dMCVa99D/BNj3C211\nO09P/dtvslGjqHyQrCVxV6fjo6wXtpDmt9qpoIr8awa+qibim/ZYJhaMeIfu\nW2PM\r\n=ypRO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.1085c3b2d.0_1607541046748_0.8059882517931032","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/typography","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c029af37b36af60643e5a13791eea3ca1b088efc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.c5dda809d.0.tgz","fileCount":22,"integrity":"sha512-HkAtsg6J+Fhw264KmzY3PZ9toK7WTMhFKlV0Mm1HW56EixkzBuzTW0ZfYjsSmq5XYdJQVzXyB6DoXZZF/Q6Iyg==","signatures":[{"sig":"MEYCIQDFjzXzpbOGnp33zf2WHB5dn8JU3NV6l0cQB5VpzKaUWQIhAJX7UaeGdRSawUFQbmJPD4Ns9xaTPt/IJGZj74BnNTZK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TheCRA9TVsSAnZWagAAWZAP/3C3lhWy3Ha+C66Z0M3F\n3GyghDOzdSo1L4Be6PPyX4WzhsA1DcFdrFSNxCSEGeAKe3QL6BoYa/YB4Mtq\nSL4KlsTjBhcyQRnTSU9Sc4s9+FpM0rKcjV1kUfeHxjyOuZSTTPA/3OUJ34VA\njcyIywDWZqFjWg30nJSwJ7hJ/aVhVcEIrBr8SSFRdtCboe/4cIJUHNfWDpVH\nWaF0m/NvdgKxOADlOtNBEEFZ9lfa931YItK4eV6j3pKY5hnTWnEXyWUkXN+4\n5fT8QJIUofh3SA4nCiCRskJ6pbhgQaoxO/ZixUpYO63py8F2bjS7qFsJm664\n+KxpyIbFb0BpUn6/cMQG0iwicwFTsGeMm8m5sULyDWyzUOEDAyDL+0gpQxTw\nTLf+2MDIATwwPAIWvlNdEIsgVS3D50+DeWRujT6rOLm3Kdozhi6d9FDaslp2\nZ6dXdjNKFB94rQP5t/Wk7rhcOepFZtjRLvXNVsQoeVWc/L02/5CXe/TrEn7V\ntlPCfeQOyBHb0Czcu83lT+6mAF9xrVDXVuxHJYsxWX+r/IuP3gUDOlgeO66T\np7y4jn/3lsT6u3AAgeOJwrkkWevtBrg19nmf/qwWzQh+kMKbgWK+i9rK6oOY\nA+WBBi1aw+dqUfQ/2k2bL6hg3txaD4dszAv1+W1UuOWXv3Hspf5430+JVmfV\ndyHI\r\n=xj0h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.c5dda809d.0_1607546973984_0.6741499077665642","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/typography","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee307dee983494d1262e63a75354e45766236e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":22,"integrity":"sha512-LEjtrmRf446SWytCzLZWSGo2WvoKUHbSSISOCLv816K8WIARic1KJW17HOXoOrHfNnvhLQP9NwsUmx8aQswX0A==","signatures":[{"sig":"MEQCIEs/q17Py9U9S5GYg8cAttcqRYnZgemhsA9hiK0qRPk9AiBwUziIyV+Rx56pJCXBN0XiD/Spxfwd/EuQ2SemmYXgLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TyaCRA9TVsSAnZWagAA0DsP/AkuI14LoTu3Polp+jZG\nbMAJVzJe+i9lKqvmIUV6XWF5hiCJz4zJSxotjXV8TEh/GNQzdaT0tXqJ7zQ0\nwZRMTrgjWb8U1C+8tE7uL5KwW0CKgqjtrkmWSTlYRLGpApeWXF/uxWBzNRD5\n9/mpHmPSRGUnPp13VE/9ct8FGcwrF23FVPf+spywY7SkmO3B4b2Bl5AGzL/v\nvhpQFd3jLOTzkuCfoINL1c1QaaorXc3cioxcJzpMUXAb2B0m5xhskO60/ITA\nylHQzlMxXV3S+bAhi4mmVTs7KA8LMLEioaZ3IxfvHluLe0XV74kXmYowRvwn\n5zGWoRFFEFYjcCTx/r3xSVNT2MiXC6FL6Ag1JNCdyGW4P/cBxcpKxv4FHO9e\nlD59FGrowoAps2jh5888S+YvzZczq06JPW+jkr9OwBh6Z6nR5cGKk0YSiZ8q\n/6zDEXXJsACfzC4GIy54a0RlGOZ47xeqi5+rV4r1Yb0zbqDkC9e8fH16Q7J6\nn61zagNSTuoUHPfndBBXDxj7Le7Uds2PVbK7DxWJk97uaLH0YXsqndvk8YrW\nfB1odEaErRwWAadJhWQQljO36hZwqMdHZtj57aj+C2XhAwIdr5YcGGQ8jrV9\nsxnRtakmpgESHaqL+xmzlCIK05KXCc/FuBWBZDdOTHQue9dMul/jXQTipWIb\n1AN0\r\n=w+OT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.f5f1bd86a.0_1607548058019_0.0523678709466453","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/typography","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.00f38200f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65d2a8b470ee99b68b79dba85a88378abc427a7c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.00f38200f.0.tgz","fileCount":22,"integrity":"sha512-gd0BH/S93JJ/Q9614mOdQKIihMnGHuiMVlRMrbJrqFlUQZUg5PjwMcuFW49zZZi3uZYQohizzneFsuMR81p2HA==","signatures":[{"sig":"MEUCIQDtrNux7mH/NcZUcFMF56o4voSVZdetk5HMnmZVLLeldgIgVZRBSGagQ9L+uBMVUj7fqHJr4QtDlzEXt/J7uztFz2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05POCRA9TVsSAnZWagAAPtMQAItme4M8HECqCcf9jEdm\nL2GvbWGaeDFm3Heqfl0B8iLGiXdnAtlMgdvl0QH+E4RnBnBXUAyxgRNLvGfD\niCmngxG92p0SAMTLqy174Q8GqexKjB1n6HmZ4xW1JcPM1iH+Tn7vWQRTlAuw\nMMWS6sbX8jVNOl4smOcAb5hpdqtiBtsS6XewfwI41dYL3VhPHdZ8nPees3k9\nIc/Qusq4i10ExjgjnrjxVmEVAng74SH2I6J0Wkri1o1Uglp06qwMnCxTQPIr\nEPGV/XmrYTgm3XQUFjxxSZKD3LSYj7GsWbX3wzoafML4c+APjQ8lsTrPggMh\nm7lEWFxLv0viL0mFLsHjP3xoyuJUhXb1NknNDvNa/G4Wi7hRZaZpJLhUXAbZ\n1B3LR3CauM224aoPO9PCLibg5QBwwmSsSpIWGLGzX4lbyeoaE2OydKfFnmJx\n7OIv0AtI5ZSK9eeFCAMGrdJrGdV3l8C4nK89bb5fOun8krxWyy/ztar0nuIm\nWsS3a3bovi8GEZ3mVW4UXpjnbbqMymNAYHZuIsTEBnGgEbdxTjCs9OoV7auH\neETjsNZJB3WSSaapXwHFcIS75m+sFe/Sbp2yJC6LkRnIvWxzVcbC1qk8rvZN\nvYxis8d46iroP63Z0IfyzDg691maOlyeePYdDJHbJqMlp81OKUMVcg7pTsiC\njfYL\r\n=Vpeu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.00f38200f.0_1607701447029_0.713172467317827","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/typography","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d09c6d58380158a8c26cfd7f52a4f021943ba9ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.ac41a5729.0.tgz","fileCount":22,"integrity":"sha512-8cotURG3dCvL7fqgw+KUYsH7K3Hstx/NPpmRjHyBMbRkB8vcM8rTDTASGY98ViIQEG4FFESoG9oWo6DJzH11Pg==","signatures":[{"sig":"MEUCIGtG4m2GfATys/9jUIO0dI369XdF3rXBunQPHUf3m/ltAiEA+I4nBtDNeYmUVmEVFkDn5x3plZ30phuz33Hlid1+5NM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054MCRA9TVsSAnZWagAA72QQAJIdxAQ4EaU32Q4hBaNx\nLAASvRWAo9cNHK50xlrm6ONanDpwTCRJnqFUkdIJPaV1KVc1qv8Be5lnxFvO\nv0ydwRaoHTrP4YoSAa05fk28M9TIHYnryYGcl53hBFCrVuxHHVtUFLSscwiy\nNprTxUp0uRAZK5Cu4STTIt14S73CJYD4UWFcES6aoy3UkrXLRzphdJ7nG51p\njQyGApAbRkmqKRo8fohY8JEDrxROE7TIJbrLs1BorOxkWGo0/83qChO1uRMk\n+1pJ6d+da7uC48akGuYkCfZ+huLhP8D6k/ULcrcjR1ZBd7G/TiuY0QEGt1HC\nAU7vwGz5XnegmYzurjxeA5NOe018FipC3g1Nysb7NzliitP1oufO6dxYu3vO\nMK8IgqW3h5hK91HN3LjRgh/RxjY6+bXBF51w6+LO8RNojOhpDJSAP2K1JgDy\nS7+amrs0kizSEFwAlAP88nLzkJKjlChn/MSGCHSmELb5cQ86nu6RZRwUPj+J\nnc0Hl9NZoTdM7TXMc08A7Q8t0KVfDRFWrb6kG9EV+O/z8hlkYO4Tc82oQrHx\njUNE4v3Qal9nBscnhn0YJD9WCUzw/lwBwWgSdPxJvhU9FyxM4B1OIW+mrCHc\n9mJVPte6XQ4zNqYDwjjL1CeRVjnztlnUt7Z0FpR+WHHuFKuKpvgPldDCtGQB\nb0Yx\r\n=tCxb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.ac41a5729.0_1607704076155_0.150640281859721","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/typography","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d65c938b5e7b2a8deecbb6d12521397ada119d53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":22,"integrity":"sha512-sinAhOJbBK/UXLzd7n95iQGDt8JteTHwmLYJPOZkAJ6rvLWh9F7m6c96Tb8xY15fZWn2uJH07FxnknkKhjpORw==","signatures":[{"sig":"MEYCIQDvFdbzrEicLVdL+1qAbZwG/NDv17wIu456XV1tQ7BQtgIhALDT8OTwPtkQ2DOced2El8vfyQ0bzu0AnrVKKiUrYUvW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bICRA9TVsSAnZWagAADbcP/j/dW0eH9gnrKcDCmpzJ\n8ZXrc5U46NK4BWBe9oaQsSvI9sfpORaAo43rCtTJucDJfw4BmftQ0flmYNka\n+bwl7RDRprL8Af5jAZmZOFQLSzThQBhwptaZFUfFmLhEuoBI1dOB7fX6TUr5\nt3gDaUPF+aewD+XyFBxoComps+FKwoJY3JA+S2l2IJHhWnqgFYIQVXn8ykC7\nkutHjaelJgQj71iqJDFXAVTlfbH4gKOq99wTZHgDvkKFhFkEYE7oi8ZS69G8\np6ZMBqB0thBxa1Pm1KHKyTG+pIIyBj2veWSNQxUB2SEtUjk4dbPIW6h+T3od\nFRBOArdrXL90dDyn5lcobHj4Z+f+hGh6/3X0jcIh+JCP/6mffcaA7TPxybkT\nT7iWsZzHVdQNYncgfOByhwePLz01bYUjZCZAYi16sTk2eSxSinOPtFoH7J6c\neOzD82ng35N+DEZR7rhBGZzD0nYaWkeD4yso0fafZnqKJwPMUiWtjvA06A83\ntmhqRt1FxdiuCNUafG3R5XysSydoScQ8IArQEKxZRgs9Les9NQ0slgrqmPeC\n+xwJ2U2assS5iHGBBmmyMl8fb4Yp21nypHhXVt/oLrawo3kr7ipbNfzhEKmD\nwbtzh8NO9tL+bEYGxEg7BsgtXAlR+/cypXDs0O4d6G3IJdM8U2M1Mcc8acQ6\ndpLt\r\n=j4f3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.7fe0e4f05.0_1607706311925_0.5035791826958671","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/typography","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.9244508bd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"430dc9a3a0fdb0ed083b124442875691bc9a7836","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.9244508bd.0.tgz","fileCount":22,"integrity":"sha512-LhNNW68INM+mirff7MBKiAS8MJG8qcnh4a0g3J7g+2ZnIHxpyqsAJpWGGHZw0KRkGuCt1E6sfn58mgfh/cRrtQ==","signatures":[{"sig":"MEUCIE4/ONOmLm4108N9pO/2gN/cPcsu72uBG00RMFOmnhfzAiEA1Df0ECc7piYMrvzEjVoaLBrlTJGs6K29CxxIQ64IY2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NYCRA9TVsSAnZWagAAHo8P/i2zc7hojVb6pU37M0D+\n0vBh1EH1Tj4WwGuPod1NK1dwvQgeOHj+ZQYTTlsPd7+qTRAHQLZ7+m/rvegg\nuvlCXDczz7BNKjQCgoOQ2mbyVSBgo4GDGEiSKM/0APyHF2vaDYCLdVQDlXE/\ns3hPV+fWZ0IzgpuW7X4W6pjnMZPbYJbl+UwrFSihmELtDo8U1fAyETMASDpY\nKgQ8DGE6ONJ/ZeGRD96OgzFy2Z3yakK/01KAs7zJxA24EIxl/GMHiOqUhmnv\nYHjW4+4Fqu5W3CVR242WjhPiuxa02OZU+LAOaZOtHW3xBzjrW78BFdy5Tddl\nWAwyrmYvZKEge5OOynIdt/L4oDwlpyJq0mUKOJxOxm9KWtidt+swKK2eooyV\n7f9oUIGA5IllksE/9Kw5Bo7MvXmokstU38AZ81V3LNF8MTdt+k05VayMrh0j\niAX4nht/cgn3RXhWYMs5K+ImTVYGCkKo8Mv+SLe7hcE69K2i0/TBaQZWaZTf\nLjL7APvg75V0wLrnKRCRz93S+Ierzqnmez7pwkyTitENZGn09sdkxRAAn0j3\n6xeF3h1Uu5bZhwpgbwALDevAIkTFPBWoBVJt+zvPRoj6UaV+aQFlUTiAPARu\nAB7B6YkFtc6zsr5mP/Nf2FSkOYsm5k8wkNwN/0uQQFA3uiqgC7OAw1mQOgVt\nc4vk\r\n=eg2D\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.9244508bd.0_1607713623618_0.6024793714569343","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/typography","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1712fa93cf7831644f6cb667515ac6c0067af0ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.384a8eeb1.0.tgz","fileCount":22,"integrity":"sha512-g9o2ydDhx5BsycnN8zyYFlZwsfqP6LEqZWiIgdyUDNs52YNftdSDOvbdSo3iqMAhfKv5soorUpVq1XfawrZNUA==","signatures":[{"sig":"MEUCIQCPJxbVtNtOnMAV64fBDI4U7qO8YyTnHwAwoOFxoKVk4wIgK7KlGL0+FRx9l9PIfFQ1V/kmqfahYaEqUwWT2wAwXOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j1yCRA9TVsSAnZWagAAMvUP+wW9nRRTt/+slFn315bB\nnYIhW6oX0K3q7eqqQ3j3s52oBTPDDxJs5dMRzybftbUDCv44Pu7lOg7C5EaI\nt/44JL8kC125OGyVpioPjCO5EMt9InraROmBMDlgu5UK1j+KkhqfZg1mgkCk\nUgjoDCF5B+c5Rfxkv6gU0tL8OiMQCpHt02oSsu98EpTjJwrvd1j8l3epdO9v\nwaxi8MwYssZ88Ob8zZBP0lXnf2DDs6qjNMJgGClz2cSq3BfO3Mo0h5SIoZij\nbM8wK3vOwpIR8c36t/Lv88eSN3RDR8JVF+ThXrZCdly5ZNX5WBEq4lQOACfU\nPUG08UNGqR1hMQvU40zX68Vl73oVhgTDcx9c79TpIP5R8OuXXt0gKk/aB2aK\n2DQ6PTpNlAPEi3FC/W+midqlzuyWZG1rt398H0u44kAbTECVqQy6xnNbFtI4\nfgGrPOs1d3RECeL7VkswbmWe8atl6ruE0/rb7Oj31JlmPB3X6iZPcjphMRPK\nJjT9Wt9QA0Ya74Qcnv2pF0PJbLpH3T+WPvlWe4+curtXBJTuwIO/Dv6VUAV+\n3fNvNOWXuoL0JeXlssdysDM97aelIyzTjpZkLfI18sTOTwUaOilYYd/B9igc\nVfBoVj92Qhi8ruyM1WIYD5+g0GLmhVxRrDDu9DiqsEZSOuSR0XNa5W6WHt0y\n9bVA\r\n=LY1F\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.384a8eeb1.0_1608138098369_0.7487076888983621","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/typography","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"950d0bcfe58c8b5e570c07dd9efd8625836919ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":22,"integrity":"sha512-KjDXglIYh2S9QP5lVBoBApVcqNF7ZLY6rz71IffM4U9YkGEXGTR+TuraCZGf1VKcWDZQUbVm+WHKwcnyQFXZOw==","signatures":[{"sig":"MEYCIQDHQulpb2/U41uDvTRLIw5TFjR2XPX9jLadTnuNLe45ugIhAMIe+OnFuMJlDP3sWBKbBTOO5UlffU9oUzQlr4M8W+LH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGLCRA9TVsSAnZWagAA7LkQAJyz4Ilm5x/ek8Of7FlC\nPFBvxKahgbkiu03xCHGGyhHTdQdWvsEhKjPD73QRcWhS4mnJiKHniiqRpNz/\nrfgANW3ybRSzhq/ViB6UpVC7OXafy7AoemSRw0eWWG4hePrzyMuheR8AICJV\nyMCK8d9jIUtClFzpFncYfq9qtd0f7REUOJZlnUi3J2V6fOXrDwbxHdCmV4l5\nVmVUFVvKghQ1darOlIKhLGQaW8MEuPXNWsO97Im5AHBowAiGdjA8X+ft94sF\nBkueEkmv4cGTpu9tGgUFvdmzcsus08F0P6wCH44m2qYIWlGFDuR/Kb8QhXiI\ngy6L64paUFc/EReVzMHeLHbcPafNqwKfQh4GT/tjV9+TflcvNFEZoid+0X5V\nEIS7MQyrPRPkdNzBtmJPWyx1wbitMqvG2ADZfP7/dIRG/DxAiMwfO7DtlFB/\n8goBx79XhZTBza5UdHXHkBn8oXkI5zF/zO2bh48qXBPJaqV5/oNY/nMCxT+f\n1yaON+Z6IXBaTqUX//q/DnoiE9wsHAWqZvDX5kGobgaI3yIxs5i9ZjO3Sw16\n3yKFG7tdKhylxn77sffVJM1HkBTVgU5l8o6jKrVdI6Y9DA3ovmixv+3c0jsk\nH3sNBM3dWYIR7XL24qgqWrLIfY8lRXyiPkF2nHAut2h//wT2aI7jpbPMA56p\npTHN\r\n=2HMj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.eabf9d5c2.0_1608143243303_0.863944041208943","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/typography","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dca344dd023ba73385cd8a253d784430fb4fd7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.30fdfd06e.0.tgz","fileCount":22,"integrity":"sha512-WgrbjFw729IxqEiu79XAABPjS8aFCSJouZr4EC7KnnhNTZR3Mut3klqOT0s5OXG5ruWFy1SLXqQV8MtJsCtODg==","signatures":[{"sig":"MEQCIDfLRxne+RTzr7nfhaZHloMdJxmVgwG5N4FsicT8+ogEAiAJMBEEzlyeCNTQLWUYPejOHOxapEVL9xWtno/CBSCyHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrmCRA9TVsSAnZWagAAqhcP/0y0tPZF8ThTn3OT98wR\nts1bbtGA+LAkobkIMt9ZfO2oARSD/qlAT+PArJjUnm6tGPs3l/MDVhWWxFQX\nuOovvBoS3jcUFYEArVbDOxDrPSlGyTcYB/TJvhXFUgaWBwVDb8BvuDvoDTd5\nZdkM8MBRW4yTqUX1T6Mlpxm5MyOLhV/QUFKwZrT657DpfQaf/+pnSmN1rIbf\nIfgLQEFqckacRAdukDK7hhCYfACqw/yKXxE75j94Ex2PNXoj6VbFAy0q5v0f\nm0WBNEWslx/DgQ3vqhZ/6M5W+wGuaC+/64RPXe7k+1MS2SXZHqCbOh2Wyj95\nRXWJ/YezQb5bj27s3FYsw5P1hfQC5H0mNPPYFDFhaf0WBJ03G6A2STTXYetm\nuSe9QSTXVtdGBfgUK0S27A92Cdf6Aso4LNPmbIxgwHg2SjUs2zShLGUJyc1e\nJAdPhHyLNYL1VOjlR8DsEjI4GzZ1eLpitY5NjUzj01XF/vNnAQRP3Ki6ul5S\n2ABbqAalmOic0H7AMxH5CUY8K9efNRQlkFpbCUOhrCsk8IDF8CLpjG/M+IkX\n8BTNIw25dJGW6QpLf1YvU4QP86ma8TK+/c+1W48ndWkAndP7KKR45i8F2pZV\nciNZr8b2x2qvrO6bQz+b4ET2VTCWjY1XKRQhJWECaoqTXZfqpd/6PcimhJvg\nVR0o\r\n=8Pxp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.30fdfd06e.0_1608145637914_0.09564810506078203","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/typography","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d696854bef6ce2a02174b0cc7ffeb223e69a557","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.9590a8f90.0.tgz","fileCount":22,"integrity":"sha512-r/6G+EVhwhFUary4jgmUGrDHMVBwGIOdjkt3c/TTKj8Si5DeEPgrTR8+E4uhjI9JmMOWuecTnkVg393k/jTq5Q==","signatures":[{"sig":"MEQCICDRVrFe9Q2VUkkjuRa3Sls67vksAERQOYUdHuX09+KLAiBgbODjxyrN0wfegr85Xr5mQ88wjzpiDHXpPSy7isWTag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/cCRA9TVsSAnZWagAAPxQP/Au2RUonYoO05KNKvUK/\niimshIkyTE18ou1ER775C0UL4ZkoSVIzZEzs9NEI510nLRKBzVO/zjDAOMo8\nqt0WUiCQQZjma9d4CgdSyNnzeOJXzVven6MbKgSxBfKU8psYxTFmbbwCUigN\nU/L8tvXFUwbfpKUk1gfFp/hULGPMnP8S4zowekWkt1340nHer5lzmfZchPkV\npVwt9sRHZ5v3+1rX5eTKC90MMZgO231t2gOB5gS7LIekzIiygFRc7Icn5dPU\nU44uVXXb621ognS/pXvM57jD6v2Dq86xKly8pwpV5pb1qF2avT+bNzSokMZw\n20jNLH4GOIfFXHofTsCs20otZuVRXWJnRE4mW/AKdZEeUeIdxnyOt1eoAIbn\n2rhi/5iq773W4Av8xtH4R4B0FYMLlGC1Pfz6QkYXSC4lhsupP0uUZ61B8pXI\nLU1mEWFA+iPqI+Yr5582ZYnZ+W2/DZZhoWnjm7e0qTKiCdjWo7CJKvU1XHjA\n7KlgO7dYZ2HKxRFoDSJhPbEOn/ljny8LgnmlazVpJfze/mIRoW32Od4XX6gw\nG3vFiYQubcH2/WbPJ6rS9somFoEXE9QY6yMvOg9sfayScG2hoye03BIuzMQP\nVTnseitfSz8GuE/NhxNkNJcPwfy9tXZsIPiX4J0lPw+ymNCA0v3Q9i5f3UXw\ncYha\r\n=cZ0W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.9590a8f90.0_1608658907362_0.549672935035765","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/typography","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c8d7070d1d5b7e6014ae851cc3c17170fb94126","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":22,"integrity":"sha512-3DzNa+82yV3cI44+PhJ5a7x9sFIqDEAdjjZ39XrzUrCo2P/i16ZvBDN1a5EhEYY3sixMhIjEA3oNebZZVNKNJw==","signatures":[{"sig":"MEUCIQDaZVgF810uD/lZS+jJuLuvH6+A/tiIhmpteRiia5l/wgIgMVrnSXpg2nYnAuuxTwCEALQUZzSNxXi6Dn5o0JyQCuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nuRCRA9TVsSAnZWagAA6lYQAI5jJDwgyJ2UdMJV76nv\nDq+QzFvrBgz/MWkFfq/MMxW+xFbgyYbwAnudvbqg9k1hjhENCzhWjjEXIv2S\nNSy7mI9g7AzclJdD0xNwfenrenxRO22mv+9FOp/VIk9vMC1up6C93ec3sgZg\nTUXZNXT62IxLExw6Jc827dNvs7fHjOyuoPRPX8NNXfTCSWeNX4gLZtOQMS0i\nvK3vnA+R6ooIGe1wgbf8LtEhUWgu4e9kB9+KiKen2BpipD3wcH0eIt7/ZKPg\n4N6Jsrs8wP+wto0h3UTQdljNyxkpZjxq6YuEXQhJSyLWew81L/KBUTG8pyeD\nMfyVT9kys3b8DpGJIEwRTdGanTpEvvCfxvukaDbh+wlRyo+YthV+3jNvUHtx\nO1AI0hDhaSeO8C584R9AMdk0ZTxRVqg4sslZbrPRSSSmxyzPAAYjmdlxmOUh\nl0GPI5tQGVnPRXLsTqQYOoivc0uxxhJ4buVgL2eoKndxoxD/88FxXkeLHIvv\nH2kMpcogRMI33J/MM5M2zfkwHsU27vNvEplAykWMKfnyp9d8kSBy+3CjgWnf\nQECrxnuglv4imkWE+we3P741suzBcqPydII6jWyQuQcCbIYHg6BUO5wQJxMK\nJobrtWU/4zPsbnaaRQsG6J24LLrKwk8jxhH1mfj44l/J63OmmIxb6M/75I/J\niZXT\r\n=DZgo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.f89d8b8f2.0_1608678289493_0.8239351092025389","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/typography","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58af1c344e4da98a020c11a99f4b67e08df2fd34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.fb194dd35.0.tgz","fileCount":22,"integrity":"sha512-dWwf3QGkK6KATDPkfmb6oVhaTeKHcvjr7/K4jZgu1ZwJY93ggzumgfm1nP5/AwwvBBnYMdIWWw2iI2vOXryhIw==","signatures":[{"sig":"MEUCIQCBApmaFBQZAc4/8L0f2vSeoRmjgMunxpm4nQpagDJ4OwIgYC8UelHwsCQDnQZ06PdpBFdCF9HUOItVQb2sphQliB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPpCRA9TVsSAnZWagAAcIkP/iiRUgQJBD6p4cX9j6lR\nUZAATBiyq2CWFO9jCUgwQe/mfpBtKk49p3YgfbqM235PEFWAxNJ6O940TmCJ\ndYx3KZ3Hrsw9FZi+qpWnJR77iWPxsSwzp8WxGq8W4RAwJrWUM2j++j5/XN97\nvf0OTW3f5AMoBHP6mOMVY+43Adgul9aw15c1VljQWY0ed1NF10HJS3dJPxjM\nAXYtQUTP+vqHDI5PMAvhjVKBnosAawIncgQZSfwRSK4ckvMurTh0P2sHtdd0\nnbWA4s1dUnwdlvQEfwp5spq9Y4myfHCNa/gVNqTMI7JaqeVMPIyCWzUoAGPY\n73usRMBDnxmD56uOEnACf4tBRWHvh7/WM36O4P2ErxDkVKRiJPH83/LqlfEE\nUfaCj0qchQVj32odfuk5IwqXh118yhCF28lFUBOAiIxCndBZOKqTDhNQaTIb\n7CGM20aZqQsh4Q39/O6dFelDpF3fuSafNZn8TJvy8vJd0cneB6YsiAnh2m1z\nGRDHTTjnheYx58i/EnGmYYIz8vfSxA7V0Q44Ckqc2YQMYbYhDPJE5N6yjqm6\nWSygxh0crSxnCJlhR9L12Akar+JkDe+dyDDIE3RpoTj2FwN0UlTRNTvtSkm3\nzF1J5RkzEhGtOcJVrmpVmS/OqBzrWHu/21ziKzuS9Ojh5Ij6mYcNfIlH3H4Q\ngr0P\r\n=p95t\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.fb194dd35.0_1609188328570_0.9489762938930717","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/typography","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.64f36e287.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7347e1517eb625245499004230bcc906514b7dea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.64f36e287.0.tgz","fileCount":22,"integrity":"sha512-9Id9YVhVrIbFnR8it2NnvxrRSCEQuazaZs24DHQ9qK629YqfoTy0UlGw3veGO38BhKQf7KNR9sZmS05uaPy9MA==","signatures":[{"sig":"MEQCIFRTGYij6MpGxtJ2iMD2mk11QEM83wgZJRmA3CN5YDCBAiBTOz76yyjXVJOt8gkryO+7ttIK0U52q2x54uH9x6gIlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6klBCRA9TVsSAnZWagAAE+gQAIQ14EK4Uk8Qj2gODqyM\nkCVx590PbobaMnjyAiH/FYqeLu8eZI00o2djTfku3iZa+p5Vgl+FaJGN4EK6\nIdx3U2LctXd2e0a6zDx/5ryCkVj80A0H2yHjQtv0rReIGaR/DrwyAcBS+UJO\nkBzLbxAv3hPNemDWIDDe417bipXxYMzxBshiIiaUqjZ852NkQVbTf5dNB7HX\niazy2G3WMt8Ifayk/HwtEMPr/dAKiTniYf4Pb9cHvBSDp0ngHCvLU9K5N1MC\nagaIpijgPRxJkXaJxWV9KQ/CymM8/YkllI4AcBo5mSYJkLtBkFZVXDQxJwhW\nMXgqyPBFNyhM773txDbaRu2d3xdyu8LJkqud+ch138iVSOchQlZGf39bJjzr\nN2gpB4+e2GMgiKJPs6CscXGS7hL/q68QjGadahFBWbCG6pJp2U58Pskgh79Z\nzoAS56NPGA6NOiuARwCaVZDIq/QP8FJxdVOuw6DJT6Bl/GMra6B0J1978/vf\nhuxXVbDoYEY1KQMYAOEvoN5dCuHBLi2O1HdcL1GCTubHGrTrhV1xRvJ+EkQF\nKJT+qVdzpw+RqlimB/uw21g+F5fbOpGV7xhHq8LZjbYgK8eB03/GdZ/TnPSQ\n6LO5hxpc9UWuRrJKOcWnhG+FStS8mKf/Cd8ZF1DX3jK+kxmRYL2yTZaYS/uU\nd4bO\r\n=mlHA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.64f36e287.0_1609189696686_0.8612278070551969","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/typography","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3aa7cea7c95b52288b2d9451ff588cfcdcfc78b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0-canary.b7bbe7022.0.tgz","fileCount":22,"integrity":"sha512-+UFCfVYhJuJr0NnBpa4rMrI0TqHlAGOG8x45+d5VWuQHE0JfHJg3OjtULUKocUK3lHv7YNmDIN4h2Ygp9pGciQ==","signatures":[{"sig":"MEQCIBTg7JMRJ0ZNnixThY2SuLF/UMCyol/R4AcKJrmxaWgEAiAPeno7cAGPGB1CZL7N7tfLp/pP3IEw58KE0sjx0M1FkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nVCRA9TVsSAnZWagAAWwsP/3Uajn30JTjAkrVTFnHG\nt9KyY3wliZ+5HUfRjGjq50h8iDp+7ahIEcBhKLTraCBy21j0snKPBjYeZwuE\n0S1MOmmdfnCbjDmplv8jCpf0txGdsEvUjz9e/5uUjTznCZyJyRHRHdfylR4J\nr4U7oHJTF3qbPd+i+Gm9D+IXvC0pBjsV/mislbTLgR2X80EG/SBazpI1c5L0\nf4bETUIS8G+TCF/vsv7DVnXieECJmn5ofLUvuhJVabkgVwyiWoW7JTYndgTp\nkqifu73mUtie8BjRlJZxBKZav+xonQSSqru4P8wx71oseo9JRhL8G4+JQm2n\nMBP8+BVCcOfyqjtRjSfgwW7TWW1a4M/F00I7ujXD7KWpttMFSWR3h1SmjZcI\npMPwFCx38gwl76RKmV0i3m0nJ6P9LMTGRqYGxD+pw/cx/kFk8UQeFF0GIbog\nTyzwvgUq3H59xQSJ0K7lV4Sed9nkh9IAb/OyJA3PoWqdpE2othpwZnrQ1vbq\nkAAn9YSDRCKSQNSZGc6h8xi5XZqORR9AW97T8dIQbJiV8gSV1EqGbYcTCJzG\nBGfcqsszH2UYv4EXpwP0J6+RA12altncmPxMDOPPu7hLtdsORAkpmi5nNnAO\nDsX0e/aaS821ZIu6H67A2hFSNozH4QMkoAvIabprRfvolah7VhdpOyKMORKj\nhBFA\r\n=+oup\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0-canary.b7bbe7022.0_1609267668301_0.9904499076652753","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/typography","version":"9.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@9.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3299c8362d5b71b8fec1efe83330b9820c71500","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-9.0.0.tgz","fileCount":21,"integrity":"sha512-+zyzGnV73d/RyG681L72hCnhd2fwwS9ErtEa3KESVJxVxKeuaaCpUJVDkOqg1C/e7tNX5n/GiU8KPwRPG2O9Jw==","signatures":[{"sig":"MEQCIBqDB/8X4fNl7/f9Gv4xRpKvkKCICkPKEdj5Ksl6u6gIAiAwr+79o2F6/GO1gW6SY/o1n9hhKXcuzSiZAqKL1RVNhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64duCRA9TVsSAnZWagAAISIQAIzpTYWF0heb/TilEXgx\nNeGPAS0wKcRI5eLq/nHvU/DGZIE9RYYsJCW7sLOnlsc6vqIsU4wtb6sWFvS+\njxTQQpjaBLKFAKxaaMZc7nwzKCEMySQ6iRcjVzeAuM/rOtlOW4NTDy4AQteW\nWW09TG2vbr0ag25Ai61rD/Ht2Uhx/SvTpTsnIgFbfmGJtniFBtKYrYiAUhSn\nU+BYgrYaJt9J1TQLIpzE0r3YbUp8OmJbsRwT1WWT3MmLXqAEzhvgEi5CUkfO\nQTmZ0TonrLsuzpVmMild9a8Lp5IS4q/xvMxlvkHFDDBckszKELFB7SACFa1a\n1qlzbRDCDCiX4pfpC4RkTC7J42dGgMA6xIt5u836IMMbOeruFuoR0qc5TAZ3\npED17GHggKGXnulyMCl840ikE9hs34M3r/o5JOW6ZCBgiNWHOHYJzjSDTCGR\nLxICEUpTqiKHrLGaw5mpzKFX1kg10T6PiFb+Ijh5vExJQBNsHmcGbGAxlzFB\nCFdp3XEC05MbtY4BLBjGIQFMnAl4QSpjsWZth0B8nTHCuvmxNM3gR4abVZm9\npMXutgyDuYvHehjLyBE1MXASpp0bzwfBGSwEGIZWIEboarji/Y6xOmXLsfK1\nlZZrwlwfXGtDthNDGrY05Gn3CEsp14XkK8lHR2DJ2xwtHo4TBlMxBaBqzN66\nKFXb\r\n=g6YL\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_9.0.0_1609271150315_0.9601816827427858","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/typography","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.776c18681.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a78212bf2ff612e30dc0069c940babe93bc51e70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.776c18681.0.tgz","fileCount":22,"integrity":"sha512-hktgB9RuJorVpHHHu4+12vqhjX6JkiUjJZLQGC4bk5B6CMtmxi3GiD4dF9IewdjxPaPyYQxwliRmJS7pkk9LSw==","signatures":[{"sig":"MEYCIQC00vpZkmF8VW5N7Fm8gYRmRDTj0FthEWaNBufieqwnzAIhALXxUrLPOlNczhwFBQvavraExLKrLCphKKs3hGK6fNaF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xdCRA9TVsSAnZWagAAu3wP+gKpo8wkDAu30zjtGI/I\nCX2tTZcpZehWypQYQ5L/FpNUwR2P6+wbITGFh6eS7BRmYS1P9fIGZrglMLeP\nTYcVqZFbSj8rXc0Ke1CqwIZcdAK0ZgJ5klbrbps9rAIQn3ivrH8Hyc4s7OsG\ng/FwwMzMktCETukhkj15PVMvs6ZIyYtG5upiFBDHXWafOjpLUhs0B2KCIAcP\nT7LhaQIWPiQbuixZf4FoVlu4bKvuloZOzJRWATG173mMwrw4YG6+o7c8hC+c\nFXsTaAnsLrGamPKP4sH4b1xLZMMm4937gor8PnymjJXBF6IVf90RbqnsuxCS\nwOeSGuNN1+IEjacIknxiERP73PN5DCLoTKbtdeoxVFw3z5UApJ49pN22P1vR\nKeMYzkp0JEZAgF6UfnhGv6ywQ66T/YiTMcDFGo1os6B69bZA3y1NGDKuqiVc\numkQKBMaP9Vc5SGQUsl78M+lwwssNbtA1VP+Xzwy66sxHkFzYo0mCcsT+9rY\nzYwKFqy8qPTKRBiJznIbUNsKH5kdoHXl+LUFN+RKcEa67xeYk1e8l2FnrrKc\ndJbgtfy5TfXDxoW+vTdtt4pnemsakL81YfNIwBhTOJeK/8D3JPPqnG7XR8FA\nQrQenuJB65LJ6Xebh6IhJnLKBlycPaTIFZoViVxR6SCabyRlrrF3p1w6Oclg\nfDOc\r\n=YwOE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.776c18681.0_1609288797348_0.08253338358102069","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/typography","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.671d72d95.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ab3d06f6f8a2e6c72cb7a540b93f9231f623795","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.671d72d95.0.tgz","fileCount":22,"integrity":"sha512-+25Q4IxcIOFUZXU0/b08uD6PAQdjeAUHWgdcoESBrspR4GRmJr+l1GKf0fzFSwK3enr54PrqbiD8pkljd1/Dkw==","signatures":[{"sig":"MEUCIQDtKA0QCjTu3e1n7ylXGccvu9KsS8nDfx0diMinRMYAGQIgP5+nuDVkz2mkcSs4WCTHGw8wIUUMclXMt1d3sbwmGC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N76CRA9TVsSAnZWagAAzXcP/Ra/fyoLTxuesbOcdin6\n5tdWa8VyHXOezURIh+JZZXayZenyNnboJQ6b/LL3cfH7iTESK0ts5x17o4H/\ntbapxwAuTCDV9b2MGInvOvSdpkgCbuYyYoTsZikaFOorFVbHKLHtdJDf1tDv\nSxdfn+aFRqR7NbzVls3UNSj9uQsMj00081ObSI5pfzefLKB9+hY6Ueb/rgxJ\n0fy9vuS9tyQIi5W3pP2wx/o3t/h0vNzkjzhpPUZOis2pX1i2ynybAfmt36lF\nST1h/6CjofAge4/IkjklbqZwPfC30dq9E+VK1IGnAsHhwdGwtuvJJ2CjDT9C\ntItDI1OpYbjwAc9Qm1NEVnLI2mdtyZc2jU+Zj+5HAMhQd1O0rujCKIFXxOpO\nloyKQFNEib++3r9qdQxzSItz/l6HObuFVRGeOTQFHawY7P0uEc/f8XX4w8br\nCF13chHR+JiAZ4Pc2dl/tjesHgn8ZjfQF4db/EyEUlZsG9GLa1UJ+l95GWgX\n9WKOQFQXrfk6LDb+rBpMjNESj3xLydUQzkbsD5BURvAb7YfYCnxlupZEKcN8\nK8ToPpWktkp7S5gWdGFpeYMg+EvKUFvrr1sf5SLgEgs1LvSz+8oE3YV/BKZX\nusjYCikkrl1+iyf5CdRDMUI9IO13BWvPLwb0K/3kdXMjCaSOWxtrIj1Y1Eog\nCnqc\r\n=E54X\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.671d72d95.0_1609359097663_0.29596814865380017","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/typography","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ad1ea37c8a44de15e4d5dd00324b9a991ea9d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":22,"integrity":"sha512-I6hcMWwciXP2S2a5o+Gq7+o8WRkwHHbdpyqYa3UXKfVUWVJCIHSq7aCrxxKnHIEZ5OrCB4yRiuyXyUZxcud45g==","signatures":[{"sig":"MEUCID6S4Mve0TQ4eBUMFsgt2Q+VVN2OCt08eP5qJ4FVIEBWAiEAurGPgIwk9/QXh+lqYeAxfMdk9NcdjdUoROhWQKLvou0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PUnCRA9TVsSAnZWagAAUOYP/31YuuT9dUXxWLn9fvzp\naR7n0NXd66eG7d8kitzQicvZEXS2lBzeVtcOxiBk6XPcIWFnDA7F+CskPPXd\nKMYHtrR9y7DzxAYf0nznfA3sBx86iAoOpZJae9s+QQ63k7RhoHy50vRkCAay\n9+o5g05s4z5Kke84gxqtY01yvEOA03nLvas6xLPP1GMd1amQmkjKKEhLKlX1\nO8uzOPdZM9dur/Nu9i9efO3HMPeYalQ4IPFnYaAyiw7XMmE4CDx+WWGVwyyK\nPcFXkHzIk8RcufVpUtxgC2luhNF3Z+aU1GYnXBlOHiNztNmgn4xQ25r1xhyF\ndK6RkUFe0sPn7mVy/OX/wK6bj6cosWuATVnRAhK99SHDvHBFyDrPFn/2L4lP\nGcW75XxnajwilGPKZ7d+EZtQR2k0JMkHKW3cIKiPuE8BUtHM0G0AegfghOi+\n1uVYQ95yPDVXxlONPqqk2AYtZMNsT5i8lkU7zFcsK6zD6DP0d4Iynr34qG3X\nsM+Rzs4FaRX8kkT4iiY0WQKNwH+WcDfnheLk9F5/aK68f2SI3g5ds3rwNww6\ntT7s5E4sZsVjQ05Z8vye/eyzfv2BvelhtIK0gEh7+z+hEMNaonmsn7if6XqM\n+v5o+A+2+WTmKqIAYgZrLb+BWVsn4FPipngMGnzUF1PYBYDMnaQ8vvSZxioi\nmwyF\r\n=rbKt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.b4f5a1c9e.0_1609364775121_0.4967990078269311","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/typography","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"173bed23ff71b437b0789ebcf159c86710245748","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.a94bd8deb.0.tgz","fileCount":22,"integrity":"sha512-rV5+/IqBk8Xj2lFNd1AY/Q9gENZyzjFKu+RK+FS5EyyqM6p5HbFnGRU//kcTsy2HktsaBk4LNs4WREVzM1HoFg==","signatures":[{"sig":"MEUCIESalRCHnVlFWZsdsjJwQnBBkcsK0Ko8iC8Jyuw9MMmgAiEA71yDAZN9qb03P31FbtvlAP/JwSwmR8Yz2QpCB4va1cQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlWCRA9TVsSAnZWagAApUIP/j/zvQUZQfk9OUIzlxbJ\nTr74fW5CXwVk4VwZik2DpeNVUGNLOJZ30Vbf2gir6JwdgENc/XgeTvuq+qMt\nsm1SAmpuu7eZLlLUQuh7Upc9LwJMH5jP0SgMWMncBdnPoI1aFuqagnuvu83Q\neC9HcW/3sVI86qr2AAq0Gc6gKI8hCkV2dPgtFun1Cej2JK7Zk/VtV7vxx4Lf\nStQtZ+/3Hr+iGVuvXYvCv13KotLLSX2yFCrFGolrRCQhopzkOsiNzj7nsFo5\njSMUy9mo/GLrCXG74LvDfiwqHA2roeH6hqQGBzJqPEXrw4SGrpHQ7czRxN5P\na7DjTUuOP7SZkKLHIXAxKKPPDejwZUc504/8yjrr2ZzajHZ2mNEe4S/NpLqX\nMwCE790OH5oYoZvGz1akhHjFpxkjJrJE0wY2QFnlH3wt0zyjPLSz2e16zlrx\nQHz5SuIbZlgEBRCOEN7d6YHPHFaa7a3ts4tn8IOe0zcjjkmJkl/62ho/r3kA\nfmJwJa1XCXIX1q8RW4f+coJO+/ieQAd6FOZMe+eoZFpxrd0ULm8Kyxvxhw3T\ntbQ6R2m0MQwDg7DKQzQvBsyVnLqFbC52EdcDha3IbBPDlaRJmhbuxB5ZIEsH\nEvG4fCHvUqePpFXQ5TlgTp4KPvZ69fBSTjb5OziyZ5xJV9GTITdLPwn1QIW1\ndcZs\r\n=RoKR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.a94bd8deb.0_1609365846066_0.692852947619635","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/typography","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.5d128511b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a28091a5c5e21eda3fac4ed4e54ca35828f80e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.5d128511b.0.tgz","fileCount":22,"integrity":"sha512-gtDl/9KVbGFq/UOEpbGy8yslUmHD8yJ1G9cPvo9yx1o9EqemwJr+spPxsn0t61IDULVvOaRmT++HZjVSzuuLiw==","signatures":[{"sig":"MEUCIQCfWEM6YMiBg6/gr5H3y3Nunc0+G8hZeHTUa5gNcjDTDAIgCfESF6+PTM7mGXFw0wITjdhkdZkULNazXWCBOILMFEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqbCRA9TVsSAnZWagAAMkgP/ii5suEM3ewnGWDqWfzZ\n0APzHwBIThIkH09g1gn/8JZAyKktnRdy8n8nsKvu/LcFm2PycVaoqhUosxlf\ntMzJLpPYLBrDmrYsYxf6BY5o9QuHQxbzJoDa/6yzKNFbrcxGpvOBhDqD5Ev7\ng7nRfiOWd8tYqddwlRkD4vU7+1bHjVh0hiCB38AY/XnOnlt7mwRowgnpSdh6\nBj2/j5mAZ38tXYVwZ62TeSqwMP1LQypl+lAU4OEAlxEpel6xBh1+BZO3ej48\ni129zbjplxUmURt6aT28y6ZC+6GHuKY83pVyRl/yJ51UWK/ibZtQxQYiLJEF\nKhiDJ5uDxudHjWffOQpw1gRLvVHQ2gYDcsk2lZxoGQZxRvAeTYhZ5GyNFE7m\nzRaWzgB5qZcUyJ0I76/I8b2rgoZOyDJW3BYavpVxZo8dIvQ4eri9kFLwfS0P\nYcShiT9pakfKt9ivtaEsFsnHXXEohKDeB43bNKAAxzjT73L/aCqRukrhZMc4\n/Ucsi4WbzpcB05JHjAyWn1d04WcNGGlAFcggP56kABdePic84tdP/3hBEHJl\ncKRzw0SVFWclLczDxPgY6Q+zwREMFg91m84NzKnPghfpBOWzZpP+QMoi2XgR\nbSLdUn/RJTanfOgSbVtPz1XrAHzn65zsCwph8aUV80fm+3JJYFqoSCttYQ8K\nxQFx\r\n=K63L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: 16px;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.5d128511b.0_1609366171401_0.8821203812197633","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/typography","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.365c69360.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce84d8acd7f0a506b7bf91376b66fdeac76b6abc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.365c69360.0.tgz","fileCount":22,"integrity":"sha512-bHjFSru5SdThF/6Nhn++iEy7wQOZ6U1WNwxwW2cmQjW8l3aNtqPyfXG7LzbZXpT6K0Gwx0bD+IkHMWz9h/5HqQ==","signatures":[{"sig":"MEYCIQCF8DPPM1TK+K5oKz9jCH24Wh2zh0hTulJcHJNKL6tnTwIhAPdM8IgFyJhkJ153Bl1WNMO3+AMGIlQ4G2pkIaV8LOSc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZSCRA9TVsSAnZWagAAR3YQAJcBlHTQbe4s8K92F+fP\nWhxQ+N3fq9VT1dePP2hKVy9XeFv9uvpuRPy8k4eatlW4KB3C6wUmLI8mq98O\nmHaEGMmwl5nfcjAsXbLIT96b6voCqa/oBTVDsUT1O0CrZUpS+aDKYxh+01Tk\nTIpE6E/qnYSdHGMx+XlNvhEEglAxojsH/wusvQalN23zNhW87qMizEVtdmIP\ng+8S3nbJRKjEToUZ5BNGWWDgGDtwSqKA/rHjLfMIqBirj0XP+eZH7xb3QaIs\nqSIruE8s004qqfM8XuhxIj4RYLsz+xOUYHbMiDIDuX42u4zeBlDunDbo2W/6\n2/9lHa1FSx1yXctb2a++pwC3KMBPgw/CAmq8Y0UpwvMPpwgV/WMNOg1gG+Yq\nN0MlBkc3eWKN05dnAFXz/Katzp5ZNNyEYeSzGQfMbFpB6HI9bdsgPxnZxJJ9\n8yJLVnct/kZITzbnDm1LSYYTpUCCtEAaZcOfWMzvzgxJdDkk4kjy+nQ8Hh5i\nUXy/ULIe+PDx1bYRppCMLhCe0OfvBxbXOmFeafjHSjejFboKmQRiAFDJ4JuR\nPONKLgK2Mih0vhwmYw1dPp0z9ovsawi65VQX5C3dulYY0nY5RxsNhGfNwsPv\nTs+9bMw30bSabe0vrDT9GEgzADPW9159htzFpnvqgDXpVtJYm6kOULlMla8A\n2zc5\r\n=Ccdk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.365c69360.0_1609868882072_0.9249802626809225","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/typography","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.700a8261a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2369362d6bc054da1662b77711409ef62af6d745","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.700a8261a.0.tgz","fileCount":22,"integrity":"sha512-SwG3hPbFyapU73pWMWYr81k47/cCsLGDg3SnK41OQankzwR1GIGyOuKROCPQxiTlnBe0QSY9XPabWP1K0Ag5Gg==","signatures":[{"sig":"MEQCICG/oyFSRrLcn12JEa456jeliWecrqzaztP0QHeeASIJAiBd8MxmVDx1IaGCFaZe56WIElGsIWHSwqKE6WguknotTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNiCRA9TVsSAnZWagAAttQQAKRf6oxgt7Df5nIqZa+O\nsV9kIpPUjtkbRJDvMNOXAqefkt08g3uvaETssMBNk8Eva1+x00PBCgUXSzVQ\n56IIRVPZSlzQda9bBK86BPQZC8jd19s80GKUVIs6QjsvPGNS1odrEiA8zWDQ\ngMXU1UFaPSmCI6IPhY5zQ1fNTEc8aWdY6l5tNleOz1ZFKyRQmifxgHbW8zNe\n3SZ0y/3j11H6FYUMLeVgdn6yor/qEoiXcw9LLGuU5rSkJw5LmnobRRyiN8DG\no7zvXFlMgZSDewmijmJx4hvsOh8LQjIvaSg2cvU+C5NG3JPteYAkmEBzu0Mp\n389RF545RuMDnrra24+ovKyU0tYBkgKYaEWaOsTbWpSEmbbHwcuipphYB6Ob\ngbenWymmi7MuJKSOErkz3t5YckTdmtcO8rU3lPfbJFb7OFjcbkqk3xZegQWS\nhM1XoGWtm69kJrXPOaFnN0t+8aQbv1ro4etnbriRJXgqki6nbht9Uud7dseb\nh2hhPb2K6iNNqa411FYCgjPAbtuvy78x0Wva3r0DSi1XrrHM4wrrM1FrwLSr\n+c3Vpa1BwVRUFYLr+ha2vieblATQnimdnetf4guwH0QDvE4oZDlp0mhgW8BL\nXKTHucLbTLvYL4RIxAqRxwNjyVkZeZVE4WQ6pLQxfN7AT1Fn3960MdP0P1+M\nFcym\r\n=o77Q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.700a8261a.0_1609880417839_0.6491022683705487","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/typography","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.766981c15.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d35e1924176dda715e62634fd659585b7e32fee8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.766981c15.0.tgz","fileCount":22,"integrity":"sha512-fXpK3E0alSnM1A4qbJIqc4DrQQ8/tyK+8b4GhHX82V6aPrlBqNfyuRBAnYjCsiEDnfQjqYQtMQCE/edM6mSD9Q==","signatures":[{"sig":"MEUCIB9Os61RzydBldoSN0YqRly7NqSdOwhhODs1Cl6XkB0eAiEAm2LcjyV5PH5u6aw5vEHxDawDrgBpIeHncs/X/OHdGxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OrCCRA9TVsSAnZWagAAg8QP/1AjXNF52aIKRxAphIJB\nkCArDKQHtaCD7S1tvTnrE+rR1ispC/wOTppGPahqoOnsxCxZaO96Eni1Rz6l\nF1DzOTIuLS1x5RWDQip4vhXmPx6PMv34oMZ9mBFdPwV3z0YOdM5j2nuTbN0B\nFjsuYyJa5r479QcgQGvRsHuG+xlNqJKdKGbClxtNzCyHexATehyqMK/HEeng\nClbMm0U4j4IWYTzQM0uFuLmrEVZga8Ri5TM0EviuPJ3hGb2djKOxu8o6DvGd\nPikMNR9SrN6s7mZ6SIXO1V4r13UMBtsnUNZhtMwQCP2h4F6KEyJZrfJxFNFA\nmt/EnDwUuJUaqTt0gjmDeT6PvkoeKin5JC9YvhRcLAqfiZwKt6jPgEZy3quw\n5V/VOErHjhzOSRmEQZIi/I9knsJqkaOafqCHm++HkFtNSXMy/Orr4XuSLEmM\nbOaBlZ6FqG2w08ULuLNSY+9X4iH8UbDOPKYHCZD31WpDqS7yYiwHAp1BbX/d\nKaB794eh7Qe4CNVoAA6gbvkttO+JxJOLP6fXWO/ZN203s5GraFFbCDQpjkXj\nKdrpfgmFIsjiW+E+JkYeaN/kuk0ALkj8wucHNafpkRZktfN10GtLJcpOiKfl\nAX6yqWfd69/jWrx8j5XB7qmwi3BBUjLkkF+Vu3EvtGK/C25jK8dn3Uhkdlwr\nphFe\r\n=IvED\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.766981c15.0_1609886401557_0.4983827888748269","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/typography","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45dd50ee6956650ba3af9449cae99fcd5f4be685","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.b28c576d9.0.tgz","fileCount":22,"integrity":"sha512-ZtRDalxoX3sfGktyrDjQXRJqIj6FcqF0689uKVi3EXvQNQl5Ojkb3Azrn9CFEp8rI/0TcJstQybAYOCbreT9WQ==","signatures":[{"sig":"MEQCICxFr4qN63+wzgIGNQy+oVhm7yhus2wTZGdR3rzYM1nSAiAjA0xlX0DXai0ETVXouyNGfSmSEogTpCRpPPg8Wl/qnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0NCRA9TVsSAnZWagAA55sP/RDg8WClgikIAtoFZjFk\ntgRKrz9qnHA7wtqrjfGHQaNdFCynH945t4rremlcbK+spRsYS8N7d37xXpUQ\ne8FT/LAqJVWuQ0zID4h03PWeobSzt+rTmaOXqV+rq/bD1H0NZ+eQuvAg043y\nH6rcbgMEx2Qu+JOEqbt82LEZAUEPw+sD1fB5Lo+vePpY7x5MYBhUjKugZNnQ\nkPZFBAizM5IslusFpVyuiviBrGR89UITv2bH/s1ENNdFki3t9o6q1RA6VStt\nktXzNBqXn+8IhFzIMz8upJOEE2nuxNSymLEXDOTi4zrD/kzeCa0s4ERde6JJ\noFM2iXMxZVRNA/jU71u6PtAm2q/IqXmi0iUdRWH6RVaxZXPJHXPN8Rlj4r8o\nJQgOoD8TYF+vi/Q9YGQiFgt9n04TCKZ0Mu8OTksFWpLSXf9WWVvad4xBIyJH\n0mtnkOur3DstznJAQV34sWum0yJP8p/f6bHQbraaL5/kGzw4qOygWvR8b5SI\nhA9huVp21MIBuASrPl6OOgQ90ju5eTMHSTQkAAJO1KRZt67+8sr7qEpMzpeM\nFeVx4o3vQfqpo756FNcpQb7xUVG6K+hlA65qagHOrjaTSm7cbE0wmH1nJ/oM\ndpSBofGojwW5mQn23wuYoRWY16Chi+kGt4xachffrOQ3ae9aLKyIdolzRJvx\nzV3W\r\n=D7eX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.b28c576d9.0_1609886988779_0.6266928700098613","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/typography","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.968735356.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5f27d4cdbf6c4567081a23b43431f733b5e2176","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.968735356.0.tgz","fileCount":22,"integrity":"sha512-31MFHnEyJhnwzLqekn8h9ilhI50KnW2yI6c9DJbLiXhDyT4aa9J19b08sdJdq/qWdS+ELnN2Mudgjp5nafT92w==","signatures":[{"sig":"MEYCIQCPlJA9ZF8DCJlLlNdXpGATXV9cNat+dx1WJSh7/CqJ6gIhAPnFbkpKbIlzQxg7bvpt6bujYJt6SS9VFCxA2on+iYql","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxDCRA9TVsSAnZWagAANw0P/iW7atbWOrqFAo9IRJmz\njh6cu70Ocrk1RRrZMxF8+DuLUiqHy2ZhyZ9nwmSjF6YwzVc+MIpWPeQ/iJqm\nEqTtcRzw/HrlO/g9K67+Ne34wEFuPu+bJxf4NlXJU/AJ2debAiYn6o9bsyLd\n1MS1lyvMSnkVDgCWq//U9rAiQ6gsCJp/D1PDEJdiErck8o7gMek5IwNL3MlM\nHG5cuyjbAEst+aJXaW+yCFhMxTfy5uk+Uu9hnrppHfFp/YzP7eb9KQNcKvsY\npozn6Cg1PrauSu0GOQN26+CUltPG3FtjZhlrQhAJRI33EvxruXYVMhBvDpNP\n9Nbr/C/sWjjgrXU+BLzVnEODNjPrTRPyf8UpAe8fCvSadtSBogQM/weL4OEc\n2Y/u2/I2gFP8M6KQaNzPo6Qz2/4Mf1ZIfVV+q2Fwz/WW92hSTSnLt/GHwxnp\n4AKV3532kCYVOWH6ni0idlqFc7bhWUWKXlJA1xIMo2gRR0+jDtKXRFh/WEIS\nbMZkoTYJutzI0Xkwd6CT6lFCkVD/y867FH26bNgKD+OlZPgzpOmEJbDApWLN\n1L2BDcAuKj/Vx83GUFqib1WIL35Ue0qxCrwpF4AMuXzSj/JkFFvAt8pdSJpo\nbT0VqZrqzowBDGnDgI8P6VOYWl7MZikdaeUl+2HDvXzOdLi2jKOsXR6+RWWY\nxvEN\r\n=qo3Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.968735356.0_1609948227176_0.958906367481682","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/typography","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8695eda2701ff6297d603727b22e1fa9126e8f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.c5e18b020.0.tgz","fileCount":22,"integrity":"sha512-ZHfhBJeAUJe2w0SZjJop5fllXQ58T01ZOkPa9+Kq+90Nj5/JNbbM2D7sDLHxqNqBdrSsVuOg0E7n8GkR1bfQug==","signatures":[{"sig":"MEUCIGHBdRzQ9AEwC0F2Lz7lXd4M7v5z5bO8dkfOO4MWVTpgAiEA5UAxAZZYoXw7laPZ6Ps2bDahgQi2HP2ECBzkIfniO4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hL+CRA9TVsSAnZWagAAC0QP/jAJBF8UZOMTcrNl/gOk\n4YRapxOwDlqyMURJ6gb2dAZmAjGkveYUfqMjLfZJ9hf8CgRgEC44HgjwUR9r\nJ0sbe1VUS6z0HjGJ0lCs6JtI4Zq2AnG90NwtBsNHuh4vKu2zJjwbiYcwGk2q\na6Eazgdk5nQj4vJTYtNvG0Jef2eli/UjClo71NBiB3AdEkmUy4PKsekm0gDN\n1ahjIDIeBayNn8bhPb3NnbmlqT7vfCb2rJrd5yaAkk8KhncPqiFNSIQwB8hr\nl017UtU7IRaeFLh8a12o3Dao+4W/pkmQZJWofV60ar6t03nzwUbXEIvkZFeb\n+CHt7i/6+pJUSyImXWYQqv632bkV/FRDjMRkLSrA5QkDugXH3AfRx4XclzzK\n0ZECsN9ti6bdQv1UH8yAbgC0BtnE+U4wTRgxgTfOl7WC7odtrA2eiNz6wP2u\nJHMjNoHKloIZxbIjek6wCAUKYwlRBX9aeYZ2nztEYv2sIX8ayQ8hdcssQBP0\nrbUQcl9zfNn+R6AZt9P9gT3uSe/1m1EJgwYoFqGIMigIzie0nPEDoRvkRV+0\n/QuV9oQFTSR9wW0texQYhWBU+xLdsOXZavLmuMUhyzRvlbQeVpjvhOg9jxsb\nxqV/ytQSXgKTgMQwQT6IrCscd2K+ws1u4QnLKBhHWRgVrYRwLV0s8pPDRLbO\nj8OB\r\n=b4MM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.c5e18b020.0_1609962237980_0.13996755177062092","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/typography","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"186e51508eb69886a200499656113450a374c387","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.bcff8a66a.0.tgz","fileCount":22,"integrity":"sha512-3pq3G6O4HwO/xUkUXjYHBKXyrTvfa4jrgnJKNGgEfX9ttSJ783XAO3MriAQOaABtEMqZiRxiEjZ8aehugAwjYw==","signatures":[{"sig":"MEUCIQCRArZbIPUB/NE3zSQoZDMBf8DLZ9exmn8QDprFTFgJOAIgf8S4Mp1grOYU7HsOJiJtDO82j2aKBdPhJu8eHUqE1dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzcCRA9TVsSAnZWagAAOasP/1J3iQGa4KnbhuS3DbzN\nmV1jUWbTbzS4O7dvjg6SL0FikiE9atbzfP9g32VCMVW833E0doGS1oUCZPLO\nehCVccCtKg63/HXVgXIW/CZBfxQmBnP7WDAzpE5rLMsPvRygpsgPcNSZdTf7\nLnetzNLZvRyv4LLokZZbMgwwMmoz1jvR/rvB5DIcW7yflvrKEHWRK0/xqWUY\n7Hr/ThQ9c4wUQa2xELL2qeYLfD1fHXzt6KhZARa8Y35k9FnfkP1rUpqErweM\nBkPiyyOlKkhNXdUrK/agNtyJyB6fWv70WL3NyAEGT5VU/WQXuxcmf3kp9qbJ\nSK2rBMtzMchgVH7rD+aW4rGn+KMfDIyHiNahiN2BWpT7HiABdX9+39eUebSR\nvnenPsQQoAzNhvGlzl6O2UG9YVVZYC3qXemS+BLfyLD2lhG1G2XAEsWFz/vo\nIbbqTrbgJImNIUhGaarrHUI989X1edte6LBd3Egmp+9pnmYX6c9tgl63zi5q\nxZl63oqHDo71RAQNikViQ0Y4tSEBibbRE8M1oRu4n5wnrbTkc/IJ4iym1eRB\njt0HuXjALpzaG0+1TYq4+gNyQuC5t1tU56FGw8E12cwTOeEGJQbubvvFVFGV\nCiDAFziNcba1yTDC4dYMM3KjjKuZeGQCob2Qw2Qbo6TtPlGnOXAWo0GTTZ9J\nBEOR\r\n=TPT1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.bcff8a66a.0_1609964763930_0.40394936217165833","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/typography","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd302d773aa9fe7486685b221c5ce27b2b45044c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.79328c9ff.0.tgz","fileCount":22,"integrity":"sha512-OB1ENy8OzXSFiSz/cnqeyodzB/nnTy1XSiKfkNI/TjNECTtDMHmO7iOebT+ICaketQYHAmTfthL5VIoKx6qBEg==","signatures":[{"sig":"MEUCIFfAVZ11S+UXlh7uJgLdkbXoQEL6qNHuNPR0wFOPYeNpAiEAsa2TMyo1eFYY1vd0JUdVLizsPCBsHoL4kzcGNXifTxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMZCRA9TVsSAnZWagAAvRAP/2OGQhadilJTGws+LZ+H\nEnzsZFCmuHJMS77JBQEXN/kVFM4D7BcUIwp+bh7TDCYW63G5h/XT8qzoTsXs\numlfcikAaXqbZQt56dMTNWV4+EQzc29tK7xtmweuaF4WWrkfA/8dyIo4XC8L\nQhD6UvD4NeqWp1gFrsgc7XZmm90Q+3sOOJtq02Tc0usG5XOxka7BUyijVD7w\nS9T/L/bt9yCNokOewuWuZ14BzAf1GLO4tPQtis5chPhDh1t+5qPQBnmmBtt9\nS40aawqmuEREwosby5NM2powCfTwDIVjxrRd2fPPolBP1fO2ulAqYOBuhHrp\nlKpVGHumyuJ0Sa1E+EjDhwtLwYKMdwQcMIsvY8pXv4+ExGNz/Hz3ncCpa6DP\nGMyz5y8hIIcmo4q5MBijNmil70WnNwLtqn1V5p5GFACzpqYk9LixUFXTbGdL\nyu2Avv4rbx6iDu8/8Zh55CtLwYrPVqudAWit+yk5RTNdG5gNPDOR9V5saaKe\n9ElRaCHXKR9RWP7+fnuN/y+vulYmEBFOEdovTkAoCVkzj+bQIgp8iDnJv0Y1\nc/AJ9GUo/4FphtMkdjECOmTIjIJezBRTs6KURaGjE3DJqF1QE6vGNiYC7xFQ\noHf3TNYWCCzOxdKssWUy4GmBZitrQhnoXOm3SL7DaI3Pw4Q78gqf4jrV6+xt\npUE3\r\n=gGWg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.79328c9ff.0_1609986840439_0.6198980692903562","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/typography","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.121e1f303.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"027d7d6dc35847256307a274a8fa6d1b280ba6ff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.121e1f303.0.tgz","fileCount":22,"integrity":"sha512-nkJI4j0WQN0wGIvmhOYFTF2y0WccjO5/ggvdIQIu+gQKFeAYFb01jgC40QS/6dbmlrWlQc4KyHEmAKtn1fSM8w==","signatures":[{"sig":"MEQCIDW+8gS+U49To2fjRVhoSgCQbdEvHKK8dbN57CaEj/3NAiA/TD5kf7JebV+yI6U4VSQSiQDMfYjYlGPNoJJjs/aIfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95cJCRA9TVsSAnZWagAAjIQQAInPTougnCHYEp4c1rhK\nnfJCV8zMOwJ2ZdUNcocploJpCoeWXjpIe3NNTCW4/ARW1NfzDiGMtJ8Gt8Pz\nuaFqHN+ozGkBA5p1ePG/RRRxfheB8Y1RUBxGmYNitIXVImLMUFk8oC/ZaNUU\n8gHrVHMDqSwqTMpCS+4lsSXDbIQNmK7eKTGjTTQ2XMNlnGmbyxoLlZHwSanu\n4xO0BEQG0K4L9abGNowtnucn/LDnF1jzqv24caH9oKyUV3YF0ZZZB+b3Nu3n\niitlhm4pnkFos8YFiU8Jvy9D0H2a/nMOWMz3wJc35+DMQgCstqaSA2tC2+C0\n9gBLX/doNWBevJXYDhx9NXgOOXcZfnWhPd4+h0y5yeq5Lb3CkCyhZ4yV6cMe\nijpb2IvefJAOewvNeOu9IKQEMwOtMJnzd6OIQ2BsBLd7LoLJWeDxFO4xYAkr\nCZvO2ITnAznPMKlhujO6SqfAhZSpA2JlimqJWBjV94vKK34sHxBbwE47AVIu\nit3fq0r8mBIHQP6xUR2sfMIxPvEOLoFp2IyOljy3cVAHz+lllg+NweV1s1Bm\n7BWp0oPnaOiE4i+UKGRsSetHgXiRlj7AGU75AZJJDQNRgBdzUKvIfK4gXmxJ\nOS9RVO70pzkWWNThXCJW4rMzcqtmRvgR58stGKyF2wS7czwWlXdBeHU5fStX\nwRB7\r\n=LfpZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.121e1f303.0_1610061576651_0.9172007939158966","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/typography","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.abdd10065.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d5461888cfea0ba22c56f3112ddfb35797a4515","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.abdd10065.0.tgz","fileCount":22,"integrity":"sha512-dKGVQ2G9o8+QIKEzBuJkXL1m4Kj/EoyqPms1tF0z2XhWucnjILv+Zrs8tpdkEWAI61xHx3FVYvxYNSOAoAwAHA==","signatures":[{"sig":"MEUCIEKttQF4H9VTuK7JM14Qe733tApJ5Ty1a3FrigAo+8iMAiEA1jRL0GkKpBNtwxzPDjnSPPSTWJcY4tCHe0e9nui8yfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JuUCRA9TVsSAnZWagAAI0wP/jzmDSLGYk6DeEW8sv54\nixxYosR7bu4kGM1IepMENZV9sEPJo1gDhLvCfvzb6uAbXAzGX9k4KZsspMin\nmT1CfDOv6kc8F4MsX735Id0LWORG3JpN/HyfHYjHfGMuiUnFTkBu/DZzQYgz\ncpSe+SWAZDnq5dTkoPl9NdOozl8ntzlvMlTHTbsqxlWlj9G5eP2HPpnRSjxT\nbORgW7tKKsMYbO4wKQ/mhvw+ANt1py6Y4srfM27PjfHqzv4FNcP5OypgD3Jh\n+lCPaZIsMMjZEu+fMAuQgLsShtT4iXcPmu7V9z3On5GhZ5/Ca4v3Ubx1PH+u\niNrXE8Oa4SAWWrmD3YxEJiwAosDBZNntfZNA+B3CNuM+rKpuy9z28RuVavqn\ncfuqUK4ellFB+aBP5bnacmvY0B19nzdIzO+BmVtoacY95Mw1klYwN4OWsz9E\nNM8Hje2nBmDSp5HMYKygbY3WObE3FLbRWXxRlO8EH2LR9BAObxW5l0SakLsf\nCXU5F9yieJn1zysX6H+IYYLgDeQimavrjaB6CqhyO87RFuC6IFxzlWHj6BAU\n3C2l9WDUEaB938wJUALIWS18Cs7aZrk6A9ibggTQlpayxfiWJ6Kfyxu2XaU8\nrPUeW0E2J7WXhy0juNdR1+dF3qfoSfjJaQMh0l+eHeaJ5Yp7cDjKfxxerDHT\nKpRF\r\n=ZKjs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.abdd10065.0_1610128276032_0.5401631975016938","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/typography","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.089de519c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d069468282cae16e0124f104bf0d25043fe471ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.089de519c.0.tgz","fileCount":22,"integrity":"sha512-Lh91gTRWODSQAFS6+66d1CaopsZAP0wiIUgbd+d6r9ISWKVanyR+gs/xzbKVTVkGmf00taUwvAd4e6mSFqSCdg==","signatures":[{"sig":"MEYCIQCmca21JJaE0q9bF3hRVlwC9baeeiUEWmUTmOOFPPFGAgIhAMHb81fB+wL7N+x06kI5b1dlYQ/+D+Za2p5m5q50e4fu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NqsCRA9TVsSAnZWagAANYkP/22gV1FsFXGQM8UAjAy6\nrIwHpKVbsfsJWH9bKQvrfae93sMivjmFewron1tbz1JNQrwsKGPujaAosNzs\nyiSFxvS0xT5eLnvctffTJApbEGOGJZso1DYhl8AmKO2alzBD1V88qX+hnrmo\nFSR6DSQoyTF0Et9OJJgWXnYpSu9GvbRAwXmzEIlJR3QIXx7tFQwLQH4KHQAt\nrWDu40j00ySdltglGG5NOw8GY1wkwcqVryeveMiO9+1B0yrc+Wy3MZW+zRFb\nZCFuWdM5J7SKY8WXGO1Undl2umvfQaBb0Vn3H3aW0UHX+/4YxRZ6u38aKYCo\naJpi1vYAn4epkesFDX5toNTG6yyC3aab8yol25F23FXDhKi/2R8rm965ULU/\nt78FDkHbz58BqxpLVsnzFE/GAuNM+spTJpiBh+TQRN2m0LgwOExTRMNmb6fE\nTA9+T9YObl8ksyUmFoQKy2nziuR1MH4WffnV64uazIVel4kWD3AWtdO0WUYe\nErh4Le3p7AfITISFQ+zRfCyXteIksSubJxgrxuEcNwpSgSVFkccYky6+nqVH\nmycyw2IWLdx0g0tRuIvKaLqGkB9sqmpuq9uvKxFsv4YCSx/dGggZ6GoOIXCG\naOqHM2PBfBZh8eAAaRzzbiXLCitFU854NIBcYaLGHBg/VU9NmpljHEJebO54\ntAdk\r\n=w52u\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.089de519c.0_1610144428401_0.14694243173156107","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/typography","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.163119837.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3da6b99380a462cd3bfae3578ea46a6d87efb8f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.163119837.0.tgz","fileCount":22,"integrity":"sha512-HzS5frY1rm7Hr2Clu2vjaMu7hvJWPec8iVTz+L56iRrNbWQVI7x84jamGGRpYTywGagjCv9SuttrkadQr5AHJw==","signatures":[{"sig":"MEYCIQDmDLcDkdoGtf4wYVPZyQ1PmZjY/wU3HpUtNL7y0tYgLAIhANI/hm21AHx5299Smuro9PGB6+N59YhFGTi2xiZNRyPL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6BCRA9TVsSAnZWagAAAYMP/iyxvdsLZpA77ZdvUrl7\n5JGfMUlYlIcRnVw8X9aPe2fXesSR61j+18+Hs1uvCX9os5UX6RznCebo7W4d\ntzyc2coHqry5zExA0TaNbFfukOof4ncAmbxw9XM79HnQ8ED5tDv2IcO7RzyZ\nz1gJE8Q29AVv5q1m5U/obX+w9SJYHJDW6F9Te85sIgFaevRHFbEwS20jeOnd\nsmf2uXiDP5Q5eHm9I57EhTTSwf4OdG7ZRhJuY5A6WekqT5qHnC2BqvTzTQQP\n68TXByTtyloj/vCI0Et4Wiw8NtQrk0mf9TlcCqi3mbdlBXQloMPbFhkxwwsj\nm41B3b4a1KKYZWg7cK5XG9ql3ok3K+JMdVx8k5o2kfl5yoa9RWS8z8lGAptQ\nMV+NijgGVvB5sR6DWEwROdR2GDZm97AmGmacsZsVfCCOSln6WzWcyxdDalp/\n22qLvDRd0iq5eYvlXmPrHa8pRPI0MKsT8sNnNds+mIykQPZHJusMTSZCS49k\nABz9o8cbX+1OV9698HhdaBlXJwC6sU7QGyvtYe9DVXLc6aTP+xQoB5XHzd2h\n3XzEthsyPlm+leKn9sGRgWYx16HpjdNTAr1ya6+Ccbi5cSvJQOrvqefxux1f\nQGCaaTrquGkvC0BlB2os3p46HIeEhXbU5/igolLJKaoZfTaBK/9wBIp5n5vl\n25h3\r\n=xCu5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.163119837.0_1610149505429_0.40177037205751387","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/typography","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e522bf3ec08f922f8b2a71aa0b035d2c526a4fe8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":22,"integrity":"sha512-HVZa8kfPN4Yr9wGZfUWRP+BiZRHvuRGdDFhUQtfecbBHWYWg63N9K6LntE/mwzJ5imEAb41JKuDX0yh0vtwKQA==","signatures":[{"sig":"MEYCIQCM29/R54+TkQjsePTJKzOWAraRnja1lOnJLB49SLQtgAIhALBjjhGMtNhp8ZVczjyvMh8yVQ98+Zxj91HsAdhXpDQY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HujCRA9TVsSAnZWagAAF0YP/28+4upAffdLfUhxXW6s\nRiEQyW+aNeeDF83cWM0mcuRE5tOgB8WOrPtQ8bb05c8uzUel0RHHFm9wZb+M\ndatPbMjqAvwkkLN/3D0VXcrBDG0ueoMkjeYh+Q/jnPwpYM3bWuCs2yA2pzIa\n7qseBN18di+hWoTqpIGhWPnbEw+HJMMCzm7tdzhHn/aDxOhHWj0YhLawOXR7\ny/15C6ck9qhbJMMBvyU4X3VNCD84LorPvO98Um6kFxpmEdKhkqyyGWm4fnjQ\nJrIuX8J5dnNLMhKLB28CySVcArTdq8EwmuoBRzcd3/hBsRM3GRwLLlTLo3tR\noyfZ1h47NNKDcu7S8f/W0iakHrD74yqd/DsTmk64LKlS1ziK0+rTfleVwUYw\njqMA4CkwBDejCcqtyJrugCuUYX+2ucGULdp1IXHV308RBdqWh608Li6q5YOt\ncl/CccCGma7HhmhwSH+1W8IWdZ8HZwD3SQbUPE46thBmKSStlziq+kvTQh2Q\njLMRZ/gQGtWhSeCPwR0flcH+RzNSb+H/Gckass3TMK2SwASA2g0BuYMDwu7N\nhs22F1Te3t2oRpq9eYHUiED92bDUV37VjebEOGwcL/D1BZHEmb3NG+kUQnCn\niH84i/G9zub1YggKPg0p4HNXOyUVCiYtdLnfX94p5dIsRfkPqEN/jguusvNL\n/mfY\r\n=JRse\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.b8a1a58e4.0_1610382243087_0.1734649423396717","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/typography","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.7584267ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fff5285c0b028bb114077498f674c987cc03be6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.7584267ff.0.tgz","fileCount":22,"integrity":"sha512-GlHgkFDHnZynMO6bxCGvHk0P5u6UYRoz80v7uC0EtMNdTJrotD7SnHTegLpnD960YJWgfP1maoaRC/h2OkdkZA==","signatures":[{"sig":"MEQCIBL0Yf5ycTwjMnuCcUl46Rw/Tug5pw903kT7E4nALeqtAiBJ8MfO92mCIrNjEeLZsJxnmRnwUIPbYVg48z+9O46OHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PdjCRA9TVsSAnZWagAAhZMP/0frn1/BzQRy4/NtzTIr\nF27fMcBhjuG0ZFPi5ZL2ewyz6v7nJSIsOTer4M6r/AzijqmZlamEUfVflsKb\nxnyPkY/slR3BvDFThKxozBbyv80jCgh6XeMp1kSPPpuLB/p6iq+suhb0LQm9\nSC0hZjyYY2ew07fV2Tc4FoJg/y4t1YzdYwYPH1r0Ru4b4adTwfYdQiIm6aag\ngEFwN7HVO09TmxdG/NwvFk5dnHwNldaqpbbCzfirRTXNsTh4X+17sBNWh7u3\nfdOHnNfKtpKgB95efCEiz7wLiVzkcppDW3dTBFjoGbhShQ0SNz9Y5uBK9IU8\npqzicTrOtGbVaZqWkn2teCsIMx8Tg0sF7KHRo5BfZMYWGZ0s77OiJn+nvASa\nctcqwd/i6n2GZA6+pSIgUTmv+eQeIwM7G85ENh9pCC0eRgVls0qDCLoGJ7+X\nTkcWrcV7M1rpXxAQzT62tpOt3Q4G/xX86/nKi6jKxDS6TrszlIZ2eejMe2ko\nXWkRd/weO82uEMMD+XYEB54uZHVGA912Z9u5klh9qB1cggVGDvOjJN2soXEI\nrN6LuT2HPaYLQteZye/WFUCLOX8KcVsg5EpVQCzZtymDdyhMrceZhUBgDvw5\nIJGG9an03fHVPyr7HKX8VJdWe2Sfi4m+IKz6QZOT7LI6Cu/rjugjdcB3arRq\nyQRA\r\n=R8he\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.7584267ff.0_1610413923018_0.03984076776338297","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/typography","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8d6f5236503763d852adabe2ea5d1b6ee68ddef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.251ac04c0.0.tgz","fileCount":22,"integrity":"sha512-zcg8Ypoiqan9De9bMlsbzTTEqoQvJ7Rxw0A9DYaj9thjGtFLVodFNbF5Ns/GVD8U3+te6BP5Kkk1wFgc4ymt8Q==","signatures":[{"sig":"MEQCICuvtNN63woL/DXeNRa1hWYrVImjxc6ZfKlioPEskBKyAiBDY1BuVZ7UmggRgZ9uyB8eJLTvLQmMa8nnkY1IKGjsUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6NCRA9TVsSAnZWagAA3GEP/RBe6XGjRe5YSEIOjeou\noCIvZ5lZFTkZrTZx5o6VwhEI4RAEIeSFs4Gzl2SjW9zIg0qskbrAqAjWFFmr\nymp4biQPqo5wuiOi/YYAxI3ZPtc7CklzKf1u1Q2cns7fmt6URAjzLOEQLaJg\naa5JKaZY9qFWiChTfJObWxRPIICjDHfeClQmqDM1/IpM6UI8O6FvCnw5cjru\nzSP9BBrXYZ8t3ERiS/2PPakVsHQBUfiAy3FyqTN6D1m9SyfwHqa8pfjxBDvy\nn9YKFS4c1PTqBHUcEnh3smYbvodOf/SQ5txzbS8RtM9eN3E+X/Z0nb3Tsy57\nwNRVDfZcLZfzDnO2Dbsxic2sRVCxGeeXTBXa9nJkAeNLr3ZA/KLsGbsOHCtY\nXEyXOc8zyAcci2HwnRRGH0aLteL5Drigw3BffF9buChOUZxoDp6hP5BETfkj\n0L42Knje1eZgJ6/jxgPFrwitd+W4WsuPloImiHziK4OF+Vov8mHPzshyXCMl\nBJeNnogH21vFXVsBK6anbdSbAs+/1pwuvtLpYO0Z6c8laTtpavtZNy2ZvSpe\nj96N6ztG/Yximg2jUMDrL2K9HPtHwc27GwIafEQpjNuqbmliwTxihV0viTpS\nCGo54PL/JWnV40oafaSAhB5fJ9jl9zypS7m7bvgEXLXpr8YzeUlQpYJqUF5b\nqM0C\r\n=pJCo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.251ac04c0.0_1610481293078_0.4048176726777635","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/typography","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.772cc1068.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09a3328e36f8f466cf02c26fb4400473417f112f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.772cc1068.0.tgz","fileCount":22,"integrity":"sha512-Pu7OvphO3hFV5E08MO6f4BD5Z4glmx+WO463/NeSHFxsZ0Hpvm2Nwk3u7qU6hnbPSfQcnVhbbXV1eiZgCDHCGw==","signatures":[{"sig":"MEYCIQDsKzjWc2pw1SWgLnMc5O2L0OYmHy2ayuU9OlIY41kNrgIhAMPPI68PuuPuzI79wqBAScX3A4h8rtruCHpAFxqd2uH2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4sVCRA9TVsSAnZWagAAPLkP/1XG91rMsCeggbj4F4XM\nzxc9WGY3Z0qkVtOOb4WlBPMbQdCC3O8SbUFqooYeDsUoipw6s0uNGV6llZeu\n3l/eq+CpMJDiaAsXJFwyk46c1Xlck/Xiha7j0wqcwxPQ8ih2j4YB7z319+da\npXUo0nmJVARU9MhuPvIgv3qYh3yyaT4CizAOT9aB039jYiIm9Nu1pjKpGfGC\nadKN28bsDPR+MavlNOS+3R6BgGX0nZB1/DimvutlGYrIWnpWAWey+46JnQrr\nPxKAE8p3QqpmI2/1e1WiYGHXZT56l9gI5IEBAejZDK2At7v5tCVXAojmh5sL\ncCkzn2NzJ50s9HzVzgdKjDlJIAQ+7+55yrAMetI/vBVg1zA4vPhSUXZsFQn5\nVIb9/juXRTEE7Qoad7S7bQuMGItXpQffejdhfcRe6nYWiZu3bLlOtbDWjHh3\nLB2SrW+JCwtdMlhd0CIAkvUu3imwWAB/KwVAoscsuA8KK9yC1M4cyPi7tdNa\nLqYZWaRSHXcWadqdqG7UarLy8AAoBmUGIqjae6QZ+wfVx0g5D1iiCfdRncjs\nTLNc/G2NHh3zFYqttHEf9f7UrxopOZiVHP6sK2kd/rCkmD8jc0kZRN6kQZEC\n+I+ltBrItDOJszFLJmyVCx1xDMGfX0s1I8PMbrD5uvZFFFhW1TYOfeQ66ES9\nwN1x\r\n=9//t\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.772cc1068.0_1610582804519_0.312425064264489","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/typography","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9594e65023bb35782d192b54f31f4a936cfa5b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.fe13dd130.0.tgz","fileCount":22,"integrity":"sha512-MkfnGBF/Z4JDe4/yEBh1HVjenhiU60fzbG8Sr7DAO1OVLpu/ggP94Be140S5YkxEt5ZeZH+yeXFHN7BKiwHhIQ==","signatures":[{"sig":"MEYCIQD/yseHDWPd5cq7wfYJhnVKAtFfjk0U11vqOKM298eoNgIhAM75UDp9YJ0k3zFALtqueOHSZxY+jLSCQDq+lHogn0b9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5nxCRA9TVsSAnZWagAA+VwP/02HFJql2GfJ1ZbcFvC7\n8QxiWCP3aBiQAWW1YREWGxga8WkO77LwwOImwZswXJU99wuNZKJ5glj8yDfM\nB6pXAAKh5vdz0HOdbihfAaSbTfec8UcUyogYbI2SsHaqcQCVxnYJ6GhzA5H8\n0XhpyFWL5cBsELFPcKkpl70Z53b4qFsMym7HJnRQx9JTpWO4qDVKr7ORn52X\ni6E5NIy+8p2fBIBtp+pn16vtASMtUjnv7Tx20gcESvVpedxFqTIYbN/EqXkN\nEUdjkGeeDBm1x7TnQVENfLTSG9qkLmsxDiS2PkR62LxeSNZ/GPIZ7eeO1ESY\n4dazDbiy9nv26eTuJq+zLRZgiyAQeI2K7QAoyxwwYp+A/I0YAWWqMVH56ZHK\n5oDlV6f85G13Du4C2waM6BUF5NVaZURhQxgKJPrk2emJsxZ8CuZ8/SZ1lmjJ\nwqY4yaZViFjYFeslVDEM++N465ENnY/siGUns1UOaKrW89CRYyIsW3jhXH99\n8mG3jGAoT28D1/OK1QO47fJh+q/4qDmYw+M7W6175+7eO1nejTIfKEOg6lHR\n9SNmEjw6kh8Vv4AL4gcHOaNHOA2XMqOddj1gecAhhSy8tzXUTQRQsNFDtCPp\nAVuo699lqge2D09XEJfIk7jSSQlkKJi/JRqVXTGpV21MF3dBQ+vaidzx9cD/\nhpZO\r\n=7h3l\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.fe13dd130.0_1610586608967_0.755591869829028","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/typography","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c436c2c89c0a79585ec76a3ba0bf6b7b8c7c24a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.c7c5da28f.0.tgz","fileCount":22,"integrity":"sha512-J9ARcbR5O8ukdrbGbzJ0p5HywzYWRmy+VhQbXdYGQunMD4kIwBP+aNn5nDrTKHSlS/XwSJ1TOLzPYCDVZzb8VQ==","signatures":[{"sig":"MEUCIH6dF00O9DoszcYs+XfuD89qAm1x/0N1qPds6Ke/dd66AiEApL01Enul9N26cB5QMnAG7KwkzrTOrh0OdVJN7Yetk7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/597CRA9TVsSAnZWagAACZsP/ipC1dP2b5K/xypdWSWm\ncUXCJbpmpeLz5q2yg5SuqXeCI8NPlESltS/15yb9DBxwalndeKcgcMbx8qFV\nvpOSyxwwsMqZbXBvI46dZ7ElnVsakbP2C41ppXKHL/5hltvpnv0bg+Tj+J7/\n5Pcb8mPDzTZH5NmbU0lMPbWxTVoLFC8fz+wS4Lb8t1QyRf6VOC3AKCG+vB4X\nMKxJsOW2qG7mrlKbxhhBMknizR4nmWUhCPs3WZYs74/k8sL3PBk6EpJ2REEr\nfamIl8E0bbsdpdWSVXs+ogaMzYX87HLGh0e2iltuBBYkyX3LrkXc5taGfdhA\n+MLioqr0BF7PyHFor+6HJ/3dLRhF7e0V9mjume2iMEGnsOno4/ku3+gDZT+L\nkIrKUERiI1yqPRs8dzNuKM35ua6rwq8fk1bGaFjWWJx0APkFqvHKyU302wvz\n6FKsc7NBasP/VDAPSoaNU8STXCPVf6DDn29BeplIHe1FbiOuxWdnyUwACaev\nOjBe1SbVvgVNTyzivmwkDcxQVQCDWwffhuB3Z1Jk0p8Cw6KU3HzpJ+bIEEa1\n6bWJDO4dS3ntEuxfhiyIk6KQNY1c6yyqoX0dLCqgEHkod5VKIzpuvK8ka0Yu\ncaS5e7qjE/DRaFFpd193TbYy0dWjnc8KP6Hb6G9/f8LVHOrj02se6bM8kI8h\nKXIq\r\n=Rp7f\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.c7c5da28f.0_1610588026578_0.6749695798722328","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/typography","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2e9b3baa9ce75daa33fa43973b2b55f990667cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.b2faa116a.0.tgz","fileCount":22,"integrity":"sha512-GcOFGT/nh4uNm6RpoKoVY50aqZKRdwVUAF6PQyLVg+WKZ3NIEWMx90u1V9B8paxdVPh6XGszblHAQH4KDlDjsA==","signatures":[{"sig":"MEUCIBDM660zzqWmN1/s5eBhsV8mGg41905l4QgD8A8bQ3cdAiEAjtAwt5NXihm/fPptP9uo3qwI6ZxksQteUTZSf2+32ZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJbCRA9TVsSAnZWagAA03kP/AwPydIe/huAsh235aA5\nWXj5QzB91L1vfNcHrjKvuNY9LZzkvcu2+p/goOPn1cvf3YS7yNU6iJZ7UPop\nuGLRlcxioTuTlkt88XpKGcDotuzhODXRSuANMnP7hJ3nCgmfmjZ65z5FVQMi\nEuyBemVkMSjCoCubtjCyCjjqgw5iY+yQHzTDz+bZuFbWyzunpHA+F794NA7E\n4W7stlqq19X2lGASyp26okgAP3NdePFVcuy+j1bSxaxRZXHyUI3hXPOkOLY2\nJcTz95sD8gp8Ru6SmPtnIwROptQ33lfZNW27s6uJ62/4sYsIIGjR8p4sP1d7\ngRRGeC7xzvDN5HdGzHW2oXUEYqy8ay8vHXIhcnKRqD8aDsz2fsPiJK+bkYab\nu6310QIuhGcVx+unm9vodODBERfwH6acwt46Gpl3tfWH1oLDcB2qtl5Wkh/T\nBqHcRKy+9oMIgZ51N1ccul73cWV9oTlASSbSH14zvdZFu6xDQi59fwHySrW2\nWYVUO6AJKwXk4yemD9Wg2KaS/PNgEjLcCE6V0TSAWO/3Wi8W5tuKZ4ncTsdP\nPXtJYMf7XYWc+YnB6H4EtsN3Zq+30hrhzCJ+e5inQo/OF6wEh1iHctozf03H\ndmQcsqg5znZHYmwi8ZgdUUIZhu87V1U+Q+AtJmaRu2Ws4fAa1rFFTcpJvS3/\nD3fz\r\n=fSGA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.b2faa116a.0_1611084378610_0.22922577395541732","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/typography","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"991acf42165da249bef391ce34f90cb6d960e431","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":22,"integrity":"sha512-mvEFKpwnR56dpi6xDAa4t7qHk/nigpwJnRZ+Sf9VA/HnxbPxnkaWXk2YSF2yteDJWFbLbLYv3bqTdGmPoEMEiA==","signatures":[{"sig":"MEQCIBHdlPoLvyUExbmeJ5HqPS/+gM4nJQOc+5GaOqeJIXdnAiBrvb2siLff9mUUNRhi5X+sW65rFnHILC6hPki7ufNS/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2LwCRA9TVsSAnZWagAASdMP/0mZK8TIkKiLhd0BNjpn\nxBpcLGVDdd7qzn/Wh9TSoV2GoSePq6blrBW0X4qB/cltJ1p0UrTjNRpF0bI2\nllU4ASOrw5H5L+cyrsDNkg7t9RsdNf9ikPflfgGdFp4Rakt/VtiUMG/Dl1i/\nezRIcgIxQM0huGPWvmyVGowjcY4HxsoZD3v0OB2MUD2Qs1+q8+iwFG8UjcoC\nR38FQSosjwot0U67SJ5xxSDkDcVVIKAH5hoUijo+DagbOJgNbcCThb4CPqLQ\nXfTuRxpqsu4jF5sKxIXip73qW9kJkYZR+IiSJBlSwRfZjFGkqPj9Jy4jGymj\n/DyC3l2MmJzHwYn/QmUzGfXWpaMb4ehB9jcREiR9rrC1erLpAh8EKTtq/RpM\nI+ysbvfxCqjQEgraJbZwtutfVouBivNN5AINsLMfoRCVqtKOW2MBDUt65JEc\nNJ4SUoz5c0tYeWyKgtU/VmpR7wnzS8z6EcIWuFwinMXbkRiHa/FMow8uPSPb\nDtQ+ipJitKyOPbtZtv/OrqIV3NpwDFhNKFSmVig+RHRIkfdj/+6T+HVSlsCL\nqvndmeRjP00kM/zSRrmVSpR8wA1k5xvr8Xj8yE0cV+YscYdi3MS8ZzeH9FLn\nFARPGzCgMiculCcHB4M7dXXdJEGzM3vKj2K+JaOU6FLayPGjIy7iyDeBcDwx\nZbjW\r\n=mqD1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.0c95c9f7b.0_1611096815490_0.9141495336514236","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/typography","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.5268222c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c98fe72302ea29c0367e9af9a657d75d251e7a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.5268222c4.0.tgz","fileCount":22,"integrity":"sha512-dlL1IWZ+uG5dPvrOVsiVe+KkRYLBR+DDZv+SL9Sfbl8ib8lBTe25vyfeyEahwAxzljmva3TLDfCuEg6X7pGSUg==","signatures":[{"sig":"MEQCIDdszLmgmz7vQQsa0xsd7H1lz3DuAJur/VubbrAzvhEoAiA/tft88/SuyKLV4gp/CB14JDhH3aOaUgHfEwbFdeLZLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIaCRA9TVsSAnZWagAAkjEP/0/nfnV5wqmXOp/bh0pq\nl8nXlmVIseN4Fd3Tnb+Whj8XOD9DKYR33NvncwHIvyjWfukSPBaWCqMSRaKK\n1kGC/95BwaicXt6XVKyBaJVrOdiDMrxABMZ2iUUjTj4Jda0MZj/m/KFs6qGu\nI3hUf3Sf82azNWfFMUKeBB9WT3EYOPSgYXjbBue0voRjWtiZQcK7lPzZ3jdi\nDR5onKZ1lvXJlkmN16LVs5PU4bRr2WE9eQTKa86M7crfYVrK5rgFbDUBPXXu\ngsaagcKbOMX27y1g6EbNTVB+VKTAOcYUdbAomOFiSS7lxERz5vwwnt9Mfn/b\n0x8U0GQUT0LIk//bCBusLkOlPSecARWZEjhjk7DPsd033dvRIEFJWvyVwhf6\nZ32edVQLPSkNRiMVNhbihqfgSA/DIK9r7FnUZCj/LzkYDwqvMKMs6ZPzIU9r\njqbg5xnZbZtV+RdripEGuosw0HzaRwGOviS3bfSAodFliFOqulqHJDBN6HXE\n8STUM8Nv0BhhE5UJnUV91M8WUe0OcMbAiLw5AzQE6lMARRaVvCOLzTnrRJxZ\nDQ8FR1Xmra4revaOEA3t7LeAeR/+qaHPDPN2hN4pIFLZero/K6e+RSFwAGK5\nsBnEJ5VRl8a9z3yzUlmBrTjIIMcoSvPd8WZXE9394tdeAWG6JAUtBEoexM6L\niE99\r\n=oMk1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.5268222c4.0_1611170330202_0.3006619250809939","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/typography","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cd8d8593975c0174115f03107ba6d14614d43c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.2ed2d829b.0.tgz","fileCount":22,"integrity":"sha512-6v3ZEd+47bDhZlxNb9uZZw9b9UH9seuDKfqBzm9HUSae2J2vlV1We7Y7rhxjIA8qoOBh1OOg8o3QO1Mztyj71A==","signatures":[{"sig":"MEUCIQDnsD7S7wjZHF5Edc7qwwQA8dSZ750N4HHftiOcq98mywIgB9/qPT2ERSrpowxn0pGYgruaN2U6pIjPkjhvTAp3x14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLfCCRA9TVsSAnZWagAA/3IP/iAJ9DuYeM2bDQmskIjY\naWgRZJt0kKBokmEiq9MdhyICRALu/FbooOq/zST/S/CJfhlZ2+qpgLkNVlmx\nZuelxdOYepFjbbs2W0agqrAv8Gf+N2oV83Jj657OiMxq7IHbdK+n9sJ9yHCK\n9uEF2wwYFVOF48WrN1TGPiE3Z7AqAQTU8XYmtLSUIXlT+mofYuR9cxHJyL3U\nrP1KIxkxEv2rU6e3he9KKe+dlNjRNy0+Ykleve+2POpkRMPuNLHuz+vsN1To\n1ZsAX/d70ENawfKm3rv1yTQah8BHdfR7CSPqr1O2ObKpO83s06ExubCuDfgp\nDyKRBfDl33W1tH7ZrtBkBZ8qhgK6NV9aFMFcGWv1/YQu/8MyPAh3j9vilUkC\nYqZEqM1q6auOQnNkA0O8mGB/c9/hm5xI7jBgijIhYFmUDbDldaADggsSgLTG\n0nZqvg62kkfYyTpKpSyYZEtPw9qG9Z6h37j9yB5ptCun/VhSNy71sRSxU/0s\nsTdlWTrleuqPHrEjZWJ8eqGaRGAzFFMwGZnmh9F5cR8JPMkxemRIDjxUCjQO\nMsfh8IyZR3R1dY/Q5pLp47df3jrvBtYAZFW0w24ROib4kYWeUchm/HutNp3U\nw+hst9rg3y8ENgmAZGdwCt/gKytCyWowRMXVJKAV3TLiG7VGx3zXSX9u75To\nfUDh\r\n=ws80\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.2ed2d829b.0_1611184065863_0.9604562755867383","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/typography","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b39d96087432af9ead352e29aae1b988148863ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.df00c2b30.0.tgz","fileCount":22,"integrity":"sha512-DCS7m0t+Rz7LxwuvCWiNTAjGzoFxxNXAb6pRgkVov4bjPRbPh0qwuJMGjgDWfi65dFxaUgBMXm+dyDDiUqCyXw==","signatures":[{"sig":"MEQCIAyIUzxWiXUrvPXu4w7ifxXyxeEl0Kp6qqCOz+vWiMG7AiAweWH9mSpV6u25DgF/vEWnhsbAsWTj0jCLOyovrXTJCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdv8CRA9TVsSAnZWagAAwi4P/13Oonky7EGuV9H533fR\n/2rnWtzC6qnnTyKbHpQcIqC1j9hhWswUTbQRzeYCjVxRkFRin6iOSaNkWZTT\nwQFxCxXDWc+1IOgSr/HQHG2/wL80hXtnGZp9ffduJlRzAZP7LUZtQbhEbHmv\n3noa2DbdjmflfNpG0wXr9N+WxpoQTHTF3/N2trh33dBWw0Dg1QwJpDbjHcRx\ntM3/JZzCpcn8KJhru6Q3zvGmhZ6V7eqc1MY9OlvJ93qUTBF4l63uNhmzlaBJ\nUCsI/DTzXKWkddsqVs6PELKXc3o6uqVtYdCJblvGaDa+MuYtMvPnTXErZXOx\nkIXGk78v6srOFrpgHrRFoOsQ76WqecofsHySFyvZVddbuxnu9quOXxU4gzrl\naatxIpwiLGi119XW/eWFQpQs4wQZaxZgvYNmLMESGCfFpYafHFVOeLTnJRRK\noldKdlVx+yg62glwdZ9BoWHVPD19kjZXPF25W3SfdrAai2F9G/ics5yU0oTh\n+6JMJCqGs1Y69F1OK9Cz1WOPjjw/VrW3xlAtxPT5VJp1keM3ifVufn+A4sRu\nZxSMvhpBuKeAuNxEKrUSKcCv5BxYs2OT8BoKwnzYHhmXr8JV6l1hOqaGgN8U\nRa+ke9JSfduLks2Njy6v0ITVF89YPGuu5IJXf3zfZSk9I+Egv760yzB0G/77\notMv\r\n=+JG3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.df00c2b30.0_1611258875931_0.5390705602973567","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/typography","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64922131ce6d1ebcf80ebedae83ccf7345cae07c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.fd61b0476.0.tgz","fileCount":22,"integrity":"sha512-EIu0Jq7q4UT2Ab0Ay9xbYCtwuea4o5c90yh3NLaUyMwUJAg0eP10fdHmr1Dpg7XsDBXZe+bJoOl0QSmUIVutlQ==","signatures":[{"sig":"MEUCIFXhAkmk4Oxp9ytR07yWr3HSxE6QdBKzqnJc9TwCAV1pAiEAz22OfyZkaHMQM2/+rfoH45yti1UI9uqyW3PXLluSimI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd9wCRA9TVsSAnZWagAAysgP/i4F9FR6CX0zXxY8odI5\nS4DxZa7VedKgNfjl7pZH8Wo1qQGuVurXXJi6N108I2gC6YB8/mCND+ItetX6\n8ASvESMFn+af69mYMTFZWObSGHgs+RS8AKiq3FuBu8wQB41SxR2RldpT+KNi\nWrOchGf+4KbZjxi7g9o3DIW6xSoKykXcSkbQsPBnIN3yI44IKFpNI3d1om2M\n+0cKaWrsQmtgOgjhZJIVk6TU11HJ6cRq0VHhPiz+kRpulvz0iaqnFeA9ZOAT\n3EjfAEWBpP5UxUp9MCMnGNsyTuOcBPDeopAfhXPwddwGXJ1fF712cnuLxsXS\n7SGFC5znUhtxwbQboiPSbCHKuO/ln5nFI9CRKbT2hU/Z/cMDzhn17EK272fE\nw6Dwq9qxUHSr754UftdC+AMfgFbTae7leDpSjjtGlF9Pu01dWk/dkEr7lWHX\noyUpvdh0xJii3jFtQ3rctKQUom33/FfX4DCUbjw13BZ/u/Z0rM7ye1BSZAvS\nADqqFVcplJBjrHfYeYeuyTrHDQ/HS2qjLJ4C7ii4tDfCMD6OoNiv7pFZgvZE\nrJcEMJEI+PXyGbgm90GlheDpPONIFWwlw4FlXzEp3xkRp0OuuERMbzYk4nYa\nbQz+nZKO9I9NupAntKkAE4q9x+3PcX6E3ZQCTf1sLSbrga950YLVf9RIzSRe\nHccL\r\n=qXwN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.fd61b0476.0_1611259760086_0.21355180211188207","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/typography","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8cfa4599e61fb7cd9b5e95233203ded94b7e74d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.3fb3a0265.0.tgz","fileCount":22,"integrity":"sha512-3SOPN4Nvks8z1x3L3mINkc1A090TouFWDCgew8U6Iw30q1RkvaGYkdpVxaFaZKk9O07ifbO9nF7DQ0JzpiK1gA==","signatures":[{"sig":"MEQCIFdxjXxN4O+MJBPBg+Jyi0ty5DlpEBpcb1/GCvtvCs7tAiAqlcZ7T2qtD35kPK2yVA6WpC3Is2NBzs887WJjGIoeEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChaMCRA9TVsSAnZWagAAQB4P/0J4trp2wAfF3FPCbGF0\nbBz8tLb7OmPu5Cn30h3S0RxxzVACeJlPYUa4xPT2on/WOMbvS9yNQ3dRJCSI\n3+T2ljPGu1Dw8oxjUgTBKq7D8xf2JR0yWdON7+/Va25yy/TCzf+m/XmLyrHI\nhSe10QwzyEgaPjNft1162skRzP/nRrE3eM5hExiLkY3vVv1OEK1mSpq/K3BZ\nuw87KO317Z1wajijThlmrMSZ68xLeBYEOc6BX/CzaNmtB27/ksvyy0E6NVEY\nEhYKK/p2qvd/VfKBVpyb3r3IfEE1CGFW8oJovE4GzpFMzWvxAe5Cu5GZi/dd\nokvjGyDKu4uVLPYybTwNfdRR8KigL2OM2tv55GCLRh3hootN8onsf4P3eMTP\ntzppsUT5eiWNEOulAhCVb1eVI7s8vFrtTz8RzaWz2z0CuRzWFz5z6KrQHM1n\nzKs/RTt35P1XctmXz+cAKQR3DpTd1YkWPtuUuiNBOkghA/Lc3dVipQF7e9h5\nRyTdP7HaPy4ZnqbsaL+bIecy96vQInLuqzDfLbGMKl7PjF4vw5Ht25v3DTsC\ns2+l6bVU7QOrTy2A4DodxiEyNUWYGYqm/zL/qAB06OSZoL0vXqwtcd657I1Q\nTfCFSOBNcNfNC5Ke47MN6DOrgtLqTIcouuTv0k7wcKhjkSjNdiDqVm18RujH\nX5QN\r\n=ZuzN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.3fb3a0265.0_1611273867488_0.1488060852183124","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/typography","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.07deaec27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131a9a218377363736aaee0f88e3e5878290e85e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.07deaec27.0.tgz","fileCount":22,"integrity":"sha512-a+XyyPd9ctBrO5pOSJ2CPLRBL0MQyUhPwx8yUEzH9avlqgbS0+ojD1jH+c2uysHEG6F1Yg5anrDEpBVU3alFSg==","signatures":[{"sig":"MEQCIAxuQWedQGT68HzM/WYwctvBESdW6WJu4827kirpHbC/AiAOkT8jbvENegDlx0PhVycvt1ucIYjWm3GXAWnftWoyRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOjCRA9TVsSAnZWagAAydAQAIWnRW3JrTVxzvaEDY4D\n3zmyH58HrYZVRTH4Hz38pCPnx5h35Wu8h9VdvtLElqYlzwLCbrmIUxHl+jlw\n6FS/CdjnCp7QBRA5VKwYWXyU//WaNO8y4hF/uWJTFTtoXlnH2HddE/d5yHvW\nPnf4Ot7ZZc54gkpeNCdCrTBnBISbieC08OTGikrPXenrbl9PUJ4PfX5sqS4h\nk/lpKurmb3gFke1bcgXKeMbkL+kXGGMNvcai/8eyZMcIayqR+rpouK8Drj2y\nJvyisRt7RMEVPWVsM80s49fNf55N+QlajlNNM+14CUVofZewUaunb6UDGyie\nd2/VZ6RdgYvSKePLTy39w59U6r2M4N6zJ1tBOkj73XATsZsqVCZ6vRF+C1gZ\nbxD0UMJfKGM9VGL5/sa34cd6JI38t03LGiJIevF6Ch1Q4Tuk6WNBg5SmZKAI\n8YKWYXk4YoOn8OAWTR3uXbUpPe1VnKS+hLdCF282logIW/L3pLVta37EncVP\n7fnxUivlxCvtdTzkz/2thGyc8SoYl43hUokOhZfCseoyqoJZEa359cQVnUGc\nSuHVOJgvRhLqGHxu0og0GLuzmaxq7OvxWlu1VSibefKzDVPOSZ7kuIzqYTE9\nYtTQRzhqFFfIpLfEmhZ+UYF1OjUh6iWjENs7++xQkRcyR4LvtTPZsKjvyZVk\nOEpb\r\n=nlwl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.07deaec27.0_1611334563112_0.9096650729258908","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/typography","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb672aba2419b6ca6dd2e6c0f1b1f73a4936c557","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.d2959b16c.0.tgz","fileCount":22,"integrity":"sha512-Ka7SrYNROzO8v/Jk9iWVuLnCMt8MTkVXZPbaqPG0fdyRwm9Pv2NiROiEAw4nYgDksXrbcc74vrJ5aGWHT/ZUZw==","signatures":[{"sig":"MEUCIApHMxvJrRPJ760BxCM9CPqTyi4Go402DVXxw+oZhveqAiEAhMXZqXH7/Z45mecXY4hRgj4Fq078I57c8G5LYi1HSOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7NCRA9TVsSAnZWagAA8cUP/AiM/1H4EzhqfGqco+dE\nLY+lajMLZBN7T805llp2D+f9uKjeRIxn85a6xnhclC17la+fz0zkeEKjPuKj\nLiT3sV538sKijtgG53O039Cb9pGABB5RCjPc2+HCrFfjGUVu5qvNXv31AT+G\nGdNyaBrwk2d4xYv/iYkHZYskJELc6yK0LYmAZD3D786Yq0Wi97XouhOsaHT9\nDUKM4iA1UnMiebiLx0HDDX1kxisuUybwaHkwT5V7IXK6+yO4ptStGEx5VABe\n/yUy7RzAxyVIn8xCZHJUuPQeNNPRb9fTwYPQe1ItKA/ZQvI+oKvnYzedfmh5\nsYrasxhWt2oEN5j0FYmSHt2VezPWTzA0x2ZX5fM3eR7MntL1jAyIah26KRCc\nDAC8Gr8g0qvWBHmfyZvxtlLsQ8ft8w9dyvd4hPCo6wdSME4mt8MdGHlc8mQ6\nalFlBmAhkEp0VXMqvUHw9IMb+IyKx63kEORuf+I1sWPgLqPYai21ItpuBAsr\n3AMcYebWK1BHs7USffKzmAfAsOh0D71DuxBTtIhAaR41W0DIraalRHI1TSTn\ncScS1weizrY4B+sYmet20leWKw66ggj4BxbzcUWd2rhrJZa8uNSqFtgn8p6r\nz3eMtxdXX3IzN27YdEzxAJKlZOwpZryW2uu1PX8LIaA2TKo06wLtYN1nUASK\nOiAO\r\n=qA80\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.d2959b16c.0_1611341516769_0.10692499739649741","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/typography","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ac260d03a484e19f9e76432db16250ebfb929ba","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":22,"integrity":"sha512-sSPRru3dZXXTRiYxceKnvorLLgJphQZd6MdiOjl0IzjOIQZXri8MHpPWwAw88C8ev15erc64lqPIlhmCQoYSPw==","signatures":[{"sig":"MEUCIGWV/dTWn4d1dJzrC9iB4dRCzK+c3ragOtIFrI+LBoNIAiEAxdLnecbLnP8z3gkI74z/psF5eLB7PxTxpfCp/5QN7Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1bgCRA9TVsSAnZWagAAF9cP/ii0tqmM3qQrkEcdjqoo\nFNYPp/CZmapGIpR/95CD8Mqv/RpHrYW4J6XMBVgHLQq6NvNUOHwcjmh0a/cB\nGBOD2I2qEGsq0pGgujByQAMjWWjG4N4k/gd8qWF8cH71KhAk4kAvGmmVTYYd\nhno10V0nTwthKT8ASpu6cc5URsG1hg6v12V7OuYCBxx5ojten1bIgRxUkGg/\nC5+bTPkJGqB7OerJDUCLxaqOu5PkJbZzYSMqjylj9sJPIoiHjk4Yd0nkiC0q\nzdTBvEqJNIYHR5oAaRvpiPEMI1U75cYGDk9PRZTO/V0JX4p3KTNjLHul3o9A\nJadw9B9EQNwAR/2EPUlKSfn+zGM4pppTP3wqIcwMznorZFrnzMfhLPrf6rFy\nekM1szL9KqFUMGH+tPWIZ9v16GPpXbYyYilQ8u7LY26dfclcz/uE74btd6zW\nfLQdzZNVASFJsbCCYXrxhr/EeOLqn+fbyNO5Bjad0myEe4XErH787ohSIEAn\n493UvndnU24yxn4HzEO+4G5qqs6uDXUuu8gHHwS80KXem9z3N1bEreqYCLj5\nzU5XCp7ZQvlUfDdW6ETx6mMdxKGZ0oeIps7WrJy0odnwg8yfTENjfDhItxUx\nq41/Ft1HIOySzXSCNv9j0zET3trNwxszsRv3iT1UNooNeB1FZhLmSjiObaVT\nDpu1\r\n=6oV+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.75f3bfe7c.0_1611355872185_0.27349077202015026","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/typography","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bc7f73b275d786996201def51c0b8135e634fcc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":22,"integrity":"sha512-ZotbmkwictGFwY2AlPqzptBkcMD6zpcKwnZyGuC0/W8UN5n45Sf1Ja5i4v6PsmDB5ptyuV+CW5AY3R73GVhrsw==","signatures":[{"sig":"MEYCIQDaSTLz9ys166sJTSiISRKN6WJ9p6raqTDaCNogNf+qfgIhAOXsmZYK+tz+xSOysoluaucp09k78PjgCi0MOXL/o6vM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ExCRA9TVsSAnZWagAAHeQP+wUl/8HZaLI0MBy89HMn\n+EX3lta26dYDWjHz6oVw57f+iqsE6pmOpSeyyOXWJD0lrfcfBiS0rKvCHcT2\nQAsWGFjD41YOkLSBwYV4rxpWjrV6AR6sZBG8JSEP/pn53+hQW+hoXOeEGi8M\nc6ybhszsRQXRG9v94OVq7PuwOBTVxNaXmMZDpY3qg7uCUFoQhrNUNikBD0nl\nMdbQq/8UCpO3aV1s3EisbMZSQleFHzvIEKE3UERaA7wQo4rlvha3g4ZW+5qE\nHw8LRMaDMwcuQzeN6gVNMlxBCqVnhdcEP/gaNxXCnwYhhDYnC2xcTe68VOQq\nSP47ZBISppEQXl13KrbVz6fHa9uUBJTk+91HcYX4o3qla3FEaEWVhrRBNbh3\nsqKWisnOfKfkuQkxMqh/v7q/rg/XVwI+KV3vsXjS9cDjabm/pf+tMTmlR4UB\n9RMvMfjU+zGG6jQYVT1L5HUqaPzNUu9nMW3QOgTXbanAA1wP0UEAsIBNPjSm\nrOjt6GRPU5K70q9pgHqrv9VeE8GwQL75kaC3CCmRiph+Br2ukv6O/MoI9SPz\ntFOyOb1WlUdCt17HJNv3cPzEnjfHK3465cLrNnFki6L8/IKfz1eyVGVD49JH\nqSuEurHt1grOAdpDVmVlATt5+/fpXMDqYjzGSi7Dxiz03eurZYrZcH4AJ7lr\n2pg1\r\n=u27t\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.b9adb7a0f.0_1611358512927_0.7533206097259941","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/typography","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b33eb891256e9e989018fcc048ad43e74fa34d72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.d29ec2862.0.tgz","fileCount":22,"integrity":"sha512-7ZQFh59EkV4DrnFW+f9fJg1yxJ84u8c+zuwnkVOm4cIH6vA8RLjq3NCQIvoi2rDiFAirDKgYiMx9Q8lNTVWi5Q==","signatures":[{"sig":"MEQCIB7KWZto4SWWUkya2338suYUwKaBSlPR9abQD+w5y0AmAiBB4155iBlmUGD1ASJcIfSnafz+ajb8dpYH93w3N98McQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCACRA9TVsSAnZWagAAfTMP/RNME9Z2AFDyaWAMnECS\nZ/WM5IXH9n1emc5ipPUDBAFDe6TdF1XbU6cCAdu87uDzUlOgR+NP6FFgunVB\nhjv19MenliaaZvjAUWyD+wbTqxZ1kdXKwZ0vW3TU0Q14TA859z2a1R4aF3wQ\nLieigsf1/dcjYJs4eWWIlkeDPfH8Mc0Ep2+eNsRE6++2Ui+WxiDEWy6wPyZf\nGh5xQBpMq1IRP8kT+6kig5R8Nmp69soQJL32WJyVBSLSF3MN+Kv7dz/K9yO3\ndaAyB1uO0oa6TJBrUE6tF/mXFmlX9RBF72hl/4q1/lBADe6J+ZVp99zPdZZ0\ncUXyTMTKDeaai7RoIVGJPC09JrcaKSy/nauc05Y1fsEQgLRMPl8De9IIS2O8\nBrDIkLJQwBHvc8Qpp4VvnN7+VrEfpoEBruk1YGm4lRe3bHrwgrQhWDhUfGfa\nU5iLzjpoT1JgYJ//XNXVgzQiIp0yCL4pbcnIavaEiNOfmuyHURsQeCCrh4Tk\nRnQ4ccJeUKQZBF68PO/zJythlcvUD9dw5yNlhfK+PNklTxRoB9GtNZefudXn\n6XGNgjlpVpexOEZKOfHl2dH4EL6M+43vs/4Z24nNIQ/AH2Ki5VVK+kZf2kEJ\n2CS8evxDfL5rV9r5I54ENIr1dKMNnAE1Qjim6eHZVkAKoqDdg6QMGO5qM2CW\nxz6o\r\n=NQ55\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.d29ec2862.0_1611591808342_0.28919903804504443","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/typography","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.96be07c68.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e0bec5dac9817717b34e8ab56b4b1a938598c0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.96be07c68.0.tgz","fileCount":22,"integrity":"sha512-zgAkpY8UWWu2PhEa7irizYgNRkpNtsD1A21kyQLsOZ/3DVOIyqgFGHkoiPHbwFADKav72dPQv4QT5ktNPU8eFw==","signatures":[{"sig":"MEQCIEcE54BUn44o8VswNvH0Mlon/nn4lOVCr37fu8Tcpt3IAiAUbYKjGoBv1lqvAN69ezF745d0MgVEgGSVjrMlnPxk8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13GCRA9TVsSAnZWagAA3ksP/i1kGNhJv/iDw0x4G/eH\nw4za/cZzk9cTYjD91eYaUDF1C4qIzw28T4uvt04i6ulz4so53Y5I4goPCKWA\nKfzHQmRpOQorT9vovGR/zzGgd4UDrF/NADxHicnHVi/OOrgv/rPEAq4dlJqh\nLWsVsgISzO59WOKH6r6AgFC/npgLD8ZZYxgXbspTiuolbvfaSLd8gGhH6hms\ntNNAmZBTEWSsEPTRild79Dz8uXhgaC7yU0ud/u6khPJm8Pkfx46NQfMtfx7Q\n3PwfhW9z1amEMHRXQYUZXdnthbKcW6Mv59dKtCCe5dc0VCfZly5fUbP8GmHW\nIvJwDJ0ZHrF56LXONC1bvNUkzqp+mwWPonIEDIJcpMSF9DLvH5cP81vBz3Mx\nMTSANVJJDtWWuHOOdO8CF+fUgIANFKEZ9P5sBi2r/wNDSYL0Eic4y1KfcEfz\nrcw1Ou0FZcWL89yfwJ2VGxYFQznGDIH8ahk8UNJdr54rMfCIQiRhhPfLEXoQ\nlerrrY0zxwZ3DUAWwcQeqyO4vtA8sgXv0BMbGgxH0Yu+CoikPhBtqc0ueXIW\n0fdThaJrMrTrE2v2QT/nqNzdhO9JI2vwPLjM2jMdaJqUG7NfFesOXzuHlZk1\nP6JRps8AoSXA/74GN3OcdHYbNR+gEmizH+SqRh6+bSWvoU8sWQQk97LMuiJJ\nlhYi\r\n=0yVP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.96be07c68.0_1611619781730_0.04744214480605513","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/typography","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.e383944e9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a66bba03e4c472ef2f4e0324433aaec004d1c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.e383944e9.0.tgz","fileCount":22,"integrity":"sha512-x7dTc0keG9JENUFdcjGVYCZNwJXziYAlu7D6t7fcjWEYPh2ctPHRQ244sb0je4ixGB7n7P4w8AVvRngE8yLxbA==","signatures":[{"sig":"MEUCIFcxG4CUQ8s5+s9G/jR55f8B1kLGg9bFn9lxQGgGlzp3AiEAzeeC6+2XkrOnxA/p82x5JuqI3hv5hzqp3uVPYmXw9DE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QKCRA9TVsSAnZWagAA4E8QAJQnl+4wp+7CUsvbV+44\nKz5h/qpdBe7z6Xi4qYyJyvVBSxt/sgtBhEqgKRWPqJw8AXYbfT3e73vwW31Y\nQx/IYI8zHa66fJDeGRhqAkKTK3I8wdqj/vYM0WaeNcYC5PUk5sSQPC/d4Lbg\nQBkNl6sznc1z1mNeVlsyQD3CJ24iYPcqaRIbD/TDnQB6x72kuF2yQmL3B14O\nXoQe7j6AHafD4q+06cTA2OFX2203yj/s3PT2pqxG3OBUnzGDpUi3h864GB7/\nQkvMN32Ad5WL5N0Sxyd7DXvZ5090Q5pI4yFMYbEDRzMM1xC4kuNAeVYgd/4m\nBlHtkmvDXa6duUC+jAhcc8BtmqRapY6bUAXzFsYvc5KQmXRo2SdqHRlaZ8GZ\nPReSU0uHY6bxbPwHflM7bpSFuRdYhtMNxY+zRjk/HWDenh4iaUTEqxZpz38c\ndu0KpcMnPKWmkFLuIqwSUjMWZ9vloR6wn/zB2bceS07iu3aghpUqvTldyioV\n+bCZFMut8FhAQeJfO8AJBcXNuDYRLcR+DVstJtVENSjaelPc+13eJQ09EfWB\niUUwoCBqMEPFlamLpFqMRucfaYvpfyvnqkuozxdZM/KVSG8TsVW9GLdrObjU\n5lzyAhsN1iV8NwBfNy2Vo6W7gaPYzg22ENuK2obLoLabWaGeH7xP4of1wPuj\nsy+3\r\n=3XcJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.e383944e9.0_1611625481985_0.4391384155703877","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/typography","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.623af861e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512385950ad0fe93526937d5c5f2e1a302341515","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.623af861e.0.tgz","fileCount":22,"integrity":"sha512-psE4UyFywVE4WN+HZtT48BxwXOUo3uVVsIfDcJcpLnl5q3DmQoCdN+KxMH7NsIc7SqTBMEJtFxcKnGdBTDhkUw==","signatures":[{"sig":"MEUCIH03n8S3pcJLJq4OsBIBnQ1tnbhADF7H7CzjVmoG9krbAiEAm4CZQqIh47aHQeuR4GsqFJpNApBL8fp4BEZCliaXGd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5A5CRA9TVsSAnZWagAAQ6EP/1EAGvywC1IX/RuT4ckU\na4I6bt8u1Mso/Pf2auRZuMqftOiPmvWJsjV4SqJmkl1PBZfFgw3CFG3cgspb\nLlBSfXFcGNPD2DZw0FSFVyQCVPcRjIqUGb5IP9rpAgqngwJ85iD8tM1EpT1u\nLK7fIIniP0uCuz9Dxt2U8Tm3bh90vKhM0aFy7xfprvzNrwV/n7DBRenCdogO\n59WHiFf7ETIWS+4SJ5WAW1pbY7AyAfuUR+chdorqc9vmFNlsdsosIGsgoIP5\npY2xMHFVFJCuZNgj6p7wxroJ259pr2OzEda4/W8I5i+0XBHBhKXstqCvQUlP\nyK9PDlnkNtPPFGYxhDeiEgGnK8chbNbqnO7aLCtvhJGKwtdpz1HsFqzhDOhV\nNkdCZc6n+As4vxx6eUxEoQS/PJuU3SjlKWrfIPeMYJ4Fs5KqKauX2zslwMAl\n0ONRR4PNk7uJi7CU703+mKYORyXaIAgOLbbVSYkjvhzdoStv1ljvAokNkDgK\nZ5uWE/P/FlKAMqHzBP0inSZb4uHD2p78OAHd+qzeNogXSLEeMxfDn+a8MYnX\nDXIqqo7SK0lmzHDRqne+Xh3PdMKkIaFOkt/Bwt7XYWrdUTYYXQFxmKKx/eAc\nqBDjTwisb7mVU368KxcK7Pff58QsQ9r5XpbSvXoNlBA6tG03KlJ8PI3EBP23\n+RxR\r\n=EUil\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.623af861e.0_1611632697357_0.9211980442374832","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/typography","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d2bbcb7f03e75f3d028628b770b72c9b01eaff5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.6863fd43a.0.tgz","fileCount":22,"integrity":"sha512-yxG6Wr91X9l7uLGfk6nXvIrrFZqaNTnBPLYP7dwH9f/+6QCoXmYoFUfbsb3uITNlCjlk0JnTDG/5HfDICSF16Q==","signatures":[{"sig":"MEUCIC8+q+L0HtTuOYaOYLsEd+ZPByMWiXxomzitkzrwbwTjAiEAtU5N8fKGEFSSgDgNVT+0Ik96F/zEtFSMZ0GsBa7nRog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIpnCRA9TVsSAnZWagAAy3UP/3+iTrjxjNvZQ9H+wVgs\n0TAveqsUp6TXZV9csZNhTjzhGnEdMzvd0HKztopdW9P86ACkhPQKfVAL5a5Y\nWjuaWA07z2TlL0yyLIJDzAoqf9W4GxddsprFrYwtJudUxiEcP7uc4PU8+cK3\nzik9BcYm1dreHjxmYsbiHdufI12LC9pRHzIDhG3qbSQ+29hBqub4nC3jLX2r\ng7De/F1XxxVs4Ey+evx48q2eAryXOFqWmbECmqgEwQTpChtE1RyWYbcKoSR5\nJ0zMG56AiVgKeIvu0Cy9n/nLLdDQsBs9F9UzCMyr/2vH9KehSKIbYUAz8ag1\n/7mZ906C9BovBfYK2ruTq3PdM/4mo8JJ7bnyx7H5dxH3Yti+JeU/f0e6hHJ2\nah51J2fPjDFTfL0sCo6ZhNBOmoP+C/eiU5+xgT2rs/fnf8M+wzniegEYp5FI\n7dFa2ml0ykuqN20yWvBQfZjkfEvcz3l3C/qZzD3/Of5rW1g4+H9S8VmP3oaC\ns8PTvpjVOPrwCAyZJk+dbqMR1PoxIZs5sytGrWhS4Kbx/Unb+o5x1S8qIzVE\nsZr30arAa6sEjt8hCwdFsbv24xMhNnQXnmUP2sQIS1u5Ub2icYoezeNX/aML\nghKm/6iI2pFMNBaPQBxEBjypfnyDF2Jtf/r3ri7DwY/MboQ5+6pxgy8xl6Pm\nbCS/\r\n=a6/f\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.6863fd43a.0_1611696742752_0.6103974109773846","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/typography","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45e6a18a7b7536d75794351ff2879ad6f2c6ce3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.ea55b87ca.0.tgz","fileCount":22,"integrity":"sha512-jUqfwDXtLD7ScDlTSWXMa/gNgurrXeU8u1IUGQPrqrnAJsRTfc+2X9KfNN1p81C42XpwOJ2vC9GZos95MjVP0g==","signatures":[{"sig":"MEQCIBSqkiDEuts900JkHhxPbRxcnmu8SX6N0XtXSV17aekuAiAvkxck6/ghj6wucMLco7qqPHu/4HaeOLOL+XTNpjC0wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKmgCRA9TVsSAnZWagAAU8sP/i89GUFEi96zjxRZgQDH\nEa+AR3uPQt434F58tzisW8raKuINWaP89MDhQFlgaV2Qi1mtWeUZ5aUpAZHV\nCGSq0r2WPxZK5LWbinU+Oo85Bovrg4AAA5h7UBB/AEklm+JnBt5mR08KF+xW\nm8HjODqEj+vMzgl+3R5zJLDoK5UB9/CZKlPtmcCqTMsqFoULfUVKmnInmJ6e\n9k6cmONtOYs/5gseYYiLaCCJB80AEbJ4KlWWfFVOqeDnIqLy4XidVXRb7oKa\nWaUYzNIQ7b4r1H6+K8liwYZY3/PQ5KX9wj3u9yPKf8RtWdODHSozglmFkJcJ\ntrP4X1h4GcFGHbBCdAY8DFh8jJeyAAZxkl07IXnHTDxqfU+So4l0gSgl2chq\nr+KjFkEsesGsQSCBSGKAY7/Mlif5bDvlJcDAYmZOAmhvQl9DoQSzNcbVnsv8\nWPvQfuSIQzIDSsF7DtpbQ0+KiYIt/QQYzCrb1VqhVVXRo3ja6anuIgSvNaNv\ndZGvtkyw/0J97aOt/THhL/rCDu++CBhEwU13Kqw2tr6LZNvX+efd4hp32Jmo\n6rEXHcomPEbhAALLFiPgWT68bma2m0KhM8dLNpbICqD9m+gsCzC57wGqdyV/\nBk3o5sNjPBI0B8/trzh+gb0uYXtzJsEJZeLvtHutH1o0RH20pHFo2rgwJP2h\nA8bT\r\n=eWrQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.ea55b87ca.0_1611704735655_0.838275621158207","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/typography","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87a5bf500951014caf4b058d29f2e6b8f2af5ec5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.e902ff05f.0.tgz","fileCount":22,"integrity":"sha512-AERu1SIiAIDPF4KU0RsyLjDxbGnhaSy6lmtf7KJZnsvhHzsRK10rG4HYYpNr5SDzSsOvRIrepUjbSpL25ACdLg==","signatures":[{"sig":"MEYCIQDlBUInLx251Q5rXH1NlMcnNHw7d7eImb9FdxjoaUH/lwIhANBszvZTgJBhFGhKu+U6lnPWZzLMg3O/wwVGuD92999T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3fCRA9TVsSAnZWagAAPhEP/RlocAYH6bNOglTrDwPO\nYo7B2NPp/d3LpTEC5qx3SVaIUniJ2YTogxbK0qxn1lO07yH6laaUVxcvRQyb\nXKIgE5WE7goZM/J+Cicck2eaWW3xXbN+hV5cPydZCg+erPalPsKNY8uBlXIA\nboFfj9iz7cqLyi5jYb9b/QGWxWu9gxLvrc8icu4R9mjOT9phJWbP3HQq5FbV\nwWrGBNC66q430oA+nSOM0KFP0y8EXSRj3+hXcWEducyqvQ1YHuLJBqKydHgY\nAzqeTN1UCAP+7etC4tT1zKDaBwYjUWghBo69J+NCnbRB2riV3fUlvlpcwk8V\nEh5ZtZg3hQZ1BGRUFRpXioiHch3hlpw2NqFRoLY6TyPMH22PiET99qXueoiE\n/jYpM1gunlIatro5DpMH5jNi3znANMlOu0Lg2NtgEuFKdtVI2+U/vgGBUaYk\nwrEgIiOQRs3nNxF6qx5/Aw/ZgRiChIASTUK7xsPJRjQbuiYiFPDAFNlASPFF\nXDicmXT1Q9f33Pec3g/jm+BjUS9SXm6BrSgV5ykxm2it0LQvXxsTIEgE+OHf\nO2qN5k0+usOiM+WFoLdnNqIqfatIjbg6JrUm2/9eKtTTf9BqxIrMR8eBbRlk\nm+5EavtChEi+wPJUOPW/e1Zy+3HOFnXz3ot2DTOubHkThYTftm6PU9kQhi/I\nRcOb\r\n=almo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.e902ff05f.0_1611705822931_0.36652210078748393","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/typography","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f3727f3c3f328f6eb30542428604f6e37cdf4d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.2c9fc538a.0.tgz","fileCount":22,"integrity":"sha512-M8HrT8jrsHAQjnRoQ4XFqgwIVjQa+B8+V8p2ukxlJHZ3UJCNuQdgfjACHl9ui35GQMAsbweDXjlKNkNAtHWFHw==","signatures":[{"sig":"MEYCIQCXYF3UZ6/0I0JZEyXEsevamWGnhYCHpm3RP2y/KJXoagIhAK2HpCdgFbHbz5d9v0yWlDEdndnQN/pka1TnpGKkABhK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNOCRA9TVsSAnZWagAALkUQAIsEc1nQtA3w+YGGzHts\nDdr14c4S1kd27480p/QeHSJ1NHO/1BmKOLCr8SOGk56uvB/hmVl36SpXRG+v\n0JZbWRZFn1hFbSX/Adoy+YToNjGvwsubEyGBy256GhRJBRei+aMuaR22w5TQ\nW3n9WnlpdXUS1cn/pugx4nqKq7+2rqwbJq69k4sZWKlaiYW8o4Pr5R64JqT/\n5oGg0IbG10wfo1TeOOuBw0FmcVPY/oQwq0Caf1Z+THbn0AoiIKGTYQ11hQ7R\ni29qzgegNqNZuI+jb3JLCOnvRBd8sWs9oFS7b1Tcv2zO3KBguPB56U/hHU4s\nIsB/2L8meovqxlphSWKVv1fcRhsLLy4hJJgdSEPxPBFDaPJHXYp9RiVuAzpg\nO9JAjsK0sq5ZFCVqgyK7XfV8oBjP4e83wGURZ+bivSXV0RX24HgV9lxncRqG\nKXNNuTdzN2eE0efmNXF+XYEAm//Ti9wMHz15eqYjCyHyOhwJVEVQU0qHY539\nmfwPnqqDWuCixp5nRbytHQtYy9YT7xmnCJzFGEswhV54e9E1bFS9fCDiYfPr\n8rDCEAbPuBW4R8/98cMwokeYX14ZUuWrhR+HjW4zpxe7Y2K3SBRnUtm1yZT/\nmUbRc6zCcHPaN39lCVyewfF6EHds2JlHYX7HwGYiwWWKZZpBLMQIhPdkx6LO\n+OQS\r\n=IQr0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.2c9fc538a.0_1611707213603_0.5303656621624933","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/typography","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5d3e3db8682492da50b4efc41e8d7e86db48ac7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":22,"integrity":"sha512-uRVdX9H8kdK2XrbQ83H95LVdudeaMzCWfoMENHcqLoK+BhL4kA/0tO0YME3ofh9SBvjZphpJoPj/NZ/9QBdHVw==","signatures":[{"sig":"MEYCIQDOgsAXewg1GBMEhDwpvEcRD5XcESXgWz1NDzVfrNd6awIhAPrR2E8d0jT6Ab4yyH4+1+c6dY1vqogfVZhk6fGg8/g6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+wCRA9TVsSAnZWagAAYBIP/1GfsXjWufjSSK+ovL5x\nHCWiTUcA5DUKYxzsiSpJEpCRbHZdVu9tF0W48mGwwfE8YSuYBAMOECypv/jt\n32Knpl+A7wBb97CtfhmvEeAWhUMXc/29Yz3HzxfiRj8jadb57JIWwX1tNEAj\nd49dVOAiZ0aUt99vPCTnoUx3QvdRWq4pH8UoVWmk7a8FZTrYI0BUzK6tsziN\nDd9F5p02N4xMUlH31sOoJr+1e0nk44Pq1J8tVmiDIulO0RrP9hs/NTVFKej0\nK3rdrQoP9WKU08tuPk3OZ+i+kQ0LOVNNwrw3axIMVVxtnKEo6aSULE9oQsAG\nnXO/31Z+OS/xpPQFjdeFJhfLzn3kZNs/1B+SeK5+S7wTAqvM+iV2tUtBC1Pk\nQjfdLMqVuY0vJV0Okm0aOPSDg+vAygULmKYtUCP7zPljAwSAOwTuVR+/kyq4\nCBJT9j0rpAJJysPfjRoAtYfCEbiYPlurnuZ+SgDi2N5DLUKnC1SfMpMU3WAd\n7vs3qoz6lzgpVnZQwFIXz2yCv8cvAME3WXs8jfJh7KZpEN5jHY9UscqGnJpQ\nAqZmhPAvbkgv8f/bd3MHRK4F6hlDSu0EgvC5c0l8UYefTZLKiUkNw2h+wNM/\nd3QdM2quKabXZXigfcJkS7QG+wnVpqlS5y1K56bTJqBJOIFO14UxrpSu19x+\nWZfF\r\n=cd5N\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.6bf56aaa4.0_1611710383847_0.3070634820591771","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/typography","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.994873795.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cab08771d8a43caf10bdcbee59cd054a2a4e5cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.994873795.0.tgz","fileCount":22,"integrity":"sha512-PF4kw3rBCLmLPvdUwVKmKSf4s1gPigyseonMjgwqbYyL2eA8fCVMknnAfuRUt2EZuRguDBC+5rr7sY0qY5gn0w==","signatures":[{"sig":"MEUCIQDtTja5xyVavXRQ3J/m0fZ+y1gVIyIHcR/JM3/HorLJQAIgWr06IOoyrApsPj0k7yEQVfpTXNfvitavnFThOOMzpwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3BCRA9TVsSAnZWagAAdcsP/0Ci1olMjI7FVJSwg7mW\nMcoWB6gYvXWZ5Fgw+n5PgkL/nM0JXgaJbXUA9pjIWhdHUwY+QzHL+5TbDrLx\nG5ijlLisaAH6nIWn7pk/pFBWIYXdoQYocqTasflOxHexAbdG84k7C/Yi0Zdn\ne0s4+9yUBgr0d6fnWGTuOuL6fzXw/NU/8Wv4ttPtZgKSpimmj9wC7Gf0yjK4\nDE3vCXFjf5AlZWwURtg+1PAW+LfowfXY6rdToPIEZOJkKJJd8XsBxSECquoG\nshxsD8eV55gwHsSriRtJ8lxI4M5w5eUD86KZ9yNcyRS3+cU2vmcUvfTQwORX\nsBC/FWfIa7QgrZRyXRy8v7qdCj/Xka6YicW4fxmCaeJzzewTJZUmp+T6Vi9+\nhNAEV8beEI9dh4hzsGiNhzhn1GRagu8MP6RM1fhasspifby7Oc6SEFCkgGi5\nJ7I4L3Mn3jTcYGuiztS4MKA+MCTs+7qQOXsB6diyCXm1xX1iS2av/UOEfGjO\nd6MEVVL1+ZOZRVatkdVT7+VCucTKwGdNOLsf11AmHWmggYSS/E+wfbYU+ML3\nQiCjZ3HnjS2/uX5s+1fk/0b+7N2MfJkpjga4ffYAmWnSYjFx/QW0VTyDRw0d\njAvl+EMisua5C9ZDpAJL4sFoqYsJo5sno4bdRs/MZ4Q0538Du4DjSgPi/v7v\nDaRW\r\n=hp5+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.994873795.0_1611759040527_0.4491969584748632","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/typography","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afdfe7aeda9298f767f4132b646663be7201fe5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.96878e1d0.0.tgz","fileCount":22,"integrity":"sha512-60qiTeLZ/wJlW9TpbHUxykFdlWFJEtB7161GBFzTYqqbozko5lghodcG6RWh/rwvyBhD5Y1juKD3RdwZq3YjbA==","signatures":[{"sig":"MEUCIEfG01TeSZwZY0mWqcuY36jEaoqgohwV1Z1WxqlaIeqCAiEAmHpJdN2tW2fOW8CCXaNTEMN7lyEXwLefZKlMUZzYKFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaqSCRA9TVsSAnZWagAAOFAP/01BKRYNzvfDkOEMF+C3\nC0zT/TWUbBE0f9+ZSxJVMoHL0gzYMXOp+Uvi1UWrFNzJmjMsMIp4jkOmIo+F\nIaytntoaveslYbHZyHK/L1QkGVCeSNPd2AgZ9aJKBA/K0e83D/lP9h6HMVQI\n5GnWEx3Bim++TWDRDtsrOkThwZi8/rUAOhdAPCcKjIQ0HJGXxKNJqUkeaBW4\n9ZWr9CWN+YNiOGTspqfcddrjokutnuxGVSWfmOKLAh1NC45hmYpSR6aDnxL+\nM2rMNEphxIWuJ0Nyd1Y3q3FyBEqmxafIShPcRk7j0To7RFGy1UWO+t/QwPMb\n1OcI4uAKnM8HHpEz/EO6uvtUrXPMmyw7Rg7L4XVfpeujWHMgaRxY4GwRr8Dm\nmmK4O/91SoQhUhFrgAP4SJV00MR2SVouTeme+n0AA+Z5lrNznoifi/VtMqFm\nI6KFArWelS/DzcbkzDAGPD6d+4NODNjUvWPnuoU8gAdxdB7JJQbchITzJd9A\nO3oRPIrt4sEdOHUSGtL90Zo6eGfvoipj5r9/4B8d9kde6u0oEvy+IQRCVi5F\nmj4NPN9b9dVjYbFnSH+yTgq+FOssUewOCQd6HiVcYTpdW4Bg60AaTmRztvSI\nVXJw73Da1uyazrmWpAcwtXP4KlPEkgdV+SBUsF208j3FHwkJk+3RSi8+VuNQ\nx6qH\r\n=syY2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.96878e1d0.0_1611770514420_0.09004512963974909","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/typography","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe8a77ed14c23dfa9268a602e1dd0e51575b668c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.3c117cdcc.0.tgz","fileCount":22,"integrity":"sha512-txFSRu6L1oJkwgM4IpjIOHC+xZrDnyf6cjLFjSGZwok2aXqYqo0dJ0QgE3afW+srYC/3CSrFunYfjrwcdZx/eg==","signatures":[{"sig":"MEUCIQCvsTrdVRFg5N4nEZczosczmk3y5omHKw1nqo0UQGARmwIgWZNGlxZhVELBQDxpew53tqg35OsjfnFZAJcVBqRR1AA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGfCRA9TVsSAnZWagAApKsP/1zLgNBCaetvpr7NrLdy\n/UnwytnG7pI4MwlOpP1mKAEbax4L1uM84/RBapr2N27s+9MnjiN3uD5c2keF\ndcqMzfAvUVD/DXsSMRwcUiBf0IZh7LoO6nZoks0fX28sVCIxsMRMiCWWV3gB\nN0SriMQ0k2jheGWvjOxTI9UWX4GAVVsS6h8WTrT/vtRnDs74RI/wPiWyHcjq\no/EQhiv/104nT9GOAqW5DmAENSt+r46IbWewil1N5wONAI7jnlpAkxGEI5ma\nV8sHKg9lx04b3b1Jjnhe8GNXa297TBG3XsmZi9py2svV1fQkH9l4YYdNMYAO\nnW8JoCrQXvDOQZtrubXYFHyivfjgw06KNbL+1/7IsYpvTFKwwwtQrW8z4Cy9\nC11V+rhGbvrhixLa0bD5dUY0vUkHdVgJTBo8VC1he01g80InDoMc/dXx1tS6\nfac6dMdtLMvM1nE0lGcFtjwhOhOrLFy8ng9fUpl8ciBBcVoMnp6ITj27RWP3\nL2FyM3ncS4iy2/Aj4704kR3hEldUyGIxALtZAOrUs6/gFfOtDFkaOOmOv8Z9\n68NAeOWNlfs4YItBm5sdNYtXGwp6H9b1sjK0vWKmCJVUVquEmYHnecD60iFs\niqVwmuJ5k+eDFxsvhs9en3Akal7DXhtbi6l5ACsfsnl0CVm4DgIUNSi+b95B\n28aX\r\n=XMiM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.3c117cdcc.0_1611772319179_0.6578942464709483","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/typography","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.b411e7033.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994e1d56157f1b3f7d57459b959a5227370dce36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.b411e7033.0.tgz","fileCount":22,"integrity":"sha512-Mitle6OEy2euae/aLoJv6qO1T11bWC7o4F5XTX55k7tW5z4gIaVxLYaGTJB1o3bSd5KWrhjcHw0lrbBU2RGG1A==","signatures":[{"sig":"MEQCIGs51koikJ6BK6HceVxpVpMpOV8yQkFzc1f3z5O5gEbhAiAZGv1as5VDNAxgPqA4kCL1VQgWTttzOc5etEfuRmSC6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMhCRA9TVsSAnZWagAAm6YP/1bqSiLykMzj2CY3O8Pj\nlv+kqsVQfRvaNKz99YvF7vnJwnlgKEMRx4PfTRJ8I0wvzIopu4TlbjQ/POR1\nvDtJ8rVtoTEjl58R4Ulb46iK5y+dmSSIaoatT+fJnAYpZPmihrDmbwe17hBu\nxC3qrYeC0WpbboTSG1NJdRNZBpSzEsPom36fxEUqBH6Cy9y64hB5HrcucsbL\nYwbBjsIkCWZMF5QgqtlNXsOPpuEwMbEbHo+scNdST3OyKNCgm8TUWIkBeQyF\nddmff7RgRzX3AKYiGC9dqp/8OTxm2U8AdEklVG+X5NpmRAhuOJhwEJnlQ+EG\nPCxn7fi6hzkoz5dvraF8K9hxpFQL7E4qlCulcCB9xlrRq4WazIkJ5P4015nf\nkLxL+oRGEd+K0nsf3eL+EIt9HEbLeJVqs1wPD+PIWigxJmo7Mu9JDyAPIfhk\n5J/XkrtBZYQNS5D0ak6tSJR1FO8/F+xqKzdrDz+sEP1700Vwf5eMyqCsY0Yz\nWvi1JyOdF11tXTpRZgLYnJuzd4mfMUwU/tPePOkvmdNexfW/T5z9w97k67lJ\nwtUy3nustqrKRRk4abUZ4MVd3d0DPhHP4HKBhgMsoPNuLlzqOE88xAqLDTnN\nXK+uRKIkl/aQ/AXG31mfCCaDBkSA8flHmUbCOc5fW69o6Q3XSmthsnf7+154\nLrSH\r\n=zbDf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.b411e7033.0_1611784993053_0.41949067453911293","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/typography","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d192b6a97921ef889c2205680cb270960b02a6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":22,"integrity":"sha512-qQqnD/hEhTfSgvSUXm+IMHyGaCPEysx2aPvyW632uMAoIX+9F5YL2iI1Ywqau+7G7yRth8sO7N91lJfKC6kuyw==","signatures":[{"sig":"MEUCIQDiucEmck7tHpJHuw0J1ye3GQkGs32oPBwMMZWJpPIdqQIgCGTxDqNhta2pwYDGgipt76hFL0FlTlIPw/Gvxdj0kiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfEuCRA9TVsSAnZWagAARpMP/A6ivpjRToCwxMxRiUVn\n8KxEUTYrpxl7FxvM8DkohDWyQ7ML71J5Vs8uo1lkhpniuuttvCCCn/2M/aBX\ng5J2wtLQm+R+3JpF1Cz7DPBY7GAOCBQnX5e75vJ9msIqPPsIkLhtN0/ImQHK\n3M98ZODLhEeNXQ6AMvAiTFyfkbVXr4vPhz3s0yrNmMOaPhDcz2J9oashnMJv\nQv7VeDRXmfpBlqbLW4uyt1jQHxG55R/BZzi95yoKjN5RnAlKrYzaVIL8p5uf\nlc+PlEGkCzCkkGBD1zz8tI2XZ3cKfAZTICuOt90fYoq99hKhX010kpUtU+KC\nyKFUvTQvyZtjVtJYZaxfneNV7LORgfkRwU0C76NeCZmmWmp9quiz+Z2OKojA\n1HUZt/7v8FAel2xxJK4G3dy6Zh5cIhss5d0v/tsWKfeSHSC4lmNAxSq6qH1V\n3vWek9ck4oVwWr5vgxzyk3/0s5SovCLIjexIJppvdUlW61j1L1SMZp7VzliF\nZkGYNuMFix62g7SJgFAUKkWfOOv18+Gtg5OSGkgoO+8YiffavAfGC0ugke0r\nlZVUBu0b6wEzrsaWmYhq+K6EQ90AyYV7WyP10Osyb/AcO4cMHzLrnhBiADf0\nKpeVysqUyV7wqj+7PJI5dxn/X/DWKADTqx5VuujrrC5wsa3rUEjmsixIsv1z\nOeJY\r\n=ePQ/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.a9ac16b4a.0_1611788589911_0.08623899241876143","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/typography","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d28b937c94d571f63b335dabe34c4c5315fe4f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.fec7b42ca.0.tgz","fileCount":22,"integrity":"sha512-jjDxDksQFYjLWt91+naHJ4Q8AavYKu4j4Dz36i4bam40Af0A5mCwe5zgOFhoHnuDTFaaYQ9oa03J1IJPU+Ib8Q==","signatures":[{"sig":"MEYCIQDuRKQ4ToJ+ghuxq2ssWVP7ZkE4JC94nKxwDkKTcLZvjgIhAM5yGCiMNRRv02NGGsCs4VU5BlSpZOq1ZPUilnO5dKWZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0NCRA9TVsSAnZWagAAQ6kP/jg0eRuPh9LsH1ZmRLG+\nqDJxKCOwNfkUmvHQSFOKfsg60aT7zmq8LejKP09U6d6wVWez8t+DMhLziElW\n3IxqpvGajg34YxW0VqMr04a3F2anLjZgwHmjQMy2MntXAr/zeLHa798IDgf/\n3PUCtYqwHwGoAukE32HxGc5IUbGPKnKM2tX2p+3uS/7yY6U2Bv+xA+ZrQw5I\npJdZyVIYY7oxwlemFNAsj+nK+y9LUDWRNXP+yJxcLDCts+uou6rfiHoCg+gN\npLJVMKlHZdLxW+WOlBEheeyf7otlH8J5VfgsAM9mJZ32WBoLXXSMhso5tkDV\nndi1iZhW/77olK5oroMAWjhh2V1CPsHzPFHWT3Lzjt/c0zJDwNUQepbAf/d3\nfZxuo2R82t4e5kngnAMdakskFNHSo6mwG7KOSiZbexRbwX1DDsiKTjiRBhf1\n80un+WA3QbhpaYxrLzyu0XCMXnhDF4rQs0cX8L0AYOkiq7AbEUtDODQVlaT1\nZe/Kcxf0VY3Fetisx5nYwOLtKQJYkKcUTZP+mCJWmQDF46iTR6ASQb8KfQOF\nFZ2vIwh7DgAo7w65qTLxhJ4jC0Lh1D2H2+tRQrYBcHej1rn4f5FY3moBKADG\ngkmAfaMjfsw5LYJ2oDxO0BoBMI72jAZ5wkQs/6Zrbhhjs4McZHLLIzMeTD//\n17QS\r\n=G2xD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.fec7b42ca.0_1611861259299_0.7019100542037222","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/typography","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8512a08f5925bfd4960f3090fd8e1bbad75d665","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.8e66dbfee.0.tgz","fileCount":22,"integrity":"sha512-jV1FxeiRHI74Ke+OioY05QOoDYTCN3EtCoW8upyovHknJK11TdxgdBWYag6temg+eNkoLqdA8AzuH3rtiwZ1EA==","signatures":[{"sig":"MEUCIC0vP0U+7u9QOXQarAbvGg9Q/Eq+85uKJgZdU2yuKilqAiEAwzi/+R910lXCUMOuhYvTYuReNUigjOrFiHMRq+HP41A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIyoCRA9TVsSAnZWagAAmBYQAJEFu/8Zaqrwi+n5tnX/\nPSq2EQiDLJBNIEw2X+eBm7WxQg8YtXpA23PU4S9phUBYbiIO8yEmQj2S41M+\nTgszoP9r3sCwsUi/Ym7rOgt29pO++FuB1lVBYQmGFCDKkM8r8BnzlaS/yvuM\nFJMlLLOdT/LM/SluWkDazbzhShTACmwZjasfcE+iLuYnEW/hclKwoCm+YDga\nb721XximGaNd8RDDCdr3VtgzNaii01NATNSq8mkEWpEQHQoS12ZXwPYgsFmI\nKjbOjiLNZ0zlCNqdHq8nB68eU4u8okBbZVqgBmtPEvsZ+xduH7vaJ+gQbh8i\n7b9enO1aTtqrWgS40R82TqpPpiBq5a3dO8wnS8Afwc9vY6aeQZ6s/Q9NpOU+\nsRQdCt++AU55uAoJLon/HpLmx/0aw/HyI/yd3dnCh+8x6gEcCifIEYqxiRhO\nvaCBCgwb0pfl6Z0kH0Xy5ggbMNXHP54+27JINnWAX4nsphhnbjCFhD3sTrX9\n6REA23vyrW1+0zqKeyXZPdjrtVpP5qDyCTkgRjVNKImV2zD9+M37Wkmv5Yz2\n4Ak/+GTeHMIajeOYlt14YpT6W4ewZl1qyYtVuEX/BLq/AH3+75Gn9+M0R3ex\nmXSgzYgO1P4pVoACpbKhpGNoNCqf3nEmjjuWDNjnSIkxREr9SttB6GCT+enF\nN095\r\n=AKdA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.8e66dbfee.0_1612221607592_0.6394400964051363","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/typography","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.637d15da6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a12fd3a8a43c7f6d0f80c9bb6ffccd0fd9f6f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.637d15da6.0.tgz","fileCount":22,"integrity":"sha512-IbTVRFRYzSHFoZcraowmxNSifJ8A+TK44g/0Tu+/okhGXdM45E+410SdCgo8VlRu+QQCbCmdDrGBpRoBEsm/gw==","signatures":[{"sig":"MEQCIGKE4J/smN8xv1B2Eu/Du1ixtGcqXvfj46S7HOAD08hiAiBVLIcrXQLZ9u4BEYhKrrf3IEMXiuRvW06SxFu2Z9e6ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6XCRA9TVsSAnZWagAA0zoP/2JhQb3qjiOOydnb+JUu\nF83/6VBA7wRwnDJ8ack3Yfmn3sgMdwVOVKLNNjT/hvVSVDH2p1nWPMxJ+tz6\nvCkbz+3DrKbeGotg0uA7iE1bSEpppHxI0ozlLZJzZXVcCZKeljMK4j0Q1eAB\nj8ISL0po247KmW1vPe/L2U6dGYdCPGvgqiRnlOwlIBVxQaE0BEK057Y9uGBy\nRte1BTy017BCRCYIkXYFF3rTaCoHn/h3sBAuUpZoyHXjz8uBon1G5Y6hjiuE\n/oTZpCBEW89qb5bPYwn4zzq/191tK4vwLKfAB67QsTqFRZZmqEc5oBbbpO0Z\nkhg6SPkqKTxcNRzsY0R9Sizh3Lfg4Raax1hBBnbtaJ1NMXbQz7d+/Pj8WBcZ\nH0X3OeW+eXNzC1eY5gtQRFtbT+otyxIpB8TY2F2q4uL3k5KLkv+Fd4Y4QcGJ\nWJ4JxR1ZI3SdyxD1IZAnicuojndyDoTKCln4I8f0o+diZoKDpuEgoiZoUN0m\nPtLRWJGbcgoe3z75Ikf5G/OW9xvU5IKZx6QWfiF0WWFSE+lBN2ymZoFhqdtq\nfaNdXskDqpv2Wl/K/QgKgOdI0Fg0UJLNVP9+Lk5tDcu42U4mVTvX6h/9m0zn\nSVvFEJVm8xc9aBowmMku9XrAlIePrfgBLZMAQv0UhqOYFvs2xYjOatzxJfpB\nqTP1\r\n=sD3B\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.637d15da6.0_1612291734775_0.2850108427317939","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/typography","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.fb793939e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdf72e784df714e1cc71fe0e9587ac808895900b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.fb793939e.0.tgz","fileCount":22,"integrity":"sha512-cEDq3N/wSW3R//LVOxdsUHv3W9UaKJoImjmxgK13BoDmBf047pZ2FjAbPip+Zp/vQd3SHPFxECH17rZ7mVljow==","signatures":[{"sig":"MEQCIG/lIMUaAhRiy+qh1kVS1GClEzVmKvAbQUDDX7JH1w3qAiAPq8XC1h5PRVJ2qksidte1YvtdmAChzMj9ywy8rEmehA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeNqCRA9TVsSAnZWagAA56sQAIZ0heVYb7kLRwWgux1P\nnAtTUlyjo9oWEQrjbRQxG5esVbE/q39FnbuNVKviCb1gSWnr7Nz+GjIdNhF5\na1RLbIYhCtthT3C6zBc1lE9Gjt3R0FwFqytu6acuxrEr7twRHpycu9pX73ul\nxeoAI9TU4cHDS9tKQ3bIFYDJEqPW1X+aUIKTFBWOJ4/6D8W8EpxUzXt03bLg\nuI5tU4arwUYnpAULZQ/N8cQvEakdNXFoqQTEtwxL3yWp3tHQy6T3xXHL2WLH\nlyemzw0rFQaLpBK5S9v3j0zXX2uVUWqrbVj6RdGq1Ohq+u/xggNxSCv/3YrD\nsQQc8Cmdn7fqIQ6Zw77Q3yzXxGu0Tj6e5j0yioqe9HJR1EdQ72uHVVaB7jmP\nTzJgUWhk2iTj0t2ez0ebnWlJmefFN6h+GLWKtC22QHaaVe6Fap+5vpm9S1Ci\nBLkFuOZUCmW3e0jYAWGFBWsMYY2fYvecXxmcUJ9SsdvuFB+4pFZ9FgYPnaNG\nCgkeXZTck9QmKZUT7LtqZJPfn7udDl7XBvcLnInrQaLb1Ews4xURUUX31n9R\n/PJCWWdmpMAQy9LmAGEirGHhxU0vWqdYpPzg4EreTIRqJAv9xp9mndFDx1Ig\n7AqnGbgUODg+2tKOm3SG4wE2EvwlFor2+bXeebY/Ze96a/QsawMYMeEOeUJw\nMnJd\r\n=YUrw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.fb793939e.0_1612309353669_0.11552056927662457","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/typography","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10f9d9733a3e3d31210dda48b19be8a65313e12e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.15a4d40dd.0.tgz","fileCount":22,"integrity":"sha512-ADWYyxj0gHYTmgkIYI5yoH8vxl/9yd+BBCqqakaKZAWPUQVwwHAhH2Y6jOzUvj4re5hORrJhjQ4N/l/dlKowbg==","signatures":[{"sig":"MEYCIQDjGuUYWjK7x+QX56PTqqEdAOz+LUGWxWDBw+MJ6xFaRAIhALyxuaSeljOwX5r7524O5F4LNtWEd4Ic6UeBZgqn1BIh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgfnCRA9TVsSAnZWagAA0mcP/3+Vg9t+oNLUivChRKFE\nKwoYyWp1suJf1/YtY1t4wpXzjhjD20WLLNCfmlg8R25/SFy3i3P6xIyye5mZ\nGc4jiswZCfuZl3dvgx4r8bI0I1hV9kfKExMDofjRlqYPzvhKC8kKS3BXBOZH\nVFFhxo1a+VNxQQX0dsN9SsjBS9rqApMTM7SO005mSUcQrlG2qPhIj38WGbl/\n8urO293FAJ7Z3vjZd2Iouvixw4fgi3gN8srlDZ/jLVOYnTxnuYLZrtxfX8N6\nBhbtqMdS53UGXVVl+GpfefvBqSzuSXl0dM+wW1cvUrn0D4H0O59HTOh48TGg\nShlXdJ5+btbBs6Frh4SQ3V+wHJhV28eEqr4xhmD1TmS5S+f9XwKQV51WU67A\nL429wpBrYEGjdeS86+jw5l/WWqs2m1BMIengP9jZxajNdSyZs4McOAdPBjSq\njO3CQ01EECnrTrg/VJ/UrzGabmXUQ5urngzP2yxGHFQSoC8bhHaAqQ5h+fOz\nd9T8ngpr1oU9HDV2xv8AbbAMi1ZhIgKVEzO98pco/ZdU1p+/usHiUD97ZJkK\n5Cqm1U+fKgD7kapVZgrg7HWqezJZJ4AOywMZPvIOiVt3pRpJZqvEbh5N6iYn\nCX2p4kJ2jZ9jiAbRqTAIqWxbdbWnkonWxOkxSk668uaWQgK0IpXvk/vhU4yB\nZzTc\r\n=nH8c\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.15a4d40dd.0_1612318695202_0.355991920582035","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/typography","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb0adb191e30f865d2683326a7fc09a9e3f2709","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.7a003acf0.0.tgz","fileCount":22,"integrity":"sha512-4hXEfcygyn5hDuZ4snbgZevIJe/BHpNqAOxIDmNYYHWGsUuIycifo7d6PDt3N6KPWFjcCc61m13pDgXXAHrSaw==","signatures":[{"sig":"MEUCIQDLqLHxq7uavIp/f/zxQnXLxOcxCQ9Ms90x1hbAEOc+OAIgEbCrjOIGWzwo80LBCOSfZX7U3y7+uet8tWQCzC5+SAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10ECRA9TVsSAnZWagAAw68P/iEuabtdeujJbZ0tX13j\nMolOHwSG9SH1TrbGBqyrNeQgmd+CK3h3B+avxZ5MlCbdqQVG6GP3s0bQMHJg\npcIC2REb4zr3oGbUZj75Kd105jZDNz4cabrjd8K5UcyfgQ3CpZFrHO3aUbDS\nVFoRZuqlHW2SQlm7jfh845Rows1j9a/yTTu1b6Mr+0SmKaZNpNVJa9bkW0uq\nEsEh6KjW56MgLYOr0U92M0oq5+J/A4MpR4R2ND45FeFrWV9AFnipw3wg1tvq\n456EHesojwDlxF3sUg0jSo+9zHAggXtunidnmc33MiXby4blgZG5HiP+OmRP\nPy81qGrV4q8DGIZlJQpb7Z6NDozlMbD1q/0xS7kCjxE8tzBUS7uk+CbjNmyP\na2ejakAOsExb2iosyX+qUUvvTfF5YQXXS0Avnhs3zWE5SHhJjmI4G6E0kHct\nNKiJQbEa6QzP33hEOC80qwGmUM9BfFG4Y3RCuzYSRbDPn1TVHDVOLfkO2EfE\n85OrXYcGCrW0zQUY8whWwrCcWeWCYOtWymVZ+5o79Lr5CYcqx3V+8xQ6pUvv\nswngJyfaEQFhHfLt0VPqiH3ihl9QRgVoZ+0cPGMPNqsbOHXMANsGU+RREv9K\nN/TCLPfxyABUKXb60VOfSzNQmHjuah795X4e8+q7Z4MqUC/S+ULIq557QVqU\nPd8s\r\n=qFkO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"@material/theme":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.7a003acf0.0_1612406019902_0.0263191540044434","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/typography","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.05f249666.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcaae0ffdc1ec18570a4893ec792ecfc1d7cb67b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.05f249666.0.tgz","fileCount":22,"integrity":"sha512-oCqUh4rTqgDW+eFPXnA/qf1okuqNVwHzfNsW9u3BXNp3iaJ5S8H7TF2sNRJPldh2gHqVKBUPMbT4vHCrCPC2vA==","signatures":[{"sig":"MEYCIQCDthR7BqtUlWjZKukOT+pMLggBAwB4DyFjHk1xnLN0SwIhAPNp9RO8cnskj8EYBY+6zLnGud+lOWwCEUIYfcpBW3Ma","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDO/CRA9TVsSAnZWagAAyZoP/ArjH7F0IbCg/GM5bHWg\nrxieZw/GeLLQM+2wEIZ4qAoideNbpCw3JCBGRjuwZrrSCAsYEhXUGmXHO83x\neuwqqrXHD1Wr5J6IPrAFQFtKJ6Q7arWvtBGLpUFL611q9pC4IRXoG+zfR9zd\nRXJDvLbN5/rEVkuoK3EVTxUlvwdEiQZODv7cOrYa8wsat97bVzBGAi+kjX2L\nl9jpDr0PsY/t1IW3GtW00doF6lBBvjLEH3g+9AtucciPe9qOgqyQg4lCSgYD\n2k/gtOmDctyLngBvDLQPOPIZQH0uNDDl4sU5yCp5robzf2bq/Z3Xs/pO+yIs\ng+6fT9KC5/s+vVUT8EzBaCubIn62uIEqiuzC3F2F/o4pmM8eo2xu37TafT0Z\nO9gDxaU/VIA4qyIBaUQP4SQ/omZaMSP4vIs6QxcuU70b+tyknZcah5StpAel\nrmOUAWYooz4wyYT6/jOoLgyVF2+dNM44yvxIDdg6mzwU6Q/OHQW16vqnb9HO\ngKFuu8lh2GK7i2oKyKHV7mhQhqFArBUt9t7F0vpzPnDPRHiq3SgBfI/AEyOo\nBacKKlA/Szo47z3XoQYRl1uKnwYH3ch3ArzP8+W2NRKrIqmMfUObLmYZrJjU\npAQy5ns9oQnBaSEQYqEoAPbGygm/rW/v+IEyeL0DfYM8IwJfgrJFTAp/pJpx\n2LKY\r\n=ge8K\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.05f249666.0_1612460990837_0.8736368616254682","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/typography","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15f4f359bdc6d4aa016a1b1477aa031f84a19f44","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.1a3a39629.0.tgz","fileCount":22,"integrity":"sha512-7cXs7yvs0VQr6Yf1RHWD6doNzDDOHhvuUuxzfa0p709a5vnLT+ovRMeBfCAO52BunTgxGWOLP8mWpqTXXkOo2g==","signatures":[{"sig":"MEQCIC9NP5FAo/YkEQfwOtEtjZ/i1+AF728AmEsp69oSp+gzAiBcV5se370ugTWIXqoaBxwlE07uut0ZDMa+jfVTv5a4DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEAmCRA9TVsSAnZWagAAVaUQAJjVG3iH/I+WshTc3KQC\nPUVVgwzW6VWbw2CXshZjpML/cGMnBYaoB4rUEiPRHXTG2DwY0B4iYiLZsgn+\ngq0HdpAsL+1PLPabFMH7WOYn5MHpcrCZTu8VENzGO7la/oQYSsEVLMEqdsq7\nHgK/Ntc6tNX53y6o5DUNAzBy1gIhl3r7MFK4cUgnBpZNcXcTht2CR/4KZ63Y\nyljrOk4QKxtQasNrH9s+0OLH08llrd2dOO2Z55xqOVXTZcwhEf18I3iNbeXb\nwhcaweTLkrUod8wphU+3yYkmAHUSWzgWrdL6/OHzFu6oiaB8lxOFowhhXaIO\nr4+agzth9f000HCdobw8dW/R6M+wJouW+0BGYur92vA1ReaQADcNlyxA4F1I\n71Alc1dNBBVP7WJa71GUFXCM4eTojyJutG+uSUgPrfhPKTJsDXbjAnNAER7/\n0odeTXFHaWAqNsTdK8aQ9WN6DWGBZDAPX1wezUel6piUFBJu7RGfaLYvhdRs\nMdBeCsa13fKpAF6rN4fqYNPtP0XZyCfQ1K+9I122coSFeG3+yroqLS0G75E9\n2gYIFf5NPTXxS0tUWuRFdL+H8p8nh9hYhax3uOgSq4KethyjvY3OC0JcwS7b\nOPjZbO25YTC8V1RV30sucg4utoDqsYydakbSlmnEChJjsukxQH+a2BpAtQDQ\nlN8P\r\n=GGLA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.1a3a39629.0_1612464166127_0.26826509623963424","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/typography","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28f7f6c8dd2c5be7f36b424cd904eff41d964b46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":22,"integrity":"sha512-KzlPtIcoU6CWDgD6uwxjTFJF7xYMsSqT4Ev4XcGmCfQecfcc7qCEyab8Ezw+EkzHiytZ/EAhQXC5ZDnoYSoaVQ==","signatures":[{"sig":"MEYCIQC+dDcd5UF8pT97eEJEq83KMH9MZ9Nta3ZOemRZgVaXkgIhAJ0Fg7jAroWKDzwKARsAIipH/v+yRQaE3L7oqavY6uSd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHZzCRA9TVsSAnZWagAATyEP/2gQNgj3sqaVn8luc7Qj\nCEidrBKETSRbV2hiKCGPyRECuN6na1+7/vl4mLqX2OyPQ9pag0zf+rVqg4Pz\nQQfMpYpQppB64xNvJxJnYTNJSOBqw03iagoWqqS9UZtX8F2+ie2bP7um3Svv\ncvuCrjmZItw8LgdwQXbLmJWKih5fMJ40VPBEaWRbBFJnh4AJwCj3ywr8+NhR\ncFV2neGPNedwrEg6rHuzVZ/fczElqMLaqWNVTeHTIA3F4PcJ+VVNVrT+cYUd\ngei5RyE79ITzw1w1bEnjFzyO2NAnZU1YBuUbq8I6ntOI1iEEexlsb4SVtz1U\npsklRxE8M8cv+kK31NQTXqWgpwr108tImzs9Yr6tV27YMHjgq9SBo94KnpEf\nL8rV9d/aOHNgz4Q7yhNrfOgPsBss/iFrZDQzFENeWIJEWsPUXRus3cshu7T8\n8DDuZ6vaYjWQ41/T47mX5S4czlY5VDZWcb7wipTykErpE7Q52Lp33rIIGkC/\ncNc6pDkxpFrEquq1ZHduKmIJGtKNrsT8qMNvryLBTuQ7lu+1M/DnX70WeMfZ\ntSjnk4yL1hGmVlImNQC476JENGCHWRe+qOJ7El9Y5zmW8eyGzx1pEqvYsNnV\nblXWGIhX3NKE19qQXGs645oFtR+dqJc6XxDJQV7q5hUwsGJJETbNHKUSNC7o\npE4b\r\n=DIiE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.8b1cdb1be.0_1612478066808_0.9121618244711107","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/typography","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39420afbe4f89834ec57e9ef6f2dfb65ba417d88","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.8271f00f7.0.tgz","fileCount":22,"integrity":"sha512-etLcAZ1UoRJTtfo/RhVWnutyauboYbjNa0I5enczwTqnfFZh+2QzBstciw3xxho9yEY3rywHzyKewXYOJTei3Q==","signatures":[{"sig":"MEUCIQD+YjnsH6N1bFEWEOyMpQHu/UJmn+PWCi/RSW4sCzYliAIgPutAHD5K4dIO8mHP9NDgg3B85HZ93EAynfZckYpFDTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHyGCRA9TVsSAnZWagAAtF0QAKN0rDSrNJ/oxTFNPjIs\nen8e023XlNlYnSM1/+Tcna7o5li5KXV7MjWkWYQAUt57p296AFPolFGyoAnr\n7WapHY2RwQPrxr6jjIbMKzUdbqvyZeXSpGeKCfk6mecA5jksqR+ZIPpiXlLG\nvpFQMoOxdiLiVDOS+DiV5D1NTAWywGkKChZCRUZuSLElwEb86Qrd/BaG+gjL\nxzGNV2BPlNZ0FgPn4PLN3nQZHBHF8b3CMWqwu4x2mVbCVjolw0a9USXMShgG\njueHBKEUsdpiu1fJHPxCWtywX39utlQagDW02URAIdXT0vJxKdXwJmGalgtN\nkrtPIvMpKsE16DVpTfnF8L2N79Zu6KRB78CbxgW1KfagkDasEcXWg8zSW5cx\nFpAuF+bNoIw8XBl59w3eXpoRy4ULTTpHHAv7LKp+2R33QgDUlPBMmyvh8sm7\no5aonQdYhcJGcnfJdkOJA6OmWSo+cAKxJpX5yFJzZjuQ3cWEb0SilX0YNI3x\nBi5lfVEMjUg+3MDc70Og7kD414IPVqCybJEC+JZ/s5BUfbPijRIEP4BqHNu5\nurJkbK6s05s45JatgtuXulHAO523n0GMtEgeoJnBqWxnxLyi3pQumsgL05C/\no/xSU3l4Jcy9Cor+xfp8iIzcRRiitXPc9kNzfRONYGZfhE6XN39X/2oGU/GE\nbsF9\r\n=qp2W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.8271f00f7.0_1612479622348_0.813541774934853","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/typography","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0-canary.533092a90.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d71368f1dffc41a2923b39e842e6b0b289cc486","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0-canary.533092a90.0.tgz","fileCount":22,"integrity":"sha512-gPEOJyFU3pfSfg4Ccgdyd5frR6T7ZG2YX0NPKbuE0QBrswQhYKXe8I6S7n4uMyI7BmMRqSpGH18qtRSyNTuZfQ==","signatures":[{"sig":"MEUCIBN+Iaw6VaeaxnNW4PS69U7twT665emij0PqESeXAZNgAiEAqzJ+PAi+DNAMmS3oU8GxbL/NSAYPDYqUFZ3Qc7C7W3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+VCRA9TVsSAnZWagAAIlQP/Avr/OZfkxLjaub4aTjQ\n2rzvOfg1zH/sYs7LezpDltqqo7DExoD/Xg7hTyjji6p5hHDfnH2dJNVJ2HHl\necUMgKBS7z+ZcG3K+zFS9fGX20Xvh9pWcEPGUkHN/FC0OwcgwNqoeh3xnPok\nhhE+0O2SX1fBub740cGbKvCZVBtjBJRGpI6teLUIb00wf2XDaREZrL7vdFaD\nBvhSULPUnEU0dilbY7G8IromxdduM2jwzllK8cSWxH4daAfFWVbo2VlSS5z1\nHKTzrz4sEitLEMIehWABN3vUCznOr5FBTAxwt40bTZFOtcyyjI1aCRfv9b6N\nb5D0lZXGS4GrnjbusrXaNisogHc+9rlS4zsTO8oIaOe3JqhWbup3gA6l181y\npldWxv5BWj7LqHdkSagvHaup8Sgd66WSdZayyx7WVAblFQnFYeHkjcgKfMJA\njwNckVxpH1cg8tPuKez5xF48kXVIbGYdzVzMs91XhQDIj0VQwyIwwKvelWQM\nzGNBV70SpwgreR2ft7RGgxDaP0+oY47e/fXMI4qmvxCE6qM8U00yF1d1PHBb\nSb2bcymy1eo96viSotng7PjQsaPCT9+7SLsEfGyIvBI0VDdSrLVlOdEKKnnD\n4dlfy5li1hOn5PofuvnG9vMmMs62BDeY5MKBiw2ctKOHMCa4PoTvhoym/H8t\nusfu\r\n=nvEU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0-canary.533092a90.0_1612496788967_0.008953819932497886","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/typography","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d30aa377befaa22f3bce70c541a9c772fa6abfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.633a9fc7a.0.tgz","fileCount":22,"integrity":"sha512-b8K4lHUW06ov6NoLRLjKhqpoXk1EtnRnYQdrZ/D0jbnXAklLhH5DT2pi2L0k6Cd+PZ4SIu5glqjvjUISgHAJBQ==","signatures":[{"sig":"MEQCIBeTLQezC00rgDd81Q4u1nMXvAMylgvd8b+owHOgWkB/AiAfsWTIwTuencnjKnNJDRd9uO3iuYiDCOpk5+/OLe8AGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW98CRA9TVsSAnZWagAAqTMP/1s18njsnjqO6BBF52Qq\n8RoyitkATTXlLfMjOytMh61tVnJSjYguRQWCuIcW9Vfloif0R7vH70fyS+QN\nvPOa9P9Z5MwEX2RLot4kKllsylgk6fxks/uFCiCkoSNGMwEs93FF/ctEniS1\ngKwdyz3U/BD3FjmprWk6eRC2Vi8reoF3p6MM1Yx91fIT4pRuaUpmx7DndsHB\nEkZypAgjrlao75JEYoK83r3Vf9rIyTgza/br16tCvuiNhZ038AHrHnMTC53z\n7jY2+en7xYsNDDddBWZ1DTeMi9oWXFB80XZy6baEinebtY+kkP4f2h30R7UP\nwlNZf4D/usOOStYCYWYQLKCe/G2AjX8tpESq3J9S+zy7ukTgUjimLiS43tAc\ndmHNYIXYTuTzrnhMMnx60irnrBX5KLZ7t+y9J0rx7PLGSmwd3ZOCG7tmSvqw\nP6UFY7R4ZGWqRjTbw3E0efIOyddZlUj8SNEX+nbfXWFC+ZDJLRljiOsF2DfC\nC89wVXF4ItDQRobafmvU9biT+2JVaZiYtLhQ1ZJf/0O+WkgagRB5C+Q/PWO4\nt0cr/RJjVDVQTJPnYF3ZkC1cx9O4/kUAXH2jMbHzG86+tZsbSLdoINjaiKNE\nGaveMu4q8WjpaZaxAD9BN+eGZ2aIaSUQp8UvxdK+CR8cpGwUC1xctDKtQNzj\nVwgR\r\n=HJfP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.633a9fc7a.0_1612541819519_0.735830086739879","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/typography","version":"10.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@10.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bf955f2f4f3471b5dc1e767f131dbe92b34580f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-10.0.0.tgz","fileCount":21,"integrity":"sha512-RtFfL/mfOOkliL/iXY1YPrx8Rw1LZWQC4Jpn2zs04xM+AhhDOcD4Hek5xcvWFjhzEmPUz7yhCTWsMOmVtsXzig==","signatures":[{"sig":"MEUCIQDTiOo32wshStvZYLH8tHZWkOrbbCoq2j5REz4Ytz3DygIgEZUBNjpavgOKRkr9tebyhDy+uelU0tBML71fbU1kqy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/RCRA9TVsSAnZWagAAvxYP/0uXN0qS636zJidCw3cO\nXtmleoPyFyQ9gWqaF3ooZh+nb0zfS6WKzZw4HSnSwwbYjniIddEkjuiYBR3J\nJbm0uYNS79++DPJjpf+6ChSNJLew9yMBWCv69rH97kL926BHfjC1XMQYPHYb\nhE7pXaj1JeX/+AHbcVeGQMAQc0Gau9PhL/l0+2KCx+Gxzxxg7tp7EVVAt43P\nHQcGTKbQ83M7aCNQQEsc7lOFH/Wh2ec8hISegz3X66c9TnzIu4xdzicblGdW\nOHaKJe7t5BvHsCHupLTQqQeyYTEmNJ+8oEKLfE+e3wa9eMYhdYkfS9JSb6Yx\n15KDZz0R1WQFTZFO7tzeTRUyJiGRt1DNYhZEziaYO6ApaiiporEo2lyWpjXl\nhNW+ScHEDVMbub66Ihrt034XcBj2upOrQ2o/g2/c3vR8KR7PQAE3bCzI6Ljw\nT1kYkVAl9ccRBJR0AHjTQzGV5L3AxPycAaldtw311G+oJE0cFDxVeHitDIjs\nyjvl9OpN5L1BLsNydWaqiT+/88dwSxw/KY52OVrnVy+cNiVz7iJoLT98qeTD\nZtSjQtdMRDpsr6w5kvXZ4QpzV5nHcRYX5MVEM522dX8qHBLddQzsxFTdCvGM\n42ZkVqBU5HZAnrj7O+mYUWow8M61x6WsjaLdakkJkty5eOH4br8eG/I7Oufz\neGBM\r\n=GsZf\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_10.0.0_1612541905205_0.30524441776037703","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/typography","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.b5227247d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"740948960fa43ec553a8c1a5dc20a74370be1a08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.b5227247d.0.tgz","fileCount":22,"integrity":"sha512-3w7eQS1PoWa7b5RqrQ/+7jwniNlsAEXX553QeL2JSCkdgk9xdxiI0XdCsf/fExRNYtRoTHt7m3telKgxRjHqUA==","signatures":[{"sig":"MEQCIGZfw3KkK3z7e4hV9tliKYeHaL7vNSGx/du9OaU9wvF4AiBvW+LekgVeG5n4PByyYbayE/RjgJgDgvQ8Wo+gdWE/og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNVCRA9TVsSAnZWagAAVsUP/RGykHZzKIADltKt3K+q\n0NXRCoOKreHWg4mcAmfRD9hIEF3c/Wbtx5MO5fZXiLvVXgRHTbvnyEk1Pl91\nKHDXS1v0dJfLgfqIpB6xxabcV2g5igA9Dxd5ldkCS/tJQ+VnHMukNec+QXLj\nUq5R3dXZwC/GsSIib5YZz3oFV2wmcrL1mGcZEuHbjybDvUjygCs3ezXx2OTq\noS6SxP5dXfOlKA5zV5nofhI44LeRS1wBfyheyiIgn9eHYaeSvSbvnZFgxxs0\n3gngCzqmp0bBSi4Y2cygkKX6d/9ty4D4QOIMYu9FML6dw9chuiqKFjpFZYLW\nSjQlN5gadfWyIWOoehQ6LF/8fVU8imjbsFELxWw+ET+N2NMSBBag5U3sBiAs\nVkjp4B+mHq5JsDp2Ooo0rEvNOqkvaTpcpYEI77aVD/p/9gP/4PSKkeblx2Dx\ndL+9/dqgEdlABFycyHGsBnapVY/yVaKlARvWZK16wAavtN66ML3uzgh3FAZ1\nliMI881gR+mbciW362IIsKtWSeiwe/qxxNw86b6EeK/Vz95PafXz9R766akE\no6LbEZNif6qRTyF6Z4Sy5hRTQsq0wmjSqLH7A/PeHJGeD8RINZAMwpHbcaRb\nEHD8EsACQaVPYm1iyftXLXJXtVBWdzFuu8TomBuaCdG4uwGNQeZUNXFgmf3u\n3nxd\r\n=8NOo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.b5227247d.0_1612546901436_0.3506544873487727","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/typography","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.95322b11e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69351ef3622ed9891ad986961a76bfcb113c9a0a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.95322b11e.0.tgz","fileCount":22,"integrity":"sha512-kCBM1y0UUXot8hMBzaP8huTVO+4ZKl9N2u5RQ7wCjWtRlFXr91ovyKAFMB6HUXvdqcvJaaQT2YCpIhQbRoiRQg==","signatures":[{"sig":"MEYCIQD2LEQakQggwZzGFLpBDD2M2b6uCrFosRvwr0eNJUztFQIhAPwT0ew7OFkebbV5ZIdmPBFXIiwn2PXXE+e2PsdxVs6o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVJCRA9TVsSAnZWagAAx/UP/ibSNGF4yCr00jlwQSel\np/HUFP8erbA7VEQoUYcgbJeIewNje+ibd0ejrcES5GsZUyFa4RIxPF/ZpzdK\n+4r33qE8/ngi8oqTPE6/2DGH48/6fK6hweEbbFUcwucb8Twa/gRGNOuTgVnb\neVLk05cYBpAsW5PXg9KY0q2Jt54IddPMvQbgM3z8LrNQngTn8+CuidWzYPEb\nXEqQCzY/8aHnsn5zd93BSItsVsugagIA6Pm95Bqi/lVotU5lehhqD8nwQ5JN\nQiNPYjvtkuturTwcH2nqM9hp4krO/pzZxCAsNBDLo0AmvHNiXY5BLT94BppJ\nYzWmhvh6lhtmeBuFiLrqrB1y8Y2oAXLhLKgeosaX9uRjxwyx9h4n63C4Zin9\nxYVvTY5fjqVC7QduwcMfrlHhg0m2R3S2CmK0RtH27UsJSeRAm1bElyqoHbfS\nnG0hkEl8I727RVyhOkIv30hQQaq9mdP83WHAvxhqRbzQHuH9R3yZ+l9KoQtZ\nIuMyrJ1gc2Wcl80EVhWUHyOCKatUka9xou8+X+Gq/wY9we+udclJh3zQoUeB\nsSHdO3ZHO2P9LzEvDhmUeO54S0E3qAa9vdhqVm1nxa5onxLcAJsfFZsdQIX4\nCbGksSOu6Exi67WhKBtm+ZcFbD4nUMdp/c6tmnWye+lISn0gjGiyuGW2GXu5\nU79p\r\n=86r0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.95322b11e.0_1612567880156_0.9088860384900912","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/typography","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e078fc9e2d5587b5beb5e1ee613802c2d914685","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.1f318ff0f.0.tgz","fileCount":22,"integrity":"sha512-uOWJVh1LR6uEO6lO/HTevE5Jw7z6RZ8my32xf5Vzcoliw9gjdWshXWYw+plgzmvGGiIbjTUWQ/fzlsBIB2JAoA==","signatures":[{"sig":"MEUCIBZCcfIRRB95nFXOZa8IkcZBvgsZFb4vnnD+doPG1KFGAiEA95o5VyYChSQTyRAwr0hsXLoIMpxYE85kdERGr86yauA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0RCRA9TVsSAnZWagAA1sIP+QE50DrSODn2RZ7uk//Q\not1QQ5JTta3URAotv2kBvJEW0l+uxS8IJY1TFpsrJh6+D6Aq1qyboBlrrzW2\naBxb9ZbgBP8Xok5UhqwbCk2/zv9KLXUS+4WuA2U4RltP00Nx9zb0Aucsr6jj\ntpL3Mmt7OI5Vljd7dWKOHv1JBFRkAZdQsdvvPysumCBVN9XpYbiQjmc5vR33\nGLUYvwzwIYkYFXAy3tXlRX3yekCdubkBEAA938DkObihLndKU4VbgRUcezD6\nqO7hDocSxqVOHBP9M+DxZnK0+CC4LKVowAlvgWSUFvJ+g68Ecv95k4dOuxwu\nfuaQD7Ai7UDcRWgdLVBLg/F9wohTwcZNOqI+JIkc+RJGHYmf3a9lglKMCX1z\nIhQv/tldeK3IEgNGsOLHbtk30Gte5qXyo8Dj3+togcP8Ju3Gq7nBNXfFl0Rv\nsmgRKLPY5U5X+ilmMoruVbSr0rZw/dbq5JrfygYr8BbB55c0CDiLg8Hql0Mb\n3R3xdJJAnG+SHYIvknM4qnnpN6J2l02qfHRVkcaow7eDV+7sAzCH+UrqV3Z/\nGJnETOd6BFC2cYdpU4gwkB/odefTKrKdV6v5P93jzIs3cEePkem+WJfz8o06\ntepI+SZJVDiLllhb6TJDfjrMZbDiICQaDyve6Jfx7wj+cSUUxteYhUaSCP5Y\nc8UL\r\n=wfcR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.1f318ff0f.0_1612569873418_0.6694142170683006","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/typography","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec6b21894ecda521414ccf2589162c2bbf598d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":22,"integrity":"sha512-wVaPOLFQhQqYxtXi+5YeU9e8cuAKPx8NmQJo4nL0yp6ro4EVuRR7qCifPJat77ZBDWLNZhL0F5lwOnTILHiUBg==","signatures":[{"sig":"MEQCIH6vxH9r8Zh0ZZBHkqHgRaesJcWsxQ/3yknfOTx37w1sAiBwUBcRlpW4RqiQsEoYPlKnNtSmcT8GmgEoRtGSsNCpXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVKnCRA9TVsSAnZWagAAsHsQAIGZaqDN2p5AB8wbJV5z\nJCQo/9+noLlFjvOHnTlquMOJHlCg5yCfOgg7pgowcRRMvBYgUeF938LSrL27\nxRLgVgF/5xGlnajynEEYQ0s+i5upvNndnT+i1ohVvySVgg56k4B9fEH8OuFR\nr/z6i4qDLbIssaZBaPBvf6apW5Y3MvRWPPu4382BRghj6BixexaTfy8fIExf\n1EVkiiCUwBQhUibGlmb7deNH2CeK0u4ruTCuZ2PU9jYBTNby8gCcF9gyDqte\n3IG8qhjKPwtEcXZNKmmY72RAWMam+xQgvJkN17iVLpUc3/dAVCgcu1Kd/wTl\nZGnT3RSj6GJfGdgiK2qnWKKoct/1ZZHZJf7gj2y7Cdoi3uZLzeHBVxI3SnqU\nnS8ZGH6birXKeqCBdeMFlPtrRIsRjb2VyZVODJT8MWHv6lwI0Eny6iu0D6LA\n/upYyhGoGYIOfLGJxs2AeRqdRNJz9GvEY3eCOqvTuVohYJ0sr5miMwc7YvWR\n5832utW4v7VAsz36mG+ntBSG9Zeiy9y/mBiy0AT0eesCodHj0pVjaybJRqxA\nquYLtjNqCCarVhOfixSJB8B4A/pNTGTTHextZkmXjwuXuf2fzISCFKfXR0rX\noN6vG+Pb5BB77Stx3kH5+ATzC18k+d+m14huvPgjKBpKMyUjlEchuHuxIrvf\nJGi2\r\n=FWKF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.ab12cf7a3.0_1612796583405_0.7541329985248444","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/typography","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7da2df2cc93cca4030f7b6a48313469b4a2c17f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.98db2c5ec.0.tgz","fileCount":22,"integrity":"sha512-YGU6mf5TkkLPg17R9nObzYX8WKN3etC3KQ8TZO3N+n/p0iZAW3LhDZtWVS8D+7E8zlN7BCk9uQcyQsWyH0ii3A==","signatures":[{"sig":"MEYCIQDwW07a5fpPcbOwfWQsXVExWAOEEIp6qr8D058I7Qw6OQIhAJ2gwXvODNt1gV9AoN2f0dyHHgsdsn2hEQ3YCIpMm4xE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVndCRA9TVsSAnZWagAAQZkQAKUKw8oI8l/lDebpSNXV\nmPU2H5FMm8Y8nWDldK2Aiw9LszyWgghyDHne8S1Gb7rymmV8aSrIuQpC92V4\nJ0pbeFawM2w7DwBVyZEJBE1FXNEx/PMS9Yg0M2asDzHaHePh6RH/tQpg90m9\nlu/bCKC/O4x6RzVlgkxPmA12xz8KnlyoqFyfkfrYH99GzIaLMq97+tTcsF2b\nL6Ft6UIgfJfJJ1+a+4MrCNApgLFbc+fVL0UcL6bh7divfjU597qVknAzhRSZ\ntpbuANkXAYzQIxLnCsuo6coDHyFNRiJZ73xePCzovEGZh3Ad/fDztwpxCBju\n8lIxoh1uLu8yWYPTLpcOFuX+zLE234O/c+9ENqG5QLFQwAt+Uz3/yjT46RkH\nIiEkkmQuBKsKHOjkSox5AM3ETRp5pzC/BgbHJHM/1H1jEfms1EjJfB7uh96o\nvpXJvDGvrwOpaaiLFhkpGQdlpGqsZ4UsP9Fs6TEGui1JdNhuMmT8e6gopxXM\nSXvSFS8Dtu2V+YAtq0VSK0tm5nsNQiUhEmMwIh5HMVh7f7aNfCWxQ8m0Sb6n\nAEl5y+9LNUwPh2D0u39PA9OxSGSQQ0ky3suuG7mHBsuxfhCRpeSg9/frMfr1\nEAXoQS5ZBMXV6ZGrcvJbHpRDMJie+ii7RMwfeWejTp2ofk65lRlp2HiWcMkb\nPPy1\r\n=Iexi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.98db2c5ec.0_1612798429286_0.7303883305539738","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/typography","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c8bab8d2a0d07167fdcc4ba9930313e9efb013f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":22,"integrity":"sha512-fb52A31qqVPxUsRQWJTgOo6vrSsGTD5Y6+VidWMyKQ55w2s1FucqC/eQ25exXdH6VNJbUDRzDVcTF4L+k4A7WQ==","signatures":[{"sig":"MEQCIF0D4qGILQ+oo8abjls4jTqleBBBmLbC+hFJvej/QoFzAiBTTSORGu0r2ZQglxjgbGMSGs2tj35ke9zK2FcvGUcyzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIICRA9TVsSAnZWagAA92IQAJxHzsmrC5iyUDSUSicl\nf9LavnCQ6EnHTmrZoLl0arGY8Jk558wV78c4QWBn8PF8vobi9gY8AsevTK1Z\n7z6hnciPifN/wWTnrlVDBJZqFrZ1vyZwCu1fCUjZN7T8VimgrDjC/T1H0no/\nsU/QJzcA3Nmoawha/RiKxE/cKYPDqap/FE11ELqEn7Ff7V9H8v6vVvQJWJO6\nWEBMkA+cE4nU7uIS9OCX9vezwtsUKwoyqfuUkZTtTl4FnS0ZB2SVzw86FQve\n3t2Nm469LK762CQ9IGjC3zM3pFGCgZFB1mb5EKj8fY8OWzrwSITPWCxou0EX\nIsmToCeo41g0gTWLOrrf8ctOn389Sv0+mmY8+nBWD+XOu3VRtieJLzPn5RPJ\n70nyR9PioLvdOjR+l9aFUu7+vjDrUdHZxiitFOjHBio64bZjNKJnWJ9pCGKO\n6VO9++5bcrGnjcphPlGEOrC3z8I/ET1F51ZCXRv3b1iOuJXyLThe6ssb3sHS\nUHbopwp/F4DvVH9a5dXJXobm9O5uOUqS9gqcLfiQnofdtqb1bWuZK6k/tAnk\nqER5BCpDze5Nop533jnEm+w/K8dT8cJVazorKB52xY8CBgg5DXncbcN5tBmk\npzrSi2q7SF+m2Czf7LD/jO8rTauYp8ympfjOpXhFQvqZkU8YH1W7HXSTZUy7\nmmIk\r\n=ED7P\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.1f86b9f6d.0_1612804616198_0.4435064406489815","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/typography","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"996d18ce008644c3129b464e79cde506de1324c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":22,"integrity":"sha512-wcOepkA5y+4uSpGZVvmMTEnY6RQpUk17Z2ozmPf63JrZlCp5vE8FVsHudK+8HCSptR0y+lbvX67nuKSxjKtjdQ==","signatures":[{"sig":"MEUCIHd2552rONNkDp6Nj+7fylx3RH8/Yqx8x/YHhd/c+jFwAiEA1JkKbibJi/FqUn3LXuAafOBdrcyn68z+GuZuQsmijzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXwfCRA9TVsSAnZWagAAUX4QAI2KDFKuKbxOYB9QnkGE\ngtBLDnl1DK2EEJKR40dGS5oHuzSZv49q4MKah9vZxdARZQL3QY0Y+M6MyrCS\nQbGj+BvOpfB4z8qpKbcLfbxC3AbR19rQG7FX7pt1F1NpqJMDu0oHMVDXmh1s\nNMJaelPkBGAflhRXPlcAW/JJR2sdfPlqYxqRbS03kvhQfHga7dSNW7czfALH\ncFnSCfujS2e5Z1Y8vAYdVVKEb9+ptk4+lmCQ4ep2UGswWSz9HVLvNBmfV6bM\nZ2KmzFd6/C39X1PgKoK3Uo5X1aMjkNTFixoFM4gxmSHKo8W3ym7+nQ0TlDNp\n/m+I6t3U4YokIM7qsg931vS1erq3HZDA+xuxJFe9dFtgfEUSYqtXJVoFZ3DS\n3v2M2647pp257VDo112rLXofyqWn1WbLCiJszOEJio3ylJxqgw5hfC01yZt7\nIaWBFwTIfe+S8bd5W1T1yztdYi3FJ9lMYhkpz1AtyQRJ6KI7g5zVDnL3+9hw\n+yyjPKJwu4bEup28J2YIN7tz1iB51+0eKMrFFjBe/i3vIWF0teZUGEfiBm1j\nGC4ymIPwTroIx6qMAcnV+583GZUFrMcdE9CauMGdoJF66xn7AL8GZNQ1WQbJ\npPHptnFiJmlfWyo4IqS6qWnjrSO54lXhdS7M/PbLS3bBocfkexotljx+FvVK\nfSW+\r\n=c9I7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.aac8f5d9a.0_1612807198970_0.9285022784713002","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/typography","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6abde32c4d8af9084baac599a2a20d9ee11847a8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.750e18fc7.0.tgz","fileCount":22,"integrity":"sha512-pamChkgDR6zgUorcx1+wHF24vAw8Uh+8MoJP/4aehuf3cgCpoDLyEnOwznv0UXd73Iz9mB7xFNtBnEHUxF2yBg==","signatures":[{"sig":"MEQCIBw6ArQrPHDPzVXHc0dpZQ4oI45DsIt7nVUy/W24VHoqAiAl/mE8zy5Qsk3qhHb8O4A+K/iM0l3HfV630HlwWYDa8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/uCRA9TVsSAnZWagAAW/kP/25SFUE394R+r0owE8mY\ni+zlGyC0FrjakSs1rKINwdKUZTCPAPWmpZGnXNGTmfAFZqQVh/GG5nEgL9h4\nsxXVehZpuWX34v2fEubFZnQHfHjKv2WRwpRtj33z8W8QNzm+PdoOB3+uBdYo\n+hWY2FmOdKpfZAS+Gnvb69gyi1DvaoRcMVdGnhYIBNY2ZqPHwb6Hoyy8Tf+P\nXZMXqZLurZC9YzBGx086TbydfhD4LcCV1e8hjO54eF7sd983R4L0DA0oqbTw\nDmnMcYL+Rvsx2SK2AkX94xTwbCHu/prBJxqHPselo+veglxQc+MBrdksEFNq\nfUp3l/ti3+LTd+NFjWPGv9VdQOS5sZvjyB1LiN8v29RRCNzPWc/DucFVB/wl\nhdOGAWEwDpiZhac+AQW4uurTz9MrU5D1Hu4Gwe9vIpk7hN9mvFvwLvba7Fya\nTJorsWgkX+fBbJ2ZOs9caWQ2TUHBGKUdDR5YROODLSLmI1Bfa1VaRXBxz6/k\noG/boactWIgZ5rM3CiiSFOf30naDTnlLh08g6hbEGf0GIF2rYosZG1Zx1/p/\nFpDN3CMkkaStbbRC8xiZqL2WQ65nKgbxebQ9h0Z8JdOGC69HVdf84QCzjXzd\n0f9VamL2SpZd/1jNlHrFKj2lbhwfVS6QAhXgXbsA7gMpf6xg9zFaVFVvQXbv\nh+pq\r\n=0Ptt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.750e18fc7.0_1612820461466_0.35359164946490007","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/typography","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69ebe5c6d82d469a57bbf6cc2097175be982d75e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.b62b1266d.0.tgz","fileCount":22,"integrity":"sha512-Qu92mP9ik01MJDTxkg8MzaGr6DS6xPMR8VF8vGha+y5tkZ3Mq5+i95zUIo7+ayxRBWRwhnB1f7F8ot3e0Cb0Hw==","signatures":[{"sig":"MEYCIQC5DXdCzdCn4oRSZaTA4vXRR/r8vXPFw4Wo0g4sSv4GYAIhAN2iGR0+h+DEVQ6avgjCmDqOrMY8/KleDoumOnJ+je7X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQSCRA9TVsSAnZWagAAkf0P/1Aab+Vf59tOhCDNy1Fk\n/BjkWL1txUF4Yar7VBJ8HhRp86iSngUoIuQ4dmqYPpxnD7EoH3mGaq3C82bA\nNAx6gxD7HmKDBCMBoHrIyhEH4Ej1Yt00nETIOhqH9WyXtwNemWGmeCF2ZWvq\nD9wif3e+q9wFxh4GEpSsS7SO3VYfmkBew3Hp5Brda9at6EUWOmmvTkGmkfM/\nZkZgelD5TYmO7iyN8nWJ7DbWaEvHI9ZOwfzfCjlS9A8YuUuyRDyinizI9pRg\nTCdSjaR6tA7rn98Pxqatb2ol3ehOUx1o0h+s/UrFzwqsSqlNlMBeH4yvlWCe\ndHj/4CiTAGLxuk6GkAb7R5+koKO6h121TLhkklwdcyNbFftYbjcKQyYavOmx\nc9pjOTtiQ601iT/h9ZvRqTXnnq/duo2n7u1qRUIRR7okBP+W6CTTfYZTfxTR\nxnr8/HZp4/GIhZ16UhtQfNZcluxYroATksjSpDfDE1EGM4kpCTOYG8AS5M3c\npXXBsS6zdZNk0alI7JE1+wll6A05jwYLRPkqgbB/mQ4xITHcwYOSqMh8KaV4\nraWCp5NHu8Q/uyvVvlg24zVVqi7KWN0nqeuZ7APdKB3Gkzzgz/ZstG9xc2hE\nikmDHAWii9ZcQWcY9Tih5vjJB1o1zCmiTzNkTuPqgkSNqkdjD3DGRdhNFh7E\nsa6X\r\n=C4fr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.b62b1266d.0_1612907537736_0.5514302058708671","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/typography","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fa38f2500279f7fe70ee9601e2cd5c1dae344d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.a6b3101fb.0.tgz","fileCount":22,"integrity":"sha512-DYr+Re+ZLkr8NZB4xocNNrwO+PlbnBPzcaBnnEOB7i8WZ+yKffCzPR4TOcfZhjOmLR5irndTSHF18NiMD7qsiw==","signatures":[{"sig":"MEYCIQD6TU8u6pPpyCXbqAht8sT3nGxO0Jt4f6RK/NgRi9YyrwIhANHVcwEQ1QbJktyqOkXeA8t7AtH8Hajapm/sY7CN/kUZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrTCRA9TVsSAnZWagAAghIQAIoNBG2caqxgIqNsZEGx\nS4ZE2QzKmeRzCrCccK0itu3B69cxIckmzZy1ZUYcSwnIjOLTnAV3c+HaSOpe\nKxs53kCAvf9FytXG1NH6oRhk/iSE6QFmaW4yQlrjWnqEibeB1LIxYp31+qYf\n/xQxB+3qsMvAAv6b0Usz8OyH+yYea61J1LYuHwv4NPGaOKdcAYqipiNCs+yb\nBtQjURnNXIKiJE4zQVetnBCwAd2x9MgGAmNj2bAt6dZBgI++90+6KNAc8soQ\nrshl+ZKRyzUnr723ufDs8NLm2czPCmwexlUyIhUeU58hd1mT7HfsKx0vByfS\nnuJkEaO3wWJmQsvjwJJEU7+dA3MLC4KS9k+SPeNBbUGhZ5VcjcRLw1K/kfXk\ncykmQZnGK8M7iTHG4aV1dtS2UnEWewfkTjv0+idoxOflIe27H6u9EdzNMfG+\nrzQ7lqRfmyLqn6Wpv9m9JxEk6Hgse8m18jIRDKH5zZYuc43mU3kVMCFw9zhk\nV4gHHTYU7h2QWMVcz2yzu8blhLlGaMA93Y8UlX2jO/26AX5gayzOSORL0qKk\n1fKh4Hdpgjqal/B1CiphZrOoMshTPYMslT38/U3/NnNh8LNlUNR4+JOebGaS\nwy7WAPj3UgiVBa2pD0OphrVtEOqjF67lg3onGnW1/lRrkfhEVR3eKmEZWjrE\nArae\r\n=9SDE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.a6b3101fb.0_1613085394883_0.8246164303923063","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/typography","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.ed88df700.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25b061199c03e63cb00efd4acd4d667dcfa50f4a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.ed88df700.0.tgz","fileCount":22,"integrity":"sha512-laMg5w4UxEvQs69ni7mH5Jv+xv/EJt48n1FD8+nnZxTbo3RX6ZNWzBcnamwTPwylTJZCDXyC178TPrge8fhbAg==","signatures":[{"sig":"MEYCIQCCE4bCdJ2JBT7b1yMQfOE/M+Nmx2eiKaNHN19Bht6nZQIhAJQV0KPG/NqEM6wRa1XAuRtgKh0iBTWT8qiTNhZ1xlQ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcaCCRA9TVsSAnZWagAAtVMP/2Otsv0SZJ6hhHUNxVey\nX7y+IYHsIe7qiMEIpl/NqDp5z30yp/mdGFQgWoIBhRL5hrM+aHZ973OeWDUb\nDLOcO7RWH8AWkiJp8lMUrdk17GEZcnnEZyvh2K7wgcS7JyvIur593m3tBfRy\nRM/bAziHATv6APQn8RieAdp855yKUh2JjTLA9q5NHIqOQLhJ44DRhG83n2Jw\nqxKCpOyFEJdJDti8PDbgGlSjGBF5bo0G3ORS0k34U9gyQyynO5iXAVQdH3fE\nHms2Qvu2Mrq9O/o5FTukjRCcKWimxoNHbs6Ubnb4wxPZchS10HSWVb4NzczF\nFWWTW5MKQJ/pBLbtKg5I/MDHyxrSRqE+Q7XJAD4Sc9DAsznz4/Km3rhlEsCt\nKxfn0dEDIhFWstmmcemR3lGGTevPH+aNvDK3uxExUfJM0W9e/96jJv+WZl75\nktZG2cGVQSSdEtsiFzQd9a8L0Td+AAt+ixDB3VQbGpyasohiybyvZ/rrBHbM\nZrQLrouAuRkOmVpu4uR8IBRUALXf7dmyuDuYqEHJjq4Nu6lK7ZGCgy9b6Vtg\n28cPMSpJBAaqNx6mmn8hLsIRksbUETfy8PgT2fJq6fq0/xp6DrryEO5HFNc8\nFyHEZeRKpFxUCVARQ/hmwLFvT7aHMq39F46eJnimbWpxpM+sxMtmQoOjVQil\n2FRx\r\n=gxWg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.ed88df700.0_1613088386098_0.12576339447769458","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/typography","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5719bc001afa72ab60a8def92c9ce309e67b882","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.d30efe6b4.0.tgz","fileCount":22,"integrity":"sha512-8k2O03tLR7pSehDpHVeYKWpUZZV3rZIhseKOP+czq/FDnQHS9ZZFXtc+6v/mzkevhfERCOjM0E77jqVpB9O/Bg==","signatures":[{"sig":"MEUCIQCwRxIh46VkxTfpbo9lfXL14zzkEO4jUt4vyNsSxM600wIgJTym+jz8wr6lyJwLTC18A8Kyqrfue5jrKl/TbMjHk0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJergCRA9TVsSAnZWagAAUbEQAIwk5M2eg5vQg/qE0wvq\nYKk+Lpyez0dEZ8qWvwO/juiXtaONVeNLUO0M0/I0NsLwXmlcbj1w8AqRGYjM\nKc9HZW1qPuGpDKbJI642S0YOhfHwIWZNbN/atBUv6oy5yuh3uV2yw7ie95Ur\nCzkpOhqGPnc50eYhfbLta9b4yLXdFN8Je3awxM4slXReXtnc1R9mKQSaj7Br\n7Wfqvw537tNOUOPBQy6USZavxW0W5CAtVbDPGqh/ypFEw0gXOV6apnAjdhRw\n96/gc7kqy/FEuTFa+x4JtI9u6PQq6Ea+Tza0fRnV2K+AUZQw6fgqy+2U+eCv\nL2CppSJ3GXZyqp7V9kQuY0hMZeq2rcpv4x1+wSPPJ4M1ARa/myGoHdJr3VGw\nlUO/etyQPbWkWT883WTYHp2xQFSuJZaJpU/7bnnwWuvkGUhzIQrhdcYRqojO\noBGJAeVki5sqhgKkl87HwHcMunLQB0AsHBvz+ROctdI/ek6t2Mm7WAqX28lm\nMw41WFx3RqlTUjUyC+XIknC9qNOs/vY0FRczXmyHpohAxcQmqqvgQJv5S2dd\nf4h4eG1470JZt7n/6g827LfvIM8ZUKFebdlBds1kOYHEBqQLZJI5fJUujN+c\n2XjEiRg0dLo/4/HCxul86Dt1rE7e9OIsKFNUE6rH6Ni9hxqv9h0ZAIxlfWEJ\niLLH\r\n=0gGM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.d30efe6b4.0_1613097696323_0.6728401091111353","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/typography","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23e0006eb42db715114d89f182d61ed917bd3c20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0393bdc4b.0.tgz","fileCount":22,"integrity":"sha512-d2Xhltu5FmRP84laUeUWllazHXuKTpocpiyQGS1LNljHS5oMjISPsiVE7dUJ1CAAIG0MVT1ngL/Wr3VTaA9ntQ==","signatures":[{"sig":"MEUCIQDOsu8NRE8+3m6GEGg2thEtbkKxBZB9T2XSdgLMb+tesQIgUq+hmHW631D1sZA5cf6xgHewq9qfT9Zz6xeD9HKCios=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgRpCRA9TVsSAnZWagAA77wP/02q12V+TNg8zLBFs0If\nheRJetYG2KrAZ/eL9ncHvNaE05fTNvZVwWENVu/Z/L5oCBZBKJ7DuHT66kAW\n7uHwDVsEyBouoxS4X7s6iCE5z3X47BRnWkYL2EIoYMQSrGgeh5NbdLMC+8gQ\nasDLsT/TFnBK/hhvbKlqNwmzf83WkavuQpgy/2wfAZ9U2aPz4RaZCgTSwiYE\nyLrnAKlUFdNJo4ZnB4f7WyMxhhao+Q9qERHcYWMTbsR/jQGzWnubLxUhTOva\njqpFhv8uhCRMj2cbLD41VvTjeCdaV/z7zKxxa4TCLWA4CraOTf35HXBuK8Ku\nJWhJG6UIoXtlq780X/M/4J7s92a8EubNc02hgdbO76v1uqdKCV8uh9vm+ver\nXuR1ZsGYtSPrxWQCxeyfmxGjMt9wMKWIxnkSQW011/pqyf3lvdjRK0P4fm4N\n0QZd/KI0iK0XdRsUImtXrQo/1+89ENbJGtZdm4C2q9JXhxUEnfBQEF+BWhKs\n2vVxGHs9tq+W7+8ryIppvMiwJilivxXsnmp9nSB2MmKDQkWoTVjlY4VxZTyl\nxD0Lt94+Hu59Eq/F4fsicQJpGw+Bffyqr36mbQu0pVD0/vYVlCwTd3Me2Zmc\n3t1Y0AsWL7Z2mOOACOKKr+/6P2Ivr2iXco+DfILbcKl6m9Pd1F/P21MSkAuI\n+ZL9\r\n=54SS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0393bdc4b.0_1613104233093_0.5132903965290154","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/typography","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37ed0f87c051acc6f564e44fea8fc619a0ee9557","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.7cd26af4d.0.tgz","fileCount":22,"integrity":"sha512-9n+BGEcHyhpmCbNn8FSPN/LBaUBEWv3EeaqUejl8Jl8fEdsLfDA4MvEiail2vUMq3tKW2ZHztyLXudz2CgMcaQ==","signatures":[{"sig":"MEUCIHS32kAsHCR1nCL8totoc05y3aSTUxiopkmiWDjMEqVNAiEAs031XuDPrpW9bsYBOsyudwRfTC6OrtxgbWiSAvd4j10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXHCRA9TVsSAnZWagAAmDkP/04FTkPG54B38TSmjqZy\nsPynhTwbtDkYMmfiANHrLz37jk01NB3DZWX0vE3x0OAzKw36tOpJjNelvpOR\nq8oRfEm0Z4K9rucVGEx2oNI45xwVrz/KMZrYCHCfLKjli6Q3Of532ae1wy8y\n4ZazrRAogb8mG7OEaxfwvM0dsXapDHs7inSNWNU/2EL1zSZ3MW1lplndNibR\nS+WNp/VlV/D12fKgdt+2V+EEbkWQWECiBGX7+RDDZaQ0AzPj2n+1mKKTQi8U\n8Twhawg37p+cPJjFpRc8SsmE3bFKWiQ6kJPGIW9VDq8EnNnNXUYORH2g5BWm\nWBu5ok0A45lxLMv9WslOeBpXVuCvX9OdMBPJDAsszFtioc6vTBgwtxdcmAGu\n216HBuCB2HBhPx7/V3rE1wEYCQKoq7mCiWfzYqtaCbgSlzltNcGwp3qrso4w\nMgbaQTESCNoJNzTtzWxemAWzZl4LPQs2NYYHPT97bHo5KkxWKC+KpidsRJUp\nP6MAah4cfmqxxHEZ2qvBchAnti8JabZMYq+BUMuCuGAsngpWw0+cml36CJna\n0BRj2PCaK/vezYo355WMEHr9qDVPG04JrGtleRQEcSP1XsTXian2YA2EACkU\ng7Qqdd96yGBqWfmWh2WcK2yKxxiAs4t6BLgJCpq9iy3q0cBDJ4gVmfJLCvlE\nuCrB\r\n=QQAU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.7cd26af4d.0_1613145542731_0.18791374993180532","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/typography","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b415c1a72d23ffe0d2abf731f9905014f2449762","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.71fe9a067.0.tgz","fileCount":22,"integrity":"sha512-b6jOHgxDvPIuVSxOtAawGrUjNxb/TbfPb4QMuhacoYU2uNeYtxh+ZvZ4K+GMnhUk/DpT62qMUZFwCQ8kkwcgKQ==","signatures":[{"sig":"MEQCIFbTh53s3iMz9n56rfcLLqlWsiy0nP3sMwQgN2q9+aURAiAxWBChumdd4r5aL3cE2zH9OEgLSTWrkxjHIb2qb55r4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq0lCRA9TVsSAnZWagAAedUP/2CB7BYxcrJkSQljP0eA\nSnvH97hPH9GLxpWBRRRuPYxQGbKvEfm550eo2WzIuvBi8XM+l3ksEjUGeNZc\np+fPYY1/rsZC2zx6+ai3wxiV/ssXFhjG9SVjDfrPLu07i3Lz70YVpi/dBBc9\noO595fV65s8r1OyAYjchkrh3a+Q1u+N5P37PtI/hANTUDjyYqMs8LGRZYKn2\n/4R2TtCnJF/evi68C+7MnVweKl8Iku24Lfy+H2FCF3WB4FoDJw1DrO0eaTF0\nLbrLQWaLZMf03nBgfX3RfbHprBh+gT1iLWPgDTWT4bkX5IF50ocMgE5MKOvq\nMlcg6CbjuUG1ZcBrAdjhEqg1eUYNoHV7rVGNVgHLIzevcZwDn1b/rInI+ce/\nUsuGANbBJ0hl7ti97qrZuq7dqnxW6BaGJ21ccA5WtWOGtZBbgEBvMa1QdA45\nfHWffzbez/eLssP8rKP/AtnSnZ9XRyNnehRZVlWBDmrWkqKsZLZR32SuXAxL\n8n3uUHfNckqQFQDoLTsa1F3aKaOgEfRtaT1Jz5UMCtcMFYnzxF0hd+hPDma4\ntgwvit7tssQ8buT84bJ/gihhKzqVakoo299qHg31Z85+5su5Iu0xFb4y5c5O\nBgjBqdUpwg9SIBpBpVSm1wOi+Jh3X6IQA2/Y/bDAqK6CBZUKUsyNSQoE8efI\npKDF\r\n=eCW8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.71fe9a067.0_1613147428650_0.36269232123076556","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/typography","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"486efb934dcca1bd937d7fb339d39392a4046963","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0fd56a86b.0.tgz","fileCount":22,"integrity":"sha512-5hCgT+02o/IIw+tQR70OSgokHfgWsZPPVz+guUB3iZa9ldFp3j95Y42/Of1QHG2gxKJlvLJUJeX3S1J7dO6emg==","signatures":[{"sig":"MEYCIQCjx67soZGATvRLM8XZ91hD7tRV2p8WrFdADozUTwRCUwIhAJn2UJAjspPhLxbiNXZwYopF/T+9HtqqYPwcJ6dPFcRT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxkrCRA9TVsSAnZWagAAP/EQAKNX61eOT5OOn34wkO2o\nIouqdFZqGOpseNYuptEcsGPszbPjessV+PAsRjbtFnAwFxvFczhQKI9J52wJ\n3TxeJ+789qEB3m7taLYikzem/kbM2pw24BnkASPJ7VflBXEpijC6HiCVu+21\nyO0dL6KEn7caSVNQq2wAMDDYJm8KwNZ767iVa8l//UIPzmEno/IvsRCeFFG3\np3cIvK3FUGhG57EBeqW4JJM/hi3ZqcFBgOLHyPV3KQvB6GG8HN1xj+p+59Jp\nLuI4hOIiAUK/1jVxC3iH6Emh7oHBKDPBesDJu9BVLSA8TMWrSKNZCPdwAU2x\nZVkCswhOkB26cQv1X3kFbetGmOdWjFCZZD34ilTqKmLza573qDRzHK+K5Nvx\nZqQWdB6RevmvtE4UtaAJzgcx3MCH68AmtjX2aEjHNtAC2ZkKM5/bIXU3J8Lc\nFBDvV45IANPAh52s4uRS9JWqalXeBorKhtsYC1swKo53jwbUprcYYGvTQJNF\n/lWFUc2N3ie/i9EKWjlTKPxycWfPZdhwyEBXn/dS7d8IRV8HVZ7/DfP0i5I0\nma9n83J0HEXag6WzVTltsx28jNBH1heDvgoAJ7OJwXd627HbEvl20SFKbv5g\nwBFhuaMeEKUaBSj8+XqMkvnZZoSzs/Os/y8nHJi+iHaQaky2pH1zTzNEpUxc\ntxb2\r\n=TEtF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0fd56a86b.0_1613175082666_0.6494787418741685","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/typography","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e086e4727acb8efa18157a60447a1dca3d8d0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f19bbc4af.0.tgz","fileCount":22,"integrity":"sha512-Gek+8Y4hgwSBnnt1PB0jSukLtYsOXgtT8njo+WoBQzrsLFiPgferKTM+j4DAGmgoMK8XJeBWJAuxf6Lt6ShOtA==","signatures":[{"sig":"MEYCIQDoKwvJbROqRjq9GyCvMvjQrXTi2nk/BC9cxKihSfJ+EQIhAJtHFcfwyoPKmEgirKtQ0LYhdMjKUEc7KlqSZWBJ1XUF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQVCRA9TVsSAnZWagAAoh4P/0KzWuLh+ScbuQ/uKFEq\nP+ERhvKBlsNQ9j71GBqqUvaASfrNbFsdhIQl72jjFSRVRzsnh2n0rJPfsGX5\nAiw+kTWgslM+ZSjxQohqMqU+NU8YyXju1JgHeoNoSCf1ca5zqr1vbfj3R+ym\njSvmzJ2NCxxzcrqrq6x9UuAs9+9va9JUpyVY7MXkElyVuJLtTPK8vuZMLdsT\nHoe/+7fe8DuNB73i+nraA9r06WkvDoxzTmQJaNIh2bPvPydRDm2FdUAdilwm\nbXs2Un4Jf+Zrqam7w0y29VEPwvbYsOpeEYq4IZLc2t/TL7JZxy4JRzkPVW64\nAqAr7UQ3nCjXzMyl4IatPsO2huMOeYyLL5BavaHMXXCIRjcGG0idybeNIa4t\ngFWaLtIA7FfPaD0xUH/VpgXLhZNzJRX1AVR5e1gqi0VHEHIV/V7xBi8mRfX6\nXdKFSw9WoHC2YlnISqK67QRewSLMpxtHFXngBBRbV6jiU/oZW4nXr4dQ+4iC\nCnDU7u2VyO523igYi/VcLPJbK6DD9Vq+giUEusNlP60XKM4598ZHuuLg8GLx\nu7q+Ddh6rN3/i7h9D2baVEk+TIr/UfViY581isxrrygcB842Iht1zUdyXvId\nAbU/91T3ak7aie2KA2hGkKQwLm+rUPqkHRS+FZnmMlf7efxQ7zYUvGlxn6zw\npirG\r\n=9bD3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f19bbc4af.0_1613513748852_0.7699764270111165","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/typography","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba9534e4fcb43d6cb31b39742cee048fbea14c82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f9cac96cc.0.tgz","fileCount":22,"integrity":"sha512-ptU/z8OZAVZh/YSIUhKveZIfpFQkltjwMKnu7M+LXH7J+Pux5KZzVM6BMtOkxcqwxZz7jnvqF+ZAtFZuKpKxUA==","signatures":[{"sig":"MEYCIQDlexCRt0Awb1gxEAd1yDOZrPfmjeMVsKQwHtBMhuIW4QIhAMhjULq2Sn74gO7zrLRx4VBpF1FLEbcl0WqL3Ge26b5+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT+9CRA9TVsSAnZWagAApqoP/RD66gsXEI/FhmMQqhyY\nVoV2UIjSqVJ2D3AZ8UXi57/aNooLFx1O6altjCP/y15MblBpqWdZzbKZIPBn\nXgBqfCO4inPw5PU0s5GZ93Abvjkso1IUrZJzjzrj7ZGKmQ27iRcQNli0Yo4f\nT2L4yteN/bkmbgyKuXRtJRL39GpdHRHw+GbOZKUodQebLj/p84LLT4DH80XF\nB8qzQMhE1ydxARLVpKGYAj+vE/rInfmAnMBTrDoBsQ/BRc3GzAihKtAyuS6m\ngZVaSPGgLY2dA+BKxAGI1TS6ISTv29Azz2TrIZR58Q/15y9HFVCjiSFV6wYE\nZB3XXt32glWICBgjppsi2HO045N7COrbeX8xnlxCC74ln2ixrnecwDB1mQCI\nhV14l6pTe1EbJ6M3YxA1Z8sw/jHE+f/rH96Uw72UGLCv4TWXP5dAR9wkXQth\njkHyxi/dUOOVLbO3nIRVTy2Hpz0M+lzRBXTexsf7yyNHUzszY0b8ZuvBpHzO\nxRMkBu7XmvDByinCGaz1NOyjkRPoj4BWa+WMw0mAG/osiYILhIB7Zq8fzfKU\nNxgaYjj88kF2cQ2Yl97UoFR+otqNPzPrytCsKjDAO3402XJe69Qaig7Fk42f\ntmEkjkHd9WxgJ9c2H81L+eZ8zEdanQQfyi8Znkmyru+2lY+fmXXULYYvGu3m\ndj/e\r\n=5YWc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f9cac96cc.0_1613578172162_0.6551594311112408","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/typography","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e8670c4f70ca184e3afa2d96cd88a000c6f06e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.79ce0878b.0.tgz","fileCount":22,"integrity":"sha512-FiFOeKpt7O0e1BbBOeFvWPhjIx0cL6RgE0BIvkaGUG5rnKALtyH+zSpxi6nnMGCMEFQL78Nt0FTPl200D10MEA==","signatures":[{"sig":"MEUCIQCXBwSDKWGEYVnlth+A77Rc/b/PcONrCPJdZRYZH96rpwIgQufl5zfXuaYlH9CD5N+1kBflacMyqk9aVbrdxZ2gdzU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW19CRA9TVsSAnZWagAAJVoP/Rg828k6YIRz9M/CFvku\nv4OQEV9hGDbCIcS9k50sxXo/wnRzG7LlnS2bxUjJXStNmtzPwMI/iaL4DlnK\nTJd5BB3NaPs2qkuSR16hxOXPejQolUcQSXJDfh32qsyZ4Hgao1aZ6dKTLQSR\nlGpFa93hnCBqod6SDeoPNZRhuhnFu5ir4z6dG78mh+rvRDeQSaOFB2hUTQoe\nIdm/7NoEsPKCFvDRn7jM3N4p0OnJGGRnPt3ZwKtVr0pOP76Ps2N3gU8pAajP\nrOaHkeTdzWTN/xOrHm/xW10234dvKsrwSQyERLwRepZXLOMlbJZ4ptmr7jRl\nZjYpTGK+/QyguD8cptHzJRBEM3v8A2I1p6u622CCU2zx1a5QB8Doh9kI0d62\nuDK4fWwihmntO50cws4mLYS4VDbF+z1xJdoGVKf2ItpXEA2PcMTeOQot96Po\nqnXQlLio699C59XP9+JbczSq0Hmtt+1GpPXz1vcp+OS9LM6dyFyQSJOtxj7I\n48UpIhdD6bpynO0YIyAmuhiZlZLBv4nNFCq+IgK5beJDq6E0Fu82DB0jRiT5\nlOAao3C8+TLW78Hex6L5EppS1ciowJTZBh5Dj4YH5z93hpcc+yXQMyZxfCzT\nEkYGaLz4c1jFzqTAZehJWcseLDlFgU9T60nDvFJtUcGuBQZMyqyz17aVhGaT\nFAcU\r\n=EtD1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.79ce0878b.0_1613589885100_0.9308637502680344","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/typography","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1527f3fa4053f4198be55b8e56fb96045c70b606","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.d6e507b5b.0.tgz","fileCount":22,"integrity":"sha512-/W8UABKNCMHkvIzPE+z8mhb64gjZEJivZsF9b52DzPi1SDooJ6fbHAteUNoeI20XFjiKRhpkGy8U8LssBXkk+g==","signatures":[{"sig":"MEYCIQC96aJcEU8LUdiXkrAxuqB03kaf3rXxoU5Ly/iyIBLIpAIhALDyveQ+CIe+K57M80DdJBLYkdNESbznjQHmcKesxWv9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXU9CRA9TVsSAnZWagAANecP/Rsd7qg7ZToJJ4SlWgFs\ntw7bC6nRgd4e3Nio2HfMXVZgd55HMDnRdfWE4MKLm82Tb3mTQM3lp7jWjqlF\nWnI1ET9zuHvdTnt+hWqI2Grtwrz8jIfpbv2ir2F71/6jlcgcxUVUBP8R8nwL\n7xEhTYEAQCf5Axlg+iEmZXI8jfwAGNUchjcgezMemHOAx7synlpyrl4F5Tjs\noFgKvPZe91UXb63LTb5Tb8P1htj0mm9G8LipHxfyQUwgqIbtc22LY5b0x/Ma\n+R15RDfKTm3o4ohFtGRG8hNcx6jRy5ObChky59Peo7xQxWhV/53alUQPcJK3\ngsg3eeutlhAJJVqLuJGcajR2pxOP5zGH7opMW1QCZXtGGk5CJx5m10MLKt0c\nv5p7AtKHXEpM5rFIoWf5vlzzWHList7Fk5HyD3irmQx3/eO4tIdynq4cVXsE\nv63gqtbn3sZGiEs0Kh6+eLM4Y+QNSRKpHj21OsB77Mv7Z1LzcN0ayOOhXvTs\n5wcMYrPJ4+fg+XynXvV6C0l6O/fYHlnQmDLjaU5wqQlHXLCHSTcipllW2Na8\nimeJGzhgWObhEAoVQGKxTV5I/qgFmGf3ZA/6Ri8EB/EULdUV/qGHuEtqCwwl\n/6juNA5Nq+MgUlzWvweUenoshAxmlSXcbS+bBxE7C31qwjPrxiFCM2rQXBWE\nAEpa\r\n=6dwr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.d6e507b5b.0_1613591868749_0.1653917866875907","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/typography","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f2658381b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"421a15db6bfd19381dc720ec68b48275d0952fa8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f2658381b.0.tgz","fileCount":22,"integrity":"sha512-fH+hVSQyw1ClfiSLwSFnusRCN5M2H1MJ6jdT/Ph7L63iFRu+4wxl3WQipVRRrGSlNIKQkDmnsJbwE6K5EE9+Yw==","signatures":[{"sig":"MEUCIQDdMqckNbI4V+fCrji0HGlImZ4OYyqqbK6huSvIgYLTFwIgEOpWIMPsdCf0Q5JrXp8xtKbImrHqOc4n0UiaqjByY5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxGCRA9TVsSAnZWagAAptwQAIPlqa52F4xfs0hLRPcz\n/ue0smajGK46+NhWe9at33n9kJwa9ASF4UDIIGlEvJghe3usvdTT47OrCnJs\nKLVVXWQklcU5TDWbTV12hP0boZBnPLFzX2BxBA/WFyRcfOBS/QoCh2yaO5b9\nMTsmTHS3SLHUbQ3A1noE0+ISOwai2KO93ozeceFVZMQJ/TpplSo2FYU/ifyh\nlZ9UKblZsd02n2CVV1E1RM8FsHoTtnBIYCl4SYd3SzrimP2DS6Pvd46VVPIJ\nU9b2qgxZ9BLbEw0m0ldzJqQJLtWlwa5WFkRl+jQ/+CHoj9m5Jp1a6fNb8kmi\ng9yXT3h0/JLmNLCVLmAOsYYE/aPEGOZBo+6Jt/3ph7FUHF95YG/k9zC8OT6A\nRkqwxXheR+ZY7fQDK+Dm9yWaOldW0Ddqzp5uKqJ2jEwNH47rwySYihIGq1AC\nlTKTi5RXIiIbWUwIoTLLOx40Q+kei0KT/UFT+3xQdWA1JnVI+yf/VG6PY+sx\nBnpp1TQhu8EaS6z0M/TiVrYQMw8vvOJRUGr9V89wyMg48ySEEhUvqdAFGNug\nRW7W6Oo0XTjcFRR5YdOJhJsTDyQHET7jfp3LSSWqs/2R5suVblMLs/zMllrH\nWLapx1v3UEF+Lcw1a0+zMFwe96MqhAu/l9z0cQ/SpteuMvCwKTgtPrbroK3R\nBE9v\r\n=QA3G\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f2658381b.0_1613601861713_0.4731069597765567","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/typography","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96fee15b8eade6dd19e1d24e9f74a975b5452013","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.97c4d4035.0.tgz","fileCount":22,"integrity":"sha512-CD04Ougj580My0jnJT9XgvPER9NtojzYLA/Ajx9/3PCX0URWmZGdmBy15qbmvx+1K58vLqnxqQXAQWbe2rppyA==","signatures":[{"sig":"MEUCIA6bN0R3BlmMMjwRd2TdRQt3vnpWxROOLMZ+aa2KXWK6AiEAzkwbk/X9BhcgjgAPpu+yAowC1HIGH0p25lrLkssYUe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJDCRA9TVsSAnZWagAA6XAQAJl0xVivL1iEZp6alCiW\n1LXwzfM0KId8hhBfpw2FwhXD1KYH4aDlQ8xgXP6DKtezoSrXJ6+wjLYp8P8X\nDpP/54rTRCwJ7VRnOspPngxfHm/EEcBPBaKroz/S+IkmYZb42q+NtdclYzKn\nOnEzAWG5GewVoP++MfSjBtXDXnHCCCsEzSbUhfMZH/Q7Jpb/1YSr4/lJHdFc\nwJ2vIjpUTDbSLh88sMTPOgDHs2HC+MSzBpAHDbMzV8tab/kzydfueg0FwL8f\ntr81C5PhzkJTpGEIbO2tA59FckAUReeMqGNHZxDfIE3o8u6B1N7/wd6WVtAp\nWhy5JIdOvttiL13v1MmVE8Nqx7B2tUSoyLVSbUj++CJoPtEmZzx1jJqV6uKQ\nUUbCu51POLzfRtNV7C0OBK2LQzdTX9v2Nc1Q2F6auN975+61+apGrhRIKaLM\nCWSU0SWUEekLBbN5fD3PTwAPNvTJZcfX0QUSL8pr6K285SwJTcCyCLxSDJ4h\nu6ECzk/Aoy4+ObDJc1Z+hmN5EqakyNgNzvkZnCv6WuYuH9TjOawW3jChq/s7\nPj6pextxRpUL9Ml4xh0e1bw0RTVKpCXMv0vgpCfSfdFU8w2wwoMecdYefbUG\ny6GuVM5zu42rT5AHzIq7Ac9DttFW2Sp4t+XKxnYLb/q+rp9qz570APJpOhDi\nKVf+\r\n=ngq2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"@material/theme":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.97c4d4035.0_1613615682648_0.3844869583825923","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/typography","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8845708eae95f0f2ea8e9c9b144b7156a7243c70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f5bb4648c.0.tgz","fileCount":22,"integrity":"sha512-jPw2PRr6hPj/TdKpbg8m8zA8TBOu2ZSLV8NcKb1KbzR5qBxdobvoo2+9MUWdf3VheUg/tS7DhDmM+nzK3CuVpQ==","signatures":[{"sig":"MEYCIQDUYgVg1DTuqB7I7bsiYMgWN8xufG9eNM5RmKMJyKoj/gIhAJnHY77Tzw+0+qDVKi2Qi8BhG64OTeDSvNcYjyYft2QW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpAlCRA9TVsSAnZWagAAnGYP/i2ikp/M+ie5P+ZGHb3o\n+9yx3F1UAxYMsX+oUMsxK98lx3dRlv7fC3QacsR9xplC1kWSbOKl+BpyZJ2J\nD5IJhl7feLyCReSkKNdpFCv/OJgT8iRW8xGMgLwR2d/E/l3IGa/tUk+CC495\n6NYKV/4MSFOTBm4PghSbkV0P0USf8eJf8/qRrh0zwshkKqStFkgIoGm3MLgp\nK0r7CLWkJw2iylFJ296C2/9+KI5VxwjRSlK61e3Nrr6x/vKkMRWnGoRze48Q\nRlxQwP6GzY77puO2SjZJPGEoBQwpbapG67ywDqg9uzhAmET1U3KKADBeENyX\nQq/1vpju4d075KT0FGifZE2N5QeEAc8QY3HGYbrabjpFp8N2RTgeBitkaQX8\noOSbxsnTHrThOcDJbl9fOvmYYWXvcOy1gnQNHO3Zu7So5qG1XNPzNHACnTz+\naLxESy72ZoJRMPIaKOWFt7l1mtQXN6fxk/aOUJgFawCLjnVdxD84gclpjtbJ\ngOMbwhUVe9GNVwDeomwE/GwmEN5pMCT9JocNgAhyWVeUlDOqJackuM3ySoE/\ncDCngGDts8AyQ0LzJnbmQ0EtVYGIw0oINMe0SMH6Mz1bd/i/Hz6YfOLBTujf\nGN8RJyEoUyaaFUtqfirbm0biEdDXqjJA4VV9u9JVASL/90SBf8imQD9Pr4tm\nqSQ1\r\n=uWYJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f5bb4648c.0_1613664292464_0.6520239890180926","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/typography","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.302c7a960.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f40353af0c8b94c82a2527b02e3c7028e2bbbbda","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.302c7a960.0.tgz","fileCount":22,"integrity":"sha512-6sYswzoGYt+q58gTb9qk/8GWi2KagWdDS/JMTMJ2ToP15rJdiKi5oI/SrE46LkdFeO80HFCPS9ozS/FKx2qKiA==","signatures":[{"sig":"MEYCIQDyNw09eGbebtaLmOmXZ6AK4UDtvjwLMZxVig3Ibyh2LgIhAIdgYhsgLLOne3I3UY4t9HNR32CBUbFngVd1zc9DAADg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrPdCRA9TVsSAnZWagAA6MQP/1Zo9xlAaiNDsrmDHvMT\nDMrJ8pqTPe1caY0ZkDWgyuqoLUUcMIfbQx8OUsUUvXscXpizzxO9TH+tOG2f\noEBHudBFGo16rm2ThIXF/KNqDBJ5IN/5vmSfjj3iP2tqPIaw8jq4Z01juu2B\ndtAd/+shW1Fvx402CXA51nZK22Aulpv/aoiX30rwB2c6GWTx4/MTSKtHrUeI\npePkeXEeC06ALC37+iFzqP2pK3ycRd3h0M771OpLSFi97y9J1kppTPsTjRou\nGmFByd6bADqebrZGEH9mRavt2M5ra7eEyTl+xK6XbtsueXnphG+JdbLXZthQ\nsUVnFZTNd3fjmBFGGoeSONFWw3/p6PSjdlU+QPDF7JlYkXhZCkwT1K2/CIoj\nzTNBy/I+29elFLgtIHjpllQm9y+1uOdNP4siljOKYlFnxVtzVA8xlpCGmu7t\nqstLlcH2kNw6cjHtYIGlQUjJx/lcQ7mPkGeAI53gH4G5Nv/pOJQKUrWczCtW\neL5iZrjZj4/K5wnxwXCjksKAV1JaP4zc2+CmWSIzpv3L0o6wSVIb5NHL6GMd\ntgDjcHjzkQW4K6AsVgD4vta2taKSEl9wYeaK1qGu0AXzyvHZtxkrYIHoZkbo\nsxMDiFvyzZyp6BcI6rxwhMutlsrvN4A0Ub2qGAkM4lGCE7Cz3XY4rkCH3zby\nedWj\r\n=Cms0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.302c7a960.0_1613673437208_0.37373340353737183","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/typography","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84b8c14569351e0164ce5f24fc3b96fa3c981934","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.aa0aaf026.0.tgz","fileCount":22,"integrity":"sha512-ShZqjCGD2KG7ntebGj43GqIooy+or72KxTWjiCzIn+VAbiUuzmRAZAaQen6mRm9GhoGVhcAqBcF/AaesqA1XOg==","signatures":[{"sig":"MEYCIQDAOGMvaX+1EXkyx+9l094p6/jeLY3j320sJBsz/nye/wIhAJZZ1+lOfmorYq4Ra3p2QX7c4L3mfxEuWBCkXZhKApqy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":103663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6MCRA9TVsSAnZWagAA9WQQAJVyd6UKRH4WC1mfOLZy\nIql2D5Q05mLDrS1MQAtEkKYXuSlPjpL/PWpkB685jQRoyiYJH4fCZPHYy1MI\nGCaXDUI3kNHi9jOdTjeUiq2+mfcnbo3faR+GqanmCNjKw57TJen61Tqp2Fu1\nkyUxETgWFhlhy1AoHqMYOdX6u2l/79SEQfFMrqLCcdUVhOBBdS5TuXxXP1As\nB/Ua4pPmboIhq8+VvGw2NR4gMoAuEiaFI+lCZXJ4Mc+qjNv5nEsZAHQtZBKG\nCgX9PmMzxxOPH3UbK+X1jyhwUYt8CMS9dkroXvHqaEwQqESQ1oosOPTiHvhl\nx+kzu/a0YN2Wk1aB4NQdtFizLnM5VYrzbuML/VhgzR+2YAMrq8Idt+z4+s0B\n/9TRjq4Tuobo+oZ9BEnGBVeGrSd4BVg/XYk3VgeRnQV7Qgaa308BSOJO8k3E\n5jPhaSMI2XFLwNMGYu3ZOiynbBmWISY3O5fo2jDpXaVCBk+vcBv2EmdnAWQZ\nVYZ10zz7xQwVCzxW/KZX6eAC0El4JwdIlsWwkdAPe+O5eN/8BDY9rDzZKRYT\ngIk2WG5SUkBfF1+MVl4mkt3NB59jrUE1N6eYETk2GxXK5wN0lAmHcLzAHhtw\nnjznUPuu+YVABC8iEqHeuboR33U9vhcHZhX0uFQDKAzcs5pULWKkvmWAtRYm\nPaQy\r\n=A5fT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.aa0aaf026.0_1613676171935_0.8992554670577784","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/typography","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"523e5375d6f2db1db772639a9fc8e9226e6fae9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.07ff0c452.0.tgz","fileCount":22,"integrity":"sha512-ENWbyI5hBlfRZcB2clr1cnGPAoxwT7jAcdAmg3G0U5RDqpKXwQ9iUfnldRanxNHcAGuTKmNAinMwljZGSE9FUA==","signatures":[{"sig":"MEUCIDFWFpV7v01mYoJi+rZMVdyX7s5eX72r0M9JZ9hKmnB3AiEAgYf9/aBRBPhPikYHP4sqpuFinIX4T29VTHUNYNUIjNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMSCRA9TVsSAnZWagAAw8AP/i/o0B3pIaqEb4IlX1E5\nt/Fa76mONOh8FByk2bn0Rkrc8k8rXRHN7WgDORRK4oYsJBd9tM4AaBidERix\n2XhUyL3HEbokOxX67Qjc8ADA/K9szw9goJLFjKzzRPz1kpI/ltt/ax8eZBfV\nag24YsmmRU4LHh0E7dst3cyaQKKWfyIamTqaZKgBDZo6mv9Puu8EcCMccQPU\nFRvz9HMC4abmTNjgCioZSS/AmiChXlo+XSyPiN6910rtgM682CoXqlQQLKTc\n0JWDCW3hPV13D/e+vh0GBPqIAgUdt6+sIBYUhGeFqOEzJbmuf3c9fpglVYz4\nnLgdOdTQ95LhlFzpM8oDKKjeap7Jl+4JgHpKXikC627L88XeQ7II9RsWaFLQ\nt4E3KuDUS6XgrNOeQAzw+Efmcu5SZV4EIjCNwx+xJg5sanKUEP6gzJpJ1mS7\n1Cs5rVqy6Eg4eHBeHGjVu4MG2DkfsvSbvzZJH8Vku+oichOSKlUjHRPSmvjJ\ncCr6unUeGq21iqSOktP4LBH7I3TICp1gH2t/waceWhpQRMZoBatGwFr/R2OK\n+r/CZ4yOZaOMsVRlbkQvFssMZ7KsDT/uXfq/ss/W3LUbxjy7xKfvlqQF+EYC\nBwKw7j049sskNmL2RJ/qHiISkDFd6z5Et15Qqow1KSQEAXDPXLv5JFZWosi6\nh6Jk\r\n=F2kP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.07ff0c452.0_1613677329736_0.10044701556082392","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/typography","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ae9c8550e26b530e8ee7862da0e100a173fc71c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":22,"integrity":"sha512-oG0I4VY7GVPbBC4EI2lwEALvPVe3/GRcMtNHGA5U0lrVUjkSrFGt2wANmZvo3G5kT0RUHxaIaPTIDD/KQwngDA==","signatures":[{"sig":"MEUCIQC0dy1J1zQld5S5XE47aR/WciRAOEij6YfgW07FXQv3dwIgIyaH+hW3emiMmwN2Xltl8pTgS2TZmRl1mi02N8ofYRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfTCRA9TVsSAnZWagAAIoAP/0Wv+Oc8+ZFCjHVJtNID\n1wrAciXOAHcFzeih/QuM0Q7YArwTwuNWyILEHR1NTaw7MJYXMATFkxUYFriI\nKij6tf8xveC6Uw+wVd/Ar6HLzlHYMhnwfJ++t6NWBfwXSgfIoGCBb8JB21Qz\ns8UJ+n8i38pq1j2L4NzU7wjmNgEeLsSeNpzh+DTQAZ2QnZ1ELKErwDtNb0BG\nWtxWu8Cci2xb6I568O9pGJHeM5zszngglZ/s8iyFEDm94ftIh0UWqydo2Sps\nk4tmT5nYI4fkgwa3jM8nCOm5fj0aP0TG1ezHSrOFQk1LYVadOSm2CNmNQ9D/\nZw8XZBW2QRIO2+FdJV7AHjA7bSkU861Y0iBG6X/hWcdI+MTTrk1S9ejXqF2/\nFU/SrdedaGDR62/zu4eHj38P75wY+HeTEcHx2wMY684ZC7EmdJ8haW2ceOMR\nJmY02fVhov2jM+0bAicD8npDDv2ZDHmus+f8PMXukebhXMc65P3cb9iU/W61\nG89Wba8qq6mLby4kcWlbCGBPdNhjeqJ5IfexK/DXYH1vOiv55jFo6i8l/V0k\njHJXW8kqN3wuISCM2L84vVFroxKd5Z16j6Q1OWtMuBQD1l4xG1Hoaz+/KESQ\nZwHP0gHtXNWemJRV9qX+VMRxRU2ICSq95KxTLUn7CLcLHkhVNug0ylybboel\n/RUL\r\n=nNGt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.bed7ecd3e.0_1613690834774_0.933882519604974","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/typography","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb25b47ec691b47e52b3fd84768b702ed82d2de4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.06dead2d6.0.tgz","fileCount":22,"integrity":"sha512-osfx6+hSlS1Tx7r4Ef/DWd6PanT6h0iMsV3pB7u+td1O/7IriSadg69buTG/af/Y4bs2gWKTuEinGdttPSJoJg==","signatures":[{"sig":"MEUCIQDPo33lQMbCZWm3+Dti6HjuZbF0XOlgWYJ6t2De8Q51twIgPRyi4IKFl/JN8ndNFFvjXAr4GHZGG0r0eNrc5nRzG6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgRCRA9TVsSAnZWagAAyxQP/3wITzKNYqch5EeAsNkd\nuEbAK541vJFGN4t+Qq2nM9OFzDkiFELa8IutgYt25JY6yuAdu69P4foQFQfT\nkhe8SNsC1jDPj3vgnQPObV2JdF5p+Af8rMKyl4l0ya+QMk7HVHO6cKrCMjRL\nX0iHjaFi+rYsSXEyec39wWJqeDB4SXJcEbxO/M5KnEBoL72EkwfbjgeQzP5q\nUx8mzmGSyj39Bt3ZEqweVO4pHtNjlkMNHOhvSi5yFt6M2KbxtYJjvsNs/tVW\nYK0CyVTP4lg2TYIyTIHaxMObIqd0xOY0WaCSaJCqRnpiWljh7THqOufk6ENO\ndghrx4DMnput8sjOSdMeoiFe9rdk8YMn4LaFawHCaYV0a9fuW5TEizh0IwgR\naZV6ULUvRs3Ik/Ny+R97M2wveK/X7eGbhZhFQpTpcgQ0RAaD02I5HIN161GD\nnG0PXTI0g/Fb/jCSxM2dkXzls1GRNCVOlM9liCtw9dnU6gv/Vo5jaFoZMPRk\n9mxUTEdOYVdZz2A6KSbxkWFsfICQhEYPL8U7nGRDbNe+8rpeVf2MAWAXc7Dx\n86A8Hpz+Vbj6YW+ct+PnsAvi8wdmzffG2hZ9Ovga+AqydB/HHrqsOv/1nVEL\nYS9pUIVJGXxhHkqnwam2Hi0bsJQdy+JvKzbi+lFTKH5U7XWYDP+ZdBfq8z9E\nV9Kh\r\n=Oab8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.06dead2d6.0_1613694993130_0.8696994995051188","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/typography","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.cddb03553.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03866b8c2bcb48d3af9a8bbee0b65ab59499d9d9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.cddb03553.0.tgz","fileCount":22,"integrity":"sha512-gqIY/ntKxgTrZ6D+/XdlmRmD9e7fTyf4iKzkKTnYO802AQs8QquVdTysGlEmU7osnYWaObKlDMJNwtbqxKK2Mg==","signatures":[{"sig":"MEYCIQDoL0saULOstdz0DoxdfUJzcpxLIErypINM+4oRRavbvwIhAIs2D/VX2E+oNgNSPSAGFriZ0QAV4S59qhYkLXsUq9BK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyy0CRA9TVsSAnZWagAAaAkP/2BkxSJh6aEtaN/9xg/F\ngxGP8dreYrcLBHCwHa92wBXBwEOjPzyI1UUCqcekEE3EezD6gQkNbocALS0r\nmAa6T2792aSgvTUH7QrOq6cXf/yB+2uMM1eeE1LbAvp1uSzfVwUammbtetoZ\n7kfKTI5MOi/KpG3LD5y4o0OHeHGzfc+6vdkucY3czHCC3RAg6xLRotORayz/\nWv3/d4m6oWYuFZ/P3ejUczjpmszSrW5AJfFbbiXIDV5n4ei3gbmrZgAhpEDu\n2V81iP4CO7dY63Iu8cR8ksb7Fxz9EGqVTjeOhRPaMP5Zck01nb47Fr09I/lB\nUZrBOA2YEqfLU4ij+CcfVGxPNjWCglIfeU7S28w2ubjtNxa6oI8vf6Gt9/N/\nOLBXtGSfmhldIAh58+AIQ4/QQpZahJBJQahkAC6WrfQJrnjnJXjrsEij1b5n\nh64Ip0ZPW8dfJ4UCGsQdaDze/cZfRorvAwfdIIHmMDDhRXA9HLT8FWl23SZo\nUMkGXm7JrcBgejR14oeaMRxOv/mgRgpG5ya7vTLSidw2dP2db4OVVaqgkWLQ\n3HPY4U+mRxzyZ7FLkXNdjXda7lwNg/O9PR6XvrpIQJpHv8OMX38HjQjUt/TV\nXTJRXx1ti8Kv6w9YfCfqe95Av81B/sobRnSMSVqeNcWfF7wEIcaz1ZU+4Try\nGlSG\r\n=rYz5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.cddb03553.0_1613704371893_0.6440980095016848","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/typography","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af2d414056ccb11891691f7cdb0b659ecf3acb41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.d6d8d0476.0.tgz","fileCount":22,"integrity":"sha512-kA2NIX1iKPr5SaoOr+lr5Qtz2mzSuanHXoBbyJqfNSPD6rr0kkgyYdKFe490+5Y+HNKmAQgZH2OuaS2f4L+2fg==","signatures":[{"sig":"MEUCIQDc/TCrRUB/z5uAw+I1M0yWz6qFC2wWh00eO9jGjJOZhQIgEe/Xz4+GBrSvflXYVWaHrCZYpW/KbGuJFnbWtJwqJjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05MCRA9TVsSAnZWagAAxKQP/RURX9Jvipmt/poX0W+O\nK8uKrt8u3Rg89r+y5V26MfE59FELDBlqaHQxsJEurVZhJZphT57LOPNjcfbP\nmZozxe0RCggT0GK1BRUr1q1q04l+aN17n+U5MP6gD6wXm2B/D23X3mruYwBq\nHNOaJC4rO3nZl/Cukfy3pes9XeelxdU4Q3IUh2u7ZakiBOgjPLfAvsP5YcZ3\nSLptYquUZ9yvDpHaZKvmf+tuGIFoUNrp7GZCJG499gJvgTXuWmMP1nNVtFOO\nXD1c0k9HCYYUHol870SmBdhHEhW0S4QA4GGATuqdTkFNgKEfZnpjk5BPatXe\nleHTkQgq8wY8NKyeYdfQ0xfXVRsyvDeyfUqxmjE8BAe4A8o788P3BMpJbAuo\n24KVFzTJ4SbiOljYbiLvf1p48EpTUmTO5qmhzzBcPD5zIXMZpgGCYlJf2A3X\nnN84++WeiG3/CZO6CAS6eMvWuYMVc1edkL1JdrZc7Qx6+N2PkXboGoabj5cq\nmLlNtA/hKLrKgEp1gKWxpIRGoFMKgmyJjQjM5egsr0WcX3P/i7+ScuEScE1T\n+xN/nXu2q4gFUWv76YpbTcu3sha4ZE4fLykPptuCmFXWItxqKo4veb+KQBvk\n5q2CdXY0kkNJbcOaJdfrkuZ1MYTOCxCX8prV/Ko15QtyPfaXNg9XRjdS6bqW\nIIfG\r\n=0n3Q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.d6d8d0476.0_1613712971960_0.16811901013877883","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/typography","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ea31cf1b4a91b84ed5d7c9ff0195e88484fdc10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":22,"integrity":"sha512-uP9aiCBmvrk+bL22LWel2A7oGDlsdHxXb9HVijWMq+jFkkiSL4WJPkVwRGhJZf/dz2bmVTNoJPPIpRzUnRy/pw==","signatures":[{"sig":"MEYCIQD5NXKZ4HA+P1OiImwZ0d7ER9B6fTAlue/CHnc1kk3xEgIhAL9+kMRrDjN9/bh3NNpDYmhXpQ3cQiY0ox8KL9DYAvQi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90QCRA9TVsSAnZWagAA9AMP/3yeSoixSj8Ar9UefT3L\ntu6gYePIRb6YGAv+/HJ0DAJsmB7p2UwaRbdGGJTQ3T1CtZWKfsP8E1xpj4to\nGyvlLt699/pc5WJh5hjp/uHXXmUwe7P3QS5xRgKktyjX3z2njt6m6cyLxB3s\nZHsxxD9Cox3W2kYzbbGoha3EHy8cFzwGag3BJwaq/tBx8b+HEJKcN4xLn/Sd\n6BinX6NUDLrXW2CnDl2Pj7FJUs446i03KNoIHxq/oTdQ9quq8i9w2Ca8FKbG\nKDJSiMfdGImTtTd5MoiyWD+X20NghVhC87f3Fqbhlqwwcj+PKNJPaVfar9B4\nq6zvzH7Y7izuxLArYIMaiqUjgpG0uwknXNUBrEtOepuq5CYLtac3WGSuW83A\njx/Xj9LiZ1UALIjt0AoFYr9XZ6y73XfAzZZhZGre/9KuO/lCn/UJ0iq2B2nL\nt1W0XOBG0Xud9u5BScT3o/aiFL8ds++TU7CSUXd+dBujZqnW7aIgkBUu50eN\nxhOdFpjZLZopYpy0x6drX/DWrmd/c84+nuyO39xWgkWac0wmPXpnky3G2lrq\nKpJFW0onmMx0hVvKDpXnq6iymA1t+38QLdXmt/zeaDaUXumfHlvBO5MA5Bdn\nAb0ihjl6XBkDhdNGeOSJxqv9eheG5kAFfN0c5bJTKlpr0pJrWUvvaAGqi1Ok\nWxij\r\n=eH0R\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0b4a4b2eb.0_1613749519430_0.006521225909652761","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/typography","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.3201cae47.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc662171342c68e65c2cfc2803c8d304dbb0e25e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.3201cae47.0.tgz","fileCount":22,"integrity":"sha512-MnELdOnUbjIyyPVyTdExS/vcc4nqQ2oX2ItisvRBKc699RawBf/0blXjyUEoOpFE1Gm5HT2PZeMHGx6/g03ggg==","signatures":[{"sig":"MEUCIQCj+GOxePb4iGM3shAlcRA/YUX5AWSnX0WKLG3UNY5e6AIgSBhSuxCvF1fEA302M0BXcQA9jlh6sMZRA8O0tDpUXE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMECRA9TVsSAnZWagAAr3EP/0C3qLCEph5bXpSZekFx\nmhMU0QOjV7bnnqsTwVARCaZui42RHBDeFMgZivBAiDwx+xU6YBwDSFxvYIam\nxioun4ZfGE8oeFmq606Cz1ZrVsxEEj+G66ai43tv26ngcHpaubIJ3iTfBL82\niQ5DV9RP3dCwTHJljUjCVlb7vmYi189y9N8qgPaLNgCTM507g5V9AuBjndh6\n/f3DB3wsRkhg8vnMbB2H9mMcRpVt9FGrHV8Emo4i+54P15YMwM7Nb5PzqesM\n8hs/jadBSSnDrwN5ks6EXXqMK+sRLGfmGb85wnajM808mqS0ESusoeH8IKyR\naZlFugZ7B8ke3PKN8+lbIiLXVvM324AcTEk057gDm2GLQvMP16pojfYjwwxQ\nTVKww8qWYAZPLhLL7gdV6X1lqnFXYrZPEyVuCfkrkIVSx0cP6uDtSGLdRLdy\nbb0/mF1l59jt52dZeNKolZq6AkEOvBNyC7SdeIdJqx0++HQJzUIxcEFzqn8a\n3jWWsHpm2xzYinird0/R6SpvBlsJKgZ/VNKNvtnImTSmCai4XAPKl1D6BL0J\nb8qnfCK7QpTSaJgWwKszu7k/GCe1QWu2ReH69toIzQAF1/0Vn0habI43u5//\nnr9nDbIr+PvM7oP4k8dktHcFLeLQR9PRvYTW8VaNNjp6yyKG0to2ogLURugI\nGDcg\r\n=1SIi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.3201cae47.0_1613775619486_0.08958775340273428","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/typography","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"579f60610dbfe52c25ef78b8a5f7184248c444c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":22,"integrity":"sha512-fvbPezx6cIjFNsYI/FQSlvWGZ61AzKebVh49NmzyO6qCqu6CJGydX97r2atsH6FjXOePeRI3nZAoDIkUodurvg==","signatures":[{"sig":"MEUCIED7Xfzi7RCpyY+f5RLR/e9zMQlQ0St+GKBqtDirz8HQAiEAhfkKggyB3ryOJvHxRJOoMPQgWgSBVlbXIGEoAlEM1+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAqsCRA9TVsSAnZWagAA934P/i4A7vyiGrBZO0ijq5EW\nZQ/wSM7cTOMA6HoIVutK2sg3YX96PaPiiFlzYLCu6GNfXKSl38eVglXFma0B\nLeXqx97DcukU46pgeLCtLkNAv1BIQHODto0wBrIAPA94GLISJbeBv2/TpX6t\ne1+Wx8Zpc06aV/MEnzjmfM6zGn7HwDa58imm/zOBhDl8B9q7MTfGs4Ogcqwz\n+5sjMT+iAJn7Zzs/ilxUwG7irXs9z7Fh1az2XMsrjd2tBz5ZL6E9ta0PNpF8\nNMrbNIoY+wDXnLNQkuEujuvd3IYt9TXcJ9p3xWUX4ytcS+Kap3v+qE4uYO8b\ngQ4s9cLlbNcoY2izFzHI1tUsQId7dSH3u3gV5ghrhlWn6XyEU14P6eQqllqK\nkRkCa1oN1CU9Hlnn5wTr6Q4JlqVcZ+H3/MKLPDdxnKrO2RdlOdt4l0h5ujta\nTr/Avl9fYt5iNqtkqwxY82DdpordMIocvDdzUWV5Azn3iLndT/tlLGcbsHqW\nu6IJvgdHica9rRq6la//QSOukMBh21v3+qfOh5rNnay6glOy7u/aC/WoYP89\neWR2xuzfbIW/fpM3navaF9U0lWkOJ5NHpOgd2Cn+mp0b5bwXXNo0gw2DJ8q8\n5IDz1fn32jqhz8y+Mng3LgQM/e/KYohqSSnZQtv3ed/mkVXF26bjWV/js3Qn\n4zwl\r\n=2QUi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f1b1fd5d3.0_1614023339947_0.10604913136676264","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/typography","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edcda0e7486697578ecd4cf684c290886d4814f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.7899e0fe0.0.tgz","fileCount":22,"integrity":"sha512-WVfN8dkG/CowMcBKSLb+OiqAQqBXosFv50gXAMTjEeOIGVfGrGN222Ml/Tlvx1s5SdojCjYkKWlvxYCH8VBDNw==","signatures":[{"sig":"MEUCIQDsZBeQ2X1zE9rWJYH2+/zvnVVMV8JR2UmXZwGRzT7BKQIgXDeDBnXIFSPfqZMEnBivpFs+5I0sPEegduhjE0YDYKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":108388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQPCRA9TVsSAnZWagAAh9oQAINaOfz9LjVK+VYK4qSv\nI9nN6s35iUCaTOJuRIh1UCGbFDHQhS8xEvYDmIDeEG05UQRim+jNuayWvYcS\nALMvLfJpDLsY4nCFJHLadkAP2OP627l+tjMrlmBo0H2Y+HBc4wBgY8UDvzqO\n3gnesuPzvCkvEPrHJXStgg0Ki9mUAviAJc78gfZ1uuPAgtUxta34Uxx8mMVe\nRsnsL9knX8OxHZV+E6Xb460yHnOQE/SoyuknkkWVYrfHYHgo+7Ml20+ppPHT\nvx/FfK5GICi0JOyRqMoHWzBQ9CgXTE+9a9f9SM3g6qxabSuSLplzws1Ws0jH\nb3n2KFnVG3sQ21Ud0Yv1HZ9MRAYOxAtvnu708ur62DxVWiiEOMQTsHu4L8nD\nQ7dmynt81odOMckKTb98RVZAWlaLbA9M9pmhhZhturMigFXsFMdyZkva3G1V\n9ifYMcnFLN92J+7vkRY496cPS1I2NGE4faX/D4Y8KtzJNBHiBbgFFH9V8cdP\nXGhbA82/xzIr4fqE0sFna1cy88zvtutzgL0thfRwELQSKuhgs2W1SQA7QnRO\neq9vZ4sB8ra3E0/n2eAfp5A8Yp+WxoZIw+VrrjPNE5LgbPxeLAeTZr/axl2h\n8poTKMoXsYIY95GgN6tkVMtkpnk+rCw2n3gP9VRGDzVns5rXlHwmiazhEu3d\n6yd2\r\n=EEhc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.7899e0fe0.0_1614033935141_0.026768322153341906","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/typography","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ee14e47c2680921f4d357ceff5c1fb0c92f748d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f19c86d13.0.tgz","fileCount":22,"integrity":"sha512-JcDzUQFPsdOoVfEdxkU3KLeSg0MwdFEWtJCd3hquhoXoqzf58/fOrHhF02ti2//JmTuLIN2eK5P4CIURAoJbgw==","signatures":[{"sig":"MEQCIAhaRJTDIFCz6RgjaIw+bZ8PMej2S3nZGKY56QdREXtIAiBTcFxr/fzDRQoMLQ/h6g1U+8AwAWU2UBTO5lFojns5EA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6JCRA9TVsSAnZWagAAdl8P/3Zoqf3iuul2knH0LGXH\nP0DfS/td97M50NjKiVVyGRBP8VDzMOzCGfaqdqPfTT+HktBnh32LAseM/hbm\nwWBudk1aZVnCbwF4XMtmvstgvCbh1ozM5y2uoBq0r8mRXZJ0dh16GdW6/kuQ\nnwTqujYA9XssZy3klYufAOx/ePPCDyKBSV4w3773dC6UPHos62bIpQ5EAdO0\ncbu79/ohyA2zmXhM78rBVevrvIiIfUSfXF8Da2g2ubzNcKABSpWJonv/G1R4\nRXPeYG+SdgBgP/YUNpMXQeH2iSxA9wC8D/edmff92odBzSqEJ9QUPk7k9qZ3\n0d0q1MGyOvxrsWEYO3JUTAXSzXG/L2JKzdDTd8td9CGnu7n6uWL1Vq1jwxQs\nk9j6sCz+IyVIyfW3diZXbC5vowfMwrZekOgj++yLqfBMth7yROetpFEjxxEb\nnF3m4J4TV73ZQNlsHYOsOIGM5k1ukf26dmnwWqv+yN/vaSqn2NlfdJ9FVi9q\nmhLryPwgOM442a4ALIUaNKFNhRSLwZcQzoFCnvOlN5XEoSn6W9VJds20veyk\nDShTOefSuHGXQRUSdhWmAndHP7WMAdT2U2PuYEa3pjDQZtgC9H/G+c6FTC66\neLc3sPtWLkGtqSIRAHRnJjWV3pMB3mW2Fk6x/DSYFTsmikjEKATu764zj/3n\n9sZM\r\n=drbM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f19c86d13.0_1614036617433_0.1401010012575672","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/typography","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.60e892d79.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6abcc13d0615fe9a1d057975203bc4c885403de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.60e892d79.0.tgz","fileCount":22,"integrity":"sha512-QDp6Wr0o+sIex7XaK/1XDRFCNP4Y1S7RFi06qEUw2uS1PX5S4dSlTaB6iu/TMZTu9M9rA0ikXZoM+RtbhGEVkw==","signatures":[{"sig":"MEYCIQDt9OGKMJs6+bjtJCMh+FAZW0Wgt+Ne0uuoT1ywrmoCqAIhAJYy+qbLkncaoe+i529Y711Pz6hbcgAp5maufJ54NBcB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFa0CRA9TVsSAnZWagAAfTkP/1M7NPKIfvAZSwbIoJmG\nDHGSIB+t4EzjNNI9/lStzA5zivjG3xEw5h6Fu84IkEExImkZKnbIjm4Vwbb2\nfKPlxCV/K095i8KYFlhS45wqi3aJzgRs28bW+ZLs1PwzmVjayafFIsApNuXl\nNx0481xqVIalH87yckehE/t9w2SuZBUc22irywEFrDABfv6gaZ/dCpPuzaDq\ny5fCrVMSeXbWbWtwl6ZWYXOadR5eHqEsBYLo8Wuog1n/iz3TS6Twkr+bNohC\nX96zpMEsBZ4J7Rx3TiIcB7pZe54cIKalTD4thZwdvvgfyATsZCfzuQZE3BT/\nOrDQqiOyANN/fHCCQhCQFse9Pu3x3NLguYGd0H/QpmRSxUR4CBQ6EysGNfXI\nrlGs9Q6g7Wn5yX0rWw8uVZtJqY8sIIl2J741pmwXXkKaZGEFGU426D6CpQhg\n0Qdnf8EAXTDPrJampjSJD1ta7XSJyQjsXEvIjAFe4Cjd4bvKnT/NIVcEQg7R\nwmjX3sER+AfJoiFSlf97gx7Ch3sdt+ZIw4gDhfutBk0qD7pc2SlR6EiZbzh+\nk0xnXA4HogsUMWs5lMvrNngJjwETWkJilGWIxMC5TZkURPGKrI1i1P7FszLt\nbE7fXStKFGoI97NUwxLCEX6j0mcoEow6rBYCstOZZ5PEWv05J9zFmdQqwbyC\nqmwd\r\n=kdBa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.60e892d79.0_1614042804390_0.02674688563934935","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/typography","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8594eb39902a1ba9fcd124f139a2873fa1f2e48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.c96bfa495.0.tgz","fileCount":22,"integrity":"sha512-TrgmEzY1l1WkwMpYi6zQfK1cCN9TJm8tuFEl1ykMr1kDSE9J0XbyX0KVb0QmFTyO4cGeVDVSbtFWOz2FouK3VQ==","signatures":[{"sig":"MEUCIQCCya2N8wUFPO8YeR6E3bkjITUAL4FKHiBYhKzWk0XAxAIgTkIlQRsEuhbCxrJB/FKn8QpwBXHrNH/cXurRgWWVtuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhKCRA9TVsSAnZWagAAqxwP/3/NbmvPWWsfcf5waX9c\n2LToV6g1r51WQHJ2Tebvm4k8AV1775o3RJT3yPapCn4Jn4R+9OQzBy5/WPlx\nesnaY153bKlk9vHWZ/Zi4WJw4+RPhKRxEI2eiELbLJ0l1VZdYTgtffjh+09C\nrK9YWzUuX0eV8bXCKcuRuJzuIONGOSf0zSmVT5e+7MT18QUn5DJlkRx1F6Ae\n9AtF78CiiFabT5tCqXXjrfEA1v4NfgDsv5luCxJH34afpQ1tj4c5Kp/U2Cjp\ngYjbEoUAGrxFhepha1IS9FSCB2MXUClg/DHz25K9LSJDPULawBYRbVjJbxY0\nXksDZZgM1x7Es2tEs6Bn9U3ns0DJTN6L/JCEGtTeIBk3q698A5Mt7fyp9LSJ\n9e+VM3S7AyE6AQclWXqGaSgQeBNovdFyYt1HBadizFgRSSG0nwlgiQ/Foxje\nh+DXmTO6d7O7InkNbBpGoAiwyROyxZ6elmpxwswj9t8ydlJiILi9MYq0ajWM\nynLlpUvtUx7VtKuhLYlESoXTaAarsFannpMdWaZdvc/F6BkV+1BfT6x60Gey\nGtEGy32K4pRvdJiApJQXaN7aTJSOfhOgGDRltaR+MB9Ry25jcAkVDTeOu/qH\nCMZYg1gxcawX9SQ58vNhbh3dnBhOBMIcXTjm31LLdWnTdjkMm88zKBtorkJD\ne910\r\n=VmuR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.c96bfa495.0_1614108746274_0.7670991154573781","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/typography","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"041afd9f9f52cd174ab85245b55e15a34ee1b4b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.fa9b59f67.0.tgz","fileCount":22,"integrity":"sha512-YBHZXUdZ7Ta9W8CDze+WupLrrKS8gj6IZKyN38I3SCk9oszsvFq0l4SZD4jYualZQkP8lrehLomsQ92OqBx0uA==","signatures":[{"sig":"MEUCIALIk3QrNcMK74j3AZz/ucvw+vGyd4Yhew8l463WhDPCAiEAt3RaDDBzBNjyDxKvr5dP8eNf/EsQ5Yth+7BZ00oXj/I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVicCRA9TVsSAnZWagAAN2QQAIZ1L54kY70ACgPB1r6p\nvNqu9/uhKVsbIWprGFKk/qS6qvW4Q/0gOCTD+fAk9mqGi2uzUWxVqAu/Xop7\nEDeTLy/rtr+ZgC/Jsey2ZSNP9LAunosnsU4aO1KOMMDg3CPi53lXK0uwSjBs\nj52O+EMzJBqdzSerH2gTwfOUPXIkfDXtjkHM/oUTHmIQXldJhw86VikE/Pgj\nfioWTIKRszltSnYAL5J6ACXTTjXeGXGNs+zdV0QTuV1otZqt+ZLw1J2EAxBL\nwonhxMKKsBvks4eA0hZ2No2KQANCxbnTew4We4pattGXUgzD2M97VlyUgH3+\naGVYzh5l7ytBSepmbn12tduTkuGrgjHBHe+b3Uf5cEbN7TflFkO548Oe8qEG\n4/mKoAahrTwYrZhd6Y5/ETqCCkEmmZDvaFgqLICPCv2DolVwZPedUegbl1DD\nzYiInpQ1uUgvHEBwBs4CJwKv6n/PWuBIyHsSHVJ2ZJbXuT0BXnlYLDC5ldgJ\nKMt8epMZv4ogNOgioUL6VKawYOOo+ZfGwkeNjeb40CP6lL0U6yFnW7fdiC72\nftw8xWdn1dhBqQmdavSBdwudPdXxZ38yyrbJTegzi8ziStroCrQWqWL4njsY\nPrDSav5CCZ8qD5Q2+FPp3en7mj7TqL7hGBKwHpf0CUz8LBPbte+mPCS70nDu\nVfnF\r\n=EEKa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.fa9b59f67.0_1614108828025_0.5777910878397852","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/typography","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.869e3497c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b7c2b96b581a99077716bb4bfc90ff00efc2989","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.869e3497c.0.tgz","fileCount":22,"integrity":"sha512-SCiQ50bSmRl+2m7UgxPYibr75O6kyIC5P8tL6nwlf35/WUIvE4B0lrtQQgzLg40HF0C2IjAd0SrOHWPGgfC4vg==","signatures":[{"sig":"MEUCIHR5Upxy5E6qkRknqwAnGPWiNJDrlMxfOWzeqF/aui8pAiEA2bdhwr8ee35fLFRInYnxUlQdU+ncOOkPKRqOnelsug4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjACRA9TVsSAnZWagAA590P/1p3PRUJse+44t09R0qe\nouLZSXSiuE7KtzKUKkDav5haYramG8Lur7wvc/Lm4KCnqjt0jmCLIGmB/wRv\n9PwXjurJ9q1xiwf3Tbp4RuScansLiw3MXP3nrRVvGxg02slyKUYU64FUnRrJ\nuxZBmzae/Wo8yUy98GJcvkdKW/z/AG3pe8NojKXZ2B3bzOSjKDEvcdByfhsV\naVguMfk8FW4pKAT+e86v9FDp1L/LFogz8omTSK9YgNFoJfE1pP8iLNr2NA/L\nDZisKa5dEYc/nMSk3kTamVdGlYg4AUHSRr/pBSUbuJKjToHWO5FOr8GPgSzP\nu+9DG8Nrz3JgmnNW3Y36zY3stT5VWPYC7PqCY7S4+FSXcZKhLOfr7M1nTA8M\nrR28N7kmavovdbaEFApdiDEqeo/iMV/EC/vRZEuu/zy2kwz1u6WIjExudnpN\np/5N8yLG1MdHRMDeWpcvs2DIeMD7daOZwTS2Tx1tE58zwqBS7KQ7ylDKowud\nX9ZjjW1AEhSpJdYh7lOcshJrJv/RSqH1uyDPCK1VGjYDO6Ul2lWALDDexVSc\ne1kubHllqcluLhm5ME1ocpV/QaYH++lM/hEd4U1uJbArPoTExI/dsxO38r7X\nTo5ecZ8MCISmkJQEYUG+D+6NGlj8D2jK8bTT0V13aZDmAI3D8WxiFBM4y++2\no6S2\r\n=Kh/L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.869e3497c.0_1614108863651_0.4203337590913707","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/typography","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0fcf75b30e53d8abbbed343a5944cac6b816296","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":22,"integrity":"sha512-SyiLXEqg4TSjGaRnkirTWaPVbu3ztBz1I3FPinKVvLJ3k21wuc48TrGn9+FikD4psDdmQKegrB1izy3fk1G3uQ==","signatures":[{"sig":"MEUCIQCxesTF43eJ/mFcp2XnL1r28IruAyIEMfFv5j/IrTm7wQIgHNyjaJOLal5lJGLcNWBr5Hm0G8chYQwDqEP3Ddozi/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVx1CRA9TVsSAnZWagAAfr0QAIXAnTbE9kROGtgHFZ8/\nGO/DTRqJUxGYzbXBrPsJZXsYpMieHKg6OlYGWpoF5og4Vj7quseCa+idkYS1\n+c2w+jnNIQZVxCUKLxS82zPuwT1h1MJVK2n488GmCBuS7OOhkpsgQx4FHwxT\nCsvieyEbHqAqAzd3eQdEv6INTni6ULpbP2NzDrOQIvkCf8cfreKVcg6DJtkZ\nIvYZW6afmXxea5T2chco772w/0Z4a5VqdmIIR+t9/GLvSes40Mspk/+sTNIq\nZ+uO88DzGR+fGWbR/MvQHkCFKGJC/FC36lJ3iJEAo6DLHsOqPZ4/R1Atc21p\nBb5gyYq+EXnAI263AmGoSFNsXDz3UJ0XPqXKQ9nKNgOnLcfvE9gamEuCqsfJ\nnVi4/7ScN3Vmve7V5GqB7GzcuLqgEoB4kt3win5WJHva/Fg7x2Dmw3czg/VK\n8vaAHQAHjBJOP1Hoj0tbqGt/Cikbzrp+LWLbEcYB5igxR7BzQirEwtPfyNBV\nI5Mgm4hsBa1olY5AS/or4ElZrhz11iTvZDwdbGhWGge2BPjYOapp/I9HILwe\n0HaxIraKrPg2zq39ZMM2ZsBMxOZ9kwheYYS8aFvG9QMK2wo2jUC8F4NfoEZC\n1/qY6/P1+cs+ovsSNRHx3YSQp35bqAMjvoFAO+wre2BhCv51PwW2F5pH1Xnf\nPE7+\r\n=EJZn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.8ecd7c9a9.0_1614109813125_0.013878022885439156","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/typography","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55168cd9cd59f2333838894ea9cca488cec6c989","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.9c85d505b.0.tgz","fileCount":22,"integrity":"sha512-0l0sFaeHnZewtr4njsqSqGGOwHWTZKIVtwfKcqNhTY8jbsLvuDykIaCdcH6nfRKFxW9H+kAttB9XiAHPAEtZGg==","signatures":[{"sig":"MEUCIHuHiMYBnxY76oflH5pFc5MbfLYq3ApIrbPwCBcelMc4AiEAqGfvWAB0gDyoTJ89CpQLkZEBfYmC6SoltPM5BDV0PLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX5sCRA9TVsSAnZWagAAA7wQAJwgYNH0ZtaTqFWBnFBD\n2EnsV3MvPkVhFD5qDxJsct221+CP18CiqJPBw0AxnrZyA+dLmQYuyeNxq9sz\nlK8PMN7CoWcTFJnLz1NhgHw1dqeA6XYL3zA+goXGhJ6441uDx3fm7xGp1npx\n9DkqDf4LmRsIUv6J47rloSfKlUAtZV3ckz765KRb7LySKzIXmP0SVdX439Nb\nGXhblp4O0SLPv8Lvyj5+ezRL7U1bZ4hvAKnyTZvomkHkCz09WqBiuTpajkkD\ntKlTa8OawLUpuktF2U6HXyjSJeo9HyFrmqjxS3Xxy9lAuL9jfRwsEBt6Ege+\nd1cZyw9oHQb95DA9kJEw/6dudpYLR/vphqe+LJ1B2gDC1KMidhai2NYS3Rzb\nUP37jczHorkIRyJDr4udtJbocUwGqXNpwfpuvKBZS1BGpaNpoUPa0kVPK3Iv\n5cgYo24Mm0B8ALnXY0IYI4kWpysmaEvg/sTjAt27n1BA9X+YrcxeL3yZjOOh\nHCy4v6RVRZX9REgL94CU0N+2SPKUcTevlmlEnJl3EhN5GKBdJs7HsmZhGaWV\nI3myv8UsgJvif5v0VsMnwXpevHMYiW+W0AT7KCflznOLm0OI4BQIPBLRD03A\nwJNDCSIjdWM6EJMzK5qpaiiaHl5e/sOfosi+YrQ1MACT0sbcW/k/clzGami9\nt1wy\r\n=7LBm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.9c85d505b.0_1614118508178_0.16842795576586367","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/typography","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b87636cb2ea1a130b397f2d5eae71f876232935a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":22,"integrity":"sha512-FZcoCZWwCDsA2jAlTH9dS5yinS4F2Egyh3tpoOdzwK78v8GQ2IPPd2xwUnJKmVaQ8FNzFcXMFxD/luex7NdVPQ==","signatures":[{"sig":"MEQCIG0knNKVXsF0gQRILKvcIP1GrNpByNq+ICSPUFG3zUhlAiBBT2VTN6fTVkCCLUODSPSOs13PuMA62eIkLadYwlqjNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbAwCRA9TVsSAnZWagAABI8P/i0PwesE/OQX7qAU35rE\nh8sUdtJ/q1jBu74AuSl/NuUQWMnUYaqD/5fVB9qdNcSL7sN3DhTsXpSGCrU0\nSHjSdYkwFaR+W714rHsxs2onHcyji1V3AvVwR+tAI8zDvitNHyNQBnIAuHdn\nZ9pG72DAIY20+2MY84jP6sLvmbA/MuD53PQRLKUQ+uCy6JSMnQrtya/kE5yX\nJRUWNa3dY2A0TcjxqypRMBvt3q1abySpM9cRScHamgpO1wNFcZjP/b69qORG\ngv0m1m8dz0GUN69hULnCq9/nX6GiytB6d+EP/YVcl2THv4grwIdh7ZKUTbGF\nL9fF7Nyw5bUB2GDYf5qEaK655zVIkyDJTd6QaDJQKIuRkTaOMJtiRgGAFHwv\n0PlwImAQchoUe6Nkk34y3apuHYUNdqsntZPmmqN9egU3yShz8EGOV585MKJ9\nIeGG8zBcApd2msSsbeuO4f262giynrEhNKA21Y/ile+d2Zf07aiQRkBfAtdg\nXS6ShKNMJi8ydvYc5oLqplx3vZYYhKomqmsWCLlhEfF/turEFukzTfophflF\nNdr4tI1iXlgu1mvWTci5qhWOxVctHOy28Qp8mToY9zqVIcibu5BQ+eCnajoV\nKu+dQJ4lGjTqr7moPtIYS+d16J9BWYjgFs0P0kIJ5O1NxqtJXkQT1KQgBDUY\n1uTK\r\n=fdXn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.9f2e85fb8.0_1614131247772_0.84930791142553","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/typography","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de396f1e627b348e29b2e8199225e27569eda9c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.19c4f29ef.0.tgz","fileCount":22,"integrity":"sha512-Nkb5Zn9w41mGYjYELk7JTX46ovswO3XOZ7zUfZ/BEXyOn9UfcxaS2kQ+bBTnk/1+MYBLaiBMgWgoCp0JDgNVpg==","signatures":[{"sig":"MEUCIFa8i33xIIJCj9GTHB88Hn5C6wbvtqnR4/ro16NGrI7YAiEAsPHWSn091ZlBDWyW4gTmVENpnt8iVPF6VJ8P70+UhEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jYCRA9TVsSAnZWagAATQ0P/2gCLlYhkibkYqKj6mnC\nUgmfy94puB+lKqdYt4+HMBCrMLomLy6MI3hg7uQR9inhF4AyQIbyZZ/TdgrL\nyjzh8Qp14KL+bQZgvXZs/USb7ZC2A0XaAxPPldjo9auDRaln5ZRQR5L3S7oe\n4fo5JoXx3OwnJIo6u9cHDmyyn2F8T+xp4S0gORvukVsIVNBoxkryFKx7OR8y\nCo8X4nhZ02P7dO6aFjO1bQLRK6JYcSVdPpsBScDFTcTpn+oRp+TNbjhEFPG+\nHc+u4TzlZ1KFyLTlZDf1YDFcSJT4bXyk87mMpmNa2oOJdoYQG3pgaNYyRNqs\nt1BDJPNVkgBdWrJkkm+ju7pPcQsCP6Gho8V1TPxXdylcMgKhX+O/NUO7JH1q\nSq+ZYJ6vGHVMdARCJQENeBHSecRX8DniQK3961dD6BO7MYcFTG5KCLYNqvOv\nU9Vw50jvgViMUK1dNU806lTxeh4feNK0J0wFu/g7o6Le1RsuJkXQBAOKa8J0\n81nE/5v0WwUhNqt0AUoOJgDtJvkZi6Q4yZH5OuzL7fl6qa7LDIT2zCTtzMsN\nlPDg7wRjkx7jAzIWZ1JXnc/yPyAPLPcMPL1jMSO3kkdZvBSzLTxU9qBwccKX\n+weM/fb4UQaakQv7+RVJgDAjczutvc2uJrKnuWI61FWZroiAoTeFoELKnIYL\nmPMi\r\n=2+Z1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.19c4f29ef.0_1614280919710_0.945903735275254","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/typography","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95ecc940f28cf57043c160a14426b479f05d05fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.63df6e9bf.0.tgz","fileCount":22,"integrity":"sha512-tGT0tXgNcLfJtXenRlxN8mnyOgHqJfFZkci5XzDcq5LZmLRDiDA+GjwNNrw9B4INApqfEzdA1Wg0Mx75dY9LsQ==","signatures":[{"sig":"MEYCIQD1Hi1sOeTwebGVmjsoPqGZipq57uiLoy070ZbACgVDRAIhAN1x0R0C9OwuCoH2T4NtLPag2f2v5qgtDwYc6CgN+rzC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xQCRA9TVsSAnZWagAAHKAP/2Us+pFiz93hioetA+jW\nFxcikzVNwrP+00R2dhUjRbtlFDVi7pK9mvjMNKAHF/sxYsx4c6pNQXmG+oWl\nmbb/BJM2ey1utDipmqk2Cxnyw6NyPdYNph36kobXiOJGr6HcARbbcijiZ02c\nArteYVMBGxYFjCr0VQeZm1xz6V6PyVbaCh2kYsPkGKPRf6sL8KjHP9wJ6+sM\nuSB0qTWSyOZhvRxyYNzObxM1X6wqYRvpv7L5JLBAJ/TwmBRRHQJeZ+o8Y4zZ\n3ZQoApvhMx1cn/HWj6QcgCg87Kr8phttqzyanvgxFOhKhZZvnVrFK89LmoA0\nuVOaLM2mgZE6yyntnXaHwDOVCGdMJ/hU+nUQQMT1d5m8wXVVcjNsg+OF2n3r\no3GrsvcLIZFPD9hOPM45KVmaZUwxLkLWTGT4HbqMgDV/wET6XFSqbUSYkmXx\n6odWsuIxPuEXVZD06PKLeEg7NnaIFVUah7we7TKiqUaKS8roJ/J6DcJZ/ddl\nNc6Yg0g6p/LTRkvSezbw2JBemFGX4NHLuK9nqS4MHDfBvmAEWsuUUWTO/4Qw\n0SO9MqqE51jpH41igWfEd7LdEFK073hsQB8/HRLuHF9BruxEEXT4QjMFo5u9\ngMTldzIbLz+HnGVCaKXYQxuv02FoYUEHJGz0q+xGWQSRAJoOSbLGQmjkr3/x\nfB0w\r\n=g/X9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.63df6e9bf.0_1614281808285_0.3664224027738432","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/typography","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.981ad970a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3541f3007d090bedb2f2bdd20d2bacd2880e55f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.981ad970a.0.tgz","fileCount":22,"integrity":"sha512-IN0yARWRYKatFoZi4ZyThAe+EXU3TuEmpaPOwg0BNfCEEz7d62XUib5fHYARr+zTXHMW/inUsQ40CdpH9T/s6g==","signatures":[{"sig":"MEUCIQD8xc6qB/WREiSgPw85v2yLLSsK/Xj0LlFmxxZoKdBB4wIgOdqiJ+4yJ3KZwTU+MBRgp7MD4xk90dSEPITGOKpJgXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODugCRA9TVsSAnZWagAA/60P/A+ngeKVRjXDxnkIWS1B\nn1aNJs1ZvDIqocbYbJ+jOrHyiHwtU2b0CCMzvViDxaBA/E1We9jozgCPhu1g\np+IRgoMgkeUG56TSnPRtzb5LlvaFJZwCyGDOUHIIs9fWu2For0khzVjGmZ7J\nOHii33cEL1fKGOlme1hBtoQYhgsyedAvrwSZefZvCI8F5iyeXMk2wqqB8nSS\nSn7xURWdv00a723iyTpB9tJ8OYrJ1VUSmAJ5COiHCc1Jpgkmz1NzhHJpKNiF\nFDBaA29IIJptD7DBYZtDVc2BLpK9KqEXmH4tKvlhu382TnGRCJtvhrdWL8If\n/zL2zzB6Gj2VFV8zIVUVocedCCgSuQr+sroz/cLr8CuovGP9lGHzysb53hY6\nIdH3bQkdbzaP1JvkTIiWk8D90fOunIaQbyaqbtVo0rMRBWW2UGjFEPOyrV/v\n7+CSuHBV5ZT4u5hoSftHV1A2nya2JRHH5tAFqGdrNDyR1g3kQZVHoYaIqu/w\nO5R8wqlBdVRhLfCKV5Bb1JrTW2jJF1Vh1ZdoLpPSJyVfl/1ACrz6dcGiKhpI\ntHStMaXgTr1RFKpfU3IfhjMRi+i41xL5PPNs6ukGioppfDrsYBUDERY+YXoK\n+qIpnnkVJplwjC5PNM2y8qtT13OZmJK+yB/2z0D2dX3ZCVu/6DgqW3uVKtT+\nrMgf\r\n=PYRf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.981ad970a.0_1614298016335_0.01693799495056303","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/typography","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a9a792ad3b3b4871d6fa64c41cae22f5c5ea27f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":22,"integrity":"sha512-G84EcISBB3yPTywOMgEQ5GNXMglqxCTvF36VEM0U2gutYzNvgBhWq1ohpggRxETfRVwRw1KhPfKayL8hwHnyhQ==","signatures":[{"sig":"MEUCIQCr/EcgaO5u390u/91RDipLoq+h8v2SvrXFWBRDxDKLvwIgTmr28x3BLkYY6Hszu4Fu5a0EeZZw/W0qjtDt6aaUQQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAiCRA9TVsSAnZWagAAOj8QAJHbxeX85s7RKbhAIvvN\nbIxchKBulobwzLvthnJRsaya520ri8uuQ4Z/fiehon7pO6U00kHyw/hc0Pgc\nh3Q7QEtDdxB2mZcg+lrxfYTtSrzIhKkQhH+EkaK5OWCsLKQNfEIH0DDbJUn2\n+tIllb2nEBI0hh8NGzUCXGZ7Xxh3rBnNPwpqLwhcrzGs+LYITg9nt68YNyTt\nxCO1+Smh6KGS+txB21A/CNdwUq6CGKThGJZJaza2SmdqdfjMv67z8rzPgF63\n9il2Xn5iw6CZhck15Hv86bxk/AfyjLUe13fMcqvrbulQs2xBKgs7o4sws72V\npsNS4EV0oWIDq3hWWWdTjYe4B2PzWl2JBoGjOOGGAdO03P8axmEnJufOJcoc\nPdmdajMJVhyp0wTcDg0GAt1dK4FBvq3sMmfUUPLbZizsERquRbJ6iydoeE7g\nfubRSgW2YkTob+m9CnTlhE0Wae2lxXQlTXQJgYoDIewwFCBfdtF0hwZhkwPD\nCXNPrFLHeNmn4PDScuulOW0cu0peOZJXAnsWOi8N1BrXhVImUMI/AbByL5EX\nQppL96NpjhuGzuHzrzJOtkrjZ3ghLWPq8r7YMsEAO59v8qhWGtjLjAG5oVZK\nijUwFCijJTIH1R7BCx7XjTHhNT6IUTHJ4WXD0vD+Ztmq5E+5MGBGvBk+ZsR7\n4PFK\r\n=+Wo9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f9c9e39d6.0_1614364705744_0.4077353380595865","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/typography","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42c4a6ae9988c19f5b6cf97f2b9921bffd3486db","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.c97d7d881.0.tgz","fileCount":22,"integrity":"sha512-7cVxcNS+TQTAvty3Syww68dZPXrM9RnKWwr/cez1jzCoccrbZpGMWBkM2uUbrX0W6T9VQCy2kL6CBsupomKgVA==","signatures":[{"sig":"MEUCIBlIEPHz3vvgjv72fIB+nG/SK3BDUwV2Sdyrk7L7htHkAiEA8zAlf8Asd+MJF9jjM6CFOgBpit4CY82uK9J6XeW1VVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQgCRA9TVsSAnZWagAAY+EP/2FlkG87nR6AyCoqHoKB\npdRD7id+MeMcQC1hVImg5ePUc1H0A+8xoVPei9iBvRp/jU51RL6HLoTTFOHq\nz27q2ClSMfvXkWvwmNJ+CGWYyTNSY8n474j9j2KrIJEEVR9Xkp/jeG5U6NEL\nnOqhHXmY+sJuofw/5RkeSszGxUz1RXpiDaUdYhGtdrfmCZALK+1go2o3EbZr\nmY2T/U3X98tVwBBumAQ5i3iEgGDbo8yw/ShKoTKvmKAQFGQMPisvf0hk0DTV\nRy+u4FNPtSucLWELzHC4felu3LscxwNTEXULkiVQ7aFcFAWennBP+kCdby+X\n7Jn8h+Az/qRBpRrxnaINoMbJXwIAEHunIwdr5wMoCYmbBQvQukEXy3be3HXE\ndguUhYv9QW7sOYUHXDa2MhFgMvx/ou2cdiMgTuqaF+StkajG9VgoR7dzB2Ky\n1l+mxtPqGgUtKG9FfmOkyJolcQYbhdBwoZNtzIHDXIQi/MJb4ofYJVF+AR6Y\n4+p6Y2NDDl8H/ShZd/7JvtILpqACvEAxk0NtjGy+PlkDMJz4CsHzK4WsIpfU\nfMiqkNd82gcs6chWrhaExB/Pgl36l2cze4VKcjeToeXzUoQoxnpgs3PrAYy8\n3YNajY5NI7739asf88NMSZTwaeEfAoCLp4U4/vI0sxjb92XxvwGVX+BLlEyI\n1Gsz\r\n=6sAF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.c97d7d881.0_1614631968102_0.5170002680001946","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/typography","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4e25510c1945d1d6e411d31be745a804df577a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.bf670dad7.0.tgz","fileCount":22,"integrity":"sha512-MWoaQ0i29oLcyvOF7vKzqn129HyTEn8+vihTHNJYqFxm+pQ7+4Kzx0IL4M3XZPlCNs6Lrn0iD3bwyVo+WzU24w==","signatures":[{"sig":"MEYCIQCCqZl/1SOd2QGP/qxFWS1OmRWBCn5c2iv6Cu9gkCjYhQIhAJQo/LTNWEvF0ftjr6fRzlmhuJ+B4kiLOasn2p6cHzVm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZPCRA9TVsSAnZWagAA8koQAJ8QrZARhk6LTCc1mg+/\nFSyUUay69wAHGHYkBkrlCk3AxGNsR/DMDkealRKyrrCUR2pjwh0hiAuIxt0t\nEUEinMlSOTOWpt03GQZXRuOTVEBip/IfTbtdllQ/C5w9gx/RL08Z34CnbHbF\nnYHLrxXDKxAzGbd5j+BCFbwckcr5La0uncfBddYFRcnecBLXjD4BcCnxKfbn\nyLWOjk4l5mOIAaLEQOTmqxsZ6tX9KBP8lhwh/hPnx0iH/hRMX3fXZCLCD/mb\nMi0KFzk6Dbacqx8uCF9zqQAN/lgmT6JEltXN+sELGUM5Z6iV71yNxyZ2dCQX\njpHj87T3AuRyYEKYvxlRukHe11QWF7r7a1jdqW2YaGXoslqtsr9P3GeLEro+\nGfvap4q88aHs2Eguw62lB7Eu7fapq77i1+50GfHj0UNO1z0gv6PfHYZ28QUD\nZxPdhpFmZUhwO+XqzVkIymI5MV0oOPs/coTTJv5R3Pvwk1Flkdbbak7N3XnT\n1TSZkMgUPyA02wwZnhbHeiCph4TCmVqACH160/QfO5gdMlJwwx9xIKziqWw5\nj1ysOaSIuy74sdPCyNkyow/VXQ0ttBufiS8thxjYuLj0kXRyJHEakxocopAG\nvOTkYBzDxMP4as6bNSbH8rdhfAR9D9fxQCacocqlrD/K1ALlg7b6YiMav2jE\n8H/p\r\n=2ia1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.bf670dad7.0_1614730831209_0.3836692062763185","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/typography","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f0364b1a54748e6a0ebd55ad0b197320b7bfcd4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.c7d98fcde.0.tgz","fileCount":22,"integrity":"sha512-NTuTCQTnsn+xauMMlynHxMLxlni7A4rpNC+xyuxrT3CsrEWSPgW6NyvjMOWZOIUTFbQ/de1i8pfrqQtG0qE/7g==","signatures":[{"sig":"MEQCIGIWAp6P0c7D4oeCb/Uh+YDqQz8ug97Gm9yULMHvQpP5AiAjSDFRU4qQohbtcOLerJ++CDfNoKOnx4OdE4tdpUma2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/IcCRA9TVsSAnZWagAApicP+QHnJiuHpMED53J45/uq\ntHAEE6RsCKQaN2w+HhYGsHZHbQGetvEf2MNDGSUX2aAE/B31O+Oa79OBxD8s\nsWGpnzAD1s5qUpzRa+owu/G2mdD7uKLJeJY9DllguOqGiYplYcVUXlrpQ3qA\nzl6i0bWyEjtiw+ajU0fNizGiyPLdnxzRv1bX8VPl6tJp5RsJDS87jmmKyUU/\nT5Og/WWMxavLYIvqiawATDBJWGZMZ/cWn9bPUoe9EnLTy437uUigVv6Nbjzm\ntMnORPqeWJ2J0b+UNce+X6tuLTFWEiUoFgWfqbC2npqSAuYpjF31c5VnDYTb\n1m8LTZWXaDf6w/TT16kSmCO9Lw32T2khXdIoJsPnstP1Nhw9XG1jUKaYwQzl\naXrLo2karLuUbqEy/TmlrSJH2+taJzCLLKJ5nd+XLvt1yj9QwkfY4pGimKh3\nVYTg98bUkLk8kU3IcD6wdFIxSE71hqomK6LW8nuGyHWuAtJ0nbPKBqjiUi7H\nIwlGXQDK2i9O4/nakXq9CsHFbk/yPyYUkK70J0SyhKv/CWP8JPSZxPhQnvgy\nx7Ji9trtAgzUX/C8TykkTGXm4MudMUMbCXI7ZKnKkZXKTdt/qimUbvCS4uYi\nmfcx0me7fMMOqRuyJWW9cfjRKsAhvb+O7gfgk6AZ3hJDQKn+CXk0qocPkhoy\noCS/\r\n=aFvx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"@material/theme":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.c7d98fcde.0_1614803484123_0.4978819224366311","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/typography","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f20bc97ad0686bbcd6388562ddd9a8bc2f18516","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":22,"integrity":"sha512-QCBCW+7I0oxv3VSk8dNHaM8bbz9nlPskm+L75ajVddY1ACwjqwZyDbxpfohdY/h5sTUeLCanBTW7kkF0cl97hA==","signatures":[{"sig":"MEQCIE7ORJSZlAMfSpQ1YyTJJE5tdJJbhst4acpjiJxtBZBoAiAyUlgWR8BCNClQCa26rmBIhztWRtwN+J5LFTj4cwvx5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqECRA9TVsSAnZWagAAUKEP/1opChzNUC4LeuzuHHeI\nNXwElMIz9iz21/Kt9kIzpUgoizSQHR8kIk6U9WlEkGZSytvAW08GjX7+CkIE\nzK+PfWY52yeyzeuWtXFuyw2+Ou50aovdqQdiBa+2IY/P9r/pQvVJi/fph+dw\nFLgshGrXvH9gF4SZkVVb4E/UzWL2JUTzIuKxyZByJ2m6gWJsBBNkWV1CNAud\nlD4yFvup9PRhIa42sKPYZVkmM20J9Kq3hsHQ22Zs4PD1VdeLJHPjsF5nFDgI\nNsKNj/68xNCTKGjmujrepoSidise7mUgu2srWliDsUW7JtQL9AiU5a8IqO2V\nP3eehu86kTHwXXnpM9VAK3q/r+GU5nEJI+XyE46IH3IEdPcs3/n2xhSuSFnY\nziMjArouxf21Xe8/SSZPVSF2jcstUCUEAb57nzN/uQs1XXMM5lmcdjLDK2bF\n/U8NIKSz8qC+yc7U1qQcySXiJDCRbcTg+GTBLfBTiDifIs3qXDPJnXb5MacA\nPNyYZn8MYNqjt9o3Xnl/Nef7UmkiQh4QO02U+NsL6W3mkaRWDuS0t+NkyiW5\nlZquof8/CQbLcnG1XUu+kP80iYTdrhwd5HL9gWyaJv9FHRv3fxKpauSFn87S\nTbJ3dKRehwKZzKJQaAgVhk2gS4yYtLYtqhKTh9ozEWXunU8L3D6ilqRYqrB5\nAG+8\r\n=C0mi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.4fef8bc1e.0_1614813828535_0.15686997736339192","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/typography","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e203d5c7ea98662afa7e1b9dfb354babfb64fbd0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.afae3a3ec.0.tgz","fileCount":22,"integrity":"sha512-e/p0rxBzRLqSF5tEaXBjIaPAV5npmKP5E3TG2qxNy0VY1u5zjHPrPafwekXZIWkA6rZsin4zZpYNtll1F9vnLw==","signatures":[{"sig":"MEQCIC386Njy9arHV1DWuyXPFxf49v7RnJm/WwyDIrMODUqkAiAtjLBhQFObSK9e/zAdZU7JTFdtQ+39SHIlZenPBT1IJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7CCRA9TVsSAnZWagAAD8sP/27jNLy/y7AEOy7EPoY1\nBpE9UVAowNOpgTxOiC/wmb0cFcEcriuc4w5GQ+DcqLQAmpHY0bPV37iOBl83\nBzGYfQyLezb+GVo2GL6JTUryeWi8w8+Y11mEsMU4DK036d6b4H9jLjKLLfuq\nlxZjKhd8M0vsuj0E3lrdkuB17RaXqYBx1Bz5wGwMcFZnJyY+AjC0g7f2nqv2\ndNS9EuBSwUVajgkiqIUPB+J3X28PwO+1xWzQfAR+1tLDmDjwPsJprcW3iyic\nA+GtptAnOQ4Y8IlBOXoJgATvqXdpmF5GfQI0ki5I7OLEVWdf7eTuC6+TRJWf\n12BmIJDE8rt4/bJknnTDUupyji0XRFLL7txMopi1mXfcktM24NDjXuDC6WIB\nOYmUzpnW4z58R3qaWF6zt9K4sSpH4lmgUOwPNCZDAt1jo0FzK/E8oBDbvP8V\nBFZrwWZZmv4u4cojKRdFEzFfjMvAuIdSY7c0zxKcDeFymnDZHsvM1QIxFsA1\nefci8k+B3siGetGU/EMnDbsURoZkzNUD9HudW5LFK6fHiQjoJXKNaYr19AU9\n/wTXXGj8SZO5FI55mgpvJiXtnMBsd+Z72lnmH1/WS59XBWvLxSf8Pe6JQRPe\n4s9dp9QBCV3AkgOfkKyi0DEHwr7Tn/H1snF4m1994bSLT64p3yEPUMa1kkVd\nJY1B\r\n=/+cH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.afae3a3ec.0_1614814913638_0.548085743579769","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/typography","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82bfc50e05a4763ab667e14c0312261d3ebf3925","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0a0b10f22.0.tgz","fileCount":22,"integrity":"sha512-YHYWoL3Eb38wrsYPFX8wf/i8eLSveXKEvLjGLSurMIr7tQDd+TrOUPhd8fjjGhmRbwZbmJishnD2AndtCKdZFQ==","signatures":[{"sig":"MEUCIQCJayOcUapl42qg9PYZlduScMt8MSw9/Z+d6+pm6Qvu7QIgLC1hSqWMPcgtYrSWWldNbOIJG33T/cu4U757LBC10G0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCMXCRA9TVsSAnZWagAADjEP/R+dPkXk1h9r/ViA+re2\nVVJ8kdLSMmWKRHBfiSLZUOhSI2z620HM2SeMjhD47ZYBbmubij+QIWAPOKeK\nUZBhwJRSjMFhA0BDOTa7qBoHJtVihzbKQGluwo0PQCXScuNgpoB11K6bmiay\nlLToKwpmpyehrLLosh+EuAoseFDbV0jrgsXs5ynfv/Ib2ixUyUZ1Krifzhsa\n16XkpPx56Jgf04FrAjYyYZmD5oF5lmhwsaF5aYfQXusoRbIxJy8+so2mLoGd\nICrK6yBbaqaZRh6E9Rb9g4kKQwto5Q/WjGLP05EiMjgULRERfOuQJYLKKPkW\nrIM57RHIq1i5NiehqRUNT2F1tnkS0B5FgeiF/liArsAYLcOKiu8c46XZcVAt\nHoRapDNaidy2xfkXvrLY+7zUcHF3WgibOX0RiP+WBeQf/8U2LrOevR0iyfTP\nUfeqMI5rYNVejLvbzgsS+eABzb2ktthb4G/quo5aej2JBLIcHS74+idcPgc2\nFpAUcrueFHyfaOKM2sVvJhh6ry/RiyztjulGb3vYzK80XNqnrl/JVplqsloD\nQ5g5XTltylHo3muOCPWB0Q9/vLnpiGWWi03Dyv8yRm2wjv+QCUVsCfNBO7rr\nNCglQOyB4OuVP097gpnNDKtG8OfVmSSKLO6z36gOx10tJEY9M58zsAIjpJIv\n/1Q5\r\n=2Qtk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0a0b10f22.0_1614816022660_0.2134610937380006","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/typography","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f73f39e2cc53a86fae943a0b5100098a31b0d9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.6f678a91a.0.tgz","fileCount":22,"integrity":"sha512-lFG53dbBXTU+MGZq7y8hAGL4ARrTMuTjPx2dTYq3tJHMzpoLz8yce4vGgiujUVEXNDSOSHA7E1nkcHiLT9PrlA==","signatures":[{"sig":"MEQCIGYpZ+gaKjWjnDwsAGlfHYB8JO7zGQmH8XxIAcWORC9mAiBgYTrNYKsDAp+pPB4NP+xCFNKXqnX9rHREUwd16s4JYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSlpCRA9TVsSAnZWagAATt8P/AiDM2FlgWanfbcxA1zk\niqBkBRFv15bdMwVssW8NKheHwSjZ7myoKGH9iYpSKg8pEMUhCVleZmQ39TLr\n0+5+zgX8iVjssgEOCvbePrSzS4YK7uXAv1CaZohJS3nkGn+q25DaasB5PsAl\nSD5mj5LZToe/HOkobujM0tZO0EHzdgxR7CQKkRr1GxI28DTjZoyafx8pTz6C\nVcxi8nrw/VJnju0WJVoVL86oI1j/xY4PYp4og+n/YLnIXYqX0wCA5m/KbJSC\nfPI8pkKUi7NFyBmsPonuCmfidu2b4MnhIOKGjG16YI50XQEhcS/5FdHp39mX\nfU552zdOCE+pjA6ScRrJaibS3xH5ImHaGBQeb7yiOeH8Oa7NgfxPRUnFSsra\nwX+KSoHJgpBG10OBg/9O3czuKyMOXxiEmQhL+o0nnN5YFEOF0w9MUrPPQr2N\nglEvpeKb8ec7f2F19O4Uht818cYEgH0SPj8K6afe0cJTCRnWWTmXSeErVIPc\ncLygGaCnxjZIeaY95JqxaWt6S14RhTW0hVcLiHyWRHT/Vv53SC3jmhQQlbB+\nyML8AXB7/MTI8IlgKYNXSVl4P+XYO7e7bsuIV6uMZufKmqzNgY8LLuMqu9CO\n3NrORCV2mew46S/2Md0w5pOzA8PK9nIFz6MtVCGG9zTD6ZAJo4fK7LGDIrWa\n5OAp\r\n=vFH2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.6f678a91a.0_1614883176521_0.07413920323605794","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/typography","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb6448d003f790ac36c248c7d06e5368ebc9e935","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f5f1b613c.0.tgz","fileCount":22,"integrity":"sha512-ZvLe6d3qG5XWX8ub1+CZ0DBRZKQ+ovvjMZ05GQvsu8mnT3FwFdBV/HMaTuA92tWvknV99qZFxm3xCKkw60BzWQ==","signatures":[{"sig":"MEQCIA9OkHLnwcC5kinW8xXj8LPS2Q85lPb99OvlmqQJ2+ZBAiAizLdW1eM9arj9wHG6Xc+7b/ZS9BEdXGEkBhdfU2p1Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUe7CRA9TVsSAnZWagAAMMQP/RG5udrZypI8s38c6Lxf\nRmcvOq11GfB9lmzhe6lsrHaVJ4gVJ5VBvrUpS5QdPsmEJZ+dByZC1TUuiIn+\npfyv6Ot/35ZsJ5UIFJY39utPABNjQmWNgyvgGBxZkQNS4dKehsNA1zMGq3yH\npVuMo//IVxn7T3RpWr2ls1ksTx7rsSMGEC+tkjFuR/Sd9Oqzs88TpfjhQyxj\n452hXZeiKKjF5Ley6cRYgCbRJNhR1OouG02AEjk6xKkEQBQpYbB2zuJdStz0\nD4HUygdFvIAcoCxNzvt53m9Glsi5d93rnkoW3uwKi0Zc0bWMjIEh6pzGy3qs\nr93DfUPOsaLqvL9TwQpdWK9OQtQe4fJrjUWqd0GHYHVfjhgp4Q7Wi5NhNeht\naT4yyV6IBSgZPMnsLA7w+CTP9yExjsAel/hE7j2b6dY2NJ4FOdX/ZDahNCMJ\nREtaqbHR0bIHfl4MJdBtoUMTz5udff+WKEQCk0KzQu8GdjHU7IF/R7ao6KC0\na2Na2ZpQWx1bOijxzNcQhx9NBH9j7JYT4KSIBKh/c7GnWOW3KhlGVMndR9KN\nddUbc0F3sLMNT8bpEYPDK+32xkf7UxlLgE89ZBxeNaQCanpl1of+LUC8EGDK\nuUSzfkhY15drluRM4qGmYNcz5+/TAzvs2tqUGpRsW4rVA2HXPCMAy44EPzQa\nHPZd\r\n=QMQr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f5f1b613c.0_1614890938518_0.14035146740471194","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/typography","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.606e767ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e53b4208d010253416f023fb10952d9dd617a815","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.606e767ef.0.tgz","fileCount":22,"integrity":"sha512-NGkKc9HhvLXpH9xlsP50Yq6wgiUpHH/qBK85aOYKfPVe0eSeCR/1EvlQFkmAB7A+XgqV5J0US66GXR7LccAxtQ==","signatures":[{"sig":"MEUCIQCxjOABviDVYXltBjFNuPMqm5/rvghxf5BJFCFWZjcZ1AIgH2ZX/p179Ooj4kaxdgjbA/yF2qmsM+qX2q6ttebKqJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVTZCRA9TVsSAnZWagAAORIQAJbzZisyu2x5x2e6c3xy\nBrDsPv1vqQu2UivEAMcUqtgU7LlkeZ0N83PxNWg8bSJDiNUHB9UK8pdPm4JV\ntkWGwVsXEvdrIhDuFTOr9dSarIm6M4vfU1o9sDUKhOcVp0cl4HDtwynlcTB1\nmrh/hFTYMxY2AiTNirgX+KmkJ5gzoSFBH3hoC5o+1j+4a/OjGtv6PEPHMUVJ\nTujVR888y3YcShAXt1jauIRUSTRXT7F/013KGtMoDYhOpMQ6NLdTjEmeXe07\nwMxUmnsOVNX/qSeW667dB83OO1tLu2IY6baMP11a2Q3nquLm/kh+HNUC4pC0\neL6F2OmtJGxpo5PO/bWDPgCvDF/pY6Dm12Rq7PVF7FjHYxIlhehb8Ojb4Xor\nVrJyBTIGqbGq/nvhjaLdugw2HJcXnlgR5m7AXtX6tyL2Bk/1J4f17pyfurjj\np72c63sL6pUBwERKWLKv2yXEG7eWCR5c/+jox4MGLXZXy+1CIEs0Rsoh3pjc\nMuwdCUuSqeW/fiLpYN0Bof11QK7ZQdSA3ZeJwCINyem6oYY6qw2C1EVBs4FC\nPcbAZNdMbVrFXYf6BmWkUZQiqRNnlB1iDljDrmtYi+tX9jUxSgYmL5cAcE0i\nsxyQaMVd7AXgUWqPzT8CKlbgAX4a/1W4Jhs8As5+1ZjkDmoumNKUCXdmWOYC\no29+\r\n=zFw5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.606e767ef.0_1614894296988_0.0616284724199625","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/typography","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a5757b9cdfb060f3c19ba56c28ef3d3450fc89c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":22,"integrity":"sha512-1gHngR8EuGnJpdCH0XS8Ap0JnUpxu6aNGFuYoF8ldJwBnF+NYNRM9riK2rGAXS+zsL2IYAANSYHU3voIOE97rw==","signatures":[{"sig":"MEUCIQCicqrv+5X/2/aAXQzM1vrqbIiO7xwIqFk2ALfgOFkv/AIgEABCO4rY0x0Miqbr1C+IGzND3dQ34GtHmYwIgCUNOOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwd/CRA9TVsSAnZWagAAIXAP/jIFjTxTjUP+Ab0zCneo\nfJUyzr7PlfMp2pTXCWMZl/1NT3nN3k3ezxxLiYV/aCuLl5WSBcCJcCJLvegX\ns0H+SNJAT2C6Arw2L2nWyaWC5BXAy5scAWu707wkU9bYrzi+BmZF1Kd4WIbp\nFpcKXrvIiyXq1iF837d/qqV3AO2G+aUu3lkqV44gSE4hn5hR0aQN+ABnWKbP\nyU65FvvN1avy+EuQsdFA9WSesbaHF1K6wq6I+yNk/FlGzeZHdKBSOTihwMiQ\nAb32mvsyOzuEWH3EcEbv/vUJz3Rd1L0WLWA3p62JN0vQU+dO94alsNU2It/p\nDHJr9rpFZgZYLvPszcaDRoGFIy63lPaGCDvidoOS+HGnrCw1vkKWcgoKsI4e\ne+f66Lx5SydFFDM4mNJc1Xklum7rmmSwEPdOzROcW35bZrHM5K+cWfW6QraT\nAhOkoDdsL+l19xnS7OvRsEt13GvqfeSATzRjodsM7z9U/rWkcCat57x0qLCP\ndNMRDIMXwBGXdLzestjb8FKgfD1oEXOvhAma5QypULL/cPz3q3BIsGkVo/KB\nf10vVAQd+vaY6ADOYoJwXi7s6HSzsNL3vgCYRsGX+iN0CacBSx64mmi36KsG\nOyl/5cbDmjz/gFW/CpfkrsC4tYwVkD3nkfi5sn1XyfvvhKTCsQ3fXu0K+P+4\n0uDO\r\n=CvtS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f77a4dd1a.0_1615005566444_0.7313751554775636","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/typography","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"588aa4cf6d70e789c3666b1648182dc400555a75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":22,"integrity":"sha512-r4qqj37seQOw3AGDJMToEwE3CvOTYACIA1SsHrllmUwkQdxDWzLMssO0FoBChBpJPeCouBWXytBJwJ2G8AnudQ==","signatures":[{"sig":"MEUCIEsW503ENZdlCiy7tV6SGaRusFXt/98eLmEtiNJqJKoEAiEAlyMllUdfqn4QXCht946WhzKEE8XkcJf5t1Sdolen/gU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqihCRA9TVsSAnZWagAA7eUP/2cF5oaWXg7bKuosoYan\npqrNxo3R7ZVNAJ7TY3AFf/r+muY2mu46KryNMQSIGCv0UfbyFDqcVISJGZOt\n5eq+5AwJkKDh/rKSIdIxdhiTbNMOf0tJItjxrlyhWMdBN2hpZ/2lINySPlMk\n7qaobdW3DhSkgjBljpG10HGJa6Hzg8OBXJDq6VQVVo98lLj6J7YMKLKXPVJN\ne56E+IGKh2LUVmsV2K6+TURgsCau9gwhV1GJecH14AGJcpg0v3DOTEqK9D4i\nw6GQKCQLtXqirQQEpgycjlnIO1jX/Y35WZSob6bAW2hzd3mBPkXp+VDaI3oz\nu05D1fbBhCAuoJ0UV+eKBmQ+14IGuYK240aypo49zTzm4FxpiZXbx/cGObbE\n4a+YLxWo5vfEfcyQLNGbYrGzhCo6kLQmgoQO/rA2KlhV5T56n052I2PNCNfP\nieXOD3QDISDbRGclUX40jlPLDRpZE1fj7cwvVdD/ZlKX4ajkDdXm1FpVsB49\nm2YgxWsGGVPW3YHD6kxMS1N6N2EYHCtpgbyU0ytF5qtYjPMkIs9Kz0ZBuE63\nGcYUYYKYUTy9sWAJ2lI0/9wwSVIVvNWjjM56GWw+jpucQIpU2ja/hWSPBvde\n4tIGwUPOYp26VUFFIOtSClqERfozwjQvmobg7zZNS+cfPJylXCHYltv4Cm4k\nDN8+\r\n=C/CC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.2d6ba2c23.0_1615243425186_0.441639552704405","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/typography","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf46e41c8d25e48aaec18eeec49afc8e09aaccec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.7522dcaca.0.tgz","fileCount":22,"integrity":"sha512-UMO0NtmAoy9URw5RYqoERWYE77gtamYWWBrJNxc9jNIrKh9amWlbAcZ6G5OKJ8Ih2P/U1Eila7r6RpYaNQj2cQ==","signatures":[{"sig":"MEYCIQDwnMiy7xtLF39CMPOYDRJ/5Q2joVXfTDIyaZ6gxCIwhgIhAPQVANLml5EUBGNVsLkTRwy9cnfuGWQomXLN54NZLWK6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDeCRA9TVsSAnZWagAAdIIP/0B6WAGeWacu8z2rAdxl\nYqCsXr0uYmjk2leBx98hoxwpWujlK+XQ2RIKOUEdWgzPAc47jAGHRhwwA7WR\n1kv7M+Kg+fHMhN23anNIUVzMx1DCft8QaGFMZWIKi3mVGgvFdTyur3kDg6nv\nlwUdRY/C8vJRWUuAvzddnav/69LFmJ2ujTI3JwgpO9T8eI6B/QSrhDUyxClD\nOhbnYqkKthURRLhVDI2vG8Y1nTVJC1OBlnLNVhWs6gskaw9yLWUZCeNJ77M+\n+MrLZVNkDwCZU223itSSZm/AZgVqJ0R069Hc67Y0HcSQgnQTeXGIsqasFUgo\n0uSrftxMnafZ2FxpK3Nt5BLfZvu0p7EFrEnMclvTTibqQsCv4SjWB62odY0f\nB/9NTKIPV5zu/resZHPC7Hnq5YdObE5gVkdwV4RJb2/VsbYiXxEJmkKdl+Xg\n9zAof82ZuDJA4m/jkv3UxRAARtF5s7IfoN7WPaSH8OHuPM0VyCho+0uPiZoM\nNTDXVJFlN5yjvsm1MZ2IcbZSdpJ+IyMMr3qEoLc64Io2HI57FnEMiWLmfDUv\n9lqmzPVlgz/KI4veF7loraUzWyf82lEoIW93rL/8Aglu0CK0sphhmOlsPZ9j\nkTEEBQptD8VdLOea8V9Ofhna5b1QilG8C2dtRzLmwcqA0UKWNz0+ztbmWUat\nocIF\r\n=soBr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.7522dcaca.0_1615249630294_0.26135178862616115","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/typography","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e1e4346e3ecace71e6298c4ff0b6ec6542027f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.5c0ab7401.0.tgz","fileCount":22,"integrity":"sha512-MVyWG03wj6+ym30NQWZqoHZvGeXQlslltmYDuQBHG/WY33Id3QxduZCaJBOX4m2afPWL7FeWP7/QeNwl725NaQ==","signatures":[{"sig":"MEQCIBcRYeXNPegm+z7sdGxnzG1r2GZTg7fYYuP83Wd3XYvlAiAxuZMu2bdJw9klc+REvTJuPLvGNcuRA0FeQ8MYWBb6cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wLCRA9TVsSAnZWagAAiWsQAI8aCp074HbRsyyPxh3V\nnvUixeGsQ7GCWejHjEZkDz/9h2tjK7OYWsyK82GE5LRxJU+0c46mKIBX/s0V\nAQ0RkbqpzxQ9/PfUIPvuHb0lT//DDvF7rL8jnzEqXBK76kzFb00GwxDYaU/T\nmMTsdlSvFLzhQPJVyw9ys4de8gu7cMfSCrECEaCfz9lUy0DMtnHWFW0tZ6TC\nevOlWTRV+Lh+XbVzKTe9Qd+tP7nTEY4wd1SPUB5Lq5Xaf8GJT8sP0vcaFiko\nQrlFQa+BtwMg0bxvZWVCB6ry/e2nz8P4sFFu/8Tahb5LcSjToSGP0dSWXJ2m\n1eSvusR6ZS0WPgqIyf4VBZnTY6J7H1aOC1CMw4SfXEBbxplMLmA4kncU/2f7\nGikDQcUEqIwkQZcXjZB7e1QHOJC5Ct8laX9CUpRKUOTEZd7QjdWMzCJ3+qlW\nlVaqidwyUdr7LTANkxaURt6Q7MBWjbbas39cq+7Xnlvee8SElclxS/0IK4GN\n0s8K5GocFiH23lxdkn43DsvUmsAAIQ055U85rowwSPcQrO8YzhjfGkTfQehw\ngcu/YMAtMgGS6XdeSV0v5CeWyAOT0oPqr2mp6t+k5QUJrIN9j2/eIIZ6BHRF\nHgjo0+BRwbLrDnfVA02Rk+Z6njeymVpdynsKDjuKGG8RW5wt8iguDZ+LN/PR\nDD5y\r\n=rkpn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.5c0ab7401.0_1615330314992_0.029585885434584513","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/typography","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e12afcd551b938acea3d39e6bdd27cb35de0652","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.59010b6dc.0.tgz","fileCount":22,"integrity":"sha512-a4YA1lwQAiLzweCkKEzr697KLypUx9sdhMLrhxddlZ2AuWmGAV0dAqsllVPH/KgL5M+Qjj+KickXK5SfY9d7xw==","signatures":[{"sig":"MEUCIQCatAhq4VlWvkYz4zsR7Z3lqyZWpIYBAUqLICGe2MZVkwIgAuQfbHa7W74Sh6LwnU7f5TnVqH1tzroTjXlA+P/cVNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPpUCRA9TVsSAnZWagAAFAQP/RNirDZK3Tg3xipyAelS\nRbvgE38nwpH+HW9ln8uprK/uB00mPu9PVQvJVGHhtPBzN9WFhfmgs5H81+vY\nR3jpMrcRnwy+BLdmLIDhIwFOz5+cpihGUJAIoysWsWUmU6mPbCzyMmxuhZme\nugcvlGap94P5LOEoSLK40MxhvdeNOxxvSdAsrtbnl3ufprSc+puI9uEv4loO\ny3zA6acD+AfwpWh5UoljIPEApG6VbCo/5jZfscOauCzXKZI0Bkh0YTfMjifP\nclesdYj1XR8dS866gMD7gvaZMiheNkf5qjxUxybs7p0l44c3Ihv+mrko2blh\nzpb2tkoBFpb15ccDx4kVfvjQPAmViEQjrLkAtBKdDxZJzYm3U5GyIdJWXcVd\nQg/D3P2c3meDdEqrlAmvuPu+5Xchwq+qZkXDekcSTHKIa2AzcBSBcGgQ764/\nZn7uTIDGJ5TsGSIY69fT9geDAVH1ldZdLXolYoYAqqXzn2rMzmMkuAeaAKvr\nz8cEwcE8NWjFdkLvzs4O7RdMCkngcDlQF5jDzixVOFo6XY+0jVlvf5sEQp3t\nL3TcHT2k0zvMb0xGoezv23VO1PZ9Tt1Zh387OOlQKG31jt9CffJ+BOYZCLZB\nv79blJ5OAUootHEvMx77Xd9Eu8jsLTPB+m51uXHzGqut8KiacnvXKJopRoxU\nIRtt\r\n=XGKX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.59010b6dc.0_1615395411935_0.5097068144465484","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/typography","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25f307bf113fd622c1f699142e61bbafd6d591b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.9e52f5544.0.tgz","fileCount":22,"integrity":"sha512-HFgrD2GzxbmohlfExjB58wduLG2a2qwelhLqg9fI6piPWYWoFWUGUka026BdRcf3CnAsWJUGdzq4wxuN5MfA5Q==","signatures":[{"sig":"MEQCH372oO/VYG0x7HXI9vLcaejGeWI/N4tMgxs7LoAS31wCIQDn8HqjoNUGnOWCQNoRWMXrTI/1M2I5AXww9cFH9ASVhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVUxCRA9TVsSAnZWagAA9TQP/iBrO4s6bIQnMw+i/bXy\noA5EI2aY7g5aBOlqVoZD8NjhYUruuahCpjBXCjMHQcqss+fJL3dlm7lOH9Y1\nckby+dmG0/lZvzJrU/6nJxHv3Wc/Jhzs2MK6+fzhTfBsfoYeHQjASaKg7RAA\nHDUKD+GFPNdskAOh2PstOSEZInyyy5GlewP3ezWi1AQedk6tEjU3msRUE4m2\nKwKyCeHISQXJnuqASFl8u6H9vVTmLcMhIdsuupQU9AFQLpPZDkxi5KeK1iSr\n1YhLvEDZ57EJD80FxJe6nE1eVPJWUjCNnjbsIxOnQ9/BOwsw3p6bVnWarCtI\nHQIvAGV1g8rvgoFWN5ZJxArQRcgFFsq/4t0rehGHTgLuSFses7xbSYdOJT0E\nYE1fmlU/UXHDut8A7vqQNI3Xc3+mgCPBLTp44lRDqx9Iudn44xsxw87fTzLb\ny8cfT5xmwA635h4X8JqpWpRj7R/dfYXb/y5+tb8xzKsQMe6uktoyUbArRrQw\nP2ogITgb9TNE6At8/2izA+FixolCbz4V4mBvIgj2k+6hxvukzEWVkw0l8KjE\nO0MhebIvZJmgNj8iUpshSbzluEhEyxnQKEkQML29B3vBgEZ3kdG2exismTbF\nTSnEzrpC/C1MO1REMCXQmLbEyN+7XzpSSAF6+2Stra+qwoYcb3PNAqkna+Om\nrBvx\r\n=FSw1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.9e52f5544.0_1615418673228_0.718667898636167","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/typography","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.a678806f5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0bfcb085c09480c1ec6e14556fcd3dfff93de7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.a678806f5.0.tgz","fileCount":22,"integrity":"sha512-aYe8U8lwxRQlqtwmYO0VknsIxCnSNhMKSB+2tTWNSnoyld+5447XfWKhm3yApR2cTvNLV+Gma0H9VOKuevs1KQ==","signatures":[{"sig":"MEYCIQDn890tnVINC+s5GaNMrP/Q9kZMrywWppM8KIjWMu9U+QIhAPHQmnaZSdSVGw4Q1G5CUMzaKSdQGijIiJuSRR48pBp5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXcpCRA9TVsSAnZWagAAi6cP/2eVlrsiBCHodYTp0lYN\nSnvyEP9c4OQ15EnlwBU5uRGA+SS2PAUSMOfmfCWdRuRNMn+iBoUJuCnubK/H\nmyIj6IL23ycXhe4ACpzvLcwOoLd284x9UrDvpb2Cv9USHNg+vR17hz6xHRP0\nrCDZB6h3QKvrmob350ioLJdSsAoad12geCEm5JxfjR5oGx3w608rCVlErbtW\nhG3/wuJJaKJoUCyXrRuKKAaiABVHlVYBiiUFWG/XerPvo2hwxZfKJxu616Zu\nlaxSEyMmd5/inTPSUCJ0P8t6A9YmfX2SOfEXJfjoQfB0G/2H1gKHT+VRWrOX\nTvQ+c5CmkLnXPqpVhzyVmcdb6Aj65Cjodfw5v5bLMg7uDtmeZVKxK03xEDgD\n0rx4UOVaLlpxchLOnCNZGX6UkrN45jOfn0xH7lzXndhzuUJotZvUWt06GKec\nTcNfHr5ErpLcjckO+XRoxmnRBlzzVJMDzrRjVm4sJ1Wyihux0cLlzHPVnpVW\nte4Q67NVT6fqwe4ASGvzDEZ0GxsgBuD3mI8g/6udWwXapddaO9QZkBt7Wgqk\n8eYZQPvbsnJh4NOBagj7K0UKIMpxu3STIFAbGcNreuuaeBnKmsUICSKosI/s\n2f83rWUAc0F/c3rT/t+OXBv9q+A5RzEUL3PFTqJoXBoppNenBUfnrLuVWHx/\nKq1O\r\n=Bk5d\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.a678806f5.0_1615427368674_0.5967997461161578","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/typography","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba78d006868b5ca74e9e154358a01719ea298e87","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.b2d22df5b.0.tgz","fileCount":22,"integrity":"sha512-n8vRIAbnu98BhHciH+ozsT9lvOO+MWdixz1LLxYrAQmA8l361778t96lIwuDrC3ca7zVErb6Q+92jXrJGkvBcw==","signatures":[{"sig":"MEUCIQDK/rYrwSYZ7iSqkaZWDnJPsSOwmBMrRoMwwjc6knMQPAIgW5D4u1HRbkYt+POAZ58GauqE0wu92UeheRitHdBoX7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0XCRA9TVsSAnZWagAAsbYP/RR/U1VmverY0E+cuKTU\n/ZSqWk45/TT12+KOlTgkxjFArhMu7/HVX6y0WJCzwGvfuzcgHP+shJHo9grC\nFe6r24ro3Peli3OTlOr0MFAMPPUQOMVdRO1XnbS+Qyq54MoRTxYYfj3We16+\nx0dfn/63UpXUl4C9YenovAxEPK29cYVk/aQYNbK6z1oFB81gNxSXoAurCxa5\nBxKPOEfzJVU+RldiCbKYGZbWbH2Ppydj/4YKT2y8AD5uSG9nNeKOPFS3iOvK\nenvGN0RfHq5zStKLqwPVed7DI9AscDdmTq6dXWd77pmwt73FmduWE5ZWk/PJ\nd86y6SBMr94/B8lVjz3zN15XHe2vFCoPeTtnz9JyoRzXmWsa6FfSlwlp1lYE\nZtZvuc9vYoyDyHBX+PMmqufSfkZXE6t8aGo4y4cRBz0xJmYM2fxtoa7+5fqV\nIT+ID2d3D9LxQ6v2JtoQgDLC/kqYo7O0d7m4mlM2q6rrmH4ICe87i3Jxw8pC\nUXrfaJ1zu8tmJJWr/2Os+mxczhYsOAJQaUYbY9hJC/px9S5DFl/aOH234yzC\nl8347kP99jvY+ZHN15i7gDMjx/7RlG8Xtys3NcaJwfLmIazE6e9JkzLswrNZ\nzBnSu1QZ/KMlR9g4Bxe52ELQHJIHieWn+LTiWlPko0//2SQvZzmyYr8In0YO\nvCVn\r\n=1hhY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.b2d22df5b.0_1615482135404_0.3379249247731282","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/typography","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.81911b707.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"480e552e5716c085879f6cd24341e54993867f06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.81911b707.0.tgz","fileCount":22,"integrity":"sha512-VcIjUP+caUDZKSJtkvODXd/uUtnPvlVupEgBEND2qg1pcYzfiVsYse5kFAwevsYs783bftJkEHAiULvx1m4m+Q==","signatures":[{"sig":"MEQCIDhGIQZ92zIERV72vO7Zheb0g6WrUOzOWJmD+lApEczLAiBGHanyybOOrHgEWyjGknT9b9W0EgPXQtjuBgVTIhKRfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSl/8CRA9TVsSAnZWagAAV8EQAJd/PrbwIIwFzvqb8Qbn\nnIWwwYvPwsDCHu7QeJfspr52Ql/bx+RIoNaCYBVQmsdVhPG0NyYQMnMBI9YC\nHWLTmhMBvZGOAg4+x2zSTj4l9b1lr+9kaNxAzTpU2zb3vtImVUU1eDieoTnn\nPtp5YdV+9nElJHw/vLnwDRsdHoc1qgi6LCPKDzek16iygV7Feh+a8BMsd8+w\nT87/zX0ko7tPnKrqkXw7l0gxigt4UVp2EZZ8Uk93wd1dd0ytsob51LXJSEHx\nsJbZf3QPLROjVdS4Y+sdpB7ThUtSYsiDp8ex/uO7WMLIPF4i67sm1kb9qen5\n7ayI2C/SmokSQSG+1/4N0LNzV17XEtBoQZNPw0FoH5wwtRaKlbNantxtPIfT\n7h6XQOB3SYHH2ckvroSFG+ZAW0LPanUlhgKt+3HL5JOQ2ClgZQZifeBZOUCB\nixCdK1YjXUPh16yegIKVZIRbjCmQUpuI9F2HH5X0ipqiX90JEoc9Y/ZdW+Px\n4LM8hsCXOWZB+ikfEAnVrDVEEPs76Y2x4H0IOgfiqxumCspvdZ6HydLhWnFI\nNC+Som12+dicOJJEqZ5IfgIi6+WRX/03KyodwKRVrFn3diAIAkexsePQOMpS\nIqSc+dmJMt4MR5YEvXiOJySNCPfIbTns0gmAY37CSmz+dN+Z7PKxS591OnPM\nSfF6\r\n=3osD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.81911b707.0_1615486967333_0.43526354572979953","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/typography","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c835ee316b1265c8b862f2b99a8cb9603230b191","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.9eeb35c38.0.tgz","fileCount":22,"integrity":"sha512-boBdhN59it0p/zL7QArBXglHRkrRQsF7AjyBO6s/S29oCI2rsQN8HlKefwe4CvbLPgqAtrdUcYyUtjioRuYWxQ==","signatures":[{"sig":"MEUCIQCdUagS+z9ROcIMlNpRx/NYaMBauDbr1fN8Qgk/9mUIzgIgcuft3xUREfS218qbx4DUhE21hi+rm4r8zSd7X28Q++4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnE2CRA9TVsSAnZWagAAJjUP/jgDshMxrvTbgTrVxUej\ngLxNv7TjlSUv2K85BrUiqYOsvAHkEjY8TcaYrow8bURjgVzXP+KsoKb8QLDd\nKWAzEnRPDQsEc9BZ20BS5TX9PNLFozmuE+CAbtc2o4Yznb2HgfKXhcViN8X4\n4lJWSPkVLG4dskywqPi9OlruluawNC5pvHnC2L/9YMx8TM49/LzoS0RIoEJm\n6z1daUYxmBOJf170c+LwgAUjdl7q4aChpoxCgsrZawp1kxzGqOUybT9dM0He\ngMsi7Qi7FfFFoa8M63dGAoCZQS+JUIHBdye4ENNEvR3Gqvg/nfbq6NNH5U8L\n6u3CnWzdqRNQnVLmJfxiRrVCdnXqqI1sZwNnf3AZurW+yhOOAkn50MANZtI9\nRxzSPxeDMETZwaMOEBSm8J/qJVITlCTKcxyeW4VVTc7HmNWZunMPUBCfbTFt\nWxBQq5j9R1kXqRrEwKmHtTwat4HihurIrlZt3qazYsIRvg+SC+jWGF7dQN6s\n7mqIH6oobYr/uSTbA1tMf0B6ykyIX485XTvayOPiWrvi/a3ls0ly/aw9Za7U\n3zuMrTKSbP0b25my+zqkenmvZVKGj3JO3Gpmea5NlOI1ktKC/sXWeYJ2bBsg\n1eOaHMpBBnHw0Expxw57syEg+zmTh+/FL2pJxiLWNeAxReOXiHJu5f06A5GE\nR/o9\r\n=x86m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.9eeb35c38.0_1615491381920_0.021911624168050148","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/typography","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46255821c5bf90e9b9b78cd969ab1f2434e9e9b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.12be3e95a.0.tgz","fileCount":22,"integrity":"sha512-luIJcT9qmQGUsf4z6HqSbVki6HME+WXNPXnV4a9vYOWvHsU3Czg5+DHqLKxfZ3QqrUcrxa4bJbEWHW3q6iJveA==","signatures":[{"sig":"MEQCIFepbeKUTfqqWMZQrCdCinNWE4qYqTGn8cIefNWJVqj1AiApTXPEi8gkvorYXFPvrqFoZGSq3Z7CKXeBxVnNZIaVCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnb7CRA9TVsSAnZWagAAzh0P/AhIWq/zSq4FpZCWxjzq\nF3OEgmM3ZMxNH5kCXL1jyo8C6zH9FAXyhkkCZx6xM+guUujV168F+LXLAghd\nPa2a+KJTl3tI6XUQ/H58pHCjBXewz5miJEsx+QFQsgRsV63GfDz/jQAd0Dhh\nwzPhSiaIyUeMUvIuxQveq12F57V4q8OtO0Y2lZbLd228ijfx9X1s6lUplmPw\nzmqHm6jJ/m5oRuA1AtgYlj8BGVbhJINCqFcYey4lY3rscB0eG0VNuSz/KeIk\n/xC4MqE8ASr5rf0dq97E6zhbYx2e1JDxDzX+I2CKV3HuS2cLusvTFNbTSO1H\n2Mz/NUMkKgUjSZUhv2fnvbvf+pRIErXcLyeAuf9b6Ynxp3e3YZP25Y/uRoQG\nksnf6HNR6HoMZBj1vjwmDkj/SeX9tsTRS8WiyHFRVO23rdM0XsN27k/XRNl7\nSNYVAfIwBtjAp87Bvz818nVNzx0tvywrT2gwqD2sb13Wos90rYU4De/I4ZDh\netJy7QVUde5hl6vQJ9FRgq0ksKK0AhcEhEsq8EnyEYLCJaw5DSv03wHlkbGT\nkSeuKC/1MCsTH/KMe7bt1mCHp5KOSk1KVzo+PclgLV36h0TmqKy6aKLF6Jca\ntzePNn6YaM64IYprmekAp3nCbvgXj0UqTISfDWZ1gYXkR3etXFdF0GmTeG26\nph5E\r\n=5pXH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.12be3e95a.0_1615492858762_0.5515259634131424","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/typography","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee40c2db49489e40aa5eeecca697efc218907ff1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.e683bdf4a.0.tgz","fileCount":22,"integrity":"sha512-VVi95KaGVA3qm5tqVULJRMD0Vm3pwJfawMr1/skEkY2AXccjDlIYCVh99Mlpy81uy4Vy3fyK3sc9lr/lpOkwRQ==","signatures":[{"sig":"MEUCIQD66w30PGw7uWsZVgDd+OMLo2kcFMY5pkZ7YyWVu4lDmQIgTfyJEPK2LnU91rc59XQTjd1HRR/bb42U1HwptQ5XV+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSniwCRA9TVsSAnZWagAAiV8P/11yRoXmykvPQeepJgUd\nEwHivqXj/jDcZmhh3ALuNx8HVhQOkZxgiJy5ei0HGQRMcF1E/VN417dFpraA\nkshLwBPxlaXFiDHfrwQS5eTBCjrg7qiWGaTRQrkz8lkeio/76U92f9svPTFG\nPLO9amESxeR9qrjjhdtcWsVSd8rvBrM0oqrpznk3K2SVhQ96C4eTqv4KrJzn\n2Pa4K7KW9P81XzgAHbQLHECb4q7gWtlqMYLr0Qc4WAyi1/qmryvzX6+hmMs3\njprHYU1AGtnptUuiUqZdH83swt8O7xk4UnFTj67SUKEQYpeX2S9Jj4W7ibzR\nI+PPYghqXcWMNaDylJ0TrYd45mZiQt2BfMvAave4+vCrb85PVMWj5bebnH32\nKqGuCyB20ZV0NbOeZQalwgTJl0zAazEt5E0X04exd8wP83nAuVfq1eHXFD9H\neXq6kEHDqlYpyaJWL8ITfj+4HwfJC1APvHhBSo8jMLqWi0tI4lKMqCHfKeQ/\n9wKEnoZJc9PFoqDfqx2Jg8iuCaLpjrtuRFixsRGdsiXxE4zRQ2PFRLU24FuQ\nY7xP4DmiD61QLVG35Vdmpr77MLrGmluKXs9TF0+2vNwAA4BKhNTh7pqxy5jp\nWlIWXyTjr07cUlD5FMR99KYaKBc5uF+XvimquVd9Kqk9MkPzLsMi65PVPWfR\nrGTu\r\n=YbUx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.e683bdf4a.0_1615493296169_0.49460771454955466","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/typography","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8989c63034ae833deea35ac098e7e1b0484fafa3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.a07b6d486.0.tgz","fileCount":22,"integrity":"sha512-IchuADXxy4bZ3BFCg9pb8o2n7Xx+FzowOIz8zOijAdjS2MGUnrk0ur57zBUW3UfgPbCW8PmZ2+70993r1Y4FTQ==","signatures":[{"sig":"MEYCIQCxkO2VPpqaLmpp3kMbfeti6A9mBKLvcUF9KDy+7fVKpwIhAIpLT+6a9zwQYQ5lz9eJ8YYH9NvsYuwan7eThYx2wyz1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn5nCRA9TVsSAnZWagAAhXoP/AiF76dPMPuzpIrooRP9\nx7+DeWr6fAttHQDHeC4iX/zRSh2Sg6dCxo/mVti/uufdanpY7v8uFAb5hKNk\nsVN8/+iOTSk/+d8+Z0YrvJz4RUt70MxPMqvdSNYCapSpsYpVHmaKqgoap6+n\nZu3UpG9Ks/XEJk2hnriWN9SbIEchl1nWgnCoZkoYG0M/DtxAz+PSIG0eEl1C\nHShoJ6owrgS7VHEutTjHETpwiAftxBuc5lDWrFRp3o355AkdoQSkxj/N8m9N\nRHn2hAVcFwvtGOKp+mDc1eG/mmltE3AwG3LtofnGeV6CjjG9SWfUrKvLdWgW\n6hpz/Tf43Qolk1i/Ak9CZLvkmfkKAehuUQi3PQo1g01v2+dwC6F3gP6FolTB\nnKJzitrxKexVYGe/tD+AAvkYfoR69Lvrt49dVrZHBgQWVhcWsIJdSpu7z4w1\nOBOX9CFFDrCd59z09oJyM6HIzSAYTYHA5QDecfpIlqjStjN2J32bGDE1SwPy\nXo/3JA0toSBDI8CWYIPe+7NA4ISJWg2VFWDHksQDUkLXQ3FKDGbP2iIH/E0j\nhDEdwCJa7+NQwVoDOP//gDrD1CwblAKMXv+J9rf8NNFYvDHLLI/p58Iq7bIK\nN0iiUAKUqIKnYadGDem553HkIB1cKEzvHObRbuEOIxujZFK66/0JHqlAjUrf\nOeL3\r\n=xxVv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.a07b6d486.0_1615494758964_0.9875451518255909","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/typography","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.1e0653477.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0015751660b8b5fda91b6c166ba7b57b4944962","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.1e0653477.0.tgz","fileCount":22,"integrity":"sha512-30de4OgO+LuVre04ffVp+/pxjxRID9CuB/1u4pKlop3be/Cgo0Oig4y566eI1Aysh9F92sPGbU0kUEa1MIhQRA==","signatures":[{"sig":"MEYCIQD7IUnYXJrc1HsT8g58IjyPzHybmacwWvapRFVeUkA3/QIhAPR67Ltmh6edkbYI6Hle6sOfBPJ80aSrFjCAeclyXMLU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoAfCRA9TVsSAnZWagAASGAP/iFVH0LliUUd420NqXuK\nUEgukkzv2RDdu1Ww3GUbCIESPi3IouPfPz41xPbZpdTbIY3qqWdDGzO4fabP\nzhIIof1Tsn5W3eX7nOsohJN3j245l6DPdqUEommVNKt8IYfW5B6v1Bmgx/9B\n+nv0SUHUhsEw3TWb+D5utE7po+LF0lGjU/Wwevybul6v8NaimuJd8D6MpLN8\n7N0Z7pXH9KXfyh98YwdCd/xRtlvrq24B730sOc9dAD46q30wVS1f5usoWDXJ\nRHQO5PuSUMQEUWhKLMTnRVA0OSgbVcS14kbH8NX1qbMqogQ6ajMBtNHyklsO\npOoG2LKyyjFLNcEAzjheUWXfXP+c6GasXrjYvP2Q9Jl+Ad/vInwxsy+nTLVe\nnJQxw0ORAx00A19WFLr+DLxa1CA1FYu6L7QThCuOFurXmH2hx6AqTH5cAPAa\nTiS7uOIq8apupp+DjCyUfdjJfDWRvy7Fk7i/H2AHbgUd30vp8DyVgyM30g9J\nRQpUQ0Mx+T01Yo4WglUWG6/h1fHnmOxcToznShHIFdWnVFkzr7ysqCQzvAd1\njjRFJZ6efUwJ9hoXEKjtlPtbNBHCDMV7QRnTFh+dlkLAXPYS0l97ZpveR317\n/PWAwCnF1jJwrg3ylfwKmdUKwIuV7F7D3Xasb/R6XwX1xUee20sD0ejy/mUx\nw58B\r\n=LT4D\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.1e0653477.0_1615495199428_0.8450835779754278","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/typography","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ac00bd8b5129b41eb9abab3b51e88b7f152221a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.148e8cfcc.0.tgz","fileCount":22,"integrity":"sha512-l67CtYYwh72C/YPm5/pXxjimL/YXPDyF9LyjRcbQoL+s7kbfnZCF9wNvGksLWBEM+Ejz2SnGkYL+V4x0lgYl2w==","signatures":[{"sig":"MEYCIQDOeGvZ4pFNLV/vKSXFRDwk1je2gPDrseg+iaLUp7oMcwIhANmdYU0sXxrg3daCd14PxfFTkNYnxevHLzOAm3BrLC8f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0jCRA9TVsSAnZWagAAZs4P/ib0B+jyRlG07QwRdW/c\n7XyHfzaery7D+59+Fb7nUiC0t909ChgDiivrYxK0KFhi7s2xFh9NB8MiMQc2\ncdzga0MUrqjPMBtSu5ujXJW0oea3GBSe49N2/PS0Osw+nb96TpsFfsWl2eTw\nZJHYa/CAJam1DENx769iQiQxvOaApUHYNjDgdZ8XN8sxAserwrySMulP0tnG\nB+Cx9Tw7f4MX4kzIYoaUrH/pfdHv3/gV2FyESbbyTsB0EvNyXVvsfS6bYfnn\ngt9gPGrwk+EFabP1LrmMcPtdq6nsfwAAeUfCgcSTig2aYcyeGAMG37cC8HTA\nRejJSCOu39YL/5VIEA9nT7gqTndikIsQmpzVYyHNVLwMJ6V4eqUNuTVd19md\nzJOsPXrwLf06E7ZeaVc6WnBhZzVpzU8RUPx2Qhy85SlZU4L73jpag4dEKRPr\nzPh4Vttfxop+W+KP4nsL73IAsdKQUUSmQlMzJGGAqLzdFEs0X1qU2XAzRtLE\nsqLkGluZl42CebToopW8DWJ3gHrHfQyMrNAn/4IC2GVx5w8/Moh0QuasX68n\nf10pVbJNb/AAKH+Xie3vJ6wIxadugUBR/cBiFc/4Ak5/vUPXBmr123XSQUZN\nCLNIU++DVtTTj9kByxBqKTPlmCLqp9gb4HDQaKqRL0Q9fkHfbhRFc22S8smH\n0mMl\r\n=VaSc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.148e8cfcc.0_1615502627024_0.13749284910646264","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/typography","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.73a227194.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b7efe80c31105fbe5b0515f0763084f0f7d4723","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.73a227194.0.tgz","fileCount":22,"integrity":"sha512-4BVhRjJUnppI9LuTuLVBP6vwE6HuzHH4SEaAoEPMeVq4nI03nIcjDcQVh/hyKjoFMs+j66lgO2WWdtFNC9OQvQ==","signatures":[{"sig":"MEUCIQCxjMvryDBUaRfhs0SZoqFf0obBXgaV1WfJmdk4w9ZdXgIgZu8xTy99e5LT3jyTMQK+7jGLM6SG/mZCrhxDAVaFQyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSBCRA9TVsSAnZWagAADCEQAIzcrbv+ndaiUgItBZPu\nUR68lObIhsTaZHTmoHhcN36ZPQ32hq8mqVn7U01bS7IhPfyoDvCe0cgkt/BQ\nSKkj5koiQuS525uxAQgBARPTcs5p5nB17/Q42PDC9tM+SWNaQLYs3qWTNpA8\nTYnjLS+fsb6zpwLZPd1S3mke4IvsIjpk/FpMgPsgrIhWJLLVKPpDkz2iu763\nH0/tLjas8FDSCMUs4K6fRF6cwpzoMJRtj1m5yh/SxKX8puxwVIle8IU+obB4\nKnuN5BUWXRj7T+rGNFmT2pG9A6iqk5Qly0AcNB27icZ293D8VAS6iZh/QSPH\nbkUY/L0k0eCqWN3EpZT8KvDqdtSCYdnZV21gv5mgs9lv75wr3vJh6r8Sntq7\n7zc2n29LrlZ568sL/36hTlnM+Nz4oeBFTss0f1m1dLycobXwgVmC5qG5rpDY\n/fr1CART79VYq8nHz3frUPQamQ5Zm3svX4Cq7ux336KQQUCcvOvErOiqgtgU\nIg3ecw8Lx/EoED6c16njPulA1qGHrmnkd/QPOvTVON9Mt08BhwVmn8LpYpLo\nqnVleh1NpWCSQH01K9Wq3P9jT+Qf8JHMDqPD0tY4qMRCe+2cX+nY3I3xf+hK\nZ+OD6o7wB0SEQ9Tlek9PGi90cj99tgHHvtmq9WrE3IHYx9PssP6OuqffCvw6\nVC1z\r\n=uOLP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.73a227194.0_1615508608353_0.70941668262549","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/typography","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbdf736c516de57dacd3264286c2258aa6281b63","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f8579b7ea.0.tgz","fileCount":22,"integrity":"sha512-mxU4nDF6YkkXN2u1hUlJXHQHPSssz6YskC0SUlZDY4AP4Hc3lfW4Sm8mJKXvh8WZlM0UDTij5ju10iImEmIEMw==","signatures":[{"sig":"MEQCIE0cUuFE69mrO2VA/iwkfPQ/7aK3aoDPqee1cBf3+uglAiB2MQVDtpcZnRJ8j4VLJx8pH4F5W27wX86sHvhTmJUZ0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB0yCRA9TVsSAnZWagAAVUUP/3qEekmnq+Fdmd4YyhXa\nqQQxJWF9XIpLmK1otL1tQNdDcVR9MuLk3Nk/yYjxV8ITDPZP3PhxcFad0sjY\nEuwEpphOuHLCStSE24kabNR9/6fqCp9FjI+/PEQgwiiOBsFbWW2X881GY4n9\n+fZhgIv0c3/UXJugHKUT6FW6daEZ35hVpAqIi6+BiKLQAPc3UaMp9W2HU1PG\n/Smz6GIMITYA2if+ZkIQUBnxzlWhPQvMV7+mgg/w/sRttKRtyCBp2Ukqre4R\nfXVgwvpdfN62/D+1wfJTNDHEvhfXYvW2UqvUolEH9gZ3idQRXA8wu+vp6ucV\nHuN/X8mPHzMBZ3lk+Xd5Vp6DGZMnpn9kUsqDB2IutBSVtorVgd4JZOaNBYab\nzk0F4U2rpnrfgN6HKi835b0HXDW6XLr5yXDxHhSQaJ/JA6U7bHhsD8l8CLd8\n7VIIZVPRj22OaWgsaXKVq3itnzi+hwY4dQmfeYFMFZbBZ8gBOc4igfzX56LW\nSKcYvkXE0ODGJkAK5qaXbdGJHNEWVbZKzeeCBHABHric5wQfVsaqIydDIOL2\nX8PE+UKs0p/L++c+qdzntYntuRVxJRgnmlw2w9pDB5rqCr+Ihis217/CBh2L\nUMxWQeDG848NlXZtzFMSPgkNFSdZmUhu2/cFNvLFtUew3K3q6GYS2ur9MPeE\nTkNE\r\n=/WvK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f8579b7ea.0_1615600945325_0.006180505376323531","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/typography","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"869df027c2eaff1b4dbfe0655981e01a0c4fdd70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.d2a39d300.0.tgz","fileCount":22,"integrity":"sha512-IGcYCopb/KkRAbddgb5Jw7DCd4klvKqJU0zRoWauLiOR9JzbxL5M+gLfL/clsiaAcX/n5Ad++gQp7FXTY5pK8Q==","signatures":[{"sig":"MEUCIQCfWy3W7gneQjerbeGWnoerX2gOexT24G5uNwfx5qLmmgIgHZRgLiWigvFs1HLwIMgHVD/bPpNboiTGIbb8NYplwhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/0PCRA9TVsSAnZWagAAbkUP/Ail1WRhWzftRdUKFZN2\nxI6dUKy1O+wiePzqSRF0fZwDPUuePIMMv0byJYvVZJOpYseavFLHMAq3LZli\nOZ8mA4cKtDB5YthnRvULQm01OjJzRlrS8RVH2MfIgBOaSnuITu0PiIvmh9lX\nJ8k+C4RMPYeCeluoAqgD41h893bog9rUvOTmvb6EGDHbs1ZORH5EUPembuXk\nDiy9XXAGq50lVdXuB6dDa1DKET+9jvGPfLOUYl7aNKqci2bPFblNDTSOIGUf\nZe+vHKQKRKknJEK8vUvzAg/rJtS7P79rwTWaebQVbT58U89HaUttOHP/MQgI\nmLtV6PzlR8Aet5TRvEJE2fFj4/7Q77wGcYcNja2mkst0gzf9JyoHd8mZ06zk\nyYu9mo9GUp9gvD4AqXKYvI+VmGOa55f4nq2pSW19ogqxLLe98iSE0cUgZxA8\nZqrV/+gWgqh2TenBkDl6ZVQQFzMvqvi9Pz8oHmjvAqbXzr7pPGaxEFS2MN3b\nnqBTqb90fTMha6sy33IaNDb5xZN/WBoSbGA/XBz1gFhzA9gfKZyipkip2jQl\nx01pJHjt3XfBbDDHGJJQGc5jQztRs+JJABTaWUWDDNTnga17kNw0wxvtOzbF\noegwVHvqMZfT4+feI/VhHLpK/6XNi+IDdVfysRtXf3M85WPzMzUuSfZOXYYu\nNOCk\r\n=4KKG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.d2a39d300.0_1615854862707_0.9062072039819664","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/typography","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ec5089f3e8950958256f93a1d966e2b36c0fd1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.7cf67823e.0.tgz","fileCount":22,"integrity":"sha512-AOSCXCFXN65dlmbXkY2egqF7144F1rdtfwhWseIH7cxQvI8hwdqlrJy2z+iAQJu2FrzyfKKEslBFEyxdQm1yRg==","signatures":[{"sig":"MEQCIGzkcnkiQpS9bWPE1LK/xZiQhA9eEaYDDeFcEt0vmLc5AiB7CxzN6W964heacpr9Y6fJ5A6LPJ33gmAQf1YSpKfKpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPa3CRA9TVsSAnZWagAAjNAP/1iIzbMuEihMHExS5Mv7\ny+Sc+LnLdueNGBcOR2kTZtdHDxymFD3NhafdSiP+Nh9QXrGwkC8h9jFDoymw\n1UCyQ/51rkRyFD69US1dytrLDd+RZA5n2JkWNMgaLQhhE8EtiFCn8GWUf24k\nLF7pJtNoIKrhCrB8jIj20JBqIrTkknK0Bf7GLuIsXBBHiv0scq+SXV1w1dud\nVwk3b8+u61XrzLoJuJPeNIMYRDOQXsyhvmTZgY7Q2UQeiyOETqTNe/yz/hJE\ngxaRenlLt9H2udYdAGH9SeaYlgT/0wQsnYM05wXsOEsGJbXs3PAfcmZT4uWA\n91Cd+PKwUL37pxCXMUUOcOkb59TyZ54FoDHTLQkb69zkhBSTEMFM/nAf7fgF\nJYgQVnMNx0gs+8X7HI+8i/VmLJ3zJe73kxZnhuy7Zdq/DimI/2amd208mfUd\nybVo68toHw/vCkn7i3bmJAbO/oKGjTvu0r/aaL45Wl9FAdTsmKSXYIuRPvQ7\n19QZAx/JHJg84qX0BhS/Jds2cj1oNNQuG36SPHgsVhlkEtHt1JzAU6JYMbc0\ni5LGQZm1VD4vrERTnwBTDcc0Q+EJayzKDUXmaiMwtv2GZQzVkXYJBNk5daaR\nmd0bvTu2LFFtPbbW1AcrRegXEi4nKGRkYYMTV6gvKb0+Nv+ioC1Kh5sJxvr4\n6zgL\r\n=Q/bp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.7cf67823e.0_1615918774732_0.2652261262824549","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/typography","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.67d780c79.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd19f12f44c8c16d0cec9ca0a02d5116fb4d2da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.67d780c79.0.tgz","fileCount":22,"integrity":"sha512-Om++kTITD7TDlEiwZg83iFDPiqG6eg/f8yATfCOQY4dnNJow4HsbFDkd+N2OpCLIO2SLm+2bp14IAtqvUaahbA==","signatures":[{"sig":"MEYCIQCj3Xs9HHv3hvGl9pZMBEqdou8HiY2glvNOB/DjVxVdCAIhAOktxFjv/azc3Q5OjgWdhR91PR8ElU2A2hnOnAsX9jj0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtDCRA9TVsSAnZWagAAhvEP/3SW+9jryEYYVXEYWCsB\npl/G3H/BE2eTBmTo8jLWtjAYt9Wc46IHz8x0zFnMET/zORfmJraLtLk0xmRG\ndgN0qGi+X4Jq/74I/gcTq1ivfvv0Gc5l0fpDf83pG1cdtapNzmzIxBb4Pzmz\nypKeIp7YNIoAWhtmFmYhVaEv+hJadRi6RfaN7BDrlPnwSmgsdtmMF9/dYNw4\nNrYvnnRC/TjSyycqQ3MWmMGV0rQw9v3wDx2x7h+J8Cc21qzGwH158NeGhNqb\nMXXIOOwzcGWI2O2zswytocEQvEqu0/Nn03obWWHGkrqYM/8NQ2CF6D85o8Qo\n9/A3d8XPb4O4o1js2/fj/5nI0DAE9k4ubwgQzQdeD3ML/nFuYIFH777/XgnQ\n7zqbic6aMphszjr3P7LnPqVrgES/D/f2zMo48XQBLVb2P+7lbSFw8DEbKGwA\njGFgLhiHqnfpR0+w8IX9dpWhRgd1LoEJ2UGIbdHznF8JzjJyCfU7rMTHKS0Y\n/CsQQfxMLyo4Bl+mduwAorRPdzvQSd+fTPB+hBtqz8LPJ6985BsPxLSdNZ+E\n6CP6+czWbp0YqsV9WZUJECzUognD/8FWU5kbWI9T1csW8OUVNsH+PnHsUK/1\nsUaYn+Y+y8HQ0iui7FOS+pGlvGXU3rLU4/q8zxmgcD5RRgWC0PIGq8kUNhGU\nbbLU\r\n=sTLB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.67d780c79.0_1615924035346_0.5618220854621698","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/typography","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20b90fe8599903684c20eda938f3637b5a42d345","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0f358ddae.0.tgz","fileCount":22,"integrity":"sha512-gFsjqrH1nU2Y2KCErMN4ZWTgFTuHny6dY5Hn9OHFJXZS4+QFwwrqaCH0JmdS2c2jHieHbOhAyHoz8DqhhecB5g==","signatures":[{"sig":"MEQCIDqlSAUrPezG1R+KKU/WCVr9waIrku63s3JL/5adTHPzAiApuQwD71G3w+k3zdhOxycfZ0YcTiNVZOqe2AfyEFedPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0kCRA9TVsSAnZWagAAWC8P/j4HSIHNXsho9dZja8XX\nwzg6mIuxg6jj6XCRyAsKd0YOBtifvpfw+vdFsmVN2lCXqoQgdLOpdfO6xF5Q\nbNuf4EcNTa4uNbQSGKwzZXI4CJo01EepXKfMErZwdeHEQlo338G26DF6jf0w\n2+yaTZwHnr2pVOQ9v4T7VuDDe9ag7nZ4y2QFM/y71BgeBpkTEpfTjvEpn1GB\n5mjEG5C96DR23A0/ul+xaiYm/HbalYWloy1i3Sl+k9GUv862HpP9DAIh/+ue\n7vYgszO+0YxXQR3dOeD5g0Ni1enlhBVxFmLR8ncItNevZ9sPnKuaEhyo1Ay7\n4POIxeSLmsSXjuZ1h2pT1UIZPCp/6U00ye7MvA2lB3i1c2J1eQd5kNnlTx2x\nBZee0ZIzsrofhg3rQ3tz+zGHDoDqIPe21OTZsskuajehDzdP+19KVvDxE219\nO1esR5vwQEVCAJe+AvEsP/JHtSHV3463KV4P9oT9dKGBPrAL6l1EWG9Klnhg\n1Pl16NUx5oSZpL1nQS4qHFv4GuqgMWMb8GWxWUbyBDUsTAvLpi5EA3Vb2PKL\na0B6ijotLHQtHCcZCh+yqubK7bv7WENqp9ro4rGYOAZ7U8fL/5vJ0SESUNsn\nSwZAd9HBRtVd/y/Ine6k3Zvr2OLk8NyfFU26u2F0rRZAJQQSJVdhPxQDywru\nJkGR\r\n=UKUK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0f358ddae.0_1615932707991_0.350739283634397","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/typography","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9babb7a4175ff5765f8474b1f0c00e1c2ade6f0d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.67eb0df80.0.tgz","fileCount":22,"integrity":"sha512-RQe+uKXmbj6SQfS4LYYYjHHdG56zT+OrxlRTKf6Z/X0Z/GJZfg2NInipHXSNMuTA6RiZlz/u0pLLjbeqzEJMAg==","signatures":[{"sig":"MEYCIQC2hl4jQTZY1WiUjmUozeW++8GwxiylOp2JUqHkOssBjwIhAOzLNigUw24Yk5rVpCf6l19vV9IFpSdIg4SRBNvRvBod","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOECRA9TVsSAnZWagAAhi8P/iRzf8yGeVyUpvuxK+6r\n7cDZZWSQBwGgDDJblwWL0utDmYRFr24SBfn22JbJPMGSNBWPZBhusG7kKGxv\nbltCn5ru2VDDaiaJjQyZeMfEistsvkdi1UkqsjKb07ggHQhcsmtD9u41dTjq\nA54vEmDjs7uq0vz5v+e/O2qs5fgl4dKZwr2bGzXUw77y5ksCmSYsJGhP2L5S\nzoi2Q37q0my6gz57HYRSdVisDbLVyfg6rK4LlJ7LMJTDAK8nCmaRv/ezjdXA\naFa6trOAdHfolMZr0kwoPEYWNfE7OFsZQiU4crZrPFF/y2N/F2pMu1FxIljc\nUWT9v0hF229YBaD9oQ7T41vpZ/QGWnbO92NELh+eeIiwnnOtRwA//ffY61rt\neFdjnm7sLBbgHTOmn8PY2+il+0X2KCLQZaui5cczf4HHqQ5DSh7KOtNHSnZc\nfC1OAKT0nVwFlLMBRWymmIdPxrCbuA81DXImSe8raUR8FyqEgwmvjL4hC+Ye\nFZGKrYo32IZX682F2v4ZplYQHB9cUotZsoDYh5J2wS0E9B1vpKFkeKYEHQxW\nxxBdRaGSEygEK0ftxLzcWc5sN3T4G6jEUJbDpdcoQWBMiCflhmRX9w+43x/s\ncfEFzcohSrjq0GDHCJH/ZWmqfHSNNgokXK0Nm3qBXtTImde+WpslakL4M/dz\niBxi\r\n=FdFa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.67eb0df80.0_1615934339553_0.11847387865801196","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/typography","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e3d9c5c9a16f971e02cd7ac0d906392837d3ded","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.941ca3b3c.0.tgz","fileCount":22,"integrity":"sha512-39HHOQTOODzjkgnEAPKRCiHW9URVu9uUdZo1QcrQz8UHJfctmZCingA1307j1bK1QHLiE2sbj69AJ75QPSKF2w==","signatures":[{"sig":"MEYCIQC2L75WwWy3PqUZi5TTEx+nrMBfOhQmUlj00zaKFqjaCAIhAM0GrzJyYGPnPzaRxrs/vAj25EqXIHBpVZ9nhaAjtyiJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTP2CRA9TVsSAnZWagAA/6gQAKMFm3ubtnGPwu7kIcs1\n/h3W2QlZ4WE0VdXJDl/fwm/SQmfcyxuzcJRoEWIe1JAW1fiTXbLtp1fHrGd0\nabx+1ElW/tGJ+8ykIMDTfYChCYJzYm8wUjR3Yet/l3XwoRdsRTOQBYMAHMqV\njJtJ5ggKdQaEkdnKKA/8ALcfodob0AH7pOm/tg1mR0Pe4yFujATVN/NMEF4Y\n+BZ0dieBSgdVdEBq9GMN9c+nbNTeIlX5fVGF4gZn4iWZuQQOyV1Y8qNHbU/V\nWX8rU93qd8OXKgj32+qjQ98KwWdTz4bZbDozoTrB76BmOt0oNtptXP2ojSq4\niy0EnaW7Ig5cBOVZOO5gn/S06AQn4SIr9Em4GAGhtCcuBWCnbqV0Uaz6+rGT\nhl4GVsd3GFD0TyhKleZ7TZASvV5igJUYki1IVire3cyfy5EDE7WlMmKzAlKy\nJyCWfoSeeE0gbjHhoqRiFad670LYpAdrWKc2GE7xBHPxZPWgl6uukAS0nQUz\nKjKBGhQqKaOif5n3MCwVf/+cIoFG34AblvnvHp46OtdQHiZiPbKIGCxdJKSc\nD1uwUsBaxX6jnWSFs8WyWbbm1ndzSEDiZstN103Jsfx/D2/YRwDb8IBs8A9J\nHTF6/CkAbSdxUAz+8Jl05e3Ba/rHKHA0d0oI3Tcd7l0cBBFHkQvSdmgXiOah\n86rI\r\n=xBzr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.941ca3b3c.0_1615934454368_0.15923196672886109","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/typography","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aae7f927a856dca9a392bd1cecad97508921e997","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.3344d12ad.0.tgz","fileCount":22,"integrity":"sha512-anhZQI6L9DecIdS1T8DGvJutHv6rnusJ2Q/F7QHT8fygHpbK+p0lUZmM6spxTLHYtXSSkVdfeJmSlpoX5jZ68g==","signatures":[{"sig":"MEUCIQDVYlvVeRgHMITKH9W3oX1c5YgvJTCMe6gMSbVF+GZYFwIgFPNgSCcbFSXp4Pmp5ilCwiYvYy18jfyWHsFg6e1vYKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdNqCRA9TVsSAnZWagAAKwQP+wTUQSEzEyip7ZO5SyI1\nyu7BJNz37Yjz381BUo9IWFUvk17JGhFSg/KP0SCZcpkwdJIvAtwQNUfq+b+N\naAhNNxcsflHAAjmdijyKB41+V3vIDkYHS9gXwBYKg87G73kbFXd4goQmUM2P\nmEIi0VGabhuQvnlb6MkkJ8qx0BWEMAgL6CVgB7OLyeVlYOrxtqxqU8YM6pez\n+j/q/t0AU8osQS5fJYUhZkZI2BDodNOrzjUK1+ezXstdDyw3S6Qm5sVG6/xm\nJh5qapNopcG0gmORA8znfENlCJTmBUuEHklsYXgXAoPWfF2rk/E9kE5zwyZM\ngPZNenSdoUqe3X4m9vY9NKMdLRK2bczyTD74WXszzZfKvK42RJoPEOAgww7V\nXOryANdQ7dp3wamaREG3XAab8EESuFdR72wUIBDK+9v9Xu7mddHAoKGEmIss\nnhmjYvHagUqq7P4kG2t7sLcEPZBmVwLcFfGgyO0r2Xk0clEQ8qvBCRphw+kd\n161SpecBOuONkJjwU3YbpzLgCtbnkiMPx4/Ko6D5sloKwLqS1NvSVETXVFuO\n4dBjXtXcjIzBAPeF+/4GpD4DAVdhRiyHNzEEPs4JAB+jcgm7G9TU+dOeHh49\nbThPdSUwK80ZqTZ6d0PAGbWURF9Fr396aqMSnlRVIYwUdnk8ANAoIrf2+pKA\n9nGd\r\n=VJkA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.3344d12ad.0_1615975273732_0.32386190280512595","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/typography","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.6072ed604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"648c6be227c62ec91a65f6b2a2efb43e26fbc2fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.6072ed604.0.tgz","fileCount":22,"integrity":"sha512-K4YB94AD21B2k5PoS6PxvjvKpOe9JKorkfqvfTC6aaQSyGWx3HAI4qDBRLJpW4gHia/PQ4CMrwPQQhPTQhoLCg==","signatures":[{"sig":"MEYCIQD2igRsD7I4ReOEBaoxxSpacF3NNkAJS7KOuYQTNYjP7wIhAJyQq43SZic3+VEb/lofkNY596TsNnZJ+AlZLZLL+2lD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUomyCRA9TVsSAnZWagAA31kP/35VoyefJqHFWIlzMxnj\n2r/gaUntdrCJ0t6ITaYm37FSdCnR/3kiEpbUUprs6/hep9nYn/dv1OyX3CJY\np3bxUt5mgZ+qfHVKPSRq2qZE7gfpo/dF3MzYljfyxnuwbfAOnOBQ7ZnPIG3s\nszviUv3cFqHWUvCyQIXvTWch2Lk16G9ZmjOhYKdGxImGjULBBMYDe+O5wYLI\nwBWYojsnnvHsXeFvrrJDtQgHI40W+kb1ka08CJIqa2P1M3sSidBd2Xw/8h8W\ni1+GubW0H+2o3WW4SK7JGcTfxhJybaSyQMFCoZO8IV9noZlI4GZnIu/draXe\nZvM5MGlYgJNlzfn4AGUF5r8hxQlOJ6BiTCIRQdni87prkx9Czl8I3LKz52UU\nt7gLuGjL7zvUqpKTXIe77hlqLQZh0f1HGXmZ3LWk9t3C0B/UOhTKPwmce4jN\nzjxwZ2GS0+RIftzHc1zBjN/nEFiNKE+4ma00tIGPJQ4ziTiyCgoDcVMlcmU2\nRXf+PfqjJCa17Wxb4ZkLmHnHrOv6nNPQJyJzPCTT2XQ7ztt0gIodzkWY5vhT\niVnFGr9kYexMGaoMYqsFodtUG90rfz5350zGlYHvnhfggHl5Dna2v+Q92evx\ngs8zbjOQ1qRKR1xtqHIlp/jum37RLg5Rip4tnxeRfwRrRv4LLDQ2XdaB6Gsi\nolX3\r\n=GVzK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.6072ed604.0_1616021938029_0.9008681512635703","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/typography","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97611f452a7d03c8cb903f251a87ef00cb05de54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.d3a6862af.0.tgz","fileCount":22,"integrity":"sha512-5NUxtXmAhOpiSfhgbIzHlGf9CJ0a4aPJ4LLkjPHv8Lzz1f8bbPt1iZP6OygmTxbd6OHMosI7N/qYkUw7l26sKg==","signatures":[{"sig":"MEUCIQD7DKKUeEp+1H1pY+3+I+WWP07qQdwcSEDjVf//oKorigIgXRy54NaOw6TY0EFP+NgZjyuoWkpGiRGZwZOjtjeWwiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32NCRA9TVsSAnZWagAAufQP/3VukXYk1Gj06igDxc3p\nxbGrhowcDRtrsR2G09zWaXSReTCbU23xhsshx6YCsd76PuUAxQ+b2O6RegRs\n03EIFoQunmpVQB3d6qHUKWPILdUoalutjVRwBN2S1KJHGm2RDc18C1aVcvLE\nBbYgvzf8H0mqmFMS9KgSHfgIuSWLZAplLLNYYfw1LFY7ff3K25t+C4mx/zNE\nQCCJ/GV6EXQzQMVhzj9QVU+S8cdEU8lboz6pvR8J37sXVWLIhs/O09Tr5iwP\noEZAh02V+s1S9mB+gEvhX6mSZmiAclzBwNXGX+Qt0LAf8wiRtDErBlimprN0\nqSlGTOnZGA1nzxBPUhqjcuxVWgZnBjjkqGcYfFKwWxbrFLJBMHmu/Qy5Yjzu\ndjdZzxBA64fVJVVIxlEWM1Jfu+1z4ZtkDYxi2Zr6IrBo+GtBMbdgSylOHoyH\nQ3ff3kDefaisT79y8h+DS7/23ConKBaTC0jIW87lzW5xj4j155ge1QGZXOXr\nMjmXz+ZEbQwtocXEfuiKTVoElxe85yNWTX0iHMINUoDdGrt+FruiKAXL3a+0\n+VZ5H9P3LWlQX9XoPk544dVOM05C403stHO/03VQZw3wYNhhO+64McVHk3uh\n275ryDtQAWaNlNLHJbvdXgjoNiU1Uxxqkxh/lnBTjd6jeA94IGaj5rEzA3j0\n6f+/\r\n=yOW9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.d3a6862af.0_1616084365200_0.4342701161400633","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/typography","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99419f237241f64f7d6e46fcefe468aca2215262","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.40dd242d5.0.tgz","fileCount":22,"integrity":"sha512-u1TEVsL2nqlg3aAK4mcOjOkilfjKnEbW8gD0lN5IwzUmH6S72yo1hCdtCQ73PUgvCx81rlFHI1Ypwb6Bwmocdw==","signatures":[{"sig":"MEYCIQDXP6nhqeJ+vjnEFgc81cHIbp7FE3H3A5ALPgVf3ia8XwIhAOdh+iB0ncDj/RIULRShw6NwoW+XaAZ2RKARTouNSF0z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8M3CRA9TVsSAnZWagAAD6oQAKKZifbHtv/g8V/qF1rd\nwj5VGMPcd0p4Fjr/YLjxjiSFhkFBjIuS9QTiUFuEUbBHWKS6EtqhA7qs1+9G\nMrsBlkdOwsITAr/gbgtAacQdJSNieCtZFnYD4ll9ObfvRoOUdWUG3sts/1r5\ngBHUyMyTOH0p6Z24ZFXbK4no/dq044yYOFgrviqA1DQfpYNFw9u70ssudV6Y\nyJEg1EZs04Q8Koh8Pk2hqhUYgezTBB02H1lYlp9GrJNlDNY9LI+pjvHv1jng\noPlYm99WYByO8LaePfZTyJJOJQFvawR2s2yG7EL9JVbDwDBIt9n6nDBUVT2i\nHcNBDTI7Uwj5274RxDQlB7aNcm8WaircSpkTMvkPWsl4LGikMPsay87flthZ\no2Fvz6GunBOUV8z8RGxO78R4Ngph4TRU0JxkPRADq0K0akZwG7f+NwrEZEf5\nf0b+4fwBg55jcLHcc4GPwK/QBDW2vgkDnjfn3Q7wsLsckzVyZgISqXZ8IGal\nGEIT9y0s3f4kI0O/w8WXYHfKFhIGfSF0EkVCAPzOw7HHywSPfcgUPU7Y7g6f\ndyTIxx92zW276FYWluF/X1ZlKM8hHkrF5Mu/88t4RvHOi4owlS8dOVpqcgo7\nVe+hpEZrckv+oAER6VpWF2X5FIUyzNL/CjbJTR17RVW6V22LLSAQYo2sQJpc\n7Oxq\r\n=JyOU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.40dd242d5.0_1616102198695_0.986828863804915","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/typography","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e528794ac11c09ea87b45629131ac9da6ffc048","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.ec8f8465f.0.tgz","fileCount":22,"integrity":"sha512-ZIJnK7bHgrqFJ/1kmnpdatzLnSGmPCqu03WQJb74FLWg32Fc2zKpR5DLodcDOfY6uvsx35YRx6IKALtNKG7Smg==","signatures":[{"sig":"MEUCIGtW6cC+me6awT0OpzFlXPfxEzMkWwGtoBK81Pgd8ecEAiEAjq+KR2EaXIuXNygbHMlqtG1goEHog9rb+vDUnTQDx1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8mICRA9TVsSAnZWagAA/qoP/i/j58ExNLT1yAbdDnnd\nQRz0RrsxsV++U/rilLRmWJeaG011ttzZatQQ8vAdJSKS0uHv3hdz/XmvOATD\njASwLA9IHSzJGw5xWBtkCTw30SNrUkqkU+K6WhN15ezo1JxKvrnMsUcGofv3\n4mrZpPCAXaLfbDUQ7IFLObF5VVYnhPi5bZILaBvNdVbJ2kpdImq44SrD8FNs\nm+5pMAe/qPssZeGl/dDwfRDcRpwVH2cvtw+mA6N4lE+RIZtnqQsavR2SsZnO\nlKcWxIMNOYJYHeMUs7+4UUjBvVS4uSrI6YnprwuLvTCYd6cnBNvoWfelPjKy\nAbjOlIu6Fuo3hhEEoIGb2yhof/3VrHPS/OPu0CoOMrdP1uUE0SJ1TCkHYTjV\niCV1KTv3pTW5FuyvrPtUvdaT3tBPyBhvT++N5yaHRzXzKA2N1Gzby6PyIXpb\nNlJ4Dbfww2A0X2zuK7zh5c05VezyG71GMfsqq8wzUOf/AfwEA08k7zcDv5CC\nHAeGJtUYBb6dk03Wr7BxKuRwmVeasABQchI1sMpkzK85uN3k8sDEKxhipE2q\nc24f27BwDtJL1FehamzECoYL5CX8CnGP+AIKdwgPgm2DhqmUnvqpoN2NsfB1\nZu2KigaUElymARp+bUAd0YDH7Cs8yCOlbNPsjiG5DaR6LPBL+cpMT1eng5or\n20M7\r\n=GYqA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.ec8f8465f.0_1616103816245_0.5250585237894496","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/typography","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.da38969ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af606d24da2c04ffb0daaaa67fce1fb15266e9f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.da38969ec.0.tgz","fileCount":22,"integrity":"sha512-m3oXh9MV3CPhtE/1S+vj92euoHgRQGboGHICOxvEL9wp4kd0p7bxjJZAdf52A3IRu0niYypuxMhLJ+Czdid5Rg==","signatures":[{"sig":"MEYCIQDbw5zQymNoCzwxlNCIX/yVyCjGuS/ogTb/q7zaomXmywIhAJ8oCsq9Zx5UtsFpCOwo490JpRrfH1cHNRaEgN+cF56v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9FtCRA9TVsSAnZWagAAHNIP/3rjpjyRUk3t2ODB8mJb\nZakXQfCerJ8OrRqFuAaqvWh3A/G9tN2/j+ywhpQkZWxmfJ4Y+Ghm3dCKygHZ\nwz4OOtwVEiY/IDcZEADp1nWLMqKzQstyWbsdJOwqRfm+zor/6pZVav1HPGMz\nZ+XWiqkOJdpnJeQyP9MPbnRq7girzmdr0mMoQHhWQlY5/bLvlgiGpG73s5pC\nDkHUFaGA1GFwM0BdF+e/aYQFnX8lhv/WNvyfhCNJnA/WzRRQ6hImlMQ6U+6y\nUVyNuOWdvIvzsq+WwWzGsMd+PfOr89/uk7qtaI3pOS+PhHpzmZvJIF3q2n3k\nyyizErEjbMwv+g2diH4xlcgXW2U8TmlDkDm9uW8S3sz4VJs9EpHwu3gOHEVA\n2JtHAHJIVOe+ymr+4LmrPDT3WFPHgDk8xQxkAcix2EaqUcZHB5bTB7tc3Rmm\nK9djKNsk9szyqGI1yuoRDVL9MgvlY+3QwPJvWy42SUPELKLw8STnZAXdY/PV\nY18FJHLMkhLEX8v591BN90Nu9UwG0E3BQgfq/t38V5zsy50NA2vOFDWiVtXp\nmEXLf9fuQHgIW2nM5s5sV+Htz1ZyiPfFBBT2eTzm3fRXpRjLYM1L+u5G+2L8\n+cArWAoVD5KBLyWaayLz6sEMO/0shWgQPRX1R/htY+96IZ/9LMOCu6UjKSLH\npz7n\r\n=4eSP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.da38969ec.0_1616105836715_0.06275396836754754","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/typography","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f5246264d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0b462175f02a894166db60a0423499a9b15c6c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f5246264d.0.tgz","fileCount":22,"integrity":"sha512-VlbiNZu+sOR83Dc2G2np+XPLQROnvHXYBzLE/QMFB8vNbW0D888T9RI9KOr4hYEwdSBk/EGxz8K2ATy0gkifxg==","signatures":[{"sig":"MEUCIA/N4gKLvsTsuNZCoXST5dXrZqsG0qbeixFcvhj0qitvAiEA4wAirqEiaspPY+ya74z00RR7/CUz8lgLBtyZjql/8l4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JACRA9TVsSAnZWagAAff0P/ixKy43hi5eZ6mQXvvcz\nt5oglDczjt6qEacUL5dHOm9k1dLf2MAZTNoFUakYfTTej8diClKym+cdJLPB\nbxkhg7H97a9qqA2hFmjTYkSL3fQZs6zPeHDW6MKVZpN/UZRhmJfRwIWVXQpM\niTxzIrDXIbfY9Ac2+O8TNyDc+SLvF3+p751v2RauWNjSpvpdAp84LhcfDAiS\nvycsUDpWyl9ISRfb5E9cbDMW6tWdtK+T5l3LFsucPTTcQBKaWVtoBNEhe/mw\n8kqXXGvA551TRKAvUByVCof0wfpzD0IcVs/OEYK7pqTiQ+JdO6X+nhmle4ei\nx4fyDMTFxrZ/qBt2yjupf7KFq4g40YrMdTuPt7MvnzJT7343qX/mzPy8T9Um\nl7DX5hR5AYCciaI8jGJCX9f9ZM+BGvzTEA1ZJwL+0slJQ7XcXDQe6YJsFdPr\nnDVklb/KpToiCwV2QL4hBR8t5JGAMvlHOpXHWuJEP5uRGmJc5Lq0Bz0Q6fw9\nZhjQcETDSo8P0mpIPNPB7l5jl38fMl/iXCqPt8FD6Utq8jiW3hLUYe44cmj9\nX1WCzRIpcrP7rIlhjPCKn39febGWhEzI6IR/deJDQIF6oafFCsh6ffl341uo\n2WxXadsBqD3SMG+3c1tUTJAzNztIldSMLu4g69h8JhhIHFWiHAP6M7HzyVAD\nTOvv\r\n=6d2q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f5246264d.0_1616114239733_0.9245318467279824","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/typography","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ebfea807308a10883d7b3ece3e4c4f55ba62a48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.03d34bbad.0.tgz","fileCount":22,"integrity":"sha512-GUKfmto9x4bn+YY4V5QtOSLi5aDkpdm42QW+8fbONdVWJBd57EkLh3iz7ztinTeuGUhyD7qNoE1GzEpVE2oygw==","signatures":[{"sig":"MEQCIAguzyiHbG8jQzXtzpahWLrUCQ0MQlGUR01UsWGXDn9FAiAzDdO2p8t3fCApiuYz4dxcaDJgjXL9vodar7rK17evEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/VdCRA9TVsSAnZWagAA83EQAInA4Mckt7EnnnJCbGEH\nCf+y2KAHpbgxtvJ5W9L0AAPBInoGeIxc/g+biUBY61jvItVpyDxgtTCXsgeJ\ncB2EeJDsWYJYWnfWhBJYuGVsqcIfeH7yx1kcAr9eNp6O6ffXsfszdBDu8STm\nbtosKDGyTveC2p6lmxVkMuLWRI4GHr8scDTNSlpCnaNswhzkTUT+TsoalDSa\nAdHKhu3lK3hrCwMgVpa/yKbFbw3/RIxwaHywQjgUyb6DbfI4YxeaIWjWzfs3\nN5l58D/H4enbg9BmOV93PjuQW9JIso2vSsG+eSeYaeoekGCuznso2KU4RkW+\n6JVD0Ie/1l0TaqUDGs81h0j8strvvLKQ+vvaWyjQE90Ds7Rlmy+3YXgRcD7M\npVtLfoe1aUJKZ9lAUnmjUMalNI+Z9Ea1ZLGHaFFkwyXMvWyB8pAdNZdluIhI\nq65TK85ix1jD43rNeWnGHryURUfDIDfD4fKOjvafnE9NHgjx/RQhmnxOXnN/\nACcjlh9KV9T3myy4tUrO7io3p7SYz7Lzz+v0J81R2Vfta+8yx6iuJJx+VTU+\nAvpIwF2+n+RIZPVTq17WgB5YSxkVcnbD3/jEmsKEY4RfX/0yWL0m/OlVO8GL\no8qhgNZZPcLILiDB1ao/Fho7lmk7XpOzPZajAjVtjUjJJSJWd8PDv8T58ixm\nUT8C\r\n=wA0m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.03d34bbad.0_1616115037266_0.9731149472439793","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/typography","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc8300c3edc2f900e60bcd2ff40a44094aed12b6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.cbc57c600.0.tgz","fileCount":22,"integrity":"sha512-aFiLRRcrNwKgNNaAEuG4YlbCMnQ/3NaX0C1GtO0nHQjT1dODMza5rHI+GmLar7/cvxqVp05QklOsGHEil0v8CQ==","signatures":[{"sig":"MEUCIQCHzvE/lyqDdKClDiEcU/KPdWgkQ8BRFQ2HeXKRDijetgIgYIURKEZED/vWeWVkq16nant5Hi8lw+PYRTjfL0OTDoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/diCRA9TVsSAnZWagAAoaEP/10pTHhkr4AM3Eg/j/XN\nDUd0fM4To2SfvHvzB6RRjBRkVx/26h68DKYjqZbkyscr1ElOYfl0+Ypqx3dS\nlBytYhmOyf9d8x8hXmJ+3Q6Dwb5dZ5MlsUyg0+kZTju6YUWk+0ZJ5k1EWs7s\nXSdUv0EzFjJa3Qt3piltrMYpdypgifE1lRarvWBcc57KlItTO9wwe2mt5qJD\nLOFaDOa2FPJCVMbGnhpKPGaHsVpr4X2p3amkQTXC8PFemqXSdjQHN46zZIfu\nGHo2wTgJAjtcHiafBUyBE4C1wnXuybD0YF9V3JBmdVM//Qc5ESe0I9WsUlZM\ngHyNiTAiWONDNZmULiNXP/BO7Xh3DiVP98J8BEdZdFKMVfUiENXyPqElfhTK\nFXhIBIAeTZnUfyFtZNFfsEgHe0qCd4OOC/k/DMo9v/7UYfgLv97FZOCawpa3\n6DbY3lfXpoBoW7AygMuwLq0sKH4uaxoSGUGdTpIcjfDhOfMUXtnF2qxplGRs\nbz6RkAuHJAKbrbTvTdi4h9xkY/UWIGE67YWgzTrtdQgISdb4O6E3J7zTa/3N\nlcDuAYUcWbNxskjwlqx5zW3y2BMEGyUFqm5juoh9w6LHnNDBPLyKcrGbxTJb\nN7X063ovpsdGm7UcrIp2Q4rcZt3StbIquCdB+fkh2ES2C9MrV6gk6kpUYoHn\nqAzn\r\n=hmh1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.cbc57c600.0_1616115554034_0.006421750355735334","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/typography","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04e5fe67d6972c29241c6a9eb390a5a4e61349dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":22,"integrity":"sha512-siEVRRQ/e3sLjJFcoWFPyZLM1x/jSJXur1jR25n0WSBXA8CMQHt1vqBQVbwmsJxUiTxPi7DgNUAiQzLWz6iq9g==","signatures":[{"sig":"MEUCIQDwpihnZqkiTeBudQhqZK2AuoEXZqsviVC6XRi1ClHVWQIgQxH8jdzVXgVStXrpGv43j+hclv5BMoFyEn2qRF5HlYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/pICRA9TVsSAnZWagAAR6sP/0lkI+j4GrBWFP0lBy+J\nRqINEloIstQEqO1rdbzC3JJAEX2DC6ggff+GvDmSp5we6DypbnWVz85Sy3ao\n7pb7ddLYrs04lA/UDkG6cebAQmiBXIxJ4E076pmDQ7d2kge8KzBs2Ey6dOme\nuj4RH8c2R6CT8v8Bd2SekxObKx4Zh3t2GOvZED+LzLzuQcI2l1UhuJEtIUQr\nWpAxpED3iMQ0Srk0NDgcF/RaGEKLnN5DyIDD5MN5qnIb8BumWdNKdiuA5Zue\nSSBSBXSBY4o0sWNfuZ8lqcZhyAaJXGYho2X/0o/UwirS9psz0RxuFCA1Emi9\n28A4vLlp3CSZErEELMQ+q37aW0Pbw/+GY+aWSsoA1waaUUFyPDFamOcVrNkF\nTdvfNVLfW459jZRAhCw+yod95H8tkfUXyDONIbCaHN7pkM/u6kZrs3uDEoPZ\nXUeaD229vo0y1nocG2PzElyOCVtiT6wyZogSg+2FSa+WLpmqBNuJZJSi8RiH\n/rE+nr0nyTZeiqx04IRzm9vLWcN8VHKNZBTZqiD1NG56iD1ZWbVsI+QwTynm\n8evjglKlrNkycib4BO8K4Shkrp3b9uwpAt+W5nBBvQaOSMmmdsdsrrhP44Vr\n+C1AuubpZNfFGNBMhY4nX2NS5tbhrOHooqsJUZdyAIcyC5G3KjqdpMY6NNoG\nhq+t\r\n=ltP3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.d6c5bcf37.0_1616116295417_0.7838214932314942","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/typography","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12ae7406b519a5ffd15bbd459a80d205d9dc12d6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.fefc668d7.0.tgz","fileCount":22,"integrity":"sha512-sZnwFeo/vscQjR43n4IQjAuqD0Wc6/IasiW8NsIPr84mD4ZITBDwsUwBeqzNK8UCUwmyCDSVJDtmJz7MvwstTA==","signatures":[{"sig":"MEQCIFtmDHOG1d2KZ/wHVuFD6PDlVeZmEI102rI3iMj4S4HoAiApfhTB6qQf6n+2UUMOAffudGZkpOD+J1XaicF1Cm/9Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9eCRA9TVsSAnZWagAA1SgP/RU48x9kdtB7n5Y2z1J0\nxISlaOeH3SsQL+aaJojeDzjIjwBTASwzYKHT43tGD42zB8L7v82y5PsO+Y4h\nkFcHc6mTYpuZ+nUrmI3X9z5tF7olAoI7HnSl2DF9tjbHBERZVUf1O6aLnrrl\nJw82o3ZG4idpRaDoIhyuyGFB1B1b6ZsBccaAruNFj7Ukv4A6krRPeWtt37bo\ntIkliARV9jI0ZghOj7lDTiwk4PiQTURpKM33WD4+mSQfoR6dSu1TjEvtI96N\nWAE7bt19+PKsp300hwgNIGv18k5AQcKh7sOgBydaDtRCzxxPXk8cMNgP2xQ/\nw2vpqVrEj7af6DUDoBsNOFUKyfDAn99iOzYEImOsDgMTYtpjqyXW1y3FLVP4\n4oUpK2pESSSHAT7ya89C//KnAQLmy1al9gv7Ih2wetfVcQNXx3kwIJv8nEsT\ntYHSYq/BSRDdzUoYE+S7Vt6Iz1o0AH6lVHK/MYn9snjB1jNCk4b0sSrnaZmF\ncBxlsTRNNLCa8FVOw17NbhX/hM+A4M4/trVxLaG3LjjUTIk9rDLYnAdiQ++a\nSh2pRyi2uNlIb9nULvjK0T1AooU2mWjs7yAU7uQ+7etgujHts3kF6OSx8s8Z\nppGEeeD+whIe9y+MF+zKR/1VRnq0EjxYXV9MyOd//fxvywy/A0RQ3lstZNKu\nWUjH\r\n=D3vC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.fefc668d7.0_1616117597887_0.41181926750414233","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/typography","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50258625bb9ebdd312c9de284d0f31480a2bdea5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.faa7d3226.0.tgz","fileCount":22,"integrity":"sha512-XxTSMcff5QQ93ixpj9GO4d8KVX8nZfwp++36BVGGSqlfQRI5ayspS7xXXErQjbKSNn9VTbl1IkgbgdruS971+g==","signatures":[{"sig":"MEQCIEj4YK7nbZ1OgQygDsOKzmcpEwOPltGxv7CUd5EqvUilAiB8erHfkjyX2Ll5FcBXqdB078x7NEKlYBZqNHkfVYYSwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLDCRA9TVsSAnZWagAAZe4P/RzMCLMt/aCOPgQ8Wi9K\nZPgmXAmKXuVRSkAI9p0IWbMTNx9ch234bJPSASmIouk1Ip9bBXRldvNq1x95\nI1GICPoXOjUDF9RDf73m4lVXCl86stpKPpKTfzUZmeAYBcJzp2npKoGow7hD\n/hZFdY0QBoScmLT3KHsSnU9owh+uO6SNcP4WU3oDH4qOMk2P88IQ0PLKoKOe\n2/MxdcysE9jc0kw91A2zah06OsK4p5spl7SL5JQ0TczGWuDcddPoEt4hIUHO\n/ksCaKX3U9keoeVFls4Jyr8u3eowy8Etc3njrRZgdd5zN2RVoYwL2J6HsE6R\n+z0ccBOORY0kym6vvy5ZZLTTC7hzQT8V7STlbWrm10f4xgYoDyHq2Glla7wM\noy9s3o9YgH4oFuqgS+zzBgeBKpMduAV3Dr6AfcZbAN32MrgXoIjcF1ma2sp4\nT1kx8LOaE4er0B6StTsOdxw9jdFQSZQYq89nUzUEWW90VmwbacHyesQdjI6W\nujvIPjWDH+4YnkMgbMHisWbW7rDY5EgkLNN59WnVOh7J2NB4Zpx7WHQUwaEQ\nttLpYHKDHbaGMRlgQFmyXRes9dJFd0umKmYzFvwxmIYFH6g+ck2C1UnwvNtp\nF068+ZUucPBD/rjVpWLKTOXEbvbBTkHCtWYKPjBCxmPYIHbhUDiUWT4i23CG\nldlE\r\n=TnSi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.faa7d3226.0_1616175810748_0.0031865774896366883","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/typography","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f43260edc5401c083807e9713688d82c0273ff7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.c60449bc8.0.tgz","fileCount":22,"integrity":"sha512-UHLJg3FEhwsAlMJGoZZKUbEvqMY3VRKf3RgQQh+LlJSYLtIoest5ONDw37eam8pFnSOXKDMcsuQAknEdLQYsWQ==","signatures":[{"sig":"MEUCIQCudZjyl09l+FGQpyaLOt7iyyQav0UFDjo6TvB6j4kUmwIgGFp9EoUvYktEi66qpsKG7JLrUDbMDw2LVB1waBigloA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOewCRA9TVsSAnZWagAAYKsP/iPklwFinnI2EjhTjGZM\nA28+otMAv2SNUlzkHdAQR5goMNNqXO1RHzIResqDJz0H8hFDwrkxFcEXy2Hf\nKQJ7QmWpfJ9BXQZgEq4fi3KG5x0hpDDJwjbZS8uz8qzNtFKa4oXUHeSrKRIV\n+PTzpQx53n9iFYn9+CRnoNnScdC8kSutzZm+saIk0lgUrw1tzfbqJ0jsN36K\nXMRAxfzFGC7G+3saOgANu5mbgbdr0n8LJ59itiiWfNGy4MsJ4/7xGWT389Q0\nVLo9/J0sZLxZHLyv9Z5G96qs7XbhFpyVoIWU2eMDThJRPD4JmDbNTbLywCRe\nYIPRAUfGCT5gonx4si8ZvOfHk2NEW50dHYes2ekJJvj6EoTOQVmidKm+GeAU\n2/nRsM/0fczACWohvIp/jJndN/Yyt0fA0a2Z7aXvP22d2inTEZNVi6s32LCZ\n6paTGzozYzlflRAAA90/gwUTFO+lzAqTR+Pke2U9yP9EBpJjFJKiIV2QApXF\nmylksI0y2uiG/K6aOhmlFlrcT71r6Gu0Q5BOVHAr15/aVhbQA2ZqGoobUhcq\nQDls7s6OaLtha80U02GctBnxwMVbHVD/W5jPQcJzP5sKSrWXDao7CJY5cDr5\nZFgAkOZHXKiGmGDdD/d3mWe0zbizxXK8YMnxa9Xgp7pVaZfTrBJFGqCuwD/v\njx4q\r\n=NMhJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.c60449bc8.0_1616177071425_0.34130891827410137","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/typography","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a0c3509710b49520e8940cbd772583f3a97b041","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.5f0fc444a.0.tgz","fileCount":22,"integrity":"sha512-B+fgdIGe3AeIco9zI2J7ihrWU3Uzlg/1NU7xgXkpSQxBdx/eCFH4H+hVv58kaU+yTbEfrG1dTc/NhNxAKmfSIw==","signatures":[{"sig":"MEYCIQCLTTkdbddGK5Aj/MaEVHOrO+ojtYBww5RAOyz5xBJ1MAIhALXuUyHO2QxXYXDIxrTZ15yd0ukvi5N08ci95QrlFk8V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9WCRA9TVsSAnZWagAAtH0P/08uEGE5/mEwub7olwtx\nN5lpLT/zGIX0N5nFTqUePnlWGzbICXOeH2RCSBt1W/+yA0/mgBuPQPXO9uda\nzBt9NwUkPnw57Bt0rD/zlvjTLaYGugcYEU9VVXW5wRwbktmeb9BqlZ8iE90/\nruCGV2kOxMmTQE7LATdzyfUL0sjiiZKM+RGtpUZiEUJpdAtJPIFhyxqBplET\nbSQI2fZig5tDTpbB7aqA4l/0sOCwgTk4Tceot1tK511KwkHqVxuqwmgayGb0\nuImxyg7oKsbzqdlPnSP91IIhE8o5qNY/mlucqHbyLq2JgvrS6PRO6WHLbMyj\nZ6TlVFJFEh6EdHQUeL8OcOuEMOatm/VT0ieTCz80MCCcNWWiNBGBtjcXARtR\nZvU1VO11wNZ0OOgNw1iKZ2HuKoEbxhp9mwZgtxzs8LnJ5e2aesJ+oWNxOZnn\npwJ+LVa+RaDJBvP3A/LsJiaqXQFh2t26YJy4G8h55yceSXopXlfC76WT9657\nCFBq82kv/E4dBvo42B4oGPzV4crfLmF4IYSv/FPEi1vZnONwZ3opx0mEN1dS\nvZ9JKOyeo6qLS2SMY9uQqrK9KeOAPlO8slCRPFbhQrtcmTrSFyV2ZFvtTlfK\nnrSPbr25gbokZVjugBdQtlCpF61YXLBb0Ap5lqf0JVSAHGYBcIWZID+Wwpa4\nm8/c\r\n=lvcY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.5f0fc444a.0_1616179030244_0.5341171948959387","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/typography","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.4567a750d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b15236551ba75f4f118dba3e26c12603b16d5a6c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.4567a750d.0.tgz","fileCount":22,"integrity":"sha512-KPK0mVbiugpiM1DbX3ThFQ8vECXg5urED5f+d6zDM1ouVn1ElCio4vOJ2Jkol4yjmFi/uHAxrgJxqvnzOmU/AA==","signatures":[{"sig":"MEQCIDO6J0VJm2bN/vsc6mokur1MO/4E19fB38QQa1etUqqIAiBkhQjM5e8LZ2859Hcv+LIpjzqB2zwM6LnXwCls3XMF9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVjJCRA9TVsSAnZWagAAp14P/23sJUEMkPrpXBaOBpxU\nDiePUIKVbtx8aZUMRZTcaB/hbJbOv1dChr/2Xp8QL1YSAA5ekENhUTjxf3lS\nqCiAOC/QqZRnGma9w7hg7oRzoC9nFoz279L0w06H/uQdXQsuyowCn7/6xP1E\nelf5u1MbYZRvsp4MJBgZ8ztIFm30lQxRZM0YnZyl8p1pSYteD5iLE8ghYoxh\n3JchVx5M533/Nixt3RUP0MqOp2kgDc0xzpLS6M5fPMs7tDzbqT5T6gZS/DUo\ntzkIis+QHB5BGVegRTqGrjndYNgSWh5K5TDpSjvso+L6+VGCXz/L+Z5KSIQS\n8MvulLz3vEb3gXNyB52dfYd6N/0j/q4R3s40GaK4fmvuEp2Ch3aCVL1oPARr\nvgNe2nzFLVo6PHbPYKQt6L6vO3a9pq2ad2DREwfVcMScHM5uWvtmfWJnAOBi\njAmQ6OXB9l98QyYOg58sWu1tUPe+ErFAelcG5EjeKJV5vSk5MnGGl87gpuQL\nL71Axf93mHzw/CGnLdMvStGOHjGsNPeb2fCxm3UjmPvWikR5uPGKex6AeJwS\nS+SczOm5uXYs0PeISfn5MhU1Dn4kJhnSmSmdF/iyFfnVEqG9Osyxg0BWWEMy\nFzKx13B4BUT14JaQHWserDUoJrqbajvI5YZZMTjfI7tItziBnpIRUOMQ1xHp\nOej4\r\n=3BDL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.4567a750d.0_1616206024777_0.04423220458443655","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/typography","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89717954783dd1669ff9166e23dc1a810a6a9879","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0cde52f5a.0.tgz","fileCount":22,"integrity":"sha512-Lysw4I++SPlOLiNl4zuyp6eDJesf3J+gr4vcbQIg9TcrCK8qQ7Y05UFFyR7vg/DtE1iIXMnxmF9PoHLGHmIp7w==","signatures":[{"sig":"MEQCIFavCD1k1+Z22EAITAxLcUNa1Og/RqcZx1E73F5GASJDAiBJZ8euR0PqUjjrwtsS/CdtVxraC8bZCOjuwrIz6WN7cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTANCRA9TVsSAnZWagAA44gP/30EFb6ygx7VShPVpzCX\nkRdW7V+DxYydfqRowp2vfPtCDh5B06WVmeL6D0IxEIZG9AyN+1EkZP4bvzVe\nO4/XMkmp+qfuCHzqzIewQL7K9YnC4YhW7cms2jt7weK2V3ZvRAw/7oTvrfLC\nPh+A6bTikmH9pq+wfJDasIc8KAHE8MxdsTxZT+JLuQcYHm2npQqKM64bj7XT\nD/6g71zN35CBi3BiWAa/jhGzw6HLCVUeI/IJANoG25xR35hPQ9VPLeni0xLT\nzlla5rBRkBNo+DWkfheQ/Yy1tTFMJ+LgBxtcIqO6P+DS1Qm2AIRN+wSUFBUF\nN2a2jmh4UyB/pZy6gbZuNevMmHihHXtdCJq7T/m+fCB8zVbqH2Bb2TvpGSZz\natw+Skgj1imTAsN+vBM9Uo/Ex4mRUNKLLpfEM2zYMm9K4CYEWl8tMhANpgED\nSGxmgU9zDsgACpQeSqAEOhcAXvx/+MlATTwoK6TNKZTshBPQ3tz57rrxZuLV\nAURXlTF5UCs4JZb+0tILwRxyw4Z9h+oFecxjhFabA0ZgwXdbMSxBe3zTldjS\ntG4AouwZKBgAnY6xqLDM+3EvLWBvfNB4slVXTauTR82w87T98xci9HgvWVk8\nIZRiJH+E920dN4RFoqC3z0qGyQij+i5Zf/wWi9qSO1n9TDCfhNK0wVuLZW6g\nfLFy\r\n=OTzV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0cde52f5a.0_1616457740823_0.8714198297906324","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/typography","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c79f558228145433f07949eaee519884c648feb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.48f4b67fb.0.tgz","fileCount":22,"integrity":"sha512-t4cVfdjxvNesUJAxxyBwHVud9HPcF0w7g484mzgXzmSIpbj/24XPL1wpMauVjEC1REVyKHf+hUWAozu5r7Dpdg==","signatures":[{"sig":"MEYCIQDgnW7UUy9X2tj70Sv6jce8HKPhHPSviIF/L5EaF+IIBgIhAI1e2m5kWlXSDGpalmF0brNOxTOm+4XXYzVTjU0wJYRg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkczCRA9TVsSAnZWagAA53YP/3So6f1d/xE8ojnOJE5i\nP+3yslJ0AirD+Vprnk867Hhc/TtN50E0l4TW3qlfUCbpIv06TDnws8y2vtNh\nWrMWLNgZAt9fNN0YFXgflRwjC4LfOXsvVX5IVYXZSyLXQISJk25wrCjhVShD\nrwpNEiPu3/z7QWNOl2/VRb6wIL/MXCtDbSV2LFyGVMurINGBwuQAt6Ueec+N\n8mpeXJfSbJJGymjr0kS/ivV3xqsd3k0f2kb81pb2aQZ8h8gfDWA+eRv3IKPC\nWTh+4O0pQASNFQuphgkTie5O0CQ3KmqX8J+tajFupRsS0bCZShsUX0Rc93zs\n8Kg+K5wvW8zV/h4WCKUyRHcyOH5F9owt7vYTTtp2Wkppgl6CFh8uheQS0g2W\nMmeaYwrg3vurOyNSGDPV5rykwsrmetE2ZVNyCDvVA92CTx8U8KEUQMHwIwMn\n3Flmj5QEjkSW3luOV/dzF/kV2SaZkGRxcCXJsmPeNE0JFwPLN2G+gU2Zx1Jm\nW2o3Fa36jLOR7/Hto5lyCTeDKpFwpEyHdLwjpvUqzBXfZq5XhvOZAkDx1Jme\nADbtTTgkeJd2mOJpETx0PNp+g4WF3VTKu6tnU0H8UbsxK6MQWZ+VtEjNzMfG\nLL2Q2FYlp2QhJGoVA/qmeB37Io8jI2HT8ojh9N/5OF0TbRceA7jtdHhseLoB\nL9Rv\r\n=K/OP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.48f4b67fb.0_1616529203148_0.3507307557173107","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/typography","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d7d2701f877784b53639a050d32b72aed3a4af4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0b8cff734.0.tgz","fileCount":22,"integrity":"sha512-cPKoROhuTIeYtyo0zAojf3UyYeRw6n6KJJ0NBW+w4TJEBbVeMmqf3WJwlS49XV85UQVmFGfwwwSTKM/Zvz7lGA==","signatures":[{"sig":"MEUCIGZ/t1kBPJQ5pinkrdaDFKMcoFGkUirhtaFZsDDP7OkvAiEAnk1B43bWwWgmEvYKSLvOi2zcdAp9u4JrE97ZG5T9RSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkm1CRA9TVsSAnZWagAALT4P/jOsW/0riTyyQPO+QEWx\nPDLwSNxTqvMqan5iTKftFEarm04+L1Pcmo9vXcM+m8Y9qr5LptCpNpz2SwSt\nOeSnv7DN8+tlsHzoxVxIouaD1B1LptOG+Nj1RnMBLwYFYJMD+U/veRUCVlmU\njRUqQ7unltRzMmSxTCwPFZuXi7MG+E0tTHfvi4FYwCg/f9An6H0alf35eorY\nNHqRYrUtblFSpKDdRO1DfDWamjZkxYXWhNfra9UvRgxUEhLiELSiOM4r2Rcq\neuTrVpJzgWuB/7Y2x0sLiuBY4ztkblGg9Xlm3Hyy7jaMAE32mAB9hjALwnUH\n+3sCB5xj+oLpYTuf+83QqYRB2EamkfGvv2DpbXAr6FwOi8/YVkcMdxwDcCX4\nZZbescB+VbOzYg/z9g26xn9yAoMBUdiJj5BFYRetAZEvTOLTMu8jRRGa+JXW\nUFroVKxoWHgeIJcbBUBkAatR+jlINqXAGBtFFvGm2C3lzL3vMyQgFlccUj5I\n023qbeJF0nXzhD7eyrkNr/BupZ1dXY1jMZEMJUwRS68zTtwW+oXmJkiEY9e/\nmgUbsC3dbNrepSrqCmHytiePDMzsTFhZLTGD+Kb9ZO96zw8ov7/veMi4OKGA\nCeHo0tsmOHiBttO8itY0+xF6ACT/mpEEum2uZrEz/1/yI20koLlWyxdDKvJL\nJDBj\r\n=doXx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0b8cff734.0_1616529845437_0.8609303479094408","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/typography","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.8943b991f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a31806779fd2a4c85c24c8702231ab3bdd181d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.8943b991f.0.tgz","fileCount":22,"integrity":"sha512-ziDcNl2+0Yr0bXnWSR+/UkdBMM0mYDtBB/TEPDigNfWRVL2gKJgIzrM55zsKOFplKiOz1DqX3iesNTAEilZwiw==","signatures":[{"sig":"MEUCIQD7KOAFVtVtlN2CSToQh0yhPKVLy015EYOALY2Fwd+6ngIgFf7gMuoYfwRohhOBXs8VQzS5h7XenUW7pbVYQ53aDBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+MCRA9TVsSAnZWagAALcoQAIa7i40sFB9dHAo2eVXe\n7z8PSZ5tHjXNIjxj1JLOVEmA1Qpe0zUQHBTvJ8pO2RDbmrqGEHswMzur0uWu\n1oD82shmY1uyFMbXmWXU/g4bgpVl/g3X2Tgy40R9eaTtHQO3mSEghPOOT4Uq\nrp8kpVGfk2tIjTFDiyLeR9cegbZAsf9FhEKCVT752rIIJeLqwGDNFfkHIOzx\n5F0nA82tNGcoIq3wAHnmGk4tQgU+fS5R4AlDIAYhS2Efx/nqwMNjHilS6sKK\nhj741pwzxVPItOzN5Fm8YkdXPc50jGktOP2+SRYqlEjpO/sprohMZJ5gmoXo\n5xfBzi+VKdJfc+lUYJpm1WARV+4xZ8dsXY4PfXttX8GQdoWsmXEHkfx9qfm5\nXrBbaFcQhJ8p+TiLitYnQpD9Lttqr0YFUKIWyR7qlbT9O19rpX6JKmzXFIxY\nC+X5ffA8u+0oO4PDPAj7dxl6NnMcuX0Xf/UoR/5UTKKWP1d39frGfGwfrrGC\nqg3S7Ss3j+jerDtXxDQkzk9mDWPc9oqfTOouNzAEIxk8jhDuMYt1VcShR5Pp\nTo0QhmwFodFX0y1J/hOOcJ1/E4YaH3icx6BshPzvim7zWKE6Qf/LbmcyO1C6\nlprCGRj+jfJy3hArKA5ct22bTg3oQjjJqb8FpaxvqocltE8brmMPZktVCgxh\nKADF\r\n=mxmB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.8943b991f.0_1616531340303_0.41629345871729306","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/typography","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79dfce36d7de1f2cc9686db8343b4ebb3338123e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.3955d8d3d.0.tgz","fileCount":22,"integrity":"sha512-jFWNXqXvdFd2bRed3+OaCHe1TVHZgBY+xKhWOkREQGeLKjftet0RujuEK86EH9NGks+SraMpWT4XUT45xd7PVQ==","signatures":[{"sig":"MEQCIA7vaZOjW5+YsrJ7RjFDIBfmLBoT2qrqjLeQAoSbtVt9AiAOmKqyR1fm3xL8LyZdkfxFs8PiMiKWHUHzCFo7r2p84A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/fCRA9TVsSAnZWagAAXToQAI9pkdDSVwKswK/SOpPz\n8lPA60bBgKmhpKJcl8LnpeBQzvP9DM2+lvD7Yqo1DcXGgld6/HmJsmPr1mum\nJTEbsqT2gjUofMl24Eg8NLXHqw9ZqMB5LNEaLFEaaAM2uE59Yn3mbYN7qPn4\nkBFY11g4deZBRRKHnAh21/6aMj1M5jcCxNx6tIMe/AEFh211QlE9oioMCgp+\nJe2q9ZPuiRdN4iNGCYlbDfOGjZQTsUzhSRc4dYgl0BoBXkK/BvPk8AK0PhSl\nMfwQQtKBjaDIBdCJgZYyyAzevLcMQLuqoY2kNqoOAaCuGmNSIJ6A99yI7gG4\nsKyM7bVguMpJ39fuxY83nCr0UDy9G7MdU9HY+sD8uFbqzGX7HA9p5STSWA4w\nwgxoDzdwfNJq91TPKB8UFL1ZDTzY5SlONHGe6UxTiz8AtROxG9VcAgtzn2L3\nfAho6UcGeewn1evX38sjSlCQoZnAbXMAsKX7YVErtVZAJDo7sg/8/yLtIFgI\nkoi4SmJNLhQu+Rt7vuurZWY7HxO1+A0JDqinN2yd3HVM+gjIdOZ/TxK8eYmu\n7ixBRHPbMta7EnlKudoSKLrB+1DGLX7u/cEGber1vlm15CMYP7O9dV6QAM6e\nN23LZParhO0lqtGolZocTbaHKPha0b6kRXhqQP7aP7Q2gkZhpf08v6v/ft6e\nf0aD\r\n=PvLE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.3955d8d3d.0_1616613342801_0.6384525684472804","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/typography","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93fb498d64be7a0ad7fd42d92a450de97d8cb43e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.23ea2d85e.0.tgz","fileCount":22,"integrity":"sha512-4lH96VpLYEMFoEqfv6isVIjMte292zPqPkQsSaOnbe8aAD3EcufliRfZyjcb44ocAFz9BDVcoBAyomQoecDcJA==","signatures":[{"sig":"MEQCIB/9ZFRuWwRGS0keZRrmPvZJSAnTKUYSMkfDT2oXkgiqAiBFQ1CLnBL3mnJ9ZoLGcLzAiwhIPHGtgtHFCXSQ6B37Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMkQCRA9TVsSAnZWagAAivkP+gP4rzc/yYrREtQmbcHX\nZuBUifJWnnqTkpHMDCBM/gZULvkApCdOxnwXOzedwHt7XAM5pz7qY1/Timy9\n6lPNDbIw+/Zq/jtnK6j2OUOxSJMwd4IKwHCzKyG6nwL7pN9HkykvSSFNc5Ml\nQxZLPMVnFgbiA3p9PPYlKcBFnMrkItz/UZbf0nmPPRrCz/icilthIeWOfb5n\nXKDLOS5/y8hbFWsxHNVHhNBHL2fo2raOUnV9gSnNvXdRP5wUMKUkap1aSV1h\ng2hD09VRobfAiBy5qRUfTs7uZB5GvedRAkDwfW0pqVdqEIbk8MfuJc5IwZvc\nDjrfmnHS33xj07ogBYM0ae+GH9YxRkdRjSD2u6K9NPo3kwSDi37AvHQ4RtvH\n/fWhE7n2mS+qEOzaJ8YWVZYat5lJS31O+PilOwpZ+Seftf6xt7tC0y5dRghs\nSIX/z8TKlOGy2LB5GhFc6O800gGzu/TyZ2gj74bo6kedT1+6MCYPdPyv8KHy\n9KXD+JOLd9FUtllx+35JDyupi36mJCtXotdfFXEZrFfOIX3iIKg9H0GDL3KK\nWiO8inTBSw6eIA32IdEdEDCtRpaaR5hQ3/YQuqHwsxqub0d8j5lqXoQI0Ee/\nbdL45Hz1new2Iau/dyf3zHKUzOiwbKNBP0Le7MbDIMEYkL4EZjsoBZXBPzEx\naXdG\r\n=oBJz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.23ea2d85e.0_1616693520324_0.05448694202311555","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/typography","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3e32eb55f438d03d387336b9703b84c3ecb96ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.e3ec22f45.0.tgz","fileCount":22,"integrity":"sha512-oXthUqvHiRh4ECMEdfocD5TIi+/No0rNLNhDBtIPCNUVyhGg1IfFUc0YtLF/eBV+WLhOYz3bGrV8Nqx3Z1szxg==","signatures":[{"sig":"MEYCIQDdR54yylHA0/U2ifuSITPhM+5fCVhjbz7u2D8mgHXC3QIhAIiOhkx3LT3K274BoZLM7O1P0IHpihrnr7h/Z34VVkm9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM6OCRA9TVsSAnZWagAA4usP/1Ni3CtTwsu+BXMQ5T6F\njO2Wfmr54BHXJe46DAf0uw0UlyeJgB3AEiSbgvo51QNaA2nDsVU4H7pDLda7\nWMCqGnPFAqgevizpUFjpr7AemUYKHdA1XFKHKFScFbFw9iSrhCzNi2eWD39o\noBNTcVBE/IqLuAYj9cikwo9ocTKWsD1PNzSYaJiKxLom4eol4f0JwZQTf/4E\nk1Ct/31xN9usxQ56YAt9X5GD/A7j7urr+Vv4TIF0l2v9IbxCgUUybsHj1XYH\n4OhyDU6F8UflrjypEJsZfb/fkJl3Nm5FUk4TUTyGCikD4TLMLbbyIW6IF6BM\nJuLvqEaSXisI0fLsuMKZ9goSGeNkqNIpqhY2adG94IqDqSX8Vbq5h3eH4pxg\nuTp8EaNfI3p6hB0Mln0eQG36nWs3OFD0W6OAPaGtAIcFgQJx1NM0pW5momFt\n3p2+oqbakmyLmAyqf9ZEUbfO3eeJxTjhFFklGtaSk0hGcKN7YmSjRZH3G+uG\nvFzHgRfdL/0J2meYo2Fub3ejUXimzx3O0JHXYqvTHm24zAtMWePkCHxjHtzj\nPiRWLgPEtqTu1PJsG38+g5er/AWb/8i5A2ZzUsNxiwOPCPaUUH39WVWvPDvm\nay61MjJI4FTtpEW5K2uDolXJ+IMSJfZ1JJqtKS1ubJYEpXMWHmeWwb8DXT7d\nbuV+\r\n=PTsD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.e3ec22f45.0_1616694925919_0.837921383818667","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/typography","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b872a459401c84b569157688720e57303ae06429","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.4ceb42220.0.tgz","fileCount":22,"integrity":"sha512-01mPOP9+ODmec9OpYfBKSeC0+co13hOJXqHNqyPy6vpYobTNY3jN1IhEAqrKcuo9vRkezpZwCQXI2+T6aYHtWw==","signatures":[{"sig":"MEUCIQDdBmqBo042jIBecQdrqVTz7rFarqh385rTyHOteCnRmQIgR/GTKRVzg9dsMq0H7cQ2i46zK4UX6kgnl2AKSZjD/BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPFCRA9TVsSAnZWagAA3/UP/29v6+e08dNQrnfJO94n\n/Ig6NrSoMzSGw1PaDcEZ6L0jpfOXDXa7VqJ5Ty2d/81w2C0JHNpQNVfsGya6\nbe8x1Qvu/m8Rw08eJhBj/+6Kj41VHWVQVYYlajAviMrRIx/hKK1V1V5EDoTF\nqNYKC7PF6hp+/vYac70xVKB8oBwnbiI4XNPCtXz7g9xzdTzSJKpOCmuAHr4l\n4jf5JMH4YqCXINxre/E9+82FzY5ROO/zVLX18W4tD/jbLaT036LDOx6KZk9C\nH1Wg6ZBt+rb2pu/inErw1HrsGWDDAs/vE4WEuYGXtOA/tr60lLtQ/MsWtgI/\nLAq0jLOph/cF5UlR8rk4WUPjzDtggRfyw8xYSWCGRbgUrqE5CdEtAPOcKK+m\n4EWGGrCBxqUMyX012nTD1SBQ5JGNvK+F4FsdeiY0lfDvCfZEhdxbim+XrjKn\nE+6tybbxuc249uRa4EXueW1yECS+zdFcy4XTfqt8Kjw7FcTWAJ2b9Kr6joo1\nvzrKJ4UCbXU62DT4GIo9W7a4X/X1WS9/yB6E/uxORFAkSYcXsT9Q5+z4d04v\n//pE5mdxBN4ibu3bCb1yl3L5R5bBUKyElsQM1BfUWp4+M0/I5g0ghqPlGYlw\nessa9qpQNK8s9HVlP5oiyYw+553K+J+LP/uacffIZoWDGT/Ih9ewCmXSLWiZ\n0K/A\r\n=+a2I\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.4ceb42220.0_1616745412614_0.36722453427009016","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/typography","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3646f0b9e1b782c2a4f8712b860f90536f702e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.dc9c84023.0.tgz","fileCount":22,"integrity":"sha512-I62JW5ZhiI2AzHHlwzf+yXb4qJb7ryc92PwcUn8L0TjA8228UACb0GYVRZv5V2nvyDXYqs5wRUwYxH/2FrmMaA==","signatures":[{"sig":"MEUCIQCdej5zINOAHc9/f7Rd5Fgl/PYsVR/EvbnpF8i3pPWb3wIgSiIaSuWuwexwO2D3QSanhgosXkvpOV1trdCoTLmmAdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RWCRA9TVsSAnZWagAAxUUP/jiwNLUY9i2orkZZ4j6l\ngE0da7521Bp7zTBuYFLKzCO068fkS0xQ9Bf3GD6leZq9uReiG3hJhwfGqoWo\nOdHcrHcnhyWCeJ5UyqCIMIVOAoSSdoVJY9H9nYNRzAq83XZgiS7tcPukEgBZ\nu5nni/Hf62z7CaSNZLrffDiyrPiKaA4fD4dDd3R/ZtHwSfutDT04jV+N54Sw\nN1ot7S1WZ56EWoqA94L8Wb5sRknwxpcemcqUg59OYOu34yevznN8GyWbcWrf\nFHeLTmfS3bkluij2Pl8guaxJ7avcEIHZA39LfsDiLrAFO9wmHnqTZxDAYUHT\nyz07yH/yx7dkTT+Pjr0h8pm6Ni7zH5w6A6nNwr4TgXZlf8F3iskQqXG30bV0\ncuFZiJaGHy8F+Ge/j1nz9slha/n55XFOMR/dRZ0AcZBSIjDAfZxoqv2/nTW6\n7NVkRYkW65eUWVaclzYYWYbu+unZBtENQ0+77wYmiVpQLaxSm84vyzzWxVrv\ntwqGirwJJTJUUPghkg6Xq5PbrFimbbe4s1mUUP+coGp6eerU/t6Fv4MW/W02\nU4ChK4V1WIL6jLaHbXRWbsOHkRCUCiIdZ5a/z9aS/8AJ9162YDr9Eho8dY2Z\npOL4KDWlHcmHPXETeo3KphDjb4rmoVbqtwvmK3XfLPFoDwT/X4wRWxMdhJrC\nj5NZ\r\n=wXIc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.dc9c84023.0_1617126486316_0.895291467019474","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/typography","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.56fc26962.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8183ec394026c695639717e8e6ebc17c135fae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.56fc26962.0.tgz","fileCount":22,"integrity":"sha512-KgX2O2A+pVta3TxaVj44kEuXOEozGyl8Okk4EcKy+gV2Azgni5e7x8fQzlbZIAeGoXpvaCM4TQdg4yqAf5QcdQ==","signatures":[{"sig":"MEUCIGr0NHTsuwbEbAcXWTerWMiNWOvSjUnBPznwndof/NwEAiEAkBIjsxuHPIXKKS/cUB1hxSe6O+l7yMvnexxw0ukIUM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BFCRA9TVsSAnZWagAAGjkP/jrcUUKrEejn1UAMkhzt\npVihNGsOcSd/Ipdru/M4/mrJ6Wjau//vHP5CIOqjOF36/WyTfAzhq4UETDeD\nSQAO5ghVD1+bEU/gow1WV+PYCKWwAvThOMl6jDa8rqPH61tXf/1V1wEjCfeL\nGl4YOMinhoKf0Cbmr4UJIlIrGHxbjY92Xe0Zuhur/u+k23zjf2dDGoc5uG+U\n16kyKWAptRwLOrkcdt9CVG1UaSoh/SoKbCMTik/8kw0eSkMy46kTVoN8vDLK\n86eOMWRSA1/1OuqrjRtwqioaZkwaFdEkhpWnBLTc7mdGsyvLyO8Vwkvkagye\nmIq09FcPudCqEppMerrMyeNluj+naKGKnfyapIRsyzM0moHGtvXHgfSESsJX\ncNlZca6toL51fgwbgn1AlPGSbe3BROebndc1D5sZ0RotfmwmB54PLuPXMAVw\nZc+XSGJLeg6TN9lF05mjLtXZMWuHgWWwTGqW47d+hlv//mI12fwy2mnT+f8g\nN2Bh/vo0av9BBeAcArE1kKhzKLap+l1a/oAcou+p0z1L7VY0OTiZNsSsrYcl\nptzVNPDXMRpN2WKZbvKfchzS/i/ZaKc2k8mICThJpyIo6fPZt4Btnsp1pvkA\nYOrayC9uvtHzuifWIP3Ly4oTFVY6zdfGz0YwV0tDHyCT8XpwTz7Z4e3qDDhw\ndiRW\r\n=F0m4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.56fc26962.0_1617150021075_0.5040457913100334","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/typography","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.bc318250e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c3fc142c75f9e41805cd2906a8860cc5e64746c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.bc318250e.0.tgz","fileCount":22,"integrity":"sha512-EpFMvP1ZRRHaPkyW4OfPxn+8xpyuaJo8Ax0C416CLk6A5XseOl/ulpb5a+zdlCKM7UkNRi+RBwZZwpRrgfuaXw==","signatures":[{"sig":"MEUCIQCMFbAbrqdMAFzTeq14d8vjGSMasV7HDsgM/ZEF+BzXbgIgZPwIWG58+4tS0zTXDonbo5LFQUj9L/1EHIgvJG056DI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FaCRA9TVsSAnZWagAAp40QAI51N6mkZBRjbLW1Bura\naEgq7POj8hXM0QSyDuvpb2xrNBAuahjl1KoV/YaDo/KtE39XJo5B0W+crrUn\nl9dtyqRfbKR68HxcwN/yfeEIvlynFEY+DOOZoVIb8/YAZ8zfcTyxax8VPSiW\nGYOhN2/tabBYnZa4fPuNQnH6P7HB7mr6dAEdkbYRBuTdTfdSGbK68sJVSaG4\nArYPi6j1Ubyg9kV+8pabZlCFNkHY3oFATBw8ekcw2vrQsSeDYumcr0NHVxnY\nC6JMHePwuEGW2yyS5Mbvxclfjq0yGJSuKd098Q4eUCzLKPJ1YdSqE2T56oqU\nDSocVfFZx7NP2MBYbzwnuT8h0fXEOJ5oBnr3/3sL922pOmm8ND+qDzpAGKZJ\nKjCQpwO0+mjojqa7YsjvXCX8Q8LyEb3Qt4QSSJZac+mhU9c/Jnr8m5rGsnSN\nnvJIRbHXQWz1uT/kRFpnHQyFFu7PY97wumpOhTenZQ+e0L+NL9SR8KGCWve/\nOBAa9tF/0aj8jrN7ZRdbU0WxNetNkrrXj4XFOvKdUBID6I0INpNAFGIMW0uk\nqA69CRv4JyOQMIJ3IBlGZzEBOByicvr7LahWx3Jk7E0WJ8Y7clViZv/wlFKw\np+ZUCdsDP9cF98ekElbo8epk5/fwuRJOl+Eh45unscH1i3MTAvCOk4U599K2\nefaM\r\n=dh4Q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.bc318250e.0_1617154393881_0.986383561806446","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/typography","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02dcfa4882f74b40565bc6a4d5c3d462d1e3c91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.edaee19aa.0.tgz","fileCount":22,"integrity":"sha512-c37M9yqr0GOdI2exfFgs9rWJQ/PmpM+k+f7HApqm+B6nmIeNL+2em6Xj5kJhAyEPtNjmNNrX2kDsjK5cdQrgYg==","signatures":[{"sig":"MEUCIFsJ860A4CF0JcSAZaRvo9ZP1xOSa4E/ObIO3EzXN+C8AiEAmcHHIf5Rf98OsLB4PgV5ReAD7NGo456TsKxnxYEnng4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pBCRA9TVsSAnZWagAAFjYP/33MzobYHd9g1uwzdjEU\nGZn9zdrQcuyciGj/lvfJi/e6EQIej4EeSUzmPnPotRTqGgy5WRH/+ETHROrc\nWlgXHNZRTJ5AozBP29+tEqlGlwsYd+zllwP6yMEhmQo48OuNrNwEsNZuKzF0\nNC01gUIBPXvkex5Gm/fiATvgkpiz9OUqWOReoV1L1mk36dbnBaPY3kavzn0f\ng+p6mgMimo5UPMNoXhalOxMK7z7YsqSKy/CDN97xEX6lJGt2TCp028J18fRu\ngoJHrCU1tklz5kQ1rC+DVCsMbW+HFrKM6EuWXPTE5VtmzIw/CkLXoVeYWgc4\ndXyZ37qJ6pB0YG9EgfPUmi39tdH6LnA89vry47bAmtvRBMQ7DStiU2v6XcCB\nk0+bjT6JfugSUcn9kw6YTpjZkAkwdRRSWt3Go5kMvB+6PFTBckcSBMw4VP24\navx+VKbdzqdsDU3bIi15W3oUjfL+2Jn81xu5o3PLxQp5IOtCiavBaiDYHzJZ\n1wcpEvKqPupHLfx5/Qqj28lkKYMCSX4i8qnZaSf+iFyPef2xJ4O3DoM7fsKd\nQL7uEbnVUpn34A/Hp6cJOQos3fE+JwB3YuK70ZGlGHkFMSQ9xcG6w4Bold72\nf60LUC+K/5Y/kIKd+/N9HLSyCC1mK0/FFGHi+JqFlbhzAzj4WkHx0H2ei+UV\naxJi\r\n=nsi5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.edaee19aa.0_1617156673117_0.30029897959481855","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/typography","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.24609b822.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7487b138ae0323ac6195a52067f0ca77d4bb762","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.24609b822.0.tgz","fileCount":22,"integrity":"sha512-1MdpPEGcWZoqeROOlWQv6CIx/TMWVeLDO6LL4mKK5qmCA+JTjzyg3CzAnhcswRZ/zS9Um+AXAMcNARxlWPGFRw==","signatures":[{"sig":"MEYCIQCSt97ka0aDPkai2AEyCjb04buBfAKHvbk3A9PZXo/8QgIhAPEC2WHkI0ypnQjcdge7tKDzfHQVBT/13vXXMuwhjB9c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIGCRA9TVsSAnZWagAA7IsP/3X1Kyb/UC7yH+SSGEJh\n2VUk7EldWIiwVmKXCkBhXnQj+b+5j+RlcdGV5/Hqrv6Z7y9XDYd0Ir6suErW\nTg//BuorNnLRmCZfoY1eBqQwsNR8VANb68U/Rztnwko/h934Z0X/vfLG/JNA\nRUtgsnnI+6SD1hWIQjz97NIWT28ViukEs56mzF4Aw4emOaWaNfxI+Cve2Sau\n3xvWq5S+0ShVesMl9hyLgSnf6SATiUlpXTX3A9WRj2B/5BZchShgf8gmVz0m\nPOwcu+ls1wmTGqff2cvDFhRBU5okze6+Ku3qc0Xu00fAE9BX36pTvyaCE16k\nkULFRUemv7c2CeqWN05vfLtcHy5nJKL4YYnv4D8v/IVVoaAsOVraVGjs51qN\nAD5I5lt2xI6wKX+EE35GH87wHbzwW/m+w/ebdO+SkNCfzqq8INfPR1IlHqWv\nKDWfDcMbQxw7wGdmEzbTWXL/4+t5Ox7zq/IhJodgdEtZaEkj1XH2pedGiPuC\nSPl2YqC4pAJTdPofaUdfUKEGPhhOCulkLXZQVarKNTqFw40bHfIJxeLO5DWl\nk9L3AU1/McsgWysuLIP9o2RJi65xPpDGKVBWjWyDMxInPQZQ0HZqPj21X8Gj\nh+I9xtGFQPEjOuEzp5UGNOYrlscctgxewFThbyU9EnzVdK160lrlaJP66oPC\nXHYx\r\n=2eMZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.24609b822.0_1617224198234_0.6104952611303975","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/typography","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f48713b8ec07131464ebd4b962bc8824a3dd1ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":22,"integrity":"sha512-jqdxg3EL+n3US/bF7jEA063Gp+6Fj4pv8y4YONGMq8M+8zqxRgKQjbVQuKRqblz6+2xX5VozxW/KMPXG97dsCg==","signatures":[{"sig":"MEYCIQDaqMcFLJmHthTBrtTuuwxWFhHAMeR74i/zBFb9t/c1ZwIhAPO8n3+iE8efVj/UkFxSQnAlJl7eRzG0169t2SmyuBxX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEACRA9TVsSAnZWagAAplkQAKOpzB8s4SZ8v2jTPxe5\n1Gsk9jT2iNj4FoYHSoc7OkabmoSMEirmWAT6+YozrFiaNkVh9Guq8XnIlvZd\nOYzDoj9MWIk1+RDEmGJnXSG/ZidQuXZuFS5qTAl9l0GzuvN4Lb9nTei663M0\nCcuQbDFTnZ+plcUMZTb4fKDkIMuLiMFAp2vWIwaLPL2XOitHL0huXsYVK9SR\nTzKLl0wEMHh0WgDP1FuEz2bpUkY+8OyV6by3HbsyZhEm84baPP9/0Qq9zxNv\nhmyRU4IGNtuShYPTusdR6xVLjwqKYKfOoR9Qaiid4ygyiPlioxQyqluRM/Hm\n9GnJfycXHUZOXyOoDFqPsffQowdVprDVyg9s87Wod4GHSMalTHuSGRCMvPaa\nDHyR/jQ01PEF3WtxoX1K/0BvZ9GuGGaOWRHothdsU27ZxmtuzPZAHLxMz4kP\nD0rtz6g8GStDF+tTt3jl41ISrWr2DZMIjrAFBHB0DR+Jo3xDEQfihfshCpZ2\nD/jI8YEVzDPsUEMxOwgGN4//Mao0RKCsxD4heax0A9B+n8/zXj1szctQ5wAl\nC1VByMvQZrmHBm41svllMonuIa01ApqAM5TK9PS4qAmR/bsQcsWzwWQTh4M4\nwpqivpOkjR25rcsovdMhSsc2AWqrD8rhVVCo0mTHRwzzl1ujmidYYxvmHgbN\n9mBX\r\n=EFKC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.b6cddc2b7.0_1617289472031_0.7136560205739877","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/typography","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.94937c78c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cc833a586d42a26f0ed514ef37f7f1d0e686326","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.94937c78c.0.tgz","fileCount":22,"integrity":"sha512-/m8ejaQyS+d7JGqg+6HokSFIonUxnnZ3Q61tKzxnzUESF2qidCaQfBZKkuJnPQDoG5UJODDpnUq0ABKJRwIWCQ==","signatures":[{"sig":"MEUCIEh9w9aSTG2EZunlvPQNANuNEpwXVo2cbyLTtQrXYZdUAiEA5aUHk7R9ym5PM3FcSOPrgaC4mkWIsgRIpW2ZjsZvR/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjRkCRA9TVsSAnZWagAA8dUP/2lGWPoUEICllr9I2qwJ\nFGtszBM4XWIYq91IwI6VCuZnZ5fUC+k9OCiYtwVzevtIjPStjG8fMe5u0aHh\ncNlfwU75ouUimSbvtR0bf/b8iVmNAlIpv+3vaHhMKyxt6LMpONV0ZH4jYTlB\nmh9phn7Ukm9xhlpmiBzoqv9ZrYAgRgomlxcoA6PcbXc8+4Lg9omsKZadLCFt\n7azZBgmpx6MTSr55tIvC4YlFZRBzC2kgguUqnT48NcJOMNrXC718l6VkKgR2\ntvK5GQ4xZsMlVGAxBx8TTHdGRIzayo8HnU1E5RknaKprLH/9U2dq4tPWTODr\n7YXJan3iLKxSpNy8eJuzDH6pCbAyKX/ocmByEUaYii3McNHiC2eX/x6ad9qd\nLpK4Mkezh9TFAV96xvTG75nhGx4d0kWgGOO6YiYMAOpEHslsF4+a2+5CdjzB\n/dPNw6QoJzDPQXxJAoFLZ9tHOHVKWjU5KkZN1GPNXxSDVDI7y1ZkNuxu2prC\nmClrXnp+Z3yDKAXZs8KkIkuDzl9UaeD8s5gJYvLNRyacfADuJIozfr8oXt1t\nCj9g2KXC8NDCjCe0XRAJ0rENL6ETD+y3zrMyDvWpOFaK64PGds+6VajKvCei\n3IkbjiTcZdJw0+LO61xdFJ0x979BpFFIsYD95jj9XAO6IsqT5yI0RvTkI6SA\nzppy\r\n=epyo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.94937c78c.0_1617310819588_0.6347784337311382","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/typography","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55ab9731a6baea56ee159caff21920e7421ea34b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.e7202cb57.0.tgz","fileCount":22,"integrity":"sha512-5+OYVhQpTV6Qyxm7TYkNgHPc4CGGzt6UB05GV8EFqNXGGdtzBo1Uz0C+kXk3ZGPn3FO964nkvaKQoNXr1JV+Gw==","signatures":[{"sig":"MEQCIEfvQorgpbTM0R83tK3sbcU6dLCJaLTD8Ic+RuxaMVsMAiB5hQ33H0Vdegrkr+ssJSpWnQ23gkuoh/MUTa0UvYvpLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1dCRA9TVsSAnZWagAAcZAP+gIfS1qdIoIqoy/zjqWe\neIBKNlk7C9KIEuzYC17LX5xwcxz8YKuV+WeHJr+Hqt7mwHy4dN+VSlMuF/aJ\nMyrVVG+Pqcrfpgc1SVgjV1ITAkOcoGeDT6FqXpcKLnDFzThKR0DasCC1q1Ww\nluYWSG+5I+4r0ofQZeiZPkRdFGihLytLZqurk02X1A1qq7txNtPbq8qXXvUY\nNCEJGK8dK6DqQ3qzgza/b3BKzOw7Sq1HRRH3pyWJXN5QcFvmdqECpSbZcjNR\neAEpFg0ismbhuQCQDx+RtN98a7bAso0pu3IcIdQTMb0io2lTX5fNlgV/rAGI\nLIxvjQtezbgHCcL8UCxsH9mtyzi4JavAsTRgE7HJqMXUESZvuOLcAMWvcwbu\nIv/bfZLHtlqwuKIfxLc3DTrD5IYB5T/B/dKfpW8iNb89luEIZLul2B5hSZl7\nZ7O3yGqklIwAg6ArOFHY6FPviD42yVRRCAAdKq0w/j8BGmiGi7J++e8ceUlS\nTUquPbGCqmfLI960ld9NgkhzCADCLdxsgxwmLSIOw+qrSCN8fridJt9LI+et\njzevz1gJyvPcaeO+CpgI/3W0iA2JBITpHkUC9JbOMGdfPwOdYcZ7wEJTAWL7\nCkvsTBtFqO4kXsLP6DJl0Q6F+7inAB4yghYbdpYuPaxLC3gJERwYJYzWeeIb\nULb7\r\n=TpGD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.e7202cb57.0_1617317212716_0.7581565454281467","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/typography","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.1f636b205.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78d0d6ed965d3f413cbf09f98aa924b5c8426332","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.1f636b205.0.tgz","fileCount":22,"integrity":"sha512-XN5rzgMhv0f4prW2VWZRQ+5GmrxwH12W9exltp7I6fA6lkBfO3OrNJCQ5ikYpXUj5j/pRPYV+4PxOizxS/1dUg==","signatures":[{"sig":"MEQCIDByyk7uQy0xWZOiIlCw9pLwxi9QQKRdGs5fFEDjsrdoAiA73EdnnuHEYYis4w0vfy60SGOjcaVaIDmiLEPaZvIdSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5lhCRA9TVsSAnZWagAA5aYP/ieJv8Wdqc+hayQZEzrc\nVu88BcR8VNczEkH868nMvWfIbP4ty1eDsCYBAFr+Jrd0MS1jH0WJZVKIbKXS\n4CygSGH1w4GYP/oDxVCqILjFjY5oKANnAZVA99VUGUXUPDtquJ80k9Bcq0iN\ngx2tImZUCU8dcpu4+xSvtnBEnxtc3zWJCltmfBBo4+Jj3/7jKQxFFnM1x+EO\nA8cc0iSiiJl8gZFvFAx33MnGewFfMgyYhCaETlVc6fA6L+dEysqNNaRjRM0C\nPdkunVMH3R0zzORklqyNVv2ZZVHVwGi7cYV77sIioPF48VF0r5RJdzeXQ7tX\n3spdVSEiZLO1JjUUKPkOekVx3hPGAv3X+XDcLyEeMvym7heoeh7ete9GvtJn\ned6LT66KjI/4kA7ob1FjFl5XcjYyROjZtIM2ssBEopLGzdoIEfuZWr8NPKiu\nePAp++i7eySdCuclm0Aa+3m7eGmwzvr9LHy5Jz9F7JoDtwBCEKawUX+hyAAC\nPhYfP+ZUAksjMlm90S6o0Gg8j3iUJwdsuF77y27Bf8JG1948nyv6LjhEmwLW\nH/kU+NaC5nqX6OtO/MBEgFBs9oXiKDqiONXtC2jfkodeqxZwTIqhn7wmGz0h\nV/ZJpJg4khWODjkjApViv0RN+Z4qIePhYF45CGaI8j5tJ6BKHDqOzbE/1iiL\nl7Yz\r\n=Pvmp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.1f636b205.0_1617402208557_0.9526699014225744","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/typography","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.94f50b260.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4cd9d9e0b9684268a0badd78b280e60ffac2cb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.94f50b260.0.tgz","fileCount":22,"integrity":"sha512-JvZ94ohLszLUvv/27pozKricbXoGWnjSgi1jW+TYELmPkEcfwsrjkKDmdc7tbWZR33tL0V0deoabu5eTUcPc6A==","signatures":[{"sig":"MEUCIQDOLrKrQloYp3n3KfVDFnZsb2e1uDUqcGfcw+fuI++OvgIgf7P8uMatJ4rVmdEZwrVid9geOP97bIsLAqs1OqDJN+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycFCRA9TVsSAnZWagAAhvoP/RjFfWFBCAJeZi0WeRVr\nYJhU3Kq7nzZ1lsS945cs0QQr9F86Bx7EkklA2xOUc/19/MprMsPdi1MF2vmx\n9cO7zFT68jToUdJyX1AqZYtb4N4mY4MA2mTRMbEYQ9ZpknwylF0MAdHaCF7h\n80MVQuSC9wgO4KkheLLIpijvUMZFzXO9pvsinmaLhxjVs1owFRGrD96B3flY\nSoI7jYTinZVq9Z3VfXE1Pw8dEe63huxoaX8a9nnIEoVtOKUqrKQdI+1RfGJy\n0/2DeA0ivhr5IjSin693yXVvaXvU1/RFM+6zVLmbMrT/Jb2dogHuXyMhDqF+\n4AzXovXsbPDwhd+MGz3kzEIncfDOAnyD5R1Apl0wInChUDqsf38N2uRbYnhh\n1/NOhkRf/1IUgRC+U1G84++XakfSYM+ihX3n1Ql1CMTOvdaFgLbNAi4m5gKT\nJS927uCSpUM+rkopMRMI7WQk15cY/8npPpwZ38Y2DDVoBweBWtN/DlcSBFbA\n2l9669sNF2vhxcDEDSh1MZmzGREaZ47Ojy7hd1xDhEf/OnKDR3FfqNPgoZDo\nmNNLOzcRW0uEK21XAQ1xMJNfRiDywwpUnkifF/zNXtayC2BAWqMhVi+6AIdQ\nfBMFgu/h3l9RphmpSEfts9AhaXdDAmfBAFhm85caosZJKC6FpGtdakEf53TQ\nf6on\r\n=Xs5a\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.94f50b260.0_1617635077233_0.4965751630160722","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/typography","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0898bcbf0a2282eaeed992ab5bfc59e883a4040","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.a4009b80a.0.tgz","fileCount":22,"integrity":"sha512-ecF27LDwqfONPnfQ8Iy1nkliPCpY1LCrU9CL06RFOzsr9g0DbRMBim0w7ycMm75AkBkFDiGC5uhjOs5hy7Fajw==","signatures":[{"sig":"MEQCIENIwc71CJzQplHzmxTBFpJl4jIUSVcvG1vK7gyLUURQAiBNxpztn0BOVp347p52pkq2OqYcgqIvQ+TcsdZs4NIUvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4hmCRA9TVsSAnZWagAA6wUP/R8dywAfMNmyB0indW6R\nG7zlvuE1eV2Di0kWV8O9gAncd+GFTUR9MMPvyVwLnXrcOo2pDdOzuZssMIvP\n4wDNaPbiGUWE1Gj1YWlAavBCCrwIx/RfA5aKo/mw/BdvM30+/7M7EyIKFN75\nnH5jSRebh/Lq7SUPc3ugySjgibY18sV/1UQ3x6JzaGJvrgWW+4mIdi22DHgb\ni2bBKAQ/9Vo+sopQv4nINg3RKlfWH9buHA46XcCXfzt8nZ9blqtEb/OhqTAK\nHn+vtFazv0Aqj6nSD+6XAnIxoqSZ95cDo9885MZr9nKL+gnzWFPv8hbcc3Eb\nlCGobVaSQ5oVrSM4C+o6lA2HQB95kmH1BxBG6Cavh2JQTwd4H1MAxymxa9jl\npMGWfeGvc4wITtoOh8AOtW3rvXRiSSv8FRToLEZu6Etl6iBSlXl/kK+UcfHs\nd508CVUCuaOfCZcFhtOwn3BEItWBJUEjRGDV6dfdOra6DOrANefa68yD+QQv\n1lh27jOysqgutmpLls2rfSyfYfUpLWDQW+6dtOFPsyaSmCAwZAA+ayadYmqk\nFNDfL/PK7vJN6U5bbZKtCA75sfTPmhMYpFKJ5A9p5UUzbW9m9wu3JlNW9PuS\nvqE5JzN26a7/hYZVKU90YDR3csIM30cRH5RkO5hhzU4/E1PjAzPqCYG7tZwM\nWJCG\r\n=HXY5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.a4009b80a.0_1617660006085_0.867017414561075","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/typography","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4c18836c0b86201dc5eadae3e12275a6da7a13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.15604bd0d.0.tgz","fileCount":22,"integrity":"sha512-0YYWUo/V6AFiwUFGGUf8zdiMC9KrJ4GXAs+66dszZzk864r24nlqzgwhU5ykENyISOgkrOVIpK9ce7+ik+U2AA==","signatures":[{"sig":"MEUCIC9tehoy0kczaPKNT/UU2VcjWSQ6i8b6Qkz/f07diLrCAiEA+x3G/Mc7nGD2ObYj8OTATIOTlkuH+vsL/9ySik6l604=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5IvCRA9TVsSAnZWagAASvIP/ReHxj7hQkOsJK4VLrub\nfDdtjZOuv5kvhHSvtnNvIKv4QKzOxR0BBmSOM/9soiLwSEqSX2XR5D2n3T2G\nvrpDw8F0p8VyDCWJABpOMWZgnGMJFEiKgMFTBJJkeptYqRGHIZz/U+XJ7nOF\nnJjIwZjW5EBhMA5mKRskwLmdsxJ0UKbLnk4GYKAxO5DdfuVgXcVPyQP2KnXd\nVE87ArykEVD4r1gYMAbj0VkjmVg+xaNKL24KE1fWq6qEd7X+VXSS+SJMRNm0\nQ+rpgH3i1ig1RQTfJESZVngHrLhSu5bSa/vhkFhlJM9PjykHZs8fDWxMnDvG\n4k3W/52g2mxDoeo3ANrk/zrAV5wq84NsaBTj4iORXoF+ZEI27lJQ7Zqz7fu6\nNY9SPRCuqh74iu4+GhBsb7D5rnrkDEkzn83YbZWSA3ItokPHOXUn6Fc4qOvk\n9xud76yJVF/Ewgqd2aveDXKx13Hd/CYiB4Rfd6KuHptmbfCcx3RZta3R7+4E\nJUNP46XwGvseZzIw0BM65d/FIrKVnSia6f8G69V5XLY/byekQDSCwIXeOZqb\n8qomLG5oayZAatTd5gtDRS7G5BUSMLyjEJ46ODi9GLCQvFe0kfomszhZdppn\nOHHF8wNfcLbLaSjDInRM00mql0I+1w7kGOVfy4enZOfVp0HRLayZvBTPFDzy\nvpd7\r\n=2YVh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.15604bd0d.0_1617662511489_0.3399083627101738","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/typography","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.76da7876c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbc78e53a5e364f1bf31d42a706ac274ca4477dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.76da7876c.0.tgz","fileCount":22,"integrity":"sha512-S10eW4jb6/DTzLPDVexKqQk+Rxi/CSq2JlPMWWEdXefyTl1udZxrO7bZqJWfyLD4FDOmbZo88FaVuT9HJk2YNQ==","signatures":[{"sig":"MEUCIQD2+zbISNbiUf+3W0M0vKrjHH6V3QBpZamJ5saYIVhUqgIgXf7tND8NREsE1Pw9/rEPfgDh4HRbTC3xzzlov+AMqGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ5pCRA9TVsSAnZWagAAba0P/3A2W6i0tEjr0Nt14nbw\nNcQ2OIuqNDMPI27UAXcoNGNsg0uYkd6MdGTk6k8kwwd+GWYVfBAHesCaW/Pl\nc6sJzX8EYa2BoL/i1BdsNE/+zFo0g+AOaw+CqCht/10Rqc5apzmM5+GGqrTx\niMM2nQn13mhK2CFMAz9gsyv4WZfAZPeg/XUQNEC7V7HeANOM/x6AklCOytbR\n3SpgFI1Y0BU1fzVJTW61pica7mevt6pKcqgMvYTXzny9FyyRYXBAoYU3NyS9\nhNaoyBFKaVglyGGHqkPOcOGYyPDoLaTha3o6MM6Xr3klR7kGjS+0U20eD8ps\n1Msg7wmxZAz9eg2tmXmBELMrBI1ZVRUx5GslmVAovAIwG5R53tu5b9AzpT+G\npvZsFHz3cn6t1As4/SibG6/DLgrNgJGiAIyvAM9CycUhsdilm0a46tUFMq+g\nXpRvm++qr6HYrU9hZjvOOyhkGuyyKaB3m4fvXELeN2W/7CU0jHfHMtkZ0rBO\nW2aeLix7afViB1gylP8gTilsp5AclZ2RkH3U0TQrD1awbDZYSv/szJe3ocDo\nQAMO2jEectFqIEX9CQEjAQX7StJkBqHr7pDkj+WTTfYiPcM402TlfpbYTEpo\niw8brphEzJEN+6b7Zu3tXpK9w5ptR96rCeKnuwcqujqFx6q+8rQfFdKqhnMQ\nkqYB\r\n=8K0G\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.76da7876c.0_1617759849307_0.49488395864849344","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/typography","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23a01f896d5caa6fbec70bb0457bf9b44dc44234","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":22,"integrity":"sha512-w+ReTpz7DPJDkAocypywcm/033utc5BWBNVTUnhxzEHL3JVGSuik6N0RLxsuyiAlwYqBpVqkD/3eA1H8L9fW1w==","signatures":[{"sig":"MEQCIF+KHAuzPKeOxaD9di/+7HA7+X8MwTQdlg3NDh2juojYAiAsKmXY4QSnkuskeEvh1Uucg2hpXzYn3E8duMSXeS2x1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+nCRA9TVsSAnZWagAASckQAJbprH6bnrPX/8iVGza8\nvVcgSVOCd02MVkci5+AAVU6HWcJblcwmrs1ZjDbYkUm/37sJ8rrBx9v6t73C\nbJiMC/KrzYgYjCEEcwLCzQ1d8e3WzZF317FwFMYGIkZ2iMFUpr01+4TX9Oxu\nW22OMa9k/hrmFUXh6Ldb0cP0X5kxsB0YpHkaQt64hmQinaSFHTCA4OM8xo4I\nLBDGTNskx9xWRiQXs11APIFYdMCV6L+xCGezh2MDBBRtEhC4S4QgnUexbAAy\nkCZ84I2GPdp5NWrjG2uewo9hiDM432olGIfHz6Ah4t6MwMR8l42hASVVyTii\n5Oz9WDt1Sxsv7a3sXLgdICBciDgE5SOyFGCP06S9miQUHnYpnjv+3U30X6WK\nkAQMMvC3DDmGtenif0H/ij7iApZbama6Dx1bQlGTyLz+KDgZdJJpCvNQGoCN\n73X/SrzSzvedLYX7H0G/aouKFXK7Xe+VoUOqySyxuDYU82y8NOD5aF32SHKw\n/8U6pan3fe3VMUiktGx3F9yw2L/ZpzFRBm1TglOSnl/s/kUjHVUWNDRfB6yG\nwKOCq+sPP1kO1TiF9ccHc5N0weLltKawrP8jOUCDLYho+ekGy1no1JZV0pjq\n0aKd9MKL6oqvDKThFmXsrPgYXXMr7X8OwqwsGnbrrhZwsUAiWymFjqlX6QNC\n+ChI\r\n=jcWC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.6bcb6cbd2.0_1617821607041_0.944418769729011","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/typography","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4783514c0e29aa80d8f3a5ff88b0e0040d5ba087","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.c91e8d141.0.tgz","fileCount":22,"integrity":"sha512-xpcvkKeo1SloRWgomeTxD1bWU5YhVdWd33L8K1FtkFHD1mhN7o1mNvMPyMyV1KK6IZYeUVHeb9Z55CcfelgQ7w==","signatures":[{"sig":"MEUCIQCBlrAn1QA6+ls+a2J00LITURM/3pYyM+VAyFHZqiLquQIgOGjsxaNVmM/ljl0iOCsi3LlRKk6fZLo7Z58JEMxjb5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCTCRA9TVsSAnZWagAAfPEP/3QULHMAT2PGtrMQQCh8\nFN9gSVC6931xO/ofJcB/hRpfrJThoQ2D5sl14fviQtyFtwc84M3JPSyjsCJp\nse0U8NJtw/+hLhgi0KZ8kjRdgrnS2CzD2O3kQPBhCLtDbE/T83ht6zxmYXKD\ncibC8EMZJnsbH+WXr0GKJ4dA85K5wLYg1h+DL+0s4r33CFTkrJTZYg4D0tFI\nQXt95WIEzzwhCWDeyURIe3xZtmEl27R0GNgK4oOu8DPNjDNcTGcr8izmiWLX\nQFlxPtUamh5qbqXQ8h/mkpmhR7W29T6iKO659aw0BZzdMVwwTGKUcuhiFgfR\nSK8IiGpgvXpY3i+9g21s37AwswTj7dcfKDSHLHUzZDpRUvcLZLQctLGmee6f\n76fH2Al0dJZChPunekAjOOotUWzxG2wu2DNSpxmqwLyHmAfHv6noOiWHpvRV\nqQLOy04vcopwC1ZkStKBIe44Q/BJXUQyyNE1UT9XbMkAyO9nB/nzFA6B2IYf\nPW7eQOusJD8BkSZS3LjOhhe/JFzThiUe1VNGA54jHn9bOV3LnmFwdzMrSMu1\nk/fVfyEQe5hDQ91dYYmt2eDKIuJOoLvD4BH9fV7cDajWIPZUnlCIkEcY+iy9\nY3sRPtyC27Xiy/vmvJxybAEOWyjQqQyIJ65EhXpT5rsq/Wo7hZTyxl/hEVLk\nJ/og\r\n=uI9K\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.c91e8d141.0_1617821843084_0.5290004176961507","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/typography","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f77c50860.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f78d65a4bea5e72648fb1337d0df0338b9ae3ea5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f77c50860.0.tgz","fileCount":22,"integrity":"sha512-PAEDXufHTR1i33qc0/ARtTGnt/5NtmCduyNgQ30oTFkgQOQZAbdj7bVsaxGsoC2TIgodj1ID0xNwpDRJC6bN7A==","signatures":[{"sig":"MEQCIFh1fb3eOp5AW4IjnvXwrDXdfgQZxreHX+5wOMxuj4sfAiA2GPxp92ygV/nv3ia0EEFbn+VWJZx3U6bu8DTCZHyxyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyK0CRA9TVsSAnZWagAA+6MQAIH54cbKMvTecu23U/gi\nQzT3ycenSAf8PhxiG396mcQcGi31Lf2D5Hju09gTwRRA5iaZHzbTGm8SVAE+\nPycH0bLYA5mLFPwHTD2f3Mj0PHXQvCDF3O8wU/HYdZ7kSoGee9J2Ta4KEbSc\n4CyV1UZ7e4RPbgxpG4Y/zBUe1hFSjIPte8T1PPvWOrMJn77Iu1+i8ywpl2nl\njN5+v4g7xBblsPw66/37Azsy3HB6q3cefOZGA9EEN/FV7pFmEcbIQzJCDOyi\n8CLv0kAE8n8vjj1VOVyYUe8ZpP/tMkd5tp5zYEnd+6hmSgL14e+zljFI2i5q\nAF/PzQmXjp0cWapJx8D0ZE8CMkOIHif2ZYaGFop+bn8HkJLHRsH+lFiwUVNX\n5E5tTag+BHpVyQHDMyDZWWKCI1cS0tIXizJvyw/aJz5wWCwftaV9gOVZpDA5\ni8OmoixF92iNEzJj2CL0KXh/xONWCMERiGHDQKu2S+g2LIprO7u698tvA6lA\nyr6XtVlZLNKyYXQoXJsgGLQV+8LC8v/xvV4xL2Cw6UnkdfwU5mzs1eT5vTbr\n9CYJZjyRQjJrGELVJoL2JQC54UhuKf+0zOemypCsF7XxZK9vu5tRtPb6VPhO\n6+GPp5VVHq1ud5TyL3+f1lpHoa8AnRLzyPsq4N07XvUI2yRVhhCMfnH2qboJ\nyta4\r\n=J9kZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f77c50860.0_1617896115679_0.2542630156321113","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/typography","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2003b26fe389f19c6e0bd0d1a8f23857fdffc775","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.367d88bdb.0.tgz","fileCount":22,"integrity":"sha512-I6VlnrcHIJD4idkyM5ROQ9B90lg57SRcYe1NQ5UCEzAAbOA1R2BK327wsKYUeCmkolDaYJQgMryIMo/3roNLyw==","signatures":[{"sig":"MEYCIQDC/ApHQEk2sXYl3vBDLw6dnug5gxGJdfCUOsk/0QcsCgIhAK0vQ7/O4UibE1YpC9/uGejrJWH2Y8H4wPdA4gUBw1SY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzFyCRA9TVsSAnZWagAAdDoP/Rrrvvc7hda1upt3Gd3e\na5GHPTpsKsWiYmgVfasvAlTBnQVLpqzwKEFAF8iC6GkH91qW4Dz/Pe1duyFG\nFdhl+GaOZbBsAO4PhqvA/tWB7MSmqM3hZqNm51tsd94OIv4yuMZQhcoXaBD4\nld1W0Gq3TNcI4Wn4AVNNnA+/ORr3Zco8xYwf3f5a+UfxNm8N5AT9Af06xm8N\nIuYHl6KENHFBAbAzO0ZN/twYeiG0AFWEUWOeXhLdrvlFSZ59H3gX2C4dn5La\nyhIihEMLr0EeSL4zN38tE+XAwEC1fA3emc9FqMWW/Pj727GZIYoXqObkAv3O\nRfe6dQ2gKi0r90PkMquRu5VN6w3cKttU04hFJS4+Ck0KMqQn1IKPW/xFwaII\n+RlH0g2Jl/Au2gaua4MOMosDGKO40q1SEaX2VfQOQrsQF7M/LoiMO64ZfoJi\n5/7aEPjrPPSGGCqj8ZrZx7oiVyiTFBg2o8m7sfahRCgReFtbOkhDwvlRlvOS\nDf8F6iD+I3ujBLt2/WPKw5uVOkf5pNOhj0WVwp62Qo4BBJ3YrM7LK9wu+gNR\ngQ/wLuj0rmMMBagWZndvULS0dCqFExRbWYcvPwKOs1xGmgS4VzRQmWiknwJX\nDhSqM4RdClf2qZ0BbKBUWkW9oXfIB/SSikddzVAeqUIb6pQFdHO9GjYpq8s2\nrcld\r\n=S3Y8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.367d88bdb.0_1617899890480_0.4855899522926015","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/typography","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"441158b1f885f03e8955359f8298434ccca1a929","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.0ec437d3b.0.tgz","fileCount":22,"integrity":"sha512-hDz2yilCaDnwwfNeucwGMYj5/FlTUeT2E6dMMLqHtBKH5WvkSOHYg12fGijL4ZRyy7n1ohcFsYZHSrpbH7kDYA==","signatures":[{"sig":"MEUCIQDMSAqWl2R1C4sfUdjzirGnuudYbFzvCaQYs++T+cW8lAIgJ0D6GGQB+1lcVAKBzACOeNobMntD1dlRFFLLXQQJy4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1riCRA9TVsSAnZWagAAEbIP/ikeLzI2w9zU97jZG0Bh\nzEhbV/eoQkSywHdIW5ExU+X2G4vfRnMoZ8GfE6u0RvGODSHZ/3anS5hfQDMx\nfrqEcCG1XJPBrjwxBYVhXAEsKV+63pdbJ2xWpfG1pq3WCY72P+8/8kKBXN1o\nWnx+VMt4YKs9r1qXVCISEo36jRqFzHQ1u9DUmAKSxxOHwYm9Y2Voyfe+wqf/\n0jBp276lZJYZLOjKv7qNDHy13QyvlayHmpmvc/kuNUclm7owq5J+98aHK8pA\n1JrqGuXIiP7prNGPHg9x9+Ngs/V3RWHUSX785f2J1KxmPr+XTAvTRKapRA1w\nz7k6LwlkzcWAn5B3XwMkt7yA++ScjF0PPsV3FopLdeU4hE0TrjwbH7HclSAj\nTdYCCQgRI7rm3TbWfWckfQRa4q1MtAH+3f6KCC00jEIq4ZsCNybBWb1V5pX3\n2AMn/LwK8CFXD/Hv+gAFCvz6HTRvzqLZPeuAEATy2hVDFktFWGMAl8jLdM39\nMezsRzW62t3V0+31rkp9nfBCi/ry4GCHPs0m7pmuNFtlw0WHaKFb4JJEWTgc\nyS1YpSV7A1d3BzoDZscJ6NJ6H8q2FSc63Nd4iKMJj67K3ngRmHXA7Iiybrcm\njk2IVhEn+5ShRRUiVO+k52Zqmkx+WL9P+9WrVxbflbEL/GNsogo/ARx4/N2X\nG9P0\r\n=5XHu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.0ec437d3b.0_1617910498033_0.7895120771354225","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/typography","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f409117257ae0174a83502a6f1f7aadbbbe7548","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.b2fa996a1.0.tgz","fileCount":22,"integrity":"sha512-aJ6ogC11CS+o4WA16rw5CCnxvgVoVNgSU0kch77+6xE/V61tEY9Z9q8Mgc8IPShVD9LfGM9VrJAJHumI1DZOpg==","signatures":[{"sig":"MEYCIQCck4n1iwhdp7ptL9/gNKKcKOCYvGKH5NzYiutzxkQ34QIhAOtQsTRGMGgP64QpU4qgWN2hb/tTbvaDY09oS5OXU/i6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG5tCRA9TVsSAnZWagAAG2IP/3T8559tdyTfZgJnP3bg\nTZFxHgM/APj65l4JUbVRn9ok4xoXFiIM3W7B3uXxDp4AMXx6P0naeFpvpIpZ\nzFEo0H6Vgk8676O/EFQnZNAMHlpSz3nDIwBieoIn3LbqTnxtmaNs5JJKlXUd\nbGjYMmb3zSLqL0daDr4VbsJBCSnK9299bG244OyzdJaZ3AUZWyoLzs1T59tT\nwSbUB7HamiHj2ZMVq/4VpWR2cMWWl8eCx8kTW83lr1vf+wL7qVkyrwIq+8fn\nMmPcr8EnJLe8lHBxDLcaMtnLdah75Mz8lmJS5JiiX//ihudi00Vae86ZZzwo\n5m1JSh1OVVtlMMPB4HPt1p/tXfpcqPT/5RXr1u477k/0NMWWxsgusuPkVlHf\njnTviRS/PrchgYLmG1CqHRCv7/YXf/LOrM89ZitTBG2xdbyCFE9/YUDbSqb0\nY9B3sjgCwy+nWEaSr37FpveHo9no+sV0ZnbvRXK+Y5kdCNLobuws0ZJMYjge\nIPXufI5Z5tFvcgq9+7cES0NjeEE30XCI46SlXSYrSNavXlAO3C2OUmCBbGfM\ne8DPUnxmrD4Ohc5AQN2MLONliUEVQzdZjlEgtqr9ZpShXCrwqcBA/YWXkBjT\nlgbEYVhv0q1bbd/bMScWrAM/wiWqsyA+AtyphXUwZd/ClOXa9jzJue39/SEN\njh/z\r\n=l1Bu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.b2fa996a1.0_1617981036484_0.8533559389631542","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/typography","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.24255c408.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"327eb54c06aa8a7bbc21ddca44714ef420a74c20","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.24255c408.0.tgz","fileCount":22,"integrity":"sha512-+xKL7oRRQ7sOur9iF5gtM78iIcoomfR+SjDvl94cCwBe21cpjLXc/wMNmERdHjEx1IpQ+ea/tojANMJJkDbVwg==","signatures":[{"sig":"MEUCIF4qnS5/DXl8wBo+XZm1VqfHawi5FnVhXI/rm41/HETsAiEAlCQHO0FejIIQ1MYKbiQL9sCLb06EJutvqmXt+qaYY3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUKCRA9TVsSAnZWagAArigQAJ3/mxTwEHdJYJt4cQhy\nHOM2HiPlXW0BSlHts/yraatKavonY+E5y2vEZzd+YGtebWw/I1qn44C9wzVK\nN5WN+IBexOLqR2c0YBPuin1GNbBenlFtLTHSul/yRu0cfMe72+H6zcrcPWZ8\nyyr6OzaIg0gtfqu0lFcXv2KKz52zaMAxjylrATqvxUJH6o61pGbss54vtfgK\nEdqL2i2AQPsUHBhe3dUfyzudLFxNKQOxwh/Ad6V1WEA/tiVheJy8bgVHzesD\n404dbhk7gBkyuY8sSW0ZHSVCk/gks9NgwsGqDkIAxxgk3Xk6g3eexXpXBL4b\nfVkzUk3N+04Gsme6kiq2Q7RG25lpFW8vxK3znpOwUopd+wbnALoUVbXdMrMP\nNxQK3VaTQl7dcocmxkLV3vd+xYSltG019PxTMyyb/o2ZrLcjw2i1e2DTiORR\nLWWB1YW0enqN2D3LGvuMO0vuRx7KSi+yHWjR5jzoglcCLLcJXTd8rCoAt5vf\nZBKlbz+9FK9RSWJaOWwR9/AgGiamSjfUZxI2i0Z26U8W3uaSEHyW+Vi07SjY\ndtFXp4ilXH/kv/fT4ohFy6LRCDyM2YjZyyyRlbntzWup2gjBvNE4AphVKzt1\n18Eszrl9EYB6xtFX8284yRbNAN4rcnU8fljJI3hH/IEwrG96RcaSMUgrV8xK\nJIah\r\n=JFZv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.24255c408.0_1617999114121_0.06614007546366762","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/typography","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"738732ade81fdfeef890830f8426e79f244f5541","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":22,"integrity":"sha512-/XulT80c9751vcVHMHCrSHBtiqDLfIQqZwXy3Oxzfp2TN++/5rnmkJ0jIVSb727w3KFxe56/bNLBBAnBElR8HQ==","signatures":[{"sig":"MEUCIEaU1VAr+MrUQZtPr7MU4PaunCBUFbRcN+PFnlN3e/5VAiEArJlno2oreqh0rzEqXwFcHfNzUw+R8x9aN+7BRvyHtos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNrWCRA9TVsSAnZWagAA0voP/izGXfU/YDC/aYRi/SwX\nVWp7O2DzrzPdKR2w2YjL8pyfLMLddWC9hIdexTUZ2RahJmwcX7/ReQTdnrUE\ntIjHxODC/DudHIvea/bRjzMhd87MeEPH80RLgjkin4AIKyLE3PUhprzNSFiB\nY0egcaKD7BSz94NskDYXH9n34HtJFNLLz7fGnMwVNT3keU5cbuUarOyfNFjT\nSx6pIUx5f6dc+Gz7b+2YkHQKe7kqsKiK5IYkU7zMpLmf6bXdpX4jpyHVp8nf\neuKCyD27msn0i0ulViVzlgDX4WeBYIXor1p5a/U8UXwgoC508Su0jkuwCQlH\nNkVvQacYLa7iaSk2RzmuKaqZ3OC+Vrq9pY6Dqz7hTP41jzYSHBFT+q+grE4j\nYjqr5r8Xr+FzGU+Hv/bvgWjhgi3sYzrQ9ftmVRl8YlFataFBGnNvcBHlV9/D\nikqzCMPmbEc2gRWcxAzxWwOTBD4SGppA9feHU0q0RaLcde1G9OBrKgfZmzg7\nI/iuKJB8kTZg18A9odMh5lFBW88sgbYNpaJgLp91Muh5QIqYsplXPt0b9opK\nfjzoc1m87E5EXqia/vUreLwkVFwZhAb+1dHp1k+JcEAW7dqemlKpiLnbtYnB\n4L7Vj+dU4xS4pI1vvzUqMXTO33+fEq+KfFldYxiWtgpUQ3pJ1harMcDaMQqY\n21UZ\r\n=gCAv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.7d6a4bb72.0_1618008790539_0.21544510876269007","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/typography","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.352b295c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d4971dda0511a5d91306f831e1bb9630d080fda","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.352b295c1.0.tgz","fileCount":22,"integrity":"sha512-sPdzwVr0we4cSTwHgaaLWd+N6r50Jh4Z/XjH/DCF74XYxKnAirRaF2iWQ2g6gs9D3dVomjYGkGRjwXWgyp86Pg==","signatures":[{"sig":"MEUCIQCsFofmmbWC8F/I4hi/cVDQLLG8cLKpO9BANsxz+DyrdwIgZaWEKQiConIaymBDH4+sQ6u8JhO/oMl6emds23BjkXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI4vCRA9TVsSAnZWagAAI6AP/j6D7wkkvYaGfpGJP+0F\nFo7olFnN4AfjNqefZFDdftlRJUjjEBJwj1xdCVJBQMi0liFYvvc7Fo78w3Ux\nG2r8JMjXJ/eCmqXuIl54oxJGlW81mhJzeKkT2mcOQPWquC6wY7XlR5HwblWO\nqKWH4jToKSYr02OsgU2oU1Fe+QGMf2R4vBrqt6Rg5NpENi1bpi/INMgOzweE\nP3XtIps2bYeSLQ+xHicgnPTt9p4rp9359tpygQVpgm5IfujNEyeSJspmTYp/\n9gQnOkQYQuQYxV3rNXxxQT9Gz/JCl6CwRiRoux70azTQe93VlGheCO2SjxQe\nbkmXW1n2wEbJTAFa6Nt8gaB4X7IzXj7vriNz58vWpXthRvXVbbuVq7iFPnO+\nglro4Hlnqgj0UK69dR/D2enre2jhvJFg4NizSuAvlX9ejUsPE4KoaMhSydLT\n0DUTvipnoHtb6CzdrqdkqIQs6t79RsnncZ3nE4dKmm3rWSs36Hqj5HtXZk1/\nMuiv+8ma8FAXPgMwe7L0tMxJdy6nNoi5pcoXAYhZxOk/RyuBU7cyGLurFzXQ\n3igTHvKfWROgNFwmhCTyV0JxgoJr9LTN9j5QsG9NdYjcfGtWZrtNtRYnkIQh\nY6XC+OLBxNs1W0DF1SYvMYytIZAJIABnp50FO8Qqu09CfylXO5uG6CqCMcjE\nTOau\r\n=qsxG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.352b295c1.0_1618251310943_0.03924656502157764","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/typography","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"004606cdb6b3c7c1be8cbf2d2166c5781c70c19e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.ab99b8064.0.tgz","fileCount":22,"integrity":"sha512-1bItnv2ewZmMasWqtwmNVShVEB9yynbZoyuxuooU0sQlgPgCcuPyWRVVjLkgBHvfVHfxdPFqxnulEHhiyIzQww==","signatures":[{"sig":"MEQCIBBkVQnZwHAe3Dhf1hAAKlkZdiOHfC0xhydUKUSGkgzjAiALOlVs6dCsq881PzvqBrC1M2wXB1SXStGZ9ATQ7nHztw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda33CRA9TVsSAnZWagAAqgUP/R39GJA1b6WAaE2ZW0Tw\n5UWqrGWgFWajeAo1/krLgl/ghtrqP79Sa4t0zr5/hqvF1joApbgjpbqOfr0e\ngXL8GTw61XcWmnaR/QrLeUQ4rgQJXraqsvL8/sDA+D0NNo1CltGfQUqyvY3V\nyaEQrrCPuEz2jQutYOxCOfV1/ARkd7WrvSF2VdAdP2akKBPq0a8tZ/Am09vg\n+JZUkr5vNTktpKbSbGUJ/bP/qRN+btor9l3xhJVAI8XXrCw2NpF40xHh6Xe0\nuRv0VH3hdaXIZzuMVy47yizAMpNoqqiWp8rKbhC0dThGShH4Lb7VtDYGQWJS\nfPQU9Fvm6UfWlmwguU7OJo5jKIIyLmH9TuKwbSIFdHqZtid42HIEv1dm2Vwx\nqsqH2fgEkwqBqqpuOBhr9REBmHCPJnEexMdhKhj4NHM6AKYbdBAI0LHR9tNV\nGvJGtpxOhwE/ywH9e46qlDwyDINnIGb3W7fsNyYaiO5YpP90Mj5jpVkvpF9O\npLTL4yQBWW6E+w/DIAc72qZ5z/kkG0Zk1oF3xuVZ+uXP78NpO3AJZ6q8Fymo\nhgRvH4KUUDFZIz0CC6r4dNP+ixEEU/tJUVfh2KIW5lmEgTZg0uCELVeIMat+\nzqyWJcW84NRnSYnDekCrMi+UtLoFTPTES24gj5/EVg59xClfCYmb6ZBBhufM\n6xoh\r\n=uZ50\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.ab99b8064.0_1618324983253_0.3594142881728666","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/typography","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e438b099fb102933911762468ae6ff604b23ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.8f0a11e32.0.tgz","fileCount":22,"integrity":"sha512-gn3GXQdAD6AOSCvpI+53l79ogswYOx/w9OWEl0fUugyMVvwCuujv90/jeUxt2TJgxcxKP5vf/tBS8xFQ1F7RWg==","signatures":[{"sig":"MEUCIHH5oEiHzyiJCRwqvyBCMMftLxwDQjg3FA7+Prf6V0u3AiEAn2sPYlqPRKRwZnxePvYodSIVUmowbV/LYUugPsxZx+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":111128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0phCRA9TVsSAnZWagAAVgQP/ihUhILgtt6H0sCyy9Xi\n3zaomwiMQ9OiEAf5HWG6IqprDPkn79JN2n9t3lMuZnDDcZV3zCh+myXRTuVS\nF6arJiWpfDkLMijoErwnEgA+b2/OD3Yyfjin2lloSy4/HJNU+f9yq5kBbpc+\n4BsT6Jrj7/4sTDLIaM4/Yr8YKfUadbDUxnYHlwVXrAvLrN5NhiVHFQUVOb4x\nv5nXvDGMl8vAWHgsPhtcyPLtxaLtcg+g5+PMagEkHfj2lDUDkRT8nyd3Eaqb\nSyWUV1DoXGKnck+f5KLJT5wwwUobEDwjaGl5+AKvhBn1RElk/QIgM+VDDzH+\nHsLuHKGryR7MxxeN8h7jACTBUDypjU3+qxxy5CrnAS7OnPwZp2cfciP6jHru\nRuiFEqil7svB6nwxlMp/4jLgWNbeRFUoYoKrp3nsTCjj+owaFp33l6AXRI34\n89s+lLiNyw5Yl4VB2HdBIqUcYcJgs9e036DTIpygHHhKxiNGjWQmTEgAu4HF\nkzUp0pPukn5ClzQSY9VyFdsmHKxws38frd4kPXYeCs5IUEZhksdUCUqPD4sp\nddh088SpqaZJFW+6/fSxwe/Zx/+PxV0f1pSj537EoKtnS7g6LglgPxsdx7ug\neXiohVSSha740F79XpdoYk8IMdROI5mYpzodY2xnrStAq9/P+SFaE3yfhe2n\nUWYu\r\n=Qa8n\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.8f0a11e32.0_1618430560545_0.7424694874085389","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/typography","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba4f652af0251ffd4ad470d7f2421523286373a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":22,"integrity":"sha512-99Qp73a8M1QE9UvcUKASii+6gqlNqmpLVAoHqPVTDl+0o6UtxOJHrmLaW0YzMRP2tQwyh5DRXlAmQh43wRQAEg==","signatures":[{"sig":"MEUCIA3k6mOGBFrMbjrWKs07XsqbiajGy2TATe2SMONeP/rOAiEAwThjxcLcdZ58DnmjsVfsuZC3WmYrmt78BD5N3yOWrE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":111128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIABCRA9TVsSAnZWagAAW9wP/jlDAluw1DJXzvRuBuUv\nWWXyJAmnQ6OtzrkZzMFhOHja0qnTscm6VK/A4+O0IysSVAdLeGjUN7b7JEsb\nzfjMJavomQ899x42pZg2xbU5WDGX5rODcKiOXI+haI2xyc/isXn+8ZsMG9J5\n9Wi1+AYb9PsWTtvGNewYARZfFVeYMx9M53rbjJBceXmTLcTo2XuLMOyZ4FGy\ngU2FO1/jBDd9JpgNSIOtZJ5f+nvyY5P9iA/wNRWLbVdij8iQHroe8J6L//i4\nAFyW0ooT3QkrEYWbsoB3vIs6PZvWrH4F8eivLRrmFKk+TVJLK8ayjkh7PkBO\nG03vWkwT025ncgmdBSemzxdiK+lO5hgtUxrzIFRk3pYfEA6NzApKLup8IFAy\n0wbIecN80sv83k2GSyA9Ud97+8R5v2wOqrqHvevtyrZlsBwk4L7rr8+X+Eug\n/SnJgRkpN85AIg8mrauf9MMtG7WrXABm7oeNNetjbI5YJYeWIOlH5PLYtt4i\nLAcHQy1r+s/y9nxbW4PV0aZOea/DmgDtQ+ymbD4U6wBWxJQqfHkjo+ehP4Oh\nkZVlzm2mjkpsHG+6BqofIMf2upbcDP55khP797JhmQ5QMs6HXJ2Gk51XrTyj\nDe2/ij+fWMMbq70gPyNcEvNKGHIIycqibTfgZt2T7cP+Axtc4c3iFcP7Elty\nvD8P\r\n=HUZU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.f5c6db8fc.0_1618509824808_0.5839025572047947","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/typography","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.3793a3143.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06755488a428d5d022ebde11d334c489323e2742","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.3793a3143.0.tgz","fileCount":22,"integrity":"sha512-W4qFhUNCsLB+xE2NVYmb2nviGs6ABEnssxxbzjaTax4BTWCEQyfFbfO71/VgY1kileQzK3silEmqgkgnRSTvjA==","signatures":[{"sig":"MEYCIQCRcyDwSwMkFGRBl1e3VrnS0IAswm9mWuw2nS40NvuTxQIhANbJ+7hwPygzVle/wut5DlD7dhCjY1o4g0pCBnegD9VL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":111128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZhCRA9TVsSAnZWagAAPZEP/3s518kIJBZFd66gG298\nXgYa7yzR5OmvVPvuCaciMtnUYj8DMI+wj3Y+jJQ0wQbo2uQqgdkoNuuezCqE\nfK4PaWdM3wxar3F8bMKjgVZ4Ja3EKuASQqtw8qDeWxu6RgpXZ4NLO/ZLP5bA\nkpOZQ9FNoDhiXdqqo6lTj+1iQqvF2TyviEAm5c6ICsGqsWZE5ydA+D8P375w\nRtUhB4r6Ap0nhPGKwKLPxSTDHLoWKFQRSALrRbYzfGVI7+IfgKh2BuGR6a8Q\nSqrAAZ4bgGEVBW2FoPrrhXh42TkextuscpAytAY0LSqZAtvuGt6JEmWj4rHS\nG/6Xrwud0mvZZIDnDBizNzZf2mkjrBHR1JUSLDOqmAmE8vT2IyOBpqgIQYha\n14u3INriLZpWE9cE+jBXT7qPtCG5djPPmgU9GwFfiKAOHU+NvXeTNxODLqaP\n2YMyRKTSXpXhTict6/UMj8An7cgbjT/wPW3qTY0Bxwg4zzrRog93KtTr50q5\nPNjexDtlDUyvn2mDUtahB0ENr4fLcrKKHl9bj417rYYyyfg8+ccZogHN7B4O\nqObvJPlMpFGVAWOFpeto7Sd1j5tQmvQdN4f5IQeu+n/xvj1hkYjWCSMrbJez\nhBTJvRu35rSEbjlkQO3BXUQhxSem954vf7vUdCK74jTpCM+YXAdyHZh0DRkb\nia7s\r\n=If43\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.3793a3143.0_1618511456706_0.6300068473422018","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/typography","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15761afd5272ca0084e40106542df98ddd158391","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0-canary.bc104bae7.0.tgz","fileCount":22,"integrity":"sha512-N8UnigfdPJnWF1MMu4L0RwiPKdb1pnu1eXiAfjTwH+Z+ePbRRvcq9JAUkOSEfWQySg4tMd2t4vS5ucywEVhwyg==","signatures":[{"sig":"MEQCIEM7gu2SQJxH3akyaDgMiP6BTNCeS4VMusP7GT8I3RH0AiAkeBaXuIYzEyz7lQcqwIbIWNOgr4+vcXZI/a+S1yzoiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":111128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJfpCRA9TVsSAnZWagAArMwP/21krQ7ERFnhxgOpemHA\nxSJ2bGrv8HYYN3460cE5iqJ2inL48HjEPRuUbgJ4o+FApBUdYxX44yyroV3w\nMdN95x7Ua6HauN4/wIfBp/9cxBW6f5NmI0LTqzWLl3TKouzpwLFZdaPyKrTT\ndWaH7srPSKzwk4PE8AQmGGV7F9W5Szw/bAmV2IIvrePSecTwXkf/M/BmKSQp\npZryAtvFt6JDdYPCIoY3ghQ7EdhF0otAvChm6huNGa0ywnEKtXfqRjepcPU/\nY9KIezfj/DBnxw76gBWyabXSKEsqmKEo1OS6laGx3qti/u+LaoTiI0Iwm0Ss\n87ka09MZExsrMYJYFYUrTVy5tC46LByTCO6XlZrOxnN2eSRizkJjQY95kIR0\nw4HJPraTGymgg4HyUVCte7EwWfesaFABl8mPXVNtLL96rmVGuvkpYkc9frb/\nH/uVIR4Jjx7Jd7bGIBfy+/0a9TP+0ggR+wgo/+x1QwST+EzRs+a3n+xVzx+C\nmXFJpntFjrk7pcERDpXPyaUP+LczccPqV1i1o03y3B4txaJetZ1gtdyIFtfd\nwIx/9k2gKm7Q669PKHCQutdpffjoZ79oZOuj6LHq4cNakX9dlNRx6w5MWqxK\nkFGmRzEO2879p45eI/tHnSkFY6mG93QtXVCsMGXl/pbEgTq2sJ6s7O3JmkUY\nvHU2\r\n=bfkk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0-canary.bc104bae7.0_1618515945478_0.5287642673801736","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/typography","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac7e1a94ff3fef15d2cc4ef736521bd77a82e786","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.3f342c3f4.0.tgz","fileCount":22,"integrity":"sha512-BwBOBTGOJ4YhHOc3VNzdMweTI6wLGwdbW1q2XMAbRv+sPNYCCPN+6VDzuOSnmwq+hyUngKscBWFcBXxymrVjsw==","signatures":[{"sig":"MEQCID3R5qUOpJfrAcyjcN5VJt0w4Ub6xBLH35ZEzrbyFFsXAiBo1usUv0G/vxfTRLFORkridbrIfPST4PjRcAyjS9D4vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":111128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQBCRA9TVsSAnZWagAA3i0QAIH0Txx+ifKWeyKWfkeY\nFgC4qrwcS/K/A64VPLZtpMLlnRcGFao8VPlkrZPvCITq9bSmty9UxNwxCUzX\n0b2/rw4CEYlchwGMAC3DMj0e2BXChbPH6o1F6EGbJMuVqQXVK8hJxuryW8iW\n+kh1G8COp5mN9VgzaS2woob/AxTtAl342e98lNmnRuOuTMp+hND5qqXmcpBv\nBMg77wU96dKeNIw5ImiTKR7gN+KTjsfZbfTHNboKlT8mos35c/yWJf0eLoEE\ntfu/wLfxLODHouPwpku5txOJP2EZyflifWLX13apE035BIeyWhNX5FujrML4\ngBYI5dEjrB/+8uHwCxzmeB4cQ6buZV+CV6s44eSTD5tPl+SymNxcmsORDRW3\nRZXhdc7zvmVOywtMY3MR/RcF656aOBLuoO4Xba0mWnyrJgntqvEO6/IFe15D\ntvaZJqSAK0b5SMLnXcFp0BhqHxoh9cHcpbI/xv4+GOeihyCGmVO+oLl7mYiO\nIHZAQCmWSa5yoZYs9PGWB0koQmqUdAfqzdkiGrci83OLcSw8tAKHjAz8iEx8\nFD50izK+EjHGNrnftDtc3XcJ4m7AWQwgTq2XXnMxf4tTCk0d1ZSrrX7bE7jV\nVWVd0hXoyeuJI5CAyHgpo8TxnQIVM/OZZkpm3aHbZw7Ok64cARhFbFWEgctX\nZMqV\r\n=FCIo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.3f342c3f4.0_1618527233397_0.5064241258550009","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/typography","version":"11.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@11.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23175cfe2e2409c79c8b1061709bc29dc0fecdc3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-11.0.0.tgz","fileCount":21,"integrity":"sha512-i9IGO/ZsF+YnqC2+PpJapt/8hSXOKFXaqv6B9uUr+iQ8GD4bEFpxm5kChzH918wJpCHvxbTYbnR6buaF9nkjCQ==","signatures":[{"sig":"MEUCIHOIdRojlEifTUfecjZSNXw/7sY2nbgSMcTW4BcfQlrVAiEA+P/CXcdIVIZNCB5S0wVRdHC58RWcZT9UZtEm6gQ7980=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":109839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMTzCRA9TVsSAnZWagAAg84QAI0R/HRFHYcfgMJISx30\nElGLdzkxhCAuGAFyfSiHAI14eVz57zFu69gbT41CkQ3u8TNVZMUH0HdgumNV\nIcxt7/xVdrWWQKx8uiXC4EcylfXmiXkXzTVle5KTyER5oyr3bjX/KZlZVjWs\n2NkMKzCysl/U0BDomjnVJNiANekmBat4D1dKhEuowddeHLXxYjme/lDib1ip\n56RDUQSRpOLaikZ0No0OFk3cbNF2Y2VnIz3WvdTGuFwJ1KL7T08GNklC8AuJ\nmRAtXQ9NFoTR4tffHcglFkzBfQX0FC2m6Ul7y6eHytq61emM7FD2zjEUG23c\nUBLJCOcjvU6TCEbm5xyRmWmcCkGlsjpYkJZQclGrD8TbzXi9V5/mhbE3E+PO\nM3VAmO8pXVyzA1Y2nAAPD8nmfI80XIxKcmAgLxHXPy+bweMpBiSd8S78ndXf\nKKGVYbg+cs7QOL1qemTNN2jOz4hZWekMhlB4avmCHA5YWmenLq1NdAo88HVi\nc4xQ4h4l20RkExY43dUQx30kvPvIxvkRwMDkmgFv044qSw/JudX+dyvVOORM\nYfKuXoAZ7H6FlE9Z9y3XcSmgaMjrIRiHpnXBgbc+L0Xc6c9FxPsgl8DKLgBp\njEKXcqDnzDGo8cmxb54CLbgc8hI78Xomc3ympyc8BvCQjCyuxEBsL3apH1Di\nQiFg\r\n=c+L4\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_11.0.0_1618527474756_0.06206549673725226","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/typography","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acab4d333bf3d9523caad8d03bc88a81c2fe7416","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.2ebfc5374.0.tgz","fileCount":22,"integrity":"sha512-ZeNsZcNZs7FT2KnAptsHnQdCcorQM/Yv1m26Kuk1wMGvbhu33NbjJKx9K8jdGL1POeB+KRIGRvCExECy/EPBsA==","signatures":[{"sig":"MEQCIHHOzlPsny7JJ5sJg8ROU7OfZU5tW1WaN92B+jzusUJDAiAgq2mm2LgGbmWWsPMw3OMiB+2eosJn63OP78IowypXgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefcxCRA9TVsSAnZWagAAAbIP/A6aO3j85+HJKozoz7Hb\nttgDtOuBY0Trtdb7wDFTBhvm3J+rC/SNUEnsp1vBhXtGJs4Sv71FomvivAqt\nlNqOFelUw3YC3lAEPyG+kLyxqhdV3d3vX8dZYvbCnOdVRAAUi/nCJK+Sh/Bm\n75+nUYn0qCFEZjDc5x750fp8fTMHRQ4yWPXkpanfrFXbF4KOHMnxRYVRyDxR\nOU99VUqRqP8KTkAWSNC+veGcz0eUNf9rlx/hSpNachIwh4h3OjHNiPWGTdML\ntl/KDNONnjqRsmir0FJYZBk2PijgSiPk8rNz46TbYgGQqukHvFjOKMK1NeEL\nl75ROq72qvE+LE/+tuCmQN4+xtx1AVIb7pOrqQg16ic3bJWLRVEwZ44hvsSx\n6cyrYSUl+gBFnI6XxSVj2OPPDrq97sVas+szpSQcsku9tpA3bjBMXT1ge8B3\niVbYEEUvkgaKBj9A8vnRd3cHVBqlplNxUJTwdfg5DtQHfYVIVHHSRkzpNOB4\nouOvHK5oxh0vymjtPp9QLixF4Jp893kT6zeAuVLgL9yBUZ6ATl1Z9snYKE6w\nOyYjl9K0HK/i/2VKv6AynZmGAa6BPFYVF3ERwymETjsaT6iW+QeS0x6nQoDs\n3/a/FWAmSdCWVWM2do+OUoFMnY8C8UwsfAfGuz7zAZNuuAl26jvk6b7FKgRM\nNTG9\r\n=U8ta\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.2ebfc5374.0_1618605873053_0.5682210715270846","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/typography","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.5631828e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61c53f75b90fc8969f2da858cd8e9d9625471738","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.5631828e1.0.tgz","fileCount":22,"integrity":"sha512-3usCreBGmI97ATSavMiroK3tqdiuZSWVmRyNzCP0h8HkYDE0ilGfpMC7U8jhvzOe+XkiyEGJZ9TL7N6sk0ea7A==","signatures":[{"sig":"MEQCIHJxzgfuJ4zGPbmdPMV4OONIAbNn9N87d3kosqSwG4XpAiAqhSreCj1VY3nWkp5Jui8Hkaf1x2qE+7br0X8GFpQn5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJUCRA9TVsSAnZWagAAw4gP/jZKAXT4ivdjbN3TaaEa\nmOonct9Zf5WxlgLphh7Ov8oZhi3tqw82rWRCnSQ19NsDUNqwjnGS10pxB2zL\nbzNbFdOyG564NuWXwUKZIfasdUhGUmZu4EaujIroqPc/zOdxuPTkEZreYEHG\nB4xBb2EFoEHUwwA63J8A3FxUEyEWkQ8T/Qjt6YCmViEJO51sLq5vuz0jj2xr\nmGHMDzKFA688pfzEY11wyH+/b66JrLET8fW/eCkuKPt29QoOM7YbFHSlsAF6\n3zJBKqadxzNpGzgZsGzbGaUi7wc8OcA444q9YhZ1Km5pygNbDqlGr9eg+VNr\n0tduCDVecJ+bEpnb83rZKH9EJEi7MgNQkqEN0SCYBCLQXZOxuDRxgsZpSgUi\nJVkhO32A5XBLhxmm7kkKCQMSsAvEQl2K0dia/HzxX/ndIgFf7dVJlfKYFPDT\n+m6ARjyII87bsqsyGA3o+jdxycn44bnDTxXao26z8DKdss5IuW6NREVnRWU+\nsjPFOnbMFvatI3Pqt6MXXIB5ijP505qm2zmUknGBLeowERbdMv17d+0jF0kT\n3kWIadLwtV+W4QlsnHlVuYWRgqmtlasSh0kG1y/D6kdefcJNdjrGEtyNYyRL\nmdIJbmHkdX6bwensUhQIikOQs7pWyVXlhPrKWfSM/toF5S55fxK6urPfCCIg\nz3Ph\r\n=/hYI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.5631828e1.0_1618645587621_0.9384267566986928","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/typography","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.bd685395b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4230395c51a4a46a60ad053e60de73d6b2149de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.bd685395b.0.tgz","fileCount":22,"integrity":"sha512-RhVFHcSXAT+GaSQIu5XygDfeSBMXwbL6muL0tPWYDtM6VJ4jXx1X+fdl2qaQd7IZe0/Aa5pzsUtZ2xKQw0eBTA==","signatures":[{"sig":"MEQCIEPTPFtpkv6O/5m3+ujy2iVTTzi1LS1evvVThmcXaXHkAiB+MTCC8+tf87oQzU+CxW1d6DAEM3Af/8HyypOH+GHwgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc65CRA9TVsSAnZWagAAAioP/Amj+GSeVEopIqvXkHcx\n4UjlyXOLiem8V4xqd4EXOpxXtSwYxAihV4RtmOLvFI3utTDZ0bJut6TFMPXD\nahZcPqS8ajVuat0WqrIxjyedvF8t8Pe4vJPX9E8+uRk39IuCrOie4XbYD24y\nZqxLHJBe+iRFwzP457yg1mtd8vtk8UDlZ+HZ9ZZwPjgjLSjK2ajZqSZ8Haj+\nsK0cIbCgLS/dHRskBYBBA8PKeZtS6t/lhbK9pnVbhugaEfBMi3ktNTiP3+YK\naJG/kc43WyR3aY8z7hd5QAtGPOK0Gr3OScTsL9AFGhAo9egcpiUz6watPmv+\noWYmqJ/YdwuXfgkTBbRE4IaYGIJES90QeQDqWcbCVEG1pRhuNVkrB6UHe+3Z\narxw4+O6EiqVxAu1df1WXLs57DgQLQbNWl0j9Xq/6Kkul1vhB4hxUWzX1/h3\nmyQqx9zGYg+Clt7ohDghC0vMKDOFbCPGKeUasVzUyRukjcJrWGrr0RJLGhwj\ny+XtQI+gij0ecDscHE5RJs5ECvCVwSgrF591TlFazQofgXJ9nL9Ebpq1lRze\nEBCZu6TByr86MvrIreBb/bOd9tqCtOkNXartj2HbV5/rdZcaZBJ66jLXN1JA\ncdYVZpqfw430VpmrZbxf/qZ6KCDbO/hhfp01Ci3aQxJaRRSlyBlXtU9ngqBf\nXxjg\r\n=grc2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.bd685395b.0_1618857656913_0.038027439692557286","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/typography","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.b52196498.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcbadafb3935a3d50d66ba87ad1d6e1c2c9a2426","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.b52196498.0.tgz","fileCount":22,"integrity":"sha512-XSJiqlByP7Ri8CAtiP6hKlvF+l45y94C4qfmZEqRQwGXZ+rG7m4/huFjx0NSaMFcPN6Vpl6IVcD4D/fGOONcbg==","signatures":[{"sig":"MEQCIEXsYq8brolOJQo7uj1va8+wEDwkidbLpUJjMKfjpOwiAiAXuW0Aufvw/Ouen9GAPZfAyiZ7yPJd7kGuUXoPMDfSDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeCqCRA9TVsSAnZWagAA7OcP/jxJpQTeFeIrkCDHAHKx\nWT/ufhSM6CoVpeg/E5zOI25ZwzJlaAkVtasaCyLHjZdqNjofcor1BvCmq54m\n3KsK1hfglHOZ3yZAMBPTilv9zQhamS4Atd5eSkBsD9ysujmYFJuuLl59cNMF\nBqQj7Gc3NbyE8s87bQJPoH+UC+3Ps3kMKHBiR+ozCHrhMQno7vI+lzkN38Mr\n/KnODMQV6RI5yY4EDflrUPUyDfFUjW3shDE1dTPaBQsZ8xT4zbD3NZGzzNdp\nQMdxEF3BvaWf3cMcPOUihZBR7SZGq4hSvd0sQmQ9ZNfJqZj8kOe7KfBwQXZU\naPN5WB/B058mwP1+jOjtV5Rw7fmSphx8IySla8fUno9EHZAShUFDpL0B43Lj\nrmzsOq58YuTcx5y1n6ahZd4yA4CPpiCcDZYJWF3ay29CF+GtzIoQLK+xD3Mt\naXEm40Yqc9Il6l//Yi/CnfpZexDmPoSGt5GgtrkX4jQ4uE6H0RYn5GkpRjyX\nP7L+ka2qo28m3JijS+BudxERBpbWMyz6bcD/4+EfSx4stO0vJUrHhXju9qF2\nBVomsHt184xe9MuDfPBWMvIh0BaIZxBVJFquWubRGdynPbTTUbdLcmJwjVpU\n7rroKmF0lcDgnr8VsoC2Kk9ahzosgpdLweqWG54VW69Q2QgIT1m2HUtZY8w+\n11g/\r\n=bczQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.b52196498.0_1618862249680_0.35056560408501913","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/typography","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddb87e798308e1a2f7b60381ec5fd4538ba443fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8ba3e298c.0.tgz","fileCount":22,"integrity":"sha512-NXvCEUu2hNuBRsNZ3u8k6cuQGk4d/srY/AYontSPUERy7hN7YbbXxw4SIvHYcTTOvNs7v3l/DZu6lRS47fiQ1A==","signatures":[{"sig":"MEQCIGpERiGvhE0CGgzX7c8PsTxxxqa7k1LhqsWeCYGs9zQSAiAImZQQPtocXzhlzoajdHv7rNeJKcWMJgnBTBFdfIXIjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHICRA9TVsSAnZWagAAFtEQAKFYmlztwgr9j+4cA7UD\nyZGhKSpePQob4mWSCde0opvyQq2ZGG6aNFog7RB8Bq6mIHw9Msw5heZYNpXj\nbNEs/W6inU5aKZIIU+koFKkCRmKACCMGVPqml+hHWHicdn7UMmoljripyQ0T\nhEVwEFIuV1fXdQAzZTgkNOpPF//hyH7/cUpyD4AVyapXAXtAhUbDaSi6bubK\net3Hqtqd4eA5mK9zJJGGkujfIlThFq81H/jbg3J/Ct9m2GHCmwhcEAa/dv/a\nGXHFxuLV5afjBPdnLFkpnALAl3NSlCeJr/ELo6kNLFtbNnY8Qvnxmmp/Tg24\ncYf3wDw/EAMnb3q89rWE+yleiLfrghOBxvurgtSFBMQiFC7256CP4PdI/3Mp\nK9Yrtc7pfOY6eHlNiDOOJmmBsQcPDl4+KP1nG/5pkzCDRqc99BLmyIT6HMh6\nb692zbb/DmpI6RpXcp+gFXm5Jh/mesJBf2h0mi6D7SzEgMyUZ7mz6PIov+AW\ndX5doZ8DZp/4er8qpd3oP8ilj9Zs0OOu6g0b5JIBMaoeUCGl0SrbFSO5BQ6y\n6v4Mv080hg3u8OylLz7uGsqwro4JRDmFNfCBSvM9QOVqLmsDbZH0NsWdw30B\nIS0vGmpepf/AUo71hqG9Sg6FHv408L4wJyhq87jQhoiPbPhS5U+vAwCiA5j0\ncFOn\r\n=e3H0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8ba3e298c.0_1619014088429_0.4099896994552419","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/typography","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.c629eab71.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"280fc2d94bba8c83009d86b00b95bd1fcc3e621b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.c629eab71.0.tgz","fileCount":22,"integrity":"sha512-yFamSXX+AMILISzLHOE/BXCd12Rzl0xOKcMGAP3Fo+ZZiKAfY7BQ9FBu0IqVzMx1pPCQtQ9DSg1XMXnFlysquw==","signatures":[{"sig":"MEYCIQCag1h0qlt9JXdiX5XGqyTtxhxaePXrBE99VLWoKyjPXAIhAPeUGPRyYcpQacOIr1IwRRSDCVpa9iqaWlfqVAxDaN5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIODCRA9TVsSAnZWagAAlVUQAJzH18Y78piI5+7XmQ2G\nUpJ3GkyRjsm6G56Ho0zj6eRgUc2R5DkohcB2qIGiXmbkxbFsA/oBhM3ArKzS\niCMMDPW5Sg76elLh+fAjta1/uNDKziJ6ElpnTkk90zUZLB8EN/4KiIjsWcKr\nxkBz7lzavp2gmYI0cZYWy0SVwr8/xh+LBEOF0n4JnNoAYy0kY3tMXIc8skbj\nK97uZ/+JGz/EqMuXIgHCnhjKQ6tSohWZGehwHhFcdQorpsi2US57nvmfLqmU\nXEaAi6UYXvewtphdtTVwyM38Ow/Ifa/6iHwp0lMXX/7/sb8c5en9YJKJgtzH\nENBGssmrqKxBy4NBjrTxuinsh13casLq27FOc4fSD8OhHuFdoOXC7dm4XyX7\n8FVVYFTArBgnLvb+zudN1VbUDv1ZkjxNqyFBP1uJ4CS8jhq8gOHn0ztPt7UM\nftFG9roEnrZ7BthkHh4J4i1NKc9PmPVcf9kv5gTEmXAW0/CwUvE0Z/NQYNXT\nW7kz2HPOWgRddZxnRibcSfw1sRZaou0y79bpl00bWXJ0/ROwzTQAinWg6hf0\nOsojingz8rppwC4CEk8lfDOXcgVfNw7vUhJHBewWAYkjiwKyJghyfqKPlwrZ\nmI1ztdB8adogd6Pfo1/ayC1hlSK37Xa28AErBHali1QjmPCVOBQBsTBqAace\najEU\r\n=p0F5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.c629eab71.0_1619035010810_0.4739994918014052","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/typography","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aea7dea693506f29f007414ea03e74e39f596618","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8ace3b810.0.tgz","fileCount":22,"integrity":"sha512-G3HND46A+MEfqGJxO+B4OnAij1lt5Ss8MhNnfkLt/tuzIew4L4oMT+hrgaD69QJOftAjp91mg5JxzQqsRrLTSw==","signatures":[{"sig":"MEUCIQD2L4DyEZo+xYoMOWaFzZ5DzfO9UR08My0Ewao8HfwqggIgGn8X/RinND6Sp1ITlQ/TzAec7H7CLxbQpbKEDME6Ku4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0ICRA9TVsSAnZWagAAjNMP+wdroJiL1KdWMmFzQGA0\nS4TBN/AdUA0NuwMrLk7rBIpQgLdGyj5o5+nRdVJaH/ma6YxqM7APV8uVQ9Hh\n2sb+IMzaOicJKTPD7mv423WRRNQIqeIzZAeoGtGYjjRPQLgK6lkBuHVaQJNg\nt6QwQrexI3w/7ElHPrfHFdr14Oq6Yjrw76zi7aqlIirF6NyCFGff1ogvCFA2\naFSghz2Gp7EPUHy3he3XovWzNRVLVRG0Xd5XV6dLAzw0ejFfjc/TDhzEqSQo\nfygjUKS0oXV36h1HM8y2lg9wAixb/7nPuZktjW5QZOrLzr5JyRiw0d23CTzq\nkmM23sppw8OwMWr24rJfyI+Ju1TL1IUAhhfxIsxidpTyWvYsF8zLSBb7JYLa\nQRsjnIetczzuBm4NqxWKSuWEcfQ5D6r+HpWTbAoNhbB7wmQ6BjhoQvJJf3Qw\nr9UMbzIygyonTujEKSFcVCj4BJvMNlVz61X+8satDBgOOMu6pAB27WIK2DjQ\nhKslICN9avOMQKmLKNi0VXsoZTz5wg9b5YDHdQ+ZZVJrh90tbA7HQnrnevxO\nShyJpgNIxRwS2Tu8DCn+qdkPomUz0XFqbX7+k6Y/epbWXROSuA2rQQQtDcpD\nQgtieiqJ4RhvyLUGAjoGBrgAGLh0XVWE/DLrCutlRVnAVJXnbWbV1b5Zc+gM\nZQ0P\r\n=4bqE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8ace3b810.0_1619037447763_0.552904728695462","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/typography","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f651e5b9419daf51e117a44e2e01139aa07c76","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.70beaf42d.0.tgz","fileCount":22,"integrity":"sha512-Zo+jsp6zjX1gUNaodgVdSI4vRPPmkEf7iHAArzllePwWkRdKwkzyE2fNaH3q8sxxyxvX1L79K98jue1N/88csQ==","signatures":[{"sig":"MEUCIEuBvceBVMoxw3dxG5XTtjFrpzPudCCW8yFn9yAPhi+tAiEAsfGhRGOhFp9H4pQLV79JK4pRRw8PNYHYkC1tFRLmJVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/CCRA9TVsSAnZWagAAEoQQAKMoCG6WWmixJ5P7nxBE\nca5k3ZxmXR9HboojTCUNm1ufqQG8/lwQtGXZt3PmtpAvNeRPMxRzDgLXPA3h\noeE1rW4wH/cmfWxuvbhmoBxbarHVYe2Qzp57Ly6oosxFqblppfhrj4HHQE9Y\nxYn6aY7aEmR25MgKLT/3Dv2jMRiwAmEMkJTsRosu+PvI7NIUHMCqB2h5Mcm/\nIQwVIyjl4uizYKdeKofp4Bik0Lg07psq0S46zKL3HDRxTEBKy8oZzwXIos7+\nfGw16/8DnlSS7V8AFUJkpOLF9IhLl1kD3zUaI7UELScSNga4e2f191+ezo5a\nJA6entEmAMv2xXQmwcqkPDPY8hg7P0KvnLc9QWN9/GqGvK5mr++uo01jti4n\n4CpZNmfls3HlUjkS/wOXcWAdLTy0Unm97hOGaVTH+Re75cliJt3vdk8f60pV\nQ1kLDp7MTd3IQR0c5h2HbtUFHFYFpT5Q8NwGwhgEu1qSX311is62RiL83CRr\nj3ToD2yY/DnXZiS0BSSVet8y8wQDsTvsnb/9uU18OMOeWmEYElbaj902jU7Q\nInOr+CX3lkkdiM25o2uKv8sfOqY0z/33uXIFx6WYDaFdtqE7pvvg1cggntoT\n6cO7pU3iT7VyNKe07QYWpS0popzJgtUavqWuFINkQ0/+O3YFhAjsBexGjnTk\ncBjW\r\n=wTUl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.70beaf42d.0_1619038146041_0.4684652078630809","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/typography","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.cad489689.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"790724b0ddbf0cb93601028d1b53dc942bfe7384","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.cad489689.0.tgz","fileCount":22,"integrity":"sha512-7xOcJv+QJCEoLV6RuRAwsO1NdiNxXFx++Xvi0cwM9FDs/5gizWc4SfnmfmGpgWEPU3EXrBjiIx8o9yNG5RTpVg==","signatures":[{"sig":"MEQCIHgdJ4FdJQrtYYqnXjAHmwFlHD+1t6+9IkdOmHjvSBDuAiBpAj+gW2VVWQuWZsQ9HJXcEJc5+3HPq0myVHbgO5tWoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakDCRA9TVsSAnZWagAAYiMP/iSsFqiRGPX08GrksZGH\ngoslLclF5b6bTYv/qYqJl6+D4axyDPKQhqfeS1jQgZHpXnED6CqLUT2OcRu/\n8DHJbctdet5+WuCwfJ4K6mp/YDpizMKOf/vbtw+rRdIdAl9ZaImftgh7DxZP\nxuXiYClx+dQKIsAgmMqEJsq28V8g8zwgwlkfGUN4xRmCXYVnA7ppiXPZYhJj\nKwLpHNlInkIx7ZVarPFSyJSrlxc6djllazmfVtmZYsUE8sjHSCwebEkzxNhE\n16s8tIk09CXDfa2XXTeRnfksrNicu9hsPsTpIMujSFoMGhmd+y5bqo77ag/m\nIZBgBJ0bGmUwj9aSloClHwXz5nGhJ0FPhnTkSbP0wQLNoxhn9HBc5IuRJZaO\nbjGgDI0rYfBEe72jqf1TY9T76vbA6nmU10KQeiDSCVMykUjmsQSVbRNhtDO5\nyyDiPYx351z4+IXR5Ch6pHY/q+Cv7kktMLu9m7H2OrGUNDPFNWA9lvxVNuER\n4cUKkAVfEWNbazmc9v6IBidJ8VNTgpzU3LYCAbh4LULe8ux3fMUex43Wyjyw\nslo6ds/S9ZH0xrCNrIh0X6avX2M4P2dRr57BQOGM82/RABLEBOO6JJDyA50C\n5sVYkyAalnRj8Gyf4VTUzEGTemexlviWk6f9A5ERlYu/xJofoAS7jTCS1cQu\nTIyo\r\n=81AZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.cad489689.0_1619110147450_0.4295990132878489","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/typography","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d928692b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f643031efd966b352ee83c46c11d8f6de250f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d928692b5.0.tgz","fileCount":22,"integrity":"sha512-Aj5ttcNzq9U/RIQbQ+YexWdQbMo31yefefSINmKJmXZ2tXR1RC5IdGPGYyyKCsBoFrn2JLvPZ3bt6OPDqw48MA==","signatures":[{"sig":"MEQCIEN9NsImmD16EBDjQRpHARL8LRzaF9vYlIlxyV8jPxsFAiAQbGchLsUc8KhgbQvaPxXDEJo3wNzsyBp+K4DDRc5KGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwULCRA9TVsSAnZWagAAShcP/jFw+pcTFsV3j/Dq/coL\no0PRneKq/5fwQGvZRpi8KsspThB1h3ZP+yMAvj1R0uibzNPuwXxTxUIL0zae\naY4jdW8cgREbr2GTbJNH/OdcKbzLHt5un1HQXIe/njGKJsTl7VnDKDpcYCTL\nAPSpLF02dZbf7hWJouL7xJwiBvcIV3OC0KFUrZAyrgKzhWBuRyQoCWFh0GyH\nWjvDKAHPf58ovMLTy1htYJAhcZdLrj37GLVqN+KX2Is/XS9j4PgiaXQ+3ptC\nPQVGk0Tq45PyICay5hjRPx8jd8pywvMYAixfvXNNyH3Bmt1FgWrQxLCu79iA\npNucHGB0nd2Ks9eOA9EF89RptJl/0mj5uTSfPwK7a1cdu8UVY6j43nwY0aA7\newmdRAnMHoLgXPYjJ2RbtvtYxbT1Se/RAj+sjstqaUYA2aE0Vz1O2oQqCegc\nFRNRzaT3w17vhdkVq6lluStMu1E8OdlVhp096fLZvJbwKXPfgHI6LS+Lj/+4\n63bPzXkvxoi/MIeDF8iO7l/YytxTxu865AnaGnoRQOPQOuJVXxjyCBQx6eeD\n498Q0Ifm9anfean+pzr/dBBikNniNhpIpdy+grGVV5ZDrmK1NZD+w/pqOGDV\nyQ6NZhZfBs7Pksj39f5rQByc1SOEXa/GuCcWpRilHNhpn40IzoZJMyEJhBnU\n7pzg\r\n=FHS8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d928692b5.0_1619199242635_0.5562389102223726","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/typography","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3a0fb24a8bda70c6e6bb9ce2d359bdc506ac5e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8f68de8f3.0.tgz","fileCount":22,"integrity":"sha512-ibjrk8u1VJ7zm9ryh7jjbhLJIk0NXs9cUyCHUIUpx4rgar/w5pOdyUhUCKhoXZYfgMOXvIDeuak1LkAUWY+RUw==","signatures":[{"sig":"MEUCIBUd1v/SvVwz85EPJJ+1fMOHvEN4WTG84oFjqMG79ATaAiEAsgblWl2kYBstQkwOYnMt7gN4PQjR+lJsiYjBaA1Mnwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw4gCRA9TVsSAnZWagAAbCoP/1Ds5VuFeoebnIB442CB\nnI4ypVxZQ1RA6HMVL4dvSUh66T6S3sL5HOZQSvwqgUCUCpKpEB2VcCgkimWG\nQhXJF4onMrrNcsZtJTrGdh9Cq6PE2ogES2m1E6beA64qeePUqotveYavVvUV\nDiw7Jx9EMU/rMcSPlFvPp78YI1LFpn7NwaRDvutvQxtPs0Uyi2zJ67YS+5de\nRSn1J+Oe6d/C3YeaY85dI4hnVKn7UAGu2tUWwW1LEykchDYJl2oN+xnfH4TV\nRudHL1AFRp8d7avupodi44pB/FXMdjPP8g3/ifLy7fAsYBQEhsBIfA6M4X/F\nXRoljqYyAkIi5jCTFuhy7iZHrsRNbo683gS+/0Ng0m4GW6vP8y8cwdz7EPpP\n2qXbF9YaYo/GOC9/D27WnVab9EzlXpOb9TabWVFsfgpcd38t2NrNlLqtHHP+\nOKSuONYmrhkklhBK+afEpOLRBkcxNvyqUOrUn1hA8HWnSEH7hGGx7ihFW9th\nqdbByOsRZEgVV19DUA3b1aNPMWcwWfVmFU4ZjPPxQTwHjgnKIcItt1l3hLSl\njQ6L0SgdhlC2nHATPnBvH8XEVF3bnc+OTOVLLzsL2F2JmOYeZBPIQHuKeIsq\nPYYWnH3E+QElP8uG1E+HLK8O+VWKl+qzJaArQrnRzvSE6+moToWVxSxEgNkO\nLDeb\r\n=VPJU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8f68de8f3.0_1619201567966_0.9329974459206025","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/typography","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.05753cf77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c3942390d4cb54cce9310af36b5a912c6e36cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.05753cf77.0.tgz","fileCount":22,"integrity":"sha512-o9OB2Mimyy7QTvhK/Bf+FNJiR3J803E/+4uMU+Nt08EnZDlptWlOGY4F5xtOLGTPv7bqyGlHYfqugFDu+ENqRQ==","signatures":[{"sig":"MEYCIQCBXLZ9qfPThsopuYn4rNqVLNxwTo0SFITHeDEoOpbAiAIhAMBVAsqHXeQS48KIBbP8S/JzsbxjwVv3myVTYVFAahQ5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1t2CRA9TVsSAnZWagAAkq0P+wXw3rrx+l6j1Vkl2Zff\nbkc6Myukh+w++eyrh1En0PjACoUFQoNBScU6NjAh5N2BJxFnlk0xLmH7eQhd\n0k9yxWggpswgmp36IZo9rrLqdXxWBrcw2mi14Hxt/RIQa1Oj+xsCOlcH4ghl\nKVuY0F+jWsDJqBwzMzhLBAvFr6Y+xoIKZmgrr04x2MDRnbbPz1NbkaZdXpou\n3CMcAgJgoyO1HyTjl7AkE4iLTZW9Vth+R3madyph8JX5esvu9/WDqUUoPAFJ\nbIFY5O90PIapaCxLXY8XZtN+pr2U7xQMh86RpNAcfERRXHvgBSptWYAxYDSr\nDsMhcAG4SA+xxfOkmF70Y5a1TgBwi1a1MtVGBW4c/6NP9CrL9kb1cUMAv1KV\nugdtg9oj+U8ex1x2EqT0UooBRZ70QSBeJjnO+6i+B7WB4Dqstot/4S4H9Lrb\n78C44fXnjcUVCcEs74wnaEh1RXcTEV0sZzOcHDYYqAlDWCfMzIYS6oNB+p5g\nhwnsF6CB6FEWN9e5cOtwerjUZzrLT4E2T+uJK2inYZEQBv7y+3TSmnBD/0/j\npvp7ryeUn5xU9G5SuTh0hMEoRwfrmfwcSUmYvnV0w1tmuSDkFb1XfL1eX0fm\nnu56weUxBIAbjjY9poYwhGhtiH8QVEWLB/cnVj9PtjlKoF1ObPe3Lthi/qPA\n2dTn\r\n=T3h0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.05753cf77.0_1619221366169_0.16680670889216076","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/typography","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05fd6f7fc61467c2d61f8939619b21dab3997ff4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ef43e6d96.0.tgz","fileCount":22,"integrity":"sha512-zjqPTbJ7VE8UN+YLjQgmhPuF0ej4U0AeUcP6yAKj4L8V0hh1p0p/H5FpZdoZlguXZqHATv7fHR/di82e0e8CPQ==","signatures":[{"sig":"MEYCIQCzuIdy0qJJ3+ZI3Z5Db2N5Ys/YVw45grz85d+WUG9SrAIhALURCiIS/G8+9YvcfKdx9o7bm0iCEPuqyBQL9HBWUW0a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1zwCRA9TVsSAnZWagAA/M4QAJCghO/jrvQc+4GzfH7t\nYBW4nikAqZf8lgINxnGbbKmBlnp7Q3FhdyH4c+S/PAXpRQozc7nRWZCNbURz\nq5M6Ssb5PRuvZJATwij9YKAUPPw8QNyPtHh/YnkkWwsIQ/UZ1q9+y0c9TNxL\n8VngyU7Y9Mwa0gn4504TTCrdJ+MncHcRO4dhIuRH324nHzPuwP8+pvCdC+qu\nxrbWpNUzizv5dK3RIw+HCWRDsjIpoKV6KZyqcy2kUducvz1WlnLMfiJCqonJ\nWnO+dT0QLaoiE4jv+lDZ2fgqTEWbtSDU6vKg0v6Ba8hQZskRIM/g0/QPjyZe\nmcuVAsBLpCH40CRB2HpeUa+Y2aXIVpdyIU3/QmG2P33g+Ax/qbpxQ1WKSRx3\nBU0rG6UuQ8Zws2FTebxSLGu6GNbq7IBZWL0KgxCJV8bb+zTU+8EUfqFvp4mc\ncq+ExOcGE/KKw9XjWGMef/yenTZYAOt8lv+GfAX0xikC9hNukbpP6VZ30DWl\nc/yvnvLPrRRh79ERp60u8dd0izQFNAA5g7fmN8iAoD+h7miB7oPjX7cLm6CQ\nqJagW7EK87fnRhL4RjiYelU0t3/mPf7OCWtVLBkbJHTUrCsLFNBz1KuvczXe\nPNjMfDUX2rlOPQWRulmB3oU/9CPy2m9EDMEB9f7na2G9lN2n9bHUkmXP5Nvv\n8NAS\r\n=uKYH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ef43e6d96.0_1619221744352_0.9107576404001423","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/typography","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54e6d412a6b55f7d2db2999f2fe6b3850939defe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.197f64fa2.0.tgz","fileCount":22,"integrity":"sha512-Yj9FH5UwXzJxci7a0zpToVnlqZBn11+Pi27YkmzqviAPHB6bsVg1UOQF9xMjZ7rNsjvK0SLtfeBIJ7rEsIxVjg==","signatures":[{"sig":"MEUCIQCoABPM8l9QOcJP4P2qU6CGTqf6G1G8avyRw+HwyPtaCQIgJtOoGvstHjKXGWmNtV6IKbBTSAC7IsTwNICSX7rE3h8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvO/CRA9TVsSAnZWagAAgiAP/3jQ9urs+uCTRP6BMnYK\nNEC6rFW6Vucqv/LyVkeeDeNMo43u1VyCRi4M/0ekWfp7Zs4juKlQH3qK60pJ\nDOj6mbPeY7UvT63FFaGRkGnkhvEvE3tv2H59ebEHS64nXvWyBVkhxpu/SN/+\n/+CRz2mAZYtWrq8V2RY5eg4JosSPaCREHa52wudDC4KjdV8r0PqjDfQ+1hm9\nC1uWjBzmKnZ9M+Z3gGMxDHWAnWWGA+f+jkwFympaH/IABsBn+N4dSG29Zii1\nmzJ84LxpHum1xM3Sfhy3CqH71zbOy00W1P8Vz+Huo9FXACf4NPkETVSFAVfS\nGfHqVgINSw5CEFlby5FZ+gwzEbeFtwS6gB0p9twKyKezUQakC/9z53ZI6N5g\n5Eaxk5gC/cbg3weOBEmEEIZVP7QohrSeOW2Eje3w/6wHsuevZV+QItuQEPB6\nWNpTAmUqdgRnQPYkhypmUfn4WlKY0yUGHQQy2oiRIMkohlx1dr6Qal04Qfqf\n6uh3U08REbTpkUZVpyUpdNF8vXi6rbt/Pxy191sTfCTWiLKDqyfneDZL8Gbn\nzBJl5GpJOe8of+jxqcRCIfR3Gc+75Ebx+N1fcGymkExUL8yjugeGpId2P7Am\n+FJo5NqLzpZsL/PoOxZkolDRzFd2IEJ2RdcY0S6AZezRXFKB2nrpRDflsUUS\nH+O1\r\n=ec6n\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.197f64fa2.0_1619456959300_0.036979831529171836","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/typography","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e5787bddd816870c198379b64f5a070302eac1e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":22,"integrity":"sha512-sfz6Q4Tdj9jZQstSfqYc2iGuZmQJa4PL5YsVI4MHNfynjIYa1IWbby+dbN9SxinO8Ar8bZtpa2l+JgQaDSJIIQ==","signatures":[{"sig":"MEYCIQCB1BVOT9O4/AbJDsLVQ89fGTZOhzMUuaFtuRhtoGUagQIhAO8+DjIlStwO1zPAAq6kWNBSa0OtulIqH28rX8hqZuBO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2ahCRA9TVsSAnZWagAAS2sP/21qsGs28UJgxm9tuTG+\n3ANCK32GwXsJP4+n1Auxwh1s0HtTwfwm2ITuqAlKKETuiJT4Gcf7Ct2RBPq1\n1wLItvfuxCz3ku/Hjc9Kqzf74sVNdCdikFF/H56bX+wIifLTEPdoho6XJD4N\nGP4kRLja+0qjeXd9jsh7HMJNgxa3l2YWX69xlWTOcsp86Cl8Z3el91vLLt8n\ng5dYumEt48CRZ0ATQnDdyMMSmvQMoDCLifyz/f3DwSGx5s6XehvBlMwrymCQ\no5jeqDbfW6442686m4LDzff+958mUolgJBLtuu0NVokqylK2xiWWQrL01Lsw\nQIN9kR/5PrROY+iR9pFOJbdiZ5QIn7jz/UEXh4K4ITtE454y3/vYe4d+gUuk\nawtbjZyBbrxwqS93czntCEsalXj4Pl7zr5Oe+zLh7/tCDnFpgticb7ro9VEz\njHfjaZTdOk1HwmDyW4XVJQdhBblBG8C+3pjhbv9QTi+sYmML039jerUg7UGg\nGr4l8o6mtU40zM9E3EesqoO3bIFhwzeBcIx6JehbYzrSOUAOiyjTTL7owMrW\nB7l/e8qDSBj5/IpU0Jnsl2XDTnSV6bd97I+ODKK25/q7gNFCQG7LmABRt+0Q\n6pu7z9ZQ2xkvFNGW3R1sEuYoWl0VNfjuhYb1rfPU9iQ9ZLVM6B3UnjuLtkg9\n3n+2\r\n=gW2m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.55ad2d7d8.0_1619486368577_0.6956055248948645","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/typography","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"edb7d96907a880977314898440292876e2a060cd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ec4ac5234.0.tgz","fileCount":22,"integrity":"sha512-LRM9NNnd0yRZIYB8BzbACh0MzFT0reScf81zJLepn88imAtRe2Kn/xobikbPpPDdnR/kxjlkndORIk6BBVHhqA==","signatures":[{"sig":"MEQCIBxs4LKMwh+usmQQAe8IvdBo7RpVZozkE9+DVdgGRBjlAiAgmIrXIEj0zksMvcGZ236GaXRQVNB2lHAjuhIXs25sMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QWCRA9TVsSAnZWagAA2QEP/i0LCM7LSoykmj854wzJ\nrtIFdyyqoeHvW7GwzGoKfYDJHPDzolrwjLZRI5hd6MxRhIBDR6dgQQe4HLlT\naYHiXdNXkfbZbNGKVRLrRtYNSC9slqd87Ws5iKMcJf/Eeymo66uOEByECn2D\nmu3FpVy6BMA0CK0Ntq1zfIYXoGwoX25PmF0Al47IjRsPBix7IpCAMs67ysop\nJ3Pe8seo8GOenXMztVoP2oERZSIIfDfpy9N5WQsGj+8Crzuo7CSP/XavY+CI\nUCURedpFVOad8mCbGRKZ+Om22N2g6RK55+7ytM04s3a8oojOtfiXC4yozqU4\nUfQsWokwfPD845QmSwRr11tZEAK+7SRcIlbqsu8xMowdc+n2R/M1t8Obi99k\n4QB6q7ARibGUcE5ee8hfBFvSjA2s4SVJURgxKqDfKxOf1NHDZVPWMEjjOBNH\niYZY4oXsRbdBH41/GHpuLT5QZSrFEZ2sC/nsYtiz5Vz54XFNayiySXHSOmm0\nBLeMOC9urTMt0lwS/dDe76Eoa6hz1msU9PUEi9YK2y81Z/0Gi7AvIhIsTvw9\nmXrnEiDwx5hXvuolxX0Fed5onzd6Itz4fJhpvcTbJPgmwgsxKG3XRNMSsKkb\nWdEkexOtGesgceEPuQuwfx/1qR3vYoX5nfrfJyU/Mc5q884cNcMRXEU4SBSh\nbBaN\r\n=CWcx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ec4ac5234.0_1619510293838_0.09664408380115042","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/typography","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f140b44b8862b11e1ddb077fabb6d0ccc0d54a92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.b0579acdb.0.tgz","fileCount":22,"integrity":"sha512-4IZZM3qt3jQx2RAU5tRLfE3sZ75lk9bFmjhhNCPmolvfdeYDE8s0D2g8i0gk6Np62jBzIou+NA/ASLSnolNabA==","signatures":[{"sig":"MEYCIQCdIrgiBYmXm6c55q4hXf4IifjFcBds/qrDrCjxOii+SwIhAN8+imnPH9r4jZ2zTziZK0i7g8WV7cPa2Ll9LnfVGI5u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8zrCRA9TVsSAnZWagAABpsP/15Q2c8i9lpxKtNJxSBm\n7GcRm//J5o6ahP70+XIow1UmqN3ThiQu/nDWEPZWrsxChAmTWqhXFO0WXMFX\n1TU8WYGZWFAPW2JlNgwvGHLNmlEByZwf7bsT408/Hhwwnb0egJqMWZiJ18mC\n388iD1av0tuDgBHWvHKsRYA6HVavwyIY/YzJ4/6tIatdiWy9aJiwF60hMvhe\nkkydzV2iJPOXolM75saHYyQ+31vkf5IdVp4vs03sy4ScuzxX8jB46t0DHpGJ\nWw62MnD3Z95yz/4N5Xm9EJwTsUa/McLhBu190VxEW7dvrhKrbuqnpxB+D0yB\nAqSijNdxmqeGIk7ZCd7kMzvn+TLVj5vfKXAmlGoMyn6zXZKHyr6WZYjiS3xz\nCZ+1Ck57cF0xNiktwXtcHwMsF1rLTvF9w9fzuzUUTcAly4okBjvvn3EowR2y\nVCPHXSx2sv19RqmfeE8NpGM+6Kd1PX5GYSX0LuX5QDQJGNaFtlHm9O/4tvJA\nWrr6NY54zT3bWYtKfGfq/ThGFdD14TcGgx0hAIyEJZDkqAXjDNtWRLEHRs4y\nspvCBsV3ipTXiCNwf9d1+TC8q7fa3nMFr8rR76UMMwPKpwgkk+Wgzv+qfPoa\nUpaSOsXyxINJqmy2vSka3Qs9qQFrQkYC3cOiWj4u3q5aS8QGTYmi9FX/blb8\nJCTB\r\n=NOWU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.b0579acdb.0_1619512555491_0.15767900862801043","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/typography","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f9c227d638a72ecf1207809a56231679a10e29c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":22,"integrity":"sha512-YXmeZ0aE5XGhMbWgUx7dlT/VltS1GIzYUa9oHQL510a0e8fK/kvU9360eW+d6Xnkd8xAt2PmwBMdvQJLVdc1Aw==","signatures":[{"sig":"MEYCIQCAm3VqQPVwtMKV3nKIshVin7bntYPYYCljoHdquC0CWQIhANf+H2AAj4iXKX2D5dDTkIEPj2l/IHC5ssOY685E5QSG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHqyCRA9TVsSAnZWagAAQQAP/288ADN6WNXsiFUQF2l5\nep4ag8ENN0B0dAf2oFM49sUjT1PEPBPGVpvKzXZtG+zoOmxxR/9KzrGoKpCF\nx4Hd9jTn4yqHdx6J98RwPAiLC9ksr6lUd9LhcMEW4prJHWMWOKzCaC3bfIhM\nJZ/mAssFO/6HniY1xEcjEsd6XQddhA71YAKTlgshLM8jnrSasDsuAeUHw6rK\nasZ78SVq+w2SKj/XXGpSqCGYon06RsfBYdfDl3r0bBwb06dYi5Zku1SI82iN\ntdQqLe4ckaE6m3H7lYEeLENGhRviVh7gCe1dFcpHoGtQIsvvAGmg7R7y2i87\ntZ874xXsx6romYn28H5mWwxBwYhPcY5XZrRGYwO62wEERVO8LDuS0FIGgKqr\n4G56TkGCQOqkSoyMeRcDtvbqmT8w6khjgGTborw/QPkkYGPrKd87dRGe7R68\nIK7nTjzcRzAf1M1T9ct/xYbc9e04C+MzBsO4AGreUxBvQGx5+HIMUYt0d+Nt\nvhCTobCz9J1BaEqFIOqmPQVzNJRRQq/uDa+jVN8s+RAnowAM5VGqPwjB5r4x\n/NiPzZbp9QhoTBUBvNU4J55IGYKhjb34ORpiXUGsedom1/XDQeGZazQOjz6x\nXe292uc3ykhqydU1M3IjLel29RF0jDB65bjiWDaFLS0fnc+J+bsXGe1f8DoG\nFUox\r\n=uXKS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.81e2d4ff3.0_1619557041967_0.39900381730600687","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/typography","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c8b3e2607d8336ea851268ffcb66bad48b024c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.c8edee52c.0.tgz","fileCount":22,"integrity":"sha512-oEp5sAQp/cKCIGHewAMnDXyzyitAZZgiIWFT4Y2ncXFc7zPOtlfTj43iC1YaOZEaOUQgv/QJrap8vSzSyQXtMw==","signatures":[{"sig":"MEUCIQCjoeao9B0I5DWp7EHApyWSaXGzJM29Qc0/f9MRNOb7PgIgRm/ZfwKkQZx2LIjwaAsQ/4OaZtc9pNn3famF4vJLlNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYICRA9TVsSAnZWagAALkwP/2Pa5bTDYez6kPxLYQ5l\n6o+GXdQw6T75n39Pv24I0NbzijWsGdfx2799FJ6jZuof9XgaLrPBo62suaeE\nCjuh0CWb/hGMp0Y6EdhOF0iBgrwLBrjJoiDmVfIn4fic3M09FbhFV7rjWtrL\nLq8hrCwU9fHG4L77v+/I8tvGdKbFQSZYm96VRZJEoVh06ih+AWs1nPoA/Xcs\nQDZ1A4Bgpx7cI8rQ0pzOszzq7+by/0IZjiF2jAVhcy5LanEkQekZmjfLOxG5\nxqCVHjBbhvF+Dzcvl5dEdFtmJxVUYEg1XxrjneverhGo76nLBFsIrivL991l\nYGTxmBazibCG7rpFT1cqK4II1IB2JB56ffySWuaJe9LXC5Gj43xQoMyxO0T7\nO8wpSqBa16+EKM8LJc1VMuPfQPzkYSLcYzCFu6PqEziOct+p6eDUI/tKUh4x\nNW37G7wak6nYDc1UjV9wYTiHwK2AmZdIYJwmea1ctrznINiVtDAFoCpDpcWi\n7leYWzUBFUaasGqQIuHP2BJgrkuIAjjpRQGlBCq1DRhHlDsE+wjqbl3iY2Rz\n1+vOJPofMrrCYOBLPbiAXrpvMe2S53VqRf3S9BWisZVirH0CzZVjRa4Dz5fg\n8cmQmEK0mSuXTw8FcsyNPRtriUGpVWd4qVJjxe81AJ+2HnOCbUFNTG3pCa9i\nhVbS\r\n=cyZ6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.c8edee52c.0_1619559943607_0.0655789137121856","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/typography","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4119c424b15dc1ac0325e3a5164971b839d04230","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f5b6110d6.0.tgz","fileCount":22,"integrity":"sha512-07bI1unL5khV1zQkAnPOrdCbcA2hAWM6LFcbJ5iZWQ8/mQM5EO0zeEAePFKBy+mCGUW0JWPNOrXN8C1WQhJddQ==","signatures":[{"sig":"MEUCIQCCgIXABna3wl3LTyuXORtLISy8/rz3DGrkVLQyyJ4cPgIgZRgscP/+QlE5Z1Pgnixj8bPaCKNzYM6LUhlErZmSS1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIsRCRA9TVsSAnZWagAAEZ0P/0bIWo83f/SMKqIn5Kin\nogHYf0TmTSyxqGoMkg10if7wML/KXucgpQ7m5plA/PpkObmBk49//kjnnYIo\n6McO8jyrKpKrh0KCtW4yDvwt7o1lU4d7z3n0GuL4tiXVA2UjGmgLHwzdUKBi\nB1SFYzupwOrVGfk01RiqTh7Igk3/4KXK4X54SocR/QqdDtpv2pFrEUCKSko/\n050+wlDu/TbAylIClK9ZIMIQs+9J+Rebfct6f/nPZYoBTHWCK0WEs1T7PrIQ\n+RgROYIYevgZAWyXeTWjdYk7FTc8OAP4Pez4huR9wTIsKsIkdZ/+uM1W6DYf\nHp9BJwolChg4mCGI0AL3YctSNEzwX1NjXP9K9HYo5aaNM+6cDQm7i5BE67ne\n5qRxU7u7/wiaGgbyFWEoghCLWmQD2oWq5ZsDI0Z+KTvRtWyi7lQJK79Y2Qss\nwaTCioolfOc21tlw08lHVMyhWygcciqHZaNoyvZREYEDDwUsvr8FTNoNQS4W\nARUOeeRiAiVsWYbJEBf0FVYsF/Hwta8HlO6hoCgV5yU6RnNsXRK0xObFNDpU\nD0pNo2Z84EBV1RA0I1yC0tWWnKdGNniTXrawhH7tQoBq3jZizSp/XrGDGITO\njFcLcfy/XczhAqsnw3rUDbZxVoe7I2fzM0w+4yETHnh2d7qrHyRCEgd9kXui\n0+af\r\n=7S2m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f5b6110d6.0_1619561232819_0.48104204306627896","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/typography","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"232c8e4306a248bee0c8e3bb262c24e9eeccc562","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.cee9b9e22.0.tgz","fileCount":22,"integrity":"sha512-WoLqrPmWCdBPDKPe0Ez34h7Ua+Ytek5jwImrF1K/vugvnVKFDJxpe+VzOLYE+SW3QAVAwpHqdbBZ/scVVJvU3g==","signatures":[{"sig":"MEYCIQCRCrXyy1BDwjnbpcanUXFUgH44LB074Z7uRq47tmiFygIhAJ3h9hYipScseKGJQAJ5EeAmK+HqImT4TxRjNKEnXMUG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKhtCRA9TVsSAnZWagAAaX4P/20awV5Wg0o+0eRpPXgi\njXogPcwJbS3ip+FqFl3WdfvXcRuAzA3rvy9nltERkRBsbBOneLrQCw8gwf9H\nBHBOcMhrFxF3Ab0jqLdsFH0RcLRQJl4oTiDQ2j+JXSTt3qE8rnlw5/kN1I0z\nmgtPNJdqb8ZRfZSu13jzycR7nJ7CpW6It1rtyfOw0ju/Iqtd0vHAPrQ78yLe\nusRwGOh8im0GtnjSt6y7SdmOb+fgFoSbVo5Btyj9PfRVGOfvcBIKLq1d6u9z\neMuzROAN5dP95F/NbQMvTJj93I3un/RTUPQbs5Xtg/DeaxMBRHJKgCMGJPVb\ncpmLoTOIqMcpwzARnpQCxzpaGFfl+l0b9nCv9MAPwLJ3O+/I/yee9q9SUjXZ\nTcZBMmF7DQ+Lqxz2s3RDLqO6PNrnQNh/iKuC5LIF4sU9gHvhKL0djqs/1Wx7\nBAPBH5QtM5HJ2YmebP7PCH2Bzgt7NRI3RMQ4VAiS4lfTskQgT0hAdCUvkJrJ\njACRjVavcMc028H76gk4UA4JVr0P1S0J6E06VLlNnkeoc1pu0tU1aKPZlLjP\nu6Af38rULzlVLB5zD1E6zv2r5zZtzsl3V8qUjxg2lSNipibnuAF4yHsabhGv\n+U4GogO/mQa5I4seTIz3/dsBSiYZY+VvodbZyhMai767j3FvVrN3VN/lPStx\nPile\r\n=qYep\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.cee9b9e22.0_1619568749056_0.5451744679921611","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/typography","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00fed23e6a0241cc98347afd976f2cd1bcd787fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.96e83fca7.0.tgz","fileCount":22,"integrity":"sha512-iPYVlz/zP5PTI/qYt352Vc6vFumGfETa7ukPafUINm/+Qb4jEExiXXTT9Gbri3f20nKYsAoEMi306BeAaLM97A==","signatures":[{"sig":"MEQCIANnZSDK7Fk8xrEKsjhv7FDJE2HN3+78z7yTNORO+wAnAiAlpartIfarsu1Gc6VKZ+WMKgna3zhCrDtwUEaSRn21hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzFCRA9TVsSAnZWagAAX/gQAKPKd+pWovlKwylTS1Zv\nI04lZaud6ELoJw81i3L14Sz1d+7h1xWbPMnzrD66fd4JFj2O2rnOu6Rvi3hX\n5pBcpRfN9RfnaG8egwz9diqzhn/RUtCz8IERh3XKqBn+DU1SOwjXu3WbH+YU\nryegaX8cew87ohuP0zesWYuP2+Uqb+e5D4u21UCDB+RFzfGeGQ1GOlj0AUtv\n7PQPlZAQb2zLQo/dHTgUXojtC8Ztf80J7Ikue4ajqEMyA72G0lycLtyaujOn\n79nPZBaseZT1G6VX2GL4Hj9RkM2orcCVwuMbuBCpqWv1fI44HUGrmSAkl9Zn\n2srlpmsMx8Wml7seJynR1QoRrrbAEqWxeyMdk6drhmM4ibE227uF7gT73M6o\nPIheSEGzPorCypMVa3i5K8YegY0UBwTw8u6bN9B2BvWmLOgooucmN2CFxb+z\n4H7KwuOoh+IQfblNAU228VYTsdNud3iKbKlWWugodqsJBDz91TBn03kBV2qf\n0/DwFYV/wwsDkZpUc3M46eoem6CnZizRYHThI1sze5WSyuVWlKwXuaJVx8l0\nS6V1hce8+bObjS/0XjrIKMq7Z7s5PTmZA7IYdNn6jedc8DElLjy1tNBZlzHt\nYONzDNUQN3kM4c2jyvcd9fEE8XKAz94QvwAqKOo4AiC/xyI1EokibBxeEioI\nTLZT\r\n=AMsU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.96e83fca7.0_1619578052653_0.2273999294580511","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/typography","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb72f0ac64cedd84fd8271813133cc532ff03b9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4c497bd19.0.tgz","fileCount":22,"integrity":"sha512-SGfwX3nBPvqSWKSqQdm3p3d28hRL823wJ4rtYOPHGD+XtvtSrScRvTs8SZ+cLR2O5CdgXZELTCLXOuHGIFWXWA==","signatures":[{"sig":"MEQCIEBPLxbX+AClvHk0lT2hu7Z01dsBhHu3JHe+yceUIExtAiApzs22qtU6vLOCkGS7F7o2Ev5A+dU3WMtxDUvycv99Dw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEICRA9TVsSAnZWagAA2gQP/jRvSPVsTvrnQnsYxLEo\nQeU2LvfyZoJZzbSuMMCjUP+YZ5Dy9HakX/0SY6KsPdmt8D4gbLMfvF4SgqHQ\nEol0ogAlXcsFy+V+yrgpxHoBICimOpLDzwWn3CrxHrZtrRwbquC9EiW4/bxb\ngDKauXZDg+p7jAXWr2mnoFKwx0QC7KLdFSz6LnkFTbKUuRMXnHzs9jhfq1zH\n0dMIWiFWdCFjGRt+jbAPKswpzqZrBRHastl+eHycyt0lhph6uKcJiHh+TCrk\n5XCWa5O45PJeJUOh3CwoY46BBI34pTS9aRkzxdz0jJe1J2YYLmo1OFpLXCQs\naGnnq3P78Bw93J8ISX+t4a8CLaU4n4P699SARdZ+GBSLP1idkuL1eadWrZox\nIa1j/2UFCbyyTtHV8Zyf02nObepFsjosh3OI+ktDRbnE6VZrFAF9ISIc5ov9\npwlhZC4omYPhdC7HIj090U+/uuJG5lfnlE8l08jpu6k43ma5SV6+XU48NAz5\n3/VlJzMPhlHlH6+R+yWfiUIql2K6H+6DnAlDvgkNVM+CUUUYJmBrcGEdSTaB\nisKQEiAj2vvifRY72oVfzN57F+4OWc5dd165sS7c7OO+ez+atB+HlleQN6C3\nEbIUcKXIgAS3qqDfYDPcn5UbnAoJvnCeIpkSR7FSUwe1pgeH9WIBOh+AEdRC\nBlEf\r\n=6eB4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4c497bd19.0_1619632391952_0.6892993561070768","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/typography","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.105b15b96.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7a915a136f264a47221de6dc9d30239ad6729f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.105b15b96.0.tgz","fileCount":22,"integrity":"sha512-f0i1Gobqt7e2joHkqIwbDroMvQo1ilPO3hJK0hoY1l7QF8MFHYpIljYeV34jTxwOyEKF8Ai9aIjGqmWC8IH3uw==","signatures":[{"sig":"MEUCIQCVJ6m0Z2kJAtfC5whHxS1ebjurFeGZn23D7F/apvLgAwIgUlVkEnH2+RFahyOi9puizEjbE6XZuJg5jyp7WstzySo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidc3CRA9TVsSAnZWagAASOcQAKPSe/oyKjBGYeYg5wHC\nyABLFXp66wPmf1NsGeiS47+sJtNcytKiZv5rmI/fO74qlFgJ950rWnphEbQK\nBQGLk3Dw6rkV7zWOaoAekYcEMzd7BFAZKHUDeXowXteHPk4g2bSRfSYnXE6F\ncDKSolZuVpimpYLYCeIRw379vVGWrBg9ckqgBCTkUe918DdfsXAMTD2XxXU9\nFCetBhB8MDd6bbZyZuAvW+ZBWby2aJD2/uEexmYWGM3w0nNvEo8gQJRKPBy5\nOVaTGuD1btRk//KFE+fQ6fq0oGwbvHj7paTmTGhGhgAC8+jsidHPjTkHs8NQ\nTr/zCIHz2ITrnCA3diXNsqtI2qyUoDloQdNcIf836Yxecf6P9cMHuqkcs4F7\nRq9RnhLZiFhgkGixUXN87pR0EiSwEBsZ4ZvDvErMmPwye8Wh+Mz4C7KK1PtR\n/rGX9U0NvJlqigW6dbDGa5crdwrvrbb1qbd/QEJH+JCudvUPQggruziidYTb\nRSF+JEEx5/JXGOwwcWdB1hvHJkOr6fjy96K5sv+bdrHnKIP/DElIqXgnVltV\nH2ODUE1d4ydcLP5cioJTOYd7sSZQnK2OEk1UhTeW7fgQj+CwkHelsuJ9Qshw\nJLOqyXHZQLpRiCfEITBeu8vbxZzCmJNS1+FCFccCW6mGFURGAerM3H3ejErc\nJMua\r\n=YfMd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.105b15b96.0_1619646263430_0.7454998197752343","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/typography","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e95418c03db3b86cf481acc2e45a64030370046","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.6e20259e3.0.tgz","fileCount":22,"integrity":"sha512-Y4gHJK3Y9PO6IZ2zB0o1AEN2Zstw6Smm3LQNVGXvUGUlUwL7MvhJHqkUjUBKDN4kQblcRkft+nezp+jjMezZsQ==","signatures":[{"sig":"MEQCIH7uity7jRTNugWsI4D80bt1qvIC7I0oVq9HmsK3/XOnAiAMzdHW/ZNfZWGyHSX//DswUiqKJTevWctksg9X1vTH6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhJCRA9TVsSAnZWagAAJ7wP/A+Jwh/6E1H3o/zemYNC\nhFJgXRHDS8UJHEs0q3Jb9yNLEOX1iQOABtJ9vbq4rSrKgMOT9gmp65eCaV+H\nd9Fqja8FOFYY3koi7ehMnefVPIWcDTjhSd9k+GCRsn0eDZgDTUVp37LocWCk\nJiLX6Ty0H5lDccH4PHYiBDOJuBMgJmods3C615l29Wij0mXwrpMGK3KpZ/lZ\nyIF6472KlR5u2WERC21CoRoX+Nahqv/bw9zawo25NUwt7KjMMIawK1sE6S0Q\nsASs8qRM7aS412S/BdPrthnWDzVRqYNGCP+HykNx5cVDVnH7bRW3SHbW1qBT\nGR241OmRPKXsl9TN5YXMuVnrpIhqGCm4UOy03VrpvjpY630GeAmjmkTa7eL7\nieidjm0Q2yZNUdLO/GiPggaSkvX4ZlOIwxgG8wqMBbJRAKtS9V0SnS1jWo8O\nDIGXzt6uydSA8C2g0HqGr0C19Q/QHjZMBxec/Y6JYNhTKet9KyW1dSyUjK+o\n/zRhKnLrryDQELNMXlrJZ+NAy73MShYbiY6rTS0S7lMpqr8wiG1YMTLjPFwT\nrTE4YO48VAJoXUMdxE7TcDfctVJPBfTZ7D3k4IehgUV7X7U4LhBG3+KazWoP\nBZ02hSajujAzj7hR+Jp3LIP9i1afFlQbJ8qjG1L7lG65tWJIQEQDJDMXd94E\ngi4T\r\n=Petm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.6e20259e3.0_1619646536677_0.377545984112176","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/typography","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a45df87c6dcf56c6e5f4aa8541a6442cee44be0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.0f79a5d74.0.tgz","fileCount":22,"integrity":"sha512-7pNdk4Alk0OxxibmwDy1QY68a/qa4Ri90QW2AhdOdtG8HaBVepnUgX5QgG+YqDFgr+apZsj/NYKoTUH3y8RCug==","signatures":[{"sig":"MEQCIDgRQLTYziYo/OCc+BYcpMY7FxrxTNjETfsCrV74qnFvAiBS0t2ebw8muBPlpQ3evYTARXH9Rmw/SXViCIcsVoYBqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTjCRA9TVsSAnZWagAASsEP/ipNWwFJwfzMXD6pCgmO\npnJxCuZHYUIBNl+XbD6DVQhApzl+8u2GKs9e55b4sw7yzK4IR98Gs/RGejEZ\n3KR1yoe6RjFRjntz4uAuwGRh5do7e6Nc9P+SFJRixJR6JVm8A2/0w6iFB0Ji\nPve9sHwsD8ZZnJA5Yzu3kIvnDAMXHO7d6LAd6dNM7mH/lw/nQgQ6tCaoRDUJ\nTb+3u6WUIagq6xzxEiXUM1XokG5w4KrhP4xVsdSkr/yxied/P163gLYg6SKl\nLUrzukXmSmNE6kAwpTb8iiWdZgDYdjY1znNBJnuD9CRxWzSoWb91Wy8w37hP\njhbeBhZnbdkvvsfol3KeKuJH06jjQSf4UZO7leG1eCT7ndnB1sRdYAtceqrT\nRK1BIKD/l4fgQrCccVLVt8deREsbmGS0eebjtdfHpqG7GMR6a9E03kVmb8Jk\nLN4hQb2YXw6wYGzp4XTmxFTATljfdxFjZSiDmAQLHr7TEih2n+0KvrljsYqF\noxtLcf0z/+e+JBnyUR7sS3Ti8K+FFb4xFsM/tUGCBOBRwZAPltsfsMcghFmv\nJIa43zkA+MDKjJGy1PqNThwdyAE38okgBQr3+jrseQFgmjJIbC5qRyXzHkiD\n3hwHuL/pLdHENwbCayQvH1EkVsD0zfJsktnQTQ+tH24Zo9mtP000v59Mx7Mc\negS3\r\n=RM3d\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.0f79a5d74.0_1619649763355_0.18727949141963318","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/typography","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a050b9d5e31e76ca3ed4c5f41379b4e1198a99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.84f3db9ed.0.tgz","fileCount":22,"integrity":"sha512-6GuwwNzik1/CnVbG8yQ1/71YqQymSkImdl0kmJqpHtkB20XN4pk5UsJafHC+8PkWKibLKZZjddNrOc+Sqxn5+g==","signatures":[{"sig":"MEQCICPU3nBCGMYC8Q43dQY9OtjKz82nJP0GT9VRmJtXHJGWAiBvyRmlhS3Oj7V9dEcJm2vck25JoVVu4PyxgiAXzo0I4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgir/8CRA9TVsSAnZWagAAZzoQAI7mBpvXUWpCG1DghNu5\n6ihQTXP6ADS4/BsvhqkBPz3nBuv7jo3qzYuV+2w+iymDQNMmJs1u4p/qPEAq\nNZ7LBglhDigKH8fWuUR4CFDriQMjMMUnBBrcJj2AmLMkXKjQJuK4Fc0A35Up\nqEg1aS8n/8jnlAPt3FczQHrCuwT3gZ1pD2XLA2Ouw/ChpumFJ9tSQ7AmorWH\nZzM3qnPA5yIh/zlHm0zR4C8IHoORNiqHPQt/aVTXPhT/tJk+RhKOHtfAu79V\n2RQsrO1lV8SGtZYXFZTDt8hJFGlLfYyn6q6JhpKYVZ2cnFsey6U0OLN6XnP4\nkbsXOcZHkxpaY+wFBeWY7+sDBjq/WsWBNlYmOX84qS7/0L2WYmueYrTqR2uS\nxDlyOcIO9wo/o6izOHYxoY4TinPrzSy/BcRl0mG8Fqk7n1sshvV6LFsddrja\n/FcxGNkZi55GASZdvmvkUhkatLyjpJWKv7Pmszbnv8EWqFE5lkNZ8aSKZA0J\nhmlHVUNSw+gBQoTmQpPDWLYMe4TaBwUmTDHRZgfCmVQma9PMsf6/5x2dRlzp\nt+YfK0iaKbH8K137sb075wcGmN7xOHdbY/AkGUSDxxoAkFA/5OPIGH0Q9g9u\n23u36rGwIbIImjfSBIkxXppLwxe1G66J1vmrobQ5UWClqt5spGKO3mKFOAg8\nM7eT\r\n=L1vJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    $font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    $font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.84f3db9ed.0_1619705852246_0.9842483596190423","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/typography","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c23222f04b496809c042c8f96220aaa7ac6b8df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8fc29273c.0.tgz","fileCount":22,"integrity":"sha512-tTcIK4F60FcRLQPycto4Sb53g+8Tph0iNq6B0D1Ydo/Y6nk2+krP3837QFbO8y968gfxDmUT2dXEMiZIDMM9PQ==","signatures":[{"sig":"MEUCIQCzNM9Fo1fD87iIWJP7kmfaKJ4XBFKwXdATBvOVo6Xj7gIgR0dnHaS/VQ92O1AQEj300MoajuLzzm9qPQPmOhYQNk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPCCRA9TVsSAnZWagAAfaUP/0LhujR53HEgP50t/uaN\nC4QsAfSDNC19iuEQ95whM+83n3A8qn6hd9ff1PDiSkE6Qvkqcos6zevg3WRK\nOYkEydlMLoh0YmObG+c9SMjA702dSlg1fXFhLFdGbc19BkeiO4roQW+hdQ6m\nsaE7iQXVeX23mfIzlUNuOqkzUawn5ngkyX4YziaOggUVaHIyLsDyHWckGbTo\np7BrcwQnepGFt/OojewW4Ug3iiod/3ReGrCnaf0Q9YrrkodsMVIVzaFJQuaW\nfNGMgrsJJiDexpC3+BJiACh7KM7N4P1k3u3V2aKzJs9c4fmN5Uh2TqZixEKx\nH9e0yngyZc+q8lr9mUbu6n23QWhJfFJ2ihn9SULkPWOwKsj6GYEjg7O0qSaW\nRFrpWrMZ7FfxW6uviHT6Kkb2CTLsbCS2fCiCpBREWXxuleGSCThvUY0M/Izz\nB4vStjyKgbprwUL9nIFs0PFnibXXpnLJnA9SoXV8FI2YwWSGAHrq2PpxQU5G\nPMtXt/XXIAECtrPOLeupuVFU26wvrBUx8kDSAg6qw5D7MXO2PCmZX0li/sSk\nVZGYl2GjTpkGRJ/vdPWMnOnb2gt9BmDdchGx6Ko0m+Spo/0zER7Sc9EsUbcT\n4xauduFKDekI/5mfY3TyXNgTEPmaN66+mdoBTG+Oakis2bZKgffGjtaG1uFb\nRDgz\r\n=1acx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8fc29273c.0_1619731394221_0.4631244858818042","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/typography","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87d3981b18b975e460e118ac470fab9b1c9a893b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.c50d20bab.0.tgz","fileCount":22,"integrity":"sha512-TWuD93jUcFDh1KgMsJrHVx5MxCLx+ob7b6MWg4QUSTkjqORNdWrpN2tdd4ff19nCXdFVARVo36MG3b/5Oc44AA==","signatures":[{"sig":"MEYCIQC40qZNbB71bxpG5/GG9HhQGum41McVEiX/z7mVEtHZdgIhAK0wKXwBCbIHdpExiGECk1PVYq29FndH8DxtOhL5NxGz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrNCRA9TVsSAnZWagAAGkkP/2ChwB8js+vnEzFdZ29S\nb9Hu97GQeXIKiYWWlGvpoWuvuk5lSJZzU56CqP0gndUPdWlIbkc3pPG5f/+p\nHSrQJhEnS2JrWyJeXiawa/JCI3sbTBJB7SP6fz1pAFH4x9t4bvRSz9067Ykg\nOUsYA0Z5IcnOUPx33LApQkvGCet+W5eBQTwbg8jJ9Ma9UUfaME3B57WXuLzj\nX+5SC9IFDxvNxfokOcr35/rdC3CNYrtWHm6ocrIzn+m5r6W/DcFXOR1CWtWe\ndVE7JqWOJzs+DMuYRUbTAFJP81VlHHd4yg1dqCstUmKmCMT5UwytjbBHvbzW\naypG1ZzFn9hL9g7v8aoxVlRBUzh86J1PsrCtK2SInusKnMUPSISJCOkdCyPQ\n0U7MXTDxxl7QRWvXI5jOHREKBQ1ZKogbdkvDFU67LyLI19XRBlQRAZna6Ajo\nk0JOBhhN4deUPDI+4zYy43sC7aVget2mfdGz8hLZ2xMyRj4k0dwbjLscqZ6S\nhmIR2HTG+arZTMt9iqEYmTGdu/V9AVoqAREGgDi4I0R3p4RdM0ICNaFFRkP0\n/QmkhF2Z6fWFLUvfSkcJ+sJHA0ofUFZxahs+U1Ks30R37lhhWZU72vTVC0Tn\nqeAQctW8N2efwkhnpJzAvvsyVOrZOgvQHQ+XL4JCh1s/xkfkYhP4hBAhmiFM\n0+my\r\n=DA8S\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.c50d20bab.0_1619737293449_0.258540664224022","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/typography","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.474836ad0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"379ef84c05a628821219d6a2e298021ee8b0c211","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.474836ad0.0.tgz","fileCount":22,"integrity":"sha512-q9X/Nfirc0ZXKyXW8QO5NO0Ft8AliXU7JcI+/hoLrJMu9bOu9c0jx9YqKYyac9uq4d5ZdCYs9U+kgovl1y8Z2g==","signatures":[{"sig":"MEYCIQDWDATOmUKtCmh1jJu+EPSL7v6QAeyrdx8A8duVyLKT7gIhAOmZesc9SM+uv0PtRHm4Mh3G8dqpPAZ1K6WF/3qObgCT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMz2CRA9TVsSAnZWagAAQecP/3UgQ2CxhqreEcXNepGQ\n84TgnXf0zW4+LkOcH9RD2SG7ogP5u5zhDnv4MneWQcD22U0a7PLjVsFohUZ0\nzbR6Yr1Sf1DELJuc3pY2HGY3DJPFMp/BlpMqG8uCvWj6sqhC0nbMSjjioV+7\noMc/dNWMh2D1o5beS3rCMSU9cbnRNjhIwxSoTXNZ4zcWJ520PxpSerYJqZFb\nWMrkn9/6cliJ+7IDaur+6ORodFzskG0vsWu2YZeavCgIn1indbp2bkQzGp0R\nqhCnyHCEQHF8jjP3BcB8OuuC2sVy9yeZFkOuy7fH5n6v6Jmuau/ndGoMStAb\nAc8uB0xLklr1Ee6dHEwBm3nEJIiDzeuyagxEh9S8lPK8cJR3MBvXqPXdkTuc\nNVm8oeclZYl4/HN8X+u/kiWFFNDIkeaAvMXyIdJj/FjDeSed26+60fKUbs5Z\nlgn0VPdwlII8rcU9xqCpNU7KhWShdhak/L8Uo3OdDCuhDoCgm0TMAlMc6gH5\nzi6FPnwqLv9mkd/X23xmQ0J5fycSlw0Y4+WTVcqgQFaBTAccTlzx/AYQo++U\noWnapsD3MvgGfoiPEDOge1nvpsbB0/aa/X1Wr90uCsr9ZxLqDrA0duFb2WaC\nbPnCq45JedJDLQqZuFrKauzpbLZ+JWfGey5yJ5I/hhTtmAc3p+7+Bqk1trOX\n/jXO\r\n=vcV6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.474836ad0.0_1619840244889_0.06345551716384867","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/typography","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73b5b42f83dbfb1e7a590d9711ad40c59cdb07a1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f5ad92287.0.tgz","fileCount":22,"integrity":"sha512-UkmKSai3IIqhLJQmNcqJpQ4jVJ7LvgPhk80s+P7Ypvi+FJ73kkSuYUsVE4CJ6qQX9GyJtPPLu+DyUWX3CR9Caw==","signatures":[{"sig":"MEYCIQCrVs1++RtCWK0YL6ArasmBeTfZuuUsZIpTtrKa9Y1JlQIhAMwXJyoW201pMqapT6y8WG1R1Yv8axV310FXU+pnrg38","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9GCRA9TVsSAnZWagAABjwP/iVPDxkwFwV+z7GgMPm5\n0T9KhO6oTP1VTZG5M6pPwbcVNBMhtcCY9V8VoC0N1OiW+qVeKf+JfxSJHO7h\nPltsv1rTe13rk9pl8KelIMtnSUaJT2+9fBISg73jy1p4wbSRsuHuz1nYnlLt\nSV3D1fyExrtxwGQf60pEB4aUMPmGPqH3H1SUGalw+RSGHe14rJXvvA3yD7Sd\necqD7B4FIitQGMdZiIM0VYuwVFDYVopHwl4mpYOQvwXmClIP1/CHTQBawMRC\n8H6TDmT/298QZ+iSFYvOf6wmmpI2b7HqhdgbDgCK2cCBa3FvsrJxcgLF+i9R\nDWswca3BA//2jfpX+Oz5RAVYKJ2b1EwgRDbWrUP+D2qXrtB+umRdGhVSra7V\n8j4F9Q2lcfNxxpNrPbYiVbBTHuxd661i9bsHFmDFZyijvroaKAWgDWIziANB\nE1oCP4Q6LBJFxf18Uu8I8PZdMPBZEtm3DoBuzNFtdJZAKZ61g4a4Jtu6F8pj\nrAYWW3wFoTFY8yCcSN66tVohxjJE6BvKyJhA+Li+8RLaSTz3fQRzm3Xlls09\nMjsG7n99FJk/YMzXiFMrmTTyr3Wv81bGWexgm07jtQ2aKqtTYh/HRmSGrN5X\nACN3EcQYECKrf713rC17sbjNlutC8JOqYhwJRG0GQp8xk9uYLLO6fq/hCo5d\n9RxG\r\n=FCPs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f5ad92287.0_1620066118025_0.6317428955546691","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/typography","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.af453daf8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8541ff4b248ff347c62c01414368d5c0d721b75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.af453daf8.0.tgz","fileCount":22,"integrity":"sha512-inzXr0d6Fp/IQdELSzRXo/+sS/oKIhp/Xmfv+N3SL3mE7IF9ELFqe2m8WIBRDoRq9QXk8ubOueOXKW1ZCrU6xw==","signatures":[{"sig":"MEUCIB6eZoKXpRSQcq9T/XgJ+T+XgH7xvrpPqGO1djvMBfhwAiEAsPEmRVCCq7vIgiu4T2OfKJkqwyS0MMyYifPZE84EQgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEaWCRA9TVsSAnZWagAAIf8P/2C/62LEt9RGkkQlzErI\nRkM4n3Nac0TN/lIT33W19gRKCoIJO6d28PCIeh76/Ajlq8cJtd0SVqZmBd/U\n5/Jy4CJwfTzLL09tP321+8Q8FPj3/uL07658/JQ3ePe2oVvqBqBYUECH8hwA\nfZ9G9DkynqDpbZ+4BjRJTels0K7ZKLMReCFHyaRCP5UoGUe8PLQBu36JAC9H\nsT8B2dcYsKZFW+Z65yiRxPr/ugVBpl4mO1yuFkrt9oT4DBo2YL1s34MQp3A7\nPa3rHG2qsVlIxe6cJcLygvSeduvpPRAuHROebC531+HJ0X6uvMOtVc0aVLZk\nHT+2GdeRQSIQcIMaXWODLkAqUPl2xpWkhQS9rlcHjceFGiMTMV+naPy3fgam\ncZ0q9SLfwYVeXBgd99hknr3LKsbxmwCX7AZNEnFgsDssL9uTtJklpomJv4R1\nONSNa1rZrXyo6sdo59GDMcHqa/5BGgN5acoFcGPUElOrqgAX7JEYkdL5Wkok\nFPYTea4ebCKkQkQ/xOEQzdRsT9TBBmH1gY5oW0P+o618HbFUP/4EOHPkfv0R\nXHYvR6P5TY8enIhJh9ozQZHDs0ELjek1b9AgpmeHfcTtI8qzBaF6dlN1cJ4m\nPL/H6R25DhJOx4+ENp4nJJ9g0624JGPNHLKvAtEDu2P2+TFSjQ3mkib++nZO\nK1ya\r\n=bG8e\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.af453daf8.0_1620067990032_0.2035378940347965","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/typography","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1141e8f02308a4484da175d8e30a6be06716470","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.1f1918c24.0.tgz","fileCount":22,"integrity":"sha512-KO3EywRJ/47ynZAt2V3B7TKiqhReqGagVvS8jtKBYpNBVobOeiV+B9SFOBiCuQtabqHxCa/8kAC/yyJ2ZjPD9Q==","signatures":[{"sig":"MEUCIQD7hyG7YKtnMRpRMM8ZXAnP6Ij32J05qOx2IiH8kaynJQIgQgZVzKS0R6BlNv6LeYtMHuSdHUGWstI2tZ8jCYiqsas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE1lCRA9TVsSAnZWagAAokQP/A3tot4BMFpM4xNVzvVI\nf/1ayxnzuTMw9uFbtgxLAytfqPpe/WxUYOPlt2K8zOaiGHGAHg5v+GoMomOW\n1EZ10R5qk7fp5NtzjEfmP47r3gUrNp5w31K0VVALzq1awEPkR0zqlTQyybfR\nq5IKDNVdniDv8pXVXZDdtKf+VFBtq5YoqcIIXuqqeLumZbriN1iYz/Eo8XN7\naJTZtjJfr4ZIYTG9/ek4ZAIAJ7TT/LyB0GkmCplmN6lEOojLDGD9c1ZBaPga\nhN8rKQJnNLivq0W1wdmfkkuPLMXOKnDk7tHPxlajpM2d14Q+6Dfj/CObSKv3\nKXZpaV+Jm11kf6ZzVnT2HGj6c2ymC3W9+8gBaVjEAdSfttOteRc6HdBMtCXf\nupqGsKKdvTcdCfb3jYkqE2NakSJ7U4LK7r0JbETqjWIPFDX6fjU2UcvPetsD\n/A+VpIXaLu5m0mf9/YBXlG7+BJYzjFgTqZCenDl8tXZGEONnHhJI78T3a/LU\n/+coLZ5IyX87EAzEfEelm8go/pk/IA+djHpXprSOsOdhxo9iDnn9YxhqFNgA\nQex0LxPzBPDkH1I8YRyrwU5V7cRiwQKPOtdmIjahLRMjaLSD4UBSd8aXi2xa\nmrJmc361NhfbR2jjkI9cFIRyjY93jH7NoLazX1h/vim4Wj4lByOKLjkPRuum\nKWWl\r\n=qHNK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.1f1918c24.0_1620069732556_0.8596956284202788","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/typography","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.33148231f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e31814b5243e344c70101b7cc2a69d11cd380047","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.33148231f.0.tgz","fileCount":22,"integrity":"sha512-7QQfh7Am9+0nXfHuBtIjwzw4bmK4ZlVazziaitidZqSbnkCzwwnsJKSfdqXvE3q0+ELIDIbHvXU9eN5hBarGOQ==","signatures":[{"sig":"MEUCICcJ1uN9DS73jigvFQyM92BIaz4GM941NFWL6V0aHGH2AiEAtvK6dHt2hNSKFPom/RD/rgQLbxHuSGz/ANpWpRVR654=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFE0CRA9TVsSAnZWagAAlc0P/iKWLal0hzq77qUiaEHG\nOCRm5k1CwuImPeZVmMsOzdvmde8sfR0KmYLGrp6anXauEKfyNKcIR/UQQ6Hi\n4huPyxBMJucXB4Kk7i/AdPkuUTGAnzqDXTVyt9L/CSdQD/HPA3Yofn5nZzu8\n8KHixSP/4WQOuh/xcXZy7GSjuNr1LZ/mKL9P8Mw3pjyRT3aN/m5CYJtVE3XD\nOEOACjDqMVT7vx5BRcc4gGBIJ6G9MBLrkXVIZAw3Zz37S4C+bm8ovzO9Vzl6\ngf5Zhvi4fFVA29ag+IlWLfcSeMCDmxIzwEOXnOLN/s1V9Yygg4wweFZb2j8c\nu0pxOYzooKcjh+PKB29BCF/NoCsB4XqOiHZIhsIUsNeO1hqvYZsTU+YHZJxw\nG8L6KJ7SueK2rQ+pFZmrKW/A7OdrSMJVaWnQomSvSyg3z6Jkqob3MO1Cy7ps\n1SLErZTumdgNP+3AA5FQ/SOVmxnMti7G17gFiBjHuOebRlcZO27tIcQ38DYV\ndX/uQnMuEtRgApnr3/ItPAkzmgOFOLOENsvOHcMRtOZBtGbUihJ9lDQc66iW\nEm448a9CStkgXuFQaHYrqOTAmNrolu5N9uJEf8XsGJepavrF/zrS3OhjG54f\nqwyFU/aaCgbMN9+AzCWOSfX1Ac1gLoBHd9ZXf83bzzge6R+gBIwrvQZZCI4T\noaYQ\r\n=MUxx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.33148231f.0_1620070708500_0.652535393721577","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/typography","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac517f519942628266c7341032dfdf2916fabcbf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.06b76fa74.0.tgz","fileCount":22,"integrity":"sha512-dDlz60RMVCHGVGzFgILzaC8gxL9KXUAAuGKVrRYrSbfD1KIoiRHV3txKhkPFNdxdA/gMuRVR+X4afGpFf6G38Q==","signatures":[{"sig":"MEYCIQC+l/ixm7uQcmfRTURThxD6M+yvI9ZZ8UuCMCwK5027rQIhANo0mIid5t8liokd4fYBGCOdf7VnALmZiGnrl54SxUYn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFLgCRA9TVsSAnZWagAAPo4P/jswAO0GX7l0NpekmbtC\nIu4paikG/2FCkdTGrfzSLI/R7tS/iLBbYoQsXup99snMEeTDzSfEoNHwIrgu\ngepvxEGMbA+iv7INkEp6NC6mZkqIWJ+iBTmBVl+kTpaMzPUkYaxv/exKjNzR\ns6LZdQLtEutIMnTibN1l12bQBNuiJC688IklOos8ezXBOp1w6F8GvWJTvZAm\ngtWh1WzEoRIZVpxgHXdaf9ChJXR7OeHN4sy+X04/avJJYf3aewCoWNcAm8rM\nAJK4Atp9Mtix8SAPx2PvWj8P5KaygW1U8Cr9JFrP19E5sU2SwQ6DmX8G2egi\nXVLyTvJGGTeyXEizI1eLTUYi4imoHvMIma9g7Q6AG2rmWA/AActr14az1tqM\ne3SFBOSYCxDBYjSU6POhAPMzXhYzvYvYlASIZlRALflqY+J8i2LZT7ijnHWQ\nGPdGgYwL9skQJd+4VX7mKBYHt5nAphH1qSkF96j5cKwJAmxNw0RPiAwdREgR\nkXlZVBbbH3ValqjI9P7iR6ZSViwqERMuB/9edYDXEnwUulJV+LlFGsYzUnjv\n7BZZBUQDW4M2gEgueTvDEJpAbZLjWmNlXONJtDZFKocpeqbgzn30e3k6TwYw\nRVJ5rHFKOnT4gHTEw01CfWTRcmIpJUewts+TWkbfaRPzoZBDnPm2wz6IeytE\n/eiQ\r\n=CBSI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.06b76fa74.0_1620071135523_0.4272982532592371","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/typography","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.7c5000473.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272bc9ffcd9590fd1def2e40315f25c2cc584388","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.7c5000473.0.tgz","fileCount":22,"integrity":"sha512-Ea6Z4A355Fh5gxvKVnz5wOdrpaBJs6eFLumwNtjIYo4vNFc1V7+KaeKAUc4hm4VTenCcc6yzSgyIGKkr0GbtTQ==","signatures":[{"sig":"MEQCIHrOZ7jUqnOLwWap+s11UMrdwaMUcFTGeiviEdc+9ioHAiBJ9sV4ksF2so9NWM9740bvVnXcNUJ0HLYBZKZ+3R5lbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwRCRA9TVsSAnZWagAAbygP/jODs3K6X+B8m/e+vr3j\ndYlcQkdoE7oGNTZ6XaZBJe7jpCBwhY2VsDAQpzFG2cxzsoQ/uBarHjfvwmo6\n4RlcmCoLiIO+TibaFiHUw4TUPv70rkyxBfIhHvYS6bFJ0QMficfqP/gfWPLS\ndzzSfflUb6aCSH90QEwjTU+Pjjjxfmc728lzrRytuxMoHv4iK8feTaQEM9FP\nSkAtPpPoyVUXoJIRepb1As0oDWJTCtCY4pLcF7/uUG5xsrDf0i5vlYkfIgs4\nzq/YbNgqP9AVY2Hej4zWOaY7TK2Z9OUQwUqLOy5f1oTuEGnoh0cMTrzesZnr\niZq5LReGd/B9FnD+Fjvm2XucZue2TkHYAmXayacK9FlvRSmSeuNMmJ8+dhQ9\nSHlxccF8Que9foJV+cvxQ++2HanQ3A4UwUwX1py/BGeAVCxMyfVbS6ALSrs/\nfzQ6Tt1u+yRE6gamuhsRHg512S3G+Vu0yDzrQK43K+n17kJCoTIWrl3P+OuE\njVDoiMotjswjroAn4Lmj6+lMtW/6x6txcZKjV+FIsfVenfj/qPmLWbYwYJcx\nK7uErlPkD3/iCobEBoKHYDeaspK8B3a6eegFzK1FlmZEhxhqxWABkk8prAhE\n6lj/N1SO9bTckmD85qEMnRUARZroVGVUf4C/JaORvPVjApuaWheBA8aqRHH2\nKfdY\r\n=GTE9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.7c5000473.0_1620081681362_0.06082361046583129","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/typography","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.de997644b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97bda65bfdf959a45dede0d6a8b0ee4f75192683","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.de997644b.0.tgz","fileCount":22,"integrity":"sha512-c8iP/Fb8XFZ7ijveLTOgW/lhDBENCRFz7e/RRHGqYZNYBTbAVOr7PquU8Wu1PT/z5cKJMxMzE/H1/a6hrnz7Bw==","signatures":[{"sig":"MEUCIQC1UqPsQsgdpd7Qz68zE0cuIbmKZ9m4v1bT4lkYQtjXTAIgG8hz5DLEEIlgAm8yO6ZMsIm1CgSh2Qbf/DiFWMn+yVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQaCRA9TVsSAnZWagAA+38P/jlnTKQXAboraO8VIXVb\niXDerEIozl1Z7a+y77svOWqkplnn1LGR7SoD02qWW0QviMhaeirRZnlXhaNP\ncR26anWDD+5ttrWSl0belBGPNWVhxFz57h5MDFP0m56+xqPAqbRmmriq/Lzc\nlnW3RtLY17dm2txXw5uK0R1XflTsT++Zfd8v+cxslKTZdxbR37MzcM+VUcl0\n2X6Ac2e0GAP4tWx/lwIbJoYyI3rBTXYteB5OxJjOkI6vnE174feveT+6liRb\nGjsU2U4vDS+5n0PBvm66tx6LjcAtt7g4I9F8mnlO7DSbX7u8rW/TJjiRFyLF\nnGfsHlMVJCqU2XDhp615XAwwfQv4joCyIlrsGg6hQ0fjjC/EnDyOU2IQXFcg\ngmyu59HC14kTm6TnVNH6yxQEZfyNYMA9S63bjuXqzAGshIWOQffT+y1U9pFY\nFVw4/pqVIGWhKWRXcOdqP+nokmb1/czjaYNORK1AaldFUGpTFC4gHWkzHagR\n2NSqOsbYxeTg4atvdBjOZ+ZWJ+UEKs9b99dLUmxX+ttByeuvDdyrP2tDQIfX\nTGrcXx2D+oMUTNIP5NFCtBQtDXJiZgg05J+l63AUUZllNaJkHwdo0fnLOSZr\nNhwb3fhp0+ZMm/HDEgNjxDqaMBzKRmxccUm01j2RLdUgIZwxe97SieZTiBTJ\nSGYV\r\n=T6GS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.de997644b.0_1620149273989_0.5748892023519998","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/typography","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7417d0e46fe64ea3daf510ce53f1807b14ff33bf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":22,"integrity":"sha512-W/G+Pa81411nvgwvQRXfKSKw7/oYqLuz8wH1DmJOcMLbLqiYOMESAgzTpEoVLWwnGd1OAYKJ+zkP99ik6Qnl2A==","signatures":[{"sig":"MEUCIGr6XILEQZJ1y71wjHssasfduPF+wVowIZwE3Q+2vKZ7AiEAw6Kdt2kQ4gWAVfBiUsMPrVZnFkcOdFy+7i0eq1j/LmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYpiCRA9TVsSAnZWagAAuxYP/RNOBeQisI+SmyipDgPg\ntXHdBwvnoH5NQU0NYbpUCMfkbgZJsWVkwa5ITB5pP7T2U+pqGdSNwCuNEmge\nfv2czpOZdZFVNMnP2wskppbotHmZZz5kAMaoaaxtATBLVFqBj7HedvrKUuy8\nb2Q5oHzHLOptlcedhO14f2hG+xjz7A93nnR38o6f2g4BiK/c8+VBXYdqZuZE\nk4KGxBzcKSwrYVTtuRVje2CqJe2y2YEdgRQvPZWcOvX7eg7IKBIr/kVIEpvB\nx6vGz0Sfh5jfEvZ5Z4Rifq1uCzSukZGFG1p4LB1ITy1KejjTtY/NJ+c+tUDf\nqFfCyrvT/bhSzHcFBjDXoQDhFLDXtXc+qadgvcDUrntrOdyF4F5KuUIsbOJI\nlNAyHuk5cD3MI+0zZCirgE1puD/4IQdBggX8nojEVABfnon92PP/zjTFLDMf\nkATm97U44xNPb+KgpR0eq357qKcLiA/gwz/slxKg9gfvygmpDKUUIYTXnRFI\n0w4oyfNCGBKJnJAXTeslkAtVj/mWcyDBCSjAG+3KuVID0S+LQT9wiJdY7V0x\nyRWyFQd/LsoLZfoAFWEX9QOX4v9lRIMG5TwA0baWnrJh8PaOrLIMU5hEztHx\nQFHvD+8MsUZQf/ednMBcOK8lRjRw2gyQ52WpM6p8DfP1rZjFFas9m9Bg4N3E\nUheX\r\n=pacs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d4d7f1cc2.0_1620150881751_0.5690638533166972","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/typography","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.be999eb08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95f4e1d523948b9f4889aa4d24dfc122c8c609d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.be999eb08.0.tgz","fileCount":22,"integrity":"sha512-VXuXfo7gqBvRge3lrfpQTgeKhpbVIwM48BCxjJCaykxuvnG3l+JUIdXy2xd908+pfxCJhr/hGhD7qzAr/PCw+Q==","signatures":[{"sig":"MEYCIQDKUlvKKByjWMDMu4dMtI0x9WyqICJ1kS8ATfFlJVuDDAIhAMQfLnSVSp2Mf2NBMdluCYAV8EAI7CCF0eM6u4jwncRD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYuYCRA9TVsSAnZWagAA1QMP/2maYoWNH0xVQzl2G9EP\n1m5hIyitwLouhqtFgFpH7yb/2PSO6EaMphzxKpn8BM4ZVdpWrByFx6wbyjHJ\nW24k3zbHn8hKnxmTFaIN9A0taLhYRRL+ecpPgZCm9yD+9br2YziQL9JyCQnA\nH+Wim2UPm0ECP3o4drr4I/B9snT6TDENDqGCHbJXzAGb/j0X/MqL6DZo75TI\nY0rbJ4bHAKSnkfdfvceA+0Rps9mUsv129byfBqhRUXZxbvNxPFgWZwZRZaLD\nfNFU/QzWazKi/C3tDj5Qc5Bk9SKF38SO74U3Ld79mspX4Bp07CSL0jP037Jb\n+vApEuo9rBi/ktc9Kj9BXbF12ygtrZ/2v1k1dzAZVw5XZ07oVOjHpqvld0xP\nTpGOQzXw55gTbztJwRnoPc3ve4d0+j23TyumDC3T3fYrcVhXAyA6+Zz4flnc\nuur/gqBKKzlan/3oYQ/9o4D9C1i1b7M3aomVjto8ceKA+CbHxg4a+WAKttd7\naE9Uxwh25EjGEKwTkxf3OLUM+Q1mYMAKRkXYwb2j2RLnIv9hkUuyd7LIeREn\nrCEERFJWwlubGyadwozj403Vc8ETO/Cod/HVqa9kx641JACiP2Ccw7maVQqw\n3KHPOmbUhBH894AUgkMr9I4YUPZomRcdECALKK2a8UOUdqaMFZg1wVhgMhSh\nji+a\r\n=T5U0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.be999eb08.0_1620151191739_0.3136698336267798","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/typography","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c54ffaca427e484142fe838e0f862e652a728a2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.eda1705fc.0.tgz","fileCount":22,"integrity":"sha512-W2czvbuTnfjmWI2a23kapAvMS3f3p1l6uVbb+jRcSc5hfwNElSrEm6mFfrWaiJXRWbA4Sz6pbxY/BgtzJ51VJw==","signatures":[{"sig":"MEYCIQCRav/HH/ydxhc0ML8SujImtM7ad2C+3bpPypNSu0nIMAIhAL4/ils+6dR+hVv+cACfk7QWND9BCgu6IQXmh2Wec3iM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwGCRA9TVsSAnZWagAA/z8QAI5pOEZGTXdTDb+IUty0\nP+8fjafzl3fJp4kf46SPf75PFSd6ttqYlNUa6S5ymq2j+o+3xU2IdbN+X+eR\nBk8dZiygqCZk53C5yaw3EwZg94ccdBNpE+pCQ3oXAFoGMBbvNTsqlBbae3Oe\n9Qen0eZhZXEH9s3K0iklCyMBBMIALOHfr26ds+2HDk6YilyWVcBF8RyNiTDR\nertT1rj5SJsQ/vbw3rTUIzJvdiNsLcnGMWEwxZ0aKW9i+eTcaEhu7MBLCaBQ\n+tayz1lO3q+5VbcrPzTvF3bFrZpJlSN2adBPY8EHw0ep2ZuSEdxFrQe9QqWu\nxsJWnRvOxcy8VG5V0vc+mvI7RmlYTe8IFEpWEhuF/AFl3ZtKGYOUPIJbETeG\nZAWYrxrif99n3cjK6FTBu2CDtIva3/joRimhHJEyuNnLqjlBbPSbRv80nQ/N\nn1xgraWHM3rMhnaipVn2WRAChlUif5Zqccjmr4CUzpRxEGWz7HM/EoFIIZ9M\nICt+BEswPdfBsVKbzJ8p3gMvHlMlzrYqXaP8/VzaMiN5dHDLiQOnpLMppf15\ny2NY3r/XXF4qBz1eclTMX5q4YRv4JYt2QXos+PEj5XFQKRc3ilU4twkX2G38\nd+8lGR0yrUc0BuNNe/qmxLTCvPD1MnPKDIhTSMSqRZ6b/YdVWicj6FaUPNOp\nIMI8\r\n=SJh0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.eda1705fc.0_1620155398224_0.8477748213093261","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/typography","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.718c90178.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44c802a323cd339e1ae4aeb950081540269faa48","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.718c90178.0.tgz","fileCount":22,"integrity":"sha512-DDiA0K9mFGNcpSMCcwnot2LAsJrocCzrDfb0L4Ai5F0lwsUurt4OaQzg8lm9Slm9TKoy2elCHgmIuDt4o+/W0g==","signatures":[{"sig":"MEYCIQDxzRkxWEm8+G2vVJzShm+lWb19K9dF9IjR1OaO8GWSEQIhANdgHVcgD73ziWT6PLtSM+17fnW98Vxk26D1TSarFUUX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaAeCRA9TVsSAnZWagAAK34P/2PXbZdE25PNlCHrVGrL\n5QN7GCUbivhNhogr9X8CRRfSuStVmI/bJmzimzrKAMmPaJoq5joq6u527CNb\nKvRISY+Lhume8UwCudcsu7UAztXpsal7r3ko6IXGpV4RxGn72BgR6SSqhbax\nT2hfbQGP76EeDdb+aCg5JTrOXQxY8Uj6SP8h8K/ZMtCHU6M32OKJllViIawA\nJXGqYjEkrTsi2E77ZJytHi1zSRunVKPZqbTLaQWVJfn16W0neO/39LpxGHuo\nITSf6OUb/g3UdLvGNItJDp2D6kpVNOGtqr50GiL+snfSaAhhxl6SM56f48c1\nGxniDcpc00UhtpBZpfEdKBn8AyHubN2nO6byZAB2PzrP3jPeUxSIJBfcNaRf\nz2f7KUyEIpcNvud0zO7RJUbxDFfPSOOxJfAZnWvw6PQKtuE2kUGpxEVRANaB\ny19TXf2PGcSh8mGgCCutqXbVInXnsc8zML/Z0Yr5nUv5Q6Uc9sJA2BvcBtPE\nM0NK4mhXPQbx/efPCyMJ2PkoJsbtRyFrV4Vrj3IJkRXjEH3c5oBxTSmdGUJH\ng+cJcg4hS1IExq4x0OSCdDZ5bPzcHr7AXmeNA3z8bJCqbmy+gLOcIpSARmgK\n++34ahNdtduqGk5rP5Hc26T/7w4MlPGE4hO71yd2MM01YZYtbYjEZWgr+4/D\nj3ql\r\n=J69O\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.718c90178.0_1620156445939_0.8005490886398292","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/typography","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.0e3917299.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ac01ea5a94b6a96556528d7db705853d8346fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.0e3917299.0.tgz","fileCount":22,"integrity":"sha512-k1DKrRCXqhawhK5K23C0r/Uo2G2LtO+PooPw/mQQ2bfKgU3aloqT/+9EGgo8NER1Lu4zu+C4Wydylxcw6xRkmw==","signatures":[{"sig":"MEUCIQC38obk5TNBCQ/WqAGdJKlMyOCnPYXpdQaTRnAd8I6FuAIgSX2KnRz6tshf48+go72TWbb0wk0OmBrd363rveltjag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaC+CRA9TVsSAnZWagAAausP/AikO2PW4gcfAdt8nDDy\n/uaZV/lhSkPW5djJRYxI3hqD6VWqhhixYM7vJMn/i6K66dr+hpYRve6x9NZi\nGggPsvuwv9fd2SEopUgOr0KlSAvyO2QhLr9xWtjPWzzJGv1PTVernr8pmqZZ\nLcyuYNt68H9lgOXDikxWWuIimPEHEofYZWKNmvLLxF1P+6FtYTwzXYY1Bea0\nMW3goXKPdlRPziWsZDajSRjnaIymot+si6ml0NOJECV4hMMReqPrKZQC6r17\nb/hm1LXwYL4AcuJQOmh6dAWTERMw8pmvoVu7aMR10KMdJRjIYUf5ys/2t/xZ\nx5L378cPDNLp5QkRc6a6zjfPkiE06P+GF9z0vvkqHee+JFYUuP2jqXq8KEwF\n64IfEZ0/veKXGj3Nii0tG3PWxh+dr8ceSWFjY8ZycXCP+0GLrbBL55QnaJo/\n4DTvko4zwdmZVkZWyYnRMgObfPhg5QwPSE/yXwegg39GuvSKsRvCtWp+yNnD\nWxyde99j0dOw4S7X0CO7JS4vhtHfCCsDGh3q/xiIIWq46FQGy8qZLUwjn2gv\nCtcpHt4+JHjhY+FXZLLozlD3kyn3bsifaYxco/GvvS37GkBljob0fb0ngAtz\nsKKNaL0GWvjF8we6zNbvxz+MfdgYX4e7k+aIO1kBY8f1Gq2ZIp4TRaBgqNgB\nmwKv\r\n=dYFE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.0e3917299.0_1620156606311_0.9365181401642595","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/typography","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a60e595a0e0a7ee200bf8e97154ad047b2666629","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.836b3c7db.0.tgz","fileCount":22,"integrity":"sha512-VdtkSFKw/3CDAwfu7AyMi2yWUWpYGw2aOckNmk50QC35kvhk6f1gWY+undSIAlhSEAVWy5dudBqgSPM10UZeug==","signatures":[{"sig":"MEUCIQCkfljsf3Ho1TlwJ4zOzzhSLodb8SOvxUdE3ngoH4POhgIgAoWDXxX9d7m3keYRbptUXkTbaMpFISCcuc8URwoKi88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+ZCRA9TVsSAnZWagAAuQYP/2lGL2t2NsVgzMyR11g6\nlmar/++9ZFZSDd8lp5RaoQjqpWoKA21FYq3g6Sy8jLTwIkbWADten/mBA30m\nmr4Bl68Lz2RXAOiGJFVYN0r0wcUf6nIG/EtyfuwL2kib9U6xarMCdxR1jDN2\ntskTylXmkq+ArGkG8gDZAlKvw91U2zb7gja+y2oJadn2amAUNObJ5SVUCdiZ\nbWFz2jRHyipU0ii++gF/LiVfFj5WdzYhoLEeLuzw9Wn7w4YF3EAVog+D70bD\n5wZanI+wE3qFI0YeGdHMkG1MIJjDzRLVqweJxycgra48hvGhicCId0kOzD7W\nTNxb6JwmLRlrpaOAm/vlQdMYrjKoVxNb7WMSf3MnrPyWJQGuQc6AbIkdA84V\nEhpRPhbDrohpKKL70DqYv3jVq62VsP3sIXjbpcog9SgWqV7wZQTBr5M6vmO/\n/Y30KFyB/9dTAB7tV0Gm4aaVx0OvLjwAHvm5+MYEchJHSKIhcs5nrU+PjDHP\nehdeeiJ8i2AhyJkrK+kF+rO1H9IrWONUilgADlkMNtOMroYGqpDlJ1ol1a4v\nEiDMp98da2S7SweX7KftGoayolH3wLX/a7JJSsbb6whwFa8GQ8f4MizS0mZx\nvwImURniq77iitYnyfxmVuWxPM8Vdpcp9vp+hNIVwFQg8rmTxFKYtshub/v8\n/qB9\r\n=zvTc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.836b3c7db.0_1620160409427_0.40976075099984177","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/typography","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d825332c280a1ded15ac0085392c3253676de343","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.53d4e6d59.0.tgz","fileCount":22,"integrity":"sha512-nS83kWJazIhLqjjNDl1J3FNCwKO4jwve9iNVejelsb1+HO+TggfzMXKY5vptAFcPJGQDcqIaDBb8JM6Oa8G82g==","signatures":[{"sig":"MEYCIQDnpHOZs0Bo9STfO++ts5+z6hYLoPgc4iu9lGoFxwa4TgIhAISKDUvth0yXN0rjrksY3ztZv1VLtIf32RLL1orur4XT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNLCRA9TVsSAnZWagAASCEP/j6IF63RZf+FbaVBKuIz\nOt3aDPpNSfkdbSg5KiI9aQppfjP/Qfxifz+e57yEyUU7aQnZI/I2B+XqloCL\nkm8AihbndgCXw2JJ8f8sJ9QZSkA0JCYQKwkDi0986F1zqxJ2/Rp+ggVGAChG\nrFK8JzrNuUOribkYKPLW1zBm5t1OhHE1nmA26w0ON/0oIIY2u5aNFDvHRXgu\nwjF7SSUmwoqElH7kHMq90nbIHCESacHXL4pUL9Znp3Wkglz95RTtyeEZFeuf\nWWlXf1VreHla1TxpYKvbQPo/sifvLN+RQMj0a53FWPEy5BzpLM62DiZcNmJa\nI11R3tMOL0d2R09sc0UJp+HLGxCJz523Nspv3t34aqmTmL7QwfK/Jh/I5IM+\nedssk/r6MpJHRWQUBrNY0ZOF//RD3N0QtEiBL7Yat3tV/Xp/jeRIBG8/C8BF\nBp1oTR8ua96eER3I7TG7o2E6gLUpv3axIZpIIieKYrbLWqsQAu/puXZHIkeW\nMg20z/SMqJk5tCr2kyCTU7UPEuzd8sGFa2fgtDtk80xzARVIQ/LSjPxeYyYc\nEBrduMZXQyF3dN5e3kcPywcgXcV/Yh13x1BK92QHrriOxQJ0p6FhWjewnc8W\nj/XcOf8KxGAy/Yw/dJ/WRviYs6NOM0DGxXVqYj+y4tlEAGoeJMQQgRqMGlxr\nmliH\r\n=BhdE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.53d4e6d59.0_1620161355349_0.7586774716348186","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/typography","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.18d147e27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c90dc358c1041b95ac0714e02bb0953e049f7866","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.18d147e27.0.tgz","fileCount":22,"integrity":"sha512-ubeLxXdUxSupPB9V1UV9a9R777LDTDhdqnH9NccBZZHHFqlJD7LbKMiTuuR7TnhfKwv5B2hXr80RUvvAZvFubQ==","signatures":[{"sig":"MEUCIGQzBr62maiYy/nYRs8lp3l6GweD1p4L2uLs1+6CNvEkAiEAyLQdw2xkr/QS9W676VH4pOJZFl5IlKct+FZgMPoBsH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVKCRA9TVsSAnZWagAAlQ4P/0aA8a7Atx6ehraLlVVD\nCTNV4vdztrillQhBXcLrPhYzytJExth8+AO8PkgWNQMgIliPbDwQpUcXdsXl\n8Tx7HHHsnV00R3PXR180POM//rnVAI/tXBays44CPlnYwiUN91+lTIEss691\nZp8bwFl6vRdyfO86S6RKc8Z/VgiNy465uq5QLoRBoiVXczOL2Bpvq3VHplp7\nnVBH8W/A0MYb0OCD9KekVf461I6rLySQ9RbCMMFQJIs+Tgwoy0mAlSkegmXh\n1xPbGOhGu8epL2TznpJBZwatPlz7MuJe5WZ0aEERbBVRoZgvYJmKb6ZnUZt/\neMRo+dwO8dXUVDBlt/YhUdPzzjoIGXQpeznU+qJ3Lno4+XBorH4D6vgBlKea\ni+wesweDLsgVxQhyic+CznoSKsuyceYgE07dQ+TpsBJwHq3pzGpKtzvWq4pe\nLxghExzb+R91n4Hfs30pxoFBSF2UO94Zv5mOasPT3ccRCAjy5PKrRpGP+iXk\n5B0HPJ35FjPvHUL0cnc4SSxxw+3EnHwhPe9Qs0UjX5oBcoC7rWEouZZ1RDMA\ncXnV7oq8R+PpKZo+LLSSYWvrDtNU8u52UXWZaNq4Kyn+TH+RzzgCq6wbdjZ0\nHaNquyCPNo0GWe4RScJ4RO4nPeBDCJ/XptRSk9/7bzASjP2sMobpb5L7Ydn3\nOLC2\r\n=3kOk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.18d147e27.0_1620161865685_0.27830230899205977","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/typography","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.b9984794e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d50bedc58fc6d216a7d607e41a201d1869b7ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.b9984794e.0.tgz","fileCount":22,"integrity":"sha512-wyJVc3OP3Dj5jp7U83MMNt1AR31K6lTpGI1n2opSOZHI4Lh33GCr9Esz6XfVEb0PyAtWs8p/300UhbQs6lvKug==","signatures":[{"sig":"MEUCIEhy/syom3y7a4CJcjoNt+vl/E0oA1GSVibWdZopqjrIAiEA7nEINaHrgmO2TXFphpantS1ZHUN0342NVSO63MZV+O8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKaCRA9TVsSAnZWagAAB+wP/R7IWddfSApqBbzSX6lG\n6D9rpWG9bKGN8vSsfSILNpcQduQWgUnO3W465l9i5hlvrU1McAB3cQuRfguc\nseZoQxAEdKeH4wIpwPixufYINWRbmJgYal0PoEZAAEFXJR9FUbg7jmK+REQj\nlaVgcCod1Uykx6Z4JFfZ3Lj8ng2mm8i8T/3Y7bkAO5KvQtTlooFeXDXxJPXH\nVapzReQNPqpp7MVrdavIm1v0F6cRHEN+YTygQphxvue+vxv8oy422iz9wKmX\ngJj5sXLFI6w1WaeIKg86EC6HNp97ZFJT/Z9DIwXba1KrqIm1RGyW3JZnDh9+\nIDQ528s3KbBM7dRwqfYMGNN8Qt9FcCSvp+88oGCFH22OSCwe+zmItS/Dt90y\nlJ/mtBPSjcgAnMqwEhjmvHtV3gXcZ32wTL/nLcEvr64gLDH+KPBVAR2z9UvZ\noOb/m1pS2zp/vfZOcU2xBpCxA+8pn6WwhqnC19JYdyJTPWLYFyBYnYg3xSw1\nipRHTI9gCXB4X0H86VvTVnxHUVeKyiFuolZY80wERW1GpFaS9PvxYPNPt9bW\nlEcTHd4WtuoEj8ejQQMD2fBd/G2oKf2aKpRHsdGkimRADwtzNwQkeLaAhtZS\nWKDXCa7oRICEtXK4FR0kbqT2fzIXZ/yZ3SbEz6gMpGwjoH1Wlyj8bYHZDmsR\nvOZ8\r\n=anLV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.b9984794e.0_1620169369389_0.5062760751245556","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/typography","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db58f6a818dd38f5004ed60a15e980f4f61542be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":22,"integrity":"sha512-XJMAHBSrPabxU3E7kHdG9kofTsplqbo6aXs9xH1LK4nLvVefv6IXePsS+uUjOnsuQcNA6X8ZmcwjB6ZG7YV+bg==","signatures":[{"sig":"MEQCIATbCga77oJiiXvo9b4kJH/EsQqIIQBA2LhVhpQ6mcIjAiBMKjbx993+cjMHRUXgvTERn8vHs7ySg4gSTqveXm0SAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNkCRA9TVsSAnZWagAAOnYP/2EfQuPGH5+PzXbJxSOL\n33wULd2stEt3qWp56KNqfX2t4+nZjdnocpD/cs0TdIbu8dD9jtsRhJsAoaYF\nastUov8Vzhv/1LjdWbc5Xg+sC9DHpfstM2O5F2Vc+7aCaVjepRo0C7HIZPSh\n6BYGSdH4i7SacnqksUmwG/hiAQCDGOxM8511QSunAqhA6JS0iv7vOFQlgNoj\ncycsFJhy2jNJmXsNQZm5XtRbvJ6mTNqoijK4OCj8kb988SL2wBTs6kdG5guO\n/5C3vYAJTWsp6r+YtL+YlmtjDuFXTadXQ8A2oMz/ZXLMLR+mwLoGSdLRl9be\nPIrA4AEMjstmFCRRstK1rx1+6BAoyCuKgij0DKXoxVyJ01g2HpSzeGSTcHQp\niuRedERi8lGUVynwkL/RJ7yBB25bkwYn9L909jJ6GuinZu6LHZO3PuFX89xD\nps3aw13KVXtMCGo40HEErJiDSngZnmC7AHSW4pNv5vSklz9IFqS3iPmvA8kI\nzV4YuP7TFH9TOGLxp14Yv90SHrDqy+xLeo1a5lbGanNnhNBagLEyF60BRNQu\nCyukReCsCIbAhHkEyrMR0yYADdBiPzDmyDa5MG+5QNzBAQEwAYynyy6t0zZY\nNJ8VSM9hzOEuCJ4NAEdbqT/cZBKi2WuuJ/f8dcM/C++o+10ILL5CvJvTL1tf\n5Y0r\r\n=TdUJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.b76f5fc9d.0_1620169571974_0.29525994062991145","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/typography","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d790157539ef4ce67bed73a77d5c47c478c109b0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.055d4f10a.0.tgz","fileCount":22,"integrity":"sha512-c2MgbybOq4DPUgx9pXv8SfgMITDPACmlwHcnLL6YWnPPjgoLog/Avcu0n3Vqpnx9PR6VssT5KlSMkCBTPmwGpw==","signatures":[{"sig":"MEQCIAUSWYAyYZt81P+sQXwo3FTosI1IoQ75giNAoiH7AqgtAiA9EvxyN2OLE9frS30DdpEY/vRKUA7zIb7lW6JL6+Yc5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdbvCRA9TVsSAnZWagAAWQEP/jWXNz6A9QUXGsVeaFNg\n0TD0BSaDqO1Voh8hcEo1ny0nYbg+4FMmEBBwFkBmBXInSUzKholtMmwQpoOU\nxvkcglWS2egkpaBzaeLiAiKHvRDt2HZ1l9PFHw93WZJL8+vXCWqiE2dZOXbe\neCB8qnJoknrdou6xjefmfzuB5gkeixOxrdsO/eZssX7BEn4o3iLzrvFysoI0\n++y3sgluXl12sSRJDDVXKgiLVxRvwHjmMB9R0RX7cbnp3gt7G2tJ40pmCuU0\n8j2o72LxuSss6wEsck0i+JLPYZNpz1B+iIfQn1ztONRMnZAU9+Q8lApnQc/K\nAL7qJ1NqLD4csOlW/Ae0UjTc+OcheAgp3UyRrSF/UCT87D/VrVZehn+AiKJV\nKTaoVZxA6ZcC3hinp5bC/ptTwW668+lQVpWOlXk5/1U+9eg1PATerJPD+6cj\nNGWjhDagYw+XDcbWAlSbVEAOKX8MxS/o/DQ6pvjubqP3Pv/Wl5pbB7KDM6rR\nPvd0sb8X5kS07huTuxy9YUMQBW0s9P12iyNw+bMFLrUdL8RNBkBQ4E2YW6cc\nbAtK2PmTdPZoBm1TyoeeVjAqAQw1a1oViiHBq+2dKpkDxpveAWh4NK5/zZAl\nxV0g5zYnl8BhhfXnA27rJ54PXiRIwKz49FYIn8h32Kt/F4evj8KlCedEmUqY\ntI3E\r\n=7el1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.055d4f10a.0_1620170478637_0.03834114474252859","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/typography","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7e4c154205de584968c17a1f4d455fd84466000","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.5b6a46016.0.tgz","fileCount":22,"integrity":"sha512-xg51Z0lNZoPQyGHrXWB1u2KxawAD9ooSOn+c1zqqEJDyyFqdS6QshYeuHMgV/Nhqan+e3FtcsHPVePl/rz7x0Q==","signatures":[{"sig":"MEUCIQCT3f+bD+h14J+m7azuCJeJqYpOlvhzX0u28B/DmOWOTgIgWS1ZOFU1L9LgSLA6Fj5820PmirIBe70sOyH80QN5D2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksS+CRA9TVsSAnZWagAAs4kQAKLnDtK0mbqm7sJh7u0h\nmGPwZVdIpQfY22N9LlRitU5nY8sVGNQ11AQajtHbO5K1h8MOP9cG2yq1aeX9\nLqnjP3DCnd7BbfM+buGxWH983pA52PvhVDYFynkzVeh5gE3BxNfrdAj2rG+F\n/aciuOQOR4G5fEc6YuNa0QTOFJUHW1o1SRabERaWDrDf5XCwlam21u9roYsr\nUKYXb4QuCp2Uf+urViW+YAtFDyaW5b78ScEBzxItwbNXJzyPKcw8gpdYzy+C\nRSYlCJ6bgf9hPmrjAKiZiDdLinpEje1cd8cMwlG4WJ7jA9HAkegDLs/HJOcP\n913TSGqAA78zB+bZEf5jg9qfj5yIfvybMcmowdNTWgma1pzP/FEqDjRC2YzH\nEW+QtX6L0mbwC4bhogbQpIBa+v7mII1K2tlymJ0+H2nZ5ibAdv4ZIw1y1T7K\nXAKud20slyedSVxARDOoStR4dk7ivk9xLB5HXrbpdcLIzk++hKp3CJZK8FHO\n/UKqqGTB6Yr/WnKQBFE+xNtVmtFJf6SFBbE0/37BjrqZyqpwx18UgROSkG/Z\nxX3Ejqa8OtGJBHIlQ4G92gd1548hTq9Rd2j4RvyEgbfMiWcBGYuKqxVAUxMb\nN1TkfD4s6MsyVA8d1Xu+LiNtKtieHXNgJJuBQ7oPL68Z4AM3WDb8yVV43gRF\nEWlA\r\n=gajx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.5b6a46016.0_1620231358016_0.46889323069735256","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/typography","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7035e1c39d1a6198e91e99a416165037745b316d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.33c9a737a.0.tgz","fileCount":22,"integrity":"sha512-IE1ox79YHdNkBaAa4TeFZvZ3LetuqKeqrliY28bjKettoHvBKOJOIYVYlos9lU4gBzfBG1kMOTDrHkB+SXrLVw==","signatures":[{"sig":"MEUCIDTfCdHJ/DUD5XAgspBhnVIeFfgy1SKvUZ1zUS2zMVqIAiEA7izKSNhnIHNisrHguwWmBC/RJ5Ieixu68R8leY8b60w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVcCRA9TVsSAnZWagAASM0P/ROmZGjJzynPXPQgimpo\nUjDI3qLAujFaYLB/WRwbEx/qVNxgvdITHAxRHZqA+y1bzHk0w1UPvgAQscIp\nT7Yy29t+yG+8VtqG6dv+acyNtWmROpiEIdXl3UGajiV/YmJ2ZmO2IkmFgMa+\nRMtEeHpH+5/3mwny3Wzro4SUknpXurMEBSWhMQkpfxU2+AdqB8T/2t1eJ0Q8\nAhL5P0oyik36mZ77mQbOzpV5tnZv3PCuHWZIC97tQWDa3EYMNHCuhaN4eagT\ny/ue1bPBAcADYLT+Z+R52DW3sYzgqffnmkZu+X+x/YGVNj0fqWJxYsHw/ShG\nzjJrW3jjyzHVhvzSiDgu9LOpyJNOIc8XkYmhb7D3dPpJkVDwfvdJHe27UwXw\n7kg2ux4N3mDFYycFTY4jE9EtHAfovT6qyH8yUwUTHEJU0F6kuUdHLoBGU1zH\ngsjSr+z00puoem3acg0r66XALY1l6WLZ7jVVzBmhvkrLQmk7+t/FXZa1vSMm\nd4OX0Y2zKDYdoo+gzz/TBZI0T+PSjntq7MR3TvRbxi8enVwafQ3EMzeSLwL7\nr+7G6WJ2C8KXMRbnwq/sfh01wMATE/k0X0Vdkv7G5MJRHPunukRWjnZTTCbj\nX5Z+bfB1Y+ywGZ5kNF+E3pgYtGYxvDYFHoVZdb4rd366kw6nM8lf5Bw+ULBu\nR3U+\r\n=OV/V\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.33c9a737a.0_1620235612320_0.7441479329654748","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/typography","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dab1cab7f5b5669dc3c62deb6e9f6d51e4d5824","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.9bc0effaf.0.tgz","fileCount":22,"integrity":"sha512-uiabDb5z5JphljPYQ1UKSWPFuPDV/vNNoe7mQrQtdViCbVW0b1mPtQ0DALuAJ+uShuVkkZjvwkp68BKtErF77Q==","signatures":[{"sig":"MEQCIEezTfVe02fn0qN7TJ1ioakk2WwpcSsMc39JyXxqm7uxAiBOPflBGPp0fUiFiKLvZko1Sn+BtMs7JXdCVL/oDTCtgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwc+CRA9TVsSAnZWagAAEqEP/A78s2WHKl0a94Up0Klc\n3Z+q4I5k/VsWTL09a7mPrMt+pnubLpV9Ln4UR+80qxCgARtn65KrD7zBzh+s\n3DQu0opT4vp2penxMuujPT9Bg9Tkf9miEQ6pRPtVrRDYcqlRbUmQrYNDPJTU\n3ELp9vK9W2QM3WW5MWpTL/vfNMrP32apTUTlz6Le8qh8LNB2K9MF9S93fK/E\nn6EHYENCIQBzqc61aXPwehD5D0n6b4gHn0MGfBqr0R47I2qwyDThUcBWf9+z\nzKa+9D4xv2iB1GByNhv9g7ttRx+zt9/zxc+rsABoMEWBL6uHqhkn/U47M0q7\nUzL0XwIaIDlWPEwA5GcrMS+D/B33qDNjc4tvGBAJMUVr3020UlsdxK96iXNt\nzTH8DxsXHJ5BwJbweSHWoHG8kEysayfFsS+RrHXkLqnaNk9/AO+ZqsI3hUMb\n/i9yEPMRy3FuW6lRYSE9wwo/2EFZXj6uQeXgunxJ01fFlqNv4ZX6pjZRMame\n0FMfq2vHdMRAnK/PLdPfqjXTBGiSkYiUJZkNca9QpPL5wwdk7SkyZly6EVrt\n+I+fNW0lFM+Hab+Y6c3NmRjCbbI2uEPCNd/Iaan93AB0E5plCETAh61cpq/L\n9KDht4zLplXJnysb56yMCDmKx6tvg45JewbKDkmbJw1zzdeqtRpnbaw/H/iv\njNKi\r\n=BdNC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.9bc0effaf.0_1620248381674_0.8450256016540425","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/typography","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ab36eb7790238f4abb84168c6146c022c71b8ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":22,"integrity":"sha512-sRhW/3Q4EG95r4jqLbQ1qlisMMxvcrq8XkVcnPaiQgH2ZjKnelNLLyHrU3YTr6UytRi+A+G/qGxrtFsFOi2lnw==","signatures":[{"sig":"MEYCIQD2SvHzbvefG8VrvOQ4sTj+5hPC1V/wbvOv4o4TNbwUFgIhAJdePX1nmMaBWmUwx64CmG/VQh8VwN9l1LzXFKlpicWG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDUCRA9TVsSAnZWagAAv8QP/RnC65g7/Jt9jYFx30RI\nGCAsiAj3BB2NaLCXc5BT/1TXBMYgjXAw/V6YepuiyvgBXWPlscIDdtn6Mx96\nE9T0ZQq50jkYNtXhXVvd2yPKLVTqrJ0/Av1Lf78UAwGnaB71zWT7bxYrled0\nfU8Q7aKgXyvaUPioHtzKCGOc26P7Pqp4yG2SeaKnHhEhnK2s89BsVmaqrb5+\nA7a4Dr17DEdRdo56OwmPww+SLovT+7DzugnSDPFsqvwtFFQ5cPmOaASvi0He\n5ROZuKCJDAFtqSeoAv09G0ES9J7dE1rlJrcsMGBvrRvIhdr2t1kYc7Q84FPz\n85SlMHvsHFOQx30CgI2hinijq9FjO3HEqzQkrSb/L7Yg4yIJEEYagnH51c8f\nlKgf6uIF9ChGYIvbVJqLoYKtg8I5vd+yOXOQdDgI7VXN3mnrHNUaIayu9cet\nEK7+fOXNeuVpTQFoLBcbX65swzUOAoUOCwRzoiaNJ1+8rUwRg4O+treE8/MV\nuNSUn5b2fxbYFBlPSYZwdp+jjl/a62BGHzkY/IK3TKWnyILjlBP8edj1KmIn\ndiiQy8GA4xvw9MhySX3OtfsjrWKCLaRZNjUrzySkFCtSt5QwFO3bBWpRwItg\nfqW/8r9M0Wns8SX9e2j3O7lIRbopI/aPfeT8X9raSP4xEU7NnId3oCNWhWEG\nANr9\r\n=Kf2I\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.a1e0f2af5.0_1620250835454_0.35318006274882774","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/typography","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.06930c96b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42dbd4a2ed098ce9f58c26bd3d65a0398275e9c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.06930c96b.0.tgz","fileCount":22,"integrity":"sha512-K/m/a4VfdfIV1vsNWbs14gFFh+YsLHpu1uwbuaYKFBCCc0lMlI6jljoPCRLC1zrjj9+lDur3aP4FvhrDN/iuxA==","signatures":[{"sig":"MEUCIQDdtsAEjzl+DBzwd64RwoPITum9DC0WUL8DQV+nrbqSgQIgK+6MVkF2IcN/sXdIdLBQctwk8yv5mbLcRo+Tf+CL/Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyyWCRA9TVsSAnZWagAAHkwP/iIbQJr9wU5CkP8mRDig\n7E1S3y+yFBezMRq3rxVnUnIKKi+cppXD4QXu9zKyw07GCm6BCqyi/vdXEkWM\nMu52WTpNiPsH3Bi9HRXR6DwzVyGXfKqGfBuwS1RHyTIWW9VxAKiV/kc90bC7\nvJdH54gyKOpFHBIWnJqckOETdWoK09sdS2/r7GTJ1O1BacUPJcZYwv7P5m0k\nmHBQ2tqmA6djJRXb48rxeFuRKDM+n3mKtxkgnr3ofZdfWvm/z746ijm+KchF\n9iYxA5jK8J5S4JQLoR/ZlXWsw+ZRStn2N5HWivUuhjK2KMZIBY052e+Zmeor\nZbkvJs514CrghM6Sn3P4sZqFrK4y91D6okzLSkGQ5atBNm+IF9++17+v1+d2\nXqn3HbeQkxdntfRqoJnIanAcu3JO0eCfOgFRTBvXHbPq9yBbBK3ku/lcYiEi\n9AItJY+YP+gVVMp9RB0HhH/9WG7yXSxqMtE2fZoL/aD/pR17u2MUTbBGFotG\n3gakNx2phRaEwsXdze38Z0i90sM9j+UB+KrPk62Rzu23os1pYEfOgYDsOz0g\nqDFESKQJhWFfrHpQf5EeGZIggZtGL89HF7zPL7gqoOTyP7MpNjwT9hgGYhnQ\nE9dWNpkuEbP2vHBN7sm1gNac5kyXEXbJRk6vk92yF8s5s1sWqrLhBdnKP9Q4\ndLGz\r\n=aRhA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.06930c96b.0_1620257942373_0.29958972120290683","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/typography","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64f1fd266d1a1a1ec1798605f5fdd938ec1de4a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.03f525f9f.0.tgz","fileCount":22,"integrity":"sha512-EyRu4I+WiKSaH0knf7zClAUxOE/M6FQMDX20EX2PveOIg57EuosPfinlXiY1J6MBfXRjKGH4E88ySd0tWOOphw==","signatures":[{"sig":"MEUCIQC/XW1pj6SrSCUZh/8RwY6NW6tzVNJ2n4bwKuT4uEqMZgIgFoeeluv0CtmtZsWVM/vCJxjIeAfNt+x9uCObMyBaOVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzh3CRA9TVsSAnZWagAApdUP/i0LzBjc3hrsKopTHqLZ\nMV2czErVdxqX9C1M72DhelKEiIoxO32YGgElT3HD3I3ail2I9ko4fUGuIlNk\nbajyucP762sOioVAfYKYo5/2FUA+hgaiQNg4QXUkCS1lY7EZdcLGKC/9FQwa\nB/HQ18OJ0EO56FT5QUWX/LT4FZVDfJ8gJfx9LkjICTNE8hVb7IY0PdZbAYkf\n0vqIeg3JJBD3b9HXfMNYmhWZwLw8bFaehldm9FzMtadwgT+cblRV969MXG3u\niClbxImW/KcCl5kwstqbd6EV7iztKq7qZeRUb4+u6+Ycgwht/1Q9IEXe7Dpd\nTQ9cnZ6V88X82TKgFjkaPVoIsZPpU0ACJU6+2YRXJUdHOHGPyspiEpDudmdB\np/XyElb52+L/GbIZCanbjPj1cTW8ryiisiKWj6CMlaPZNkGZu+NUgrR1J210\nSHAoqg3g7H/KwlWvgKLmIBwHBRVk/T7NjQY8d1oR0Xtvz+MyCac9tz5gFGw0\nqkd1QD5eU4WWFz4VjQbDaf0XhdOl8+bbgWhvvcDZ3GwEF0xrRbb+2i0DC13K\nQkVnxjkPIDUxNqukYHY5iD3PI1GKeg+0RfB2oofWRdMrxKpp4Zt1sC1EGri0\nE/4xM0S44M8TCKetiHhR3XjL6fxmeVzrPFOTJ8abO+TRqZ0/m62NBkpUokuT\n/ofR\r\n=pX1N\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.03f525f9f.0_1620260983429_0.6602555680776026","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/typography","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7de4437c106759aa239827534678dbd879ae688a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.e82ba2a26.0.tgz","fileCount":22,"integrity":"sha512-8TGGM2G4YRNMHa14uodQ1srFSRmq8ZNm9YmksR+lTCDIul65fZzGIIg5bKpS4MepeRvbK3tXM5WWxUuVTmhtVA==","signatures":[{"sig":"MEUCIQCFHdMT6u/e18KZeLM1ozjJQ2ey+Ud1DYIfIOA0Py7JBwIgfdsnoi5UBbh4QzuPZl4uvccgjgC4O1T42fLEnBPOVt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGSCRA9TVsSAnZWagAAS7EP/3I5W1hTJKBHakfaXQYE\nwZZvKzdIzIGnpfHNee72L6rH+BxdBWzDhjEVvNJLug4PVkjBzDrHuamuKZ4Z\nV904saxaIRFR0U5bHd+ByaXPW/u4Pj4rOaEZBQX7tdX5UtHUAyeGrOo5/f6s\ntsXXWCCMtjYKEY5HkM7xmE6SD0aHvg+xsR+tCAjuEuk6+zBBE4cJoNBAOeQG\nV2DJ7Mjfbbpq/UeLvpQ8o61Gt9KoYKImDzDeyA6VMXqXMAaWw5GYgGraTBrk\nhLhAt9+yDpfvoY7JDWZKRuWhpNvDjCsd21CCZ7ONUdSZ+TvpeakpRsSRQ89X\nG9soV/uKyDyn4McTZHYVq0j+cvH+gb8FPE2qeKkXQHLA+4dVVaEfRhzfjylQ\n6DP6hBU8jq27WtzFVmzc+wNYBRdlxcOyt5GoSDiVTJVWHae35U+cAag3A3cK\n/3Kehaxa+f9+WCn4wHM+Zbk41h6Bw8sP1ixOqshlwwhDuC59haApcgZHiy1/\nV08DF7t3hxOlvstm3s2ARQWcXQEtRmzF4qAjT5p9ps391VDnDGG0HLXR606Y\nHX+ABdP8DdX07eXJPCQiVztuxhi3DPVj6/l6m2RA+gF+AdhzxqWb3+9gw01R\nRkzzm+4Wr1+T5ZhoDfKtOZlCZk9/+LzLNM439YgF2yTsTtjNMmGqlgQcL0CI\nZMta\r\n=O2Hc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.e82ba2a26.0_1620316561944_0.9292020094390787","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/typography","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6814076fc44b6e2f557ef6133adecd48aa0911ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":22,"integrity":"sha512-HH719LMF4J8zinJIQlz7qc1505cSjTzUUiXmH6paG7nwRr4Byv2zd80aqvYe+WxlFHi8YPBNiM86tb6dsk/SIg==","signatures":[{"sig":"MEQCIA6qQ2Z+PHEBzVtdEbUVaaVbr7Z3KCGZDhRMLkUMfDVDAiAoMb3KcL0jMGqa+Fx8vMaOfLLw4eJgMjIDZKFwUtEyPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdfCRA9TVsSAnZWagAAcP8P/iZGxDu3kJFYchGyrqUT\n9SEFI81ot0ZfWGOeykVv9Mr0gF+Gi8Id9eMf2yY/ecQqimoSwWt5KwguKoJ0\n0q/+ohp+mJOq9PhpubznL6B3fmC8NqFJBz2ZESH225/C2PgqagzaiyX8NEmX\npxtzsFjvb+ANjw4wO0SL/XmWzEJ5DYwKkvotif+GqFfmuftWLYMLvbVGdr6o\n5XV0NYAHFI4dnoJ3KW8d4y/GQChrkYHSJVN+uo5+tCrX6KLM2rrqiFzToKXE\nUt52qGbY2p14ROEES30WcJxM8ML/mEjet9wOkMZf+5/YGlMDdaxmdpYCSdTp\nJqAtB9PY5AkPi0bwZuubFJdE+x9APcGgx9Zj2b0UspKvlziCWWfqQVK6upmH\nzAQ6kCSJPB4zqy1ospqet4kL2QDNNHIcrSgGocGg+f8Z+piu/h9QDDElneBR\n7xpZyWqkZSdXKJpKzu5T50MYIzZkMSRqDfeDBv3amWK8Yl7zZyAn0vfBEPta\nrXKbWMwwzxrmc4nH1JsVoLTZHcyxkufvarppQNmQZb1qgNt2Z5k4MEcirn96\nPnAq7x7lvNqngXOsDSJnIQzgrUWSAiOxdfVbyVofIqtPn4CZGi46ZPQlDCqA\n/+NTFbjHbI9u3Qlj8sGuy/QJDK10bjurObCiHx3OncI2udwaxH8Ti89SQIT1\nCiH8\r\n=hOaS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.fc7c4e5ce.0_1620322143004_0.43242730170158983","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/typography","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.65c04514d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24808c2965b51ff930cde3bd915d4ac16af5d374","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.65c04514d.0.tgz","fileCount":22,"integrity":"sha512-J1CTAzCi9fL7r+gmb6MKd7ke4pXJM6fkyKw2YVHTQvYCaoiE83eHO7nzUJ1QcaDfoIuH+smv0p0V/G/Q3for2A==","signatures":[{"sig":"MEUCIQCytriPih/91DUZyVh+K8hHFBwysq70xa5iwrdjwiEKDQIgMRSSM+1OitoVVsmB4C0TIJeLQL67qBoQx9HrcMZpr3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDi5CRA9TVsSAnZWagAANY4P/26P3bnVDO1cF7ycaOPU\n3HSnJ6OYgiPpC3WIsfyzst57UTyC7ssHSjtFFGx5MRmGebq7HLptjQXIf8GS\neki+KsBLRk7h94+6mo/FzL0IX6csm/P1KqpdXtjRY4xdnJZekMSdO6UqE5dF\nu7BQY/htZSAYtXO/q+iwOhE1xmlCbiSqGvjB1YymFxemjUxJTf1w+GSN940s\nZ19ywFsb6cJrekgfiqLB/jWK3oQt8qicwRRRnNHRnpaMcgpl+aZLFr+ri/20\nS5irPBVwoZxpw23r1X4bhdxqoZCbFS4eVfxmxsNJKq0n0D2Oy5Ds4g/xdDys\nepqJjdwzRc1fllPPzwShNY4KbjnzW+kPuNJut916EaqYFCBhpqht02ITEN/5\nKzWDLrl+dKLEv4zAQ2QbEiz6GkSrLLl4H/6g6WuX2a24wm0ZvWOe0UxaKbxG\n/emCbsKtlySqC0Lm2s3Byej7Zp2eiQ5WSDFzDDUZ0vuueGYI2nfyBoGrDqE1\nPMEzQvfXZAvgKYGp/O8e5qTMwfIiKEfIQ9rdbMcEzmkaDkVngFbA3nd/zRag\nRtdt3WoBQTcz14hrsQx7eokkC5rI+pcvVlPGBVDiErSZY69T+88Cj7F2yA2H\nSlKHKvizdDSyhDhrVbcCi5bikIn0r46xoPCbo9p21ArzNX2m6g1bs8TzO1TY\nISmA\r\n=0c3D\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.65c04514d.0_1620326585344_0.25573291311706514","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/typography","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"424cf043d54a6d6c32d29a7915ca8d139eaee309","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.c97779ca6.0.tgz","fileCount":22,"integrity":"sha512-6n4Oh12If1p2RdCJMLCQS0PH1/H75hAOppdBUuES5jUyJyrs+F3HN4iQ5+ogD6pqE37TQGg4BuDWB0qSgLZgCw==","signatures":[{"sig":"MEUCIQC5KvPcyCI2WRug06c3vxWBNv/4myXamlXteHRiBbn24AIgTmLNO5rs2PnVdXzmxka6vcfvl/KNSwtnQMPACIineoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGLTCRA9TVsSAnZWagAAk80P/3B05OrVff7ZvvhLr9Xs\nQFeDn4Ueri7smf3yaiIWq1lNiu8qsd1lBLI1bTV6OTC2fwpCK4LfU0nd9mp6\ncpbIjFQtqK1Y3RRr00a3w30GXHL99mholIRs31uvsa2v7vyiBwdQqBWLed19\n63qwUejAwk9v3L2taK2BwUJrh8D5qTuexv/3+i9YmsCjcTz5mf8uX4iasPn/\njZuY95muIXoQnTNA+wbb+Yoyq87Ns4GLAqeFp78HnQ5RrAlSBKd124xTTlHO\n+c6uwtD/5L35N3mKjUohnpyhaKxJlFYIU4Ux6trGNtQH6EefvaOQ/HT3+ClO\nvJynhB52xOq3PiPfkSZKb3BvrqhvV5e7f4FNs8vxAqfTc2N6hnOI/sG0k7uB\nE+eP4sJrV8qSKWlEqo8pBVZbYgB35pkHYY8dVAfTo95Y97e7O8RKGHOMhTOw\nDfP93STf2vQLwAaowNVdvhoODTeQQR32wkR+fg046SqBHu6iDzz1eamnF88l\n1c988QFYFS5edklSq30ho092XkJQkbfCOzuVHtUwBqq7CjhqTWXws4ThKwK0\nzGMKbtBrqP3RygCqbxFsZqudxLMqUbZju72MpA9ovTwcFHuwiwolOTkQ+yF6\nZVHGhjIJLhCSYvvDQoddPB0M6WuiamjEcSBh++pEPGiiV+LdBnz/Nh6IGlXD\nCG6W\r\n=KybF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.c97779ca6.0_1620337362757_0.945654644569947","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/typography","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.869d890d4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"629323c21f95909b205cee3dc85f24bc68f07ffc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.869d890d4.0.tgz","fileCount":22,"integrity":"sha512-XPZ+4PvobN8+Rt5L1qIpPUM3xtiOWZrNsY10kgU0jZDc7Ny7/LaqOttXvPiXBqhtJonTjvZDWZYSw522D2ccNQ==","signatures":[{"sig":"MEQCIC0VD/NlIdxOcJy4/HzOamNn8k6+vgyhmuWrzA1gWujfAiAIHXaX1QbKnShYVtxBoxwblx936+Y1WvruNW+Vg4V0jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpFCRA9TVsSAnZWagAA7HMP/j9YAOyp2ir/zzO6naXF\nNJ3DfeQguWtHKo3wbaTZo0lkCNdUIrsZ7z04NtGq2czrGEsYJ4BVQCoGSpxN\nwaujGKxm3+a9d0m2k1aAJt5v7kNcq5i9fL2SBPAfekyAS8QU9a689qH642Bj\n/PDcMVI2Unk4rDxCpm9tYIdYq2AihlGUNSC66s+VYB0BTwWQNOQVWziYD5l6\n/78buKpxeMEhoERiXynabOSYX+IyRiayMlEOq86dH9ypCJZHLZ1KDyqsftQE\nAU/gNQhLrgAJgvVxCpzUsWfksmfviOylsEeFg6V+Ao2NqauFCqBYpS+M5PZf\nNpTSnzbVEAYJaU+vkT52jLYUJk9TxKm2I0FFXJ255ojHWuoBXywmJ6plQZy/\n9fLtWkpi3NaYL/Yc15pD+Zdsx+5QCqa6noSRScyHRs19Myshg+Zk8r9q4VE/\nwMAM8Hp1Vgv42D1q6JppDZUGMGMYkv42VlpPqpffChnhAebQeUyCoLstgTqf\nkOSmqiDNyLZSjzrViRvoEaYVsRYWzD6PhJK8pG/NgJj7YWGf83uEsTSW72V9\nO9ajhNPAgK9QGcAVAO079UvrzGc8aBLqnrWHF1opMtzYDaHF2HB+mSjHHwh6\niaGiWYxETtvtARMr0M0XrJX6KdqZkmfvxEqtGM53ZXlDt3DR/dgAu686/7a+\n09ME\r\n=+K/p\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.869d890d4.0_1620400708560_0.9376460372406876","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/typography","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b24975eaf2041f3b6888a85628b1ac4b36bf2530","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ec22e1da9.0.tgz","fileCount":22,"integrity":"sha512-8LW0apS9d+wzJMiJI8p75HrPL+5Mo6DoUVfm/cSsweqHUwL+h2X55wERsNhU+Oire9C0GIYQGBJvHQzTuFPX4w==","signatures":[{"sig":"MEQCIBIVT30qk9bQG3YJdOfAzml2XAztpzIbhRbeePdv4hxfAiBseYqXlhL5dv1u+ZzgR+OfSsOonHUVeExqj+JRviyCRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoSCRA9TVsSAnZWagAAwkwP/RwQplCW1xR7chs0ZOik\n0gZlUYHt74CGlPERkqxjEJr0JhVjXekrlMLjjg2SEb7GfUS7z+zo4nAZE/yT\ncqbQ5ZH/9K0XtQK820GIizi5gDGqrccMOXghLkFj4NAj2bw/oofEBs1V++g4\n5i6D/ziuypx86GnVCAubOLtoakUWNlxCFFWBLrBSBPXNTcBI/M027AmT2TOf\nJG/a+ulD5tYqdVzqnWJSOJzJctnk3nQTfcwYNTNjI7/jpObuWIstAmuUGdmG\nDVdtpGD+j9z32RXKbky7dI3GEX21a2Ks9S00XFMgF7abwg38guxetxNzhOLz\nYKtm/DBlBCII4iTXbnwrTIayB01Bpr/J+FYJkYd5k0nlX9BtMMXVJXHcj8Qa\n4IC6bjh67m8fSdS7JvDuozVJ805cyJJrKXDihGyQCHby5C/pp14XXwYXWaOe\nDV7uRo4Hy3m+OHJfz0eljlp/0oyKFCV0cOmWysRje78pdwJbdmGfHbDwsAza\nAPn31tl+dTtRaXm4G95x1j2rjXDVeKqMn+4AJYamV/au0DxSHRN/683qyPf0\nmuBGqdipo1RHg/I61i2+onw931pE8nj1N/I7gIttVhwKIUtIyopm4w6ksnox\nKdi1/GEVvutgokFlF0kdXljkKWf4AAEKzSe5TYyJTAXqPiyFXRhsyM1V1wC/\nZcUp\r\n=9k23\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ec22e1da9.0_1620670994295_0.27592176464734","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/typography","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a072de567a5083d126f357beeaa86d548d56667","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-nightly.7427449f0.0.tgz","fileCount":22,"integrity":"sha512-fmqlz3YihE/kRduqOC2vWX6gGvHle02nUuJVSlcNBwnnQ3XAAnyk+L4dodScUKI4xYY5ktc5zPwntFpZgmzfJw==","signatures":[{"sig":"MEUCIQDrt2a1RnVOKOfCUiGCYv9QTSftiPFpUF8xAaZDtweQywIgPp3pfK5H3S2UY4odUXI5XLDVXiM5+kjxV2pUScpvWdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8nCRA9TVsSAnZWagAAA+gP/iZ9869PUrIKm+49lLIK\neiz4mz2TLbZcmjWxLQjINfkXFX42BPvGWe+4Meo8/K7hrsaLNF38IwuFj0fi\nLxZyh05wCzGAt0RfiCP4rcb1DhyiqfTUeX8i/Vk7pTKzIiNK0gE+DVJPw8yT\n+m94s87Whq8PLXTKY6y3yI9TO8xiiTB+YCDDQ71coqbwQC1lMrpEDE1j4euA\nHbbl89/p0dLb3tbvoSj2QcZu89rC4jsKHhCnuXX/WFtOL+tx9SwfTmriFn4V\n1wuelFgtLGaFVUxUWIBk82xYwBxMyf8bXHCCV251g5zkSCdmMcLuonEclBFV\nfleEnrL9hEy9AhhiB1SIKVTAp3lrPdrO2hjSrTcE2aEth6Jga3d4tXsJS021\nGgH2YIiGSXlepo4H+qKI3uENe90hvPalbnGUMCMV152UQCA4D0/2X3/CBdD7\nLTpFEKJxxzccoLySfzQ8R/A2iiCZJqS7mZvx0NhxZ2JWG81UyvWy3YGoTuXK\ngAYEY5qwsfByHcITpjbcROJRB/wu25/5gXNCE0Cbjw/TtrE6bXtL6uQQaJi7\n61oaAnEDh3HteLR6WDb8giZtwq4dlB5Cx1D+diDQiJSKr56T+svZTcA6I4ox\n1kgrhLpvcEBBNc0tZmDWIO/LtxlyCufJpkEJ6XuGnGfY6h3Yq2W7utXwZsie\nnQcR\r\n=/OWT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"anonymous","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-nightly.7427449f0.0_1620672294813_0.05334245613560307","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/typography","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c1cf3baacb2d0bb1ed38017f69820a6c3c1b6f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.957cc3bf5.0.tgz","fileCount":22,"integrity":"sha512-seICtQ+kEwNeH2yZ5vJraYvJ3NhZegcCvZfo0v00f1rd0dVgbvf5H8bj34MDTLtyXVy3nvJf8aA7O3aAwyG/rg==","signatures":[{"sig":"MEYCIQDNnNRbvcnurkq0RheYY3dLlwfz2rgrP54xeyaSWhNX/wIhAP02Q3Q1H7vkMu+2Uk+itGnReWoKyJ4i00srWDdPVbKh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawLCRA9TVsSAnZWagAA6+sP/3BLSL4tTeHM/jKwaLjp\nGhcwVzwiu38lffDSqBDPTKLlXSz0XYLfTYdcj9rkIdYGAZ0onHH8sw9ZG6Xx\n8Z2Ib+VQeB90Eu6W3Ll6yW9ouHbZlzHEcIl7CFMbWmNJqljiR1QNLy7aATel\n7daUUd56s5B9oNCmUS4oHKsr/VfbZ0wAS3YOJnYYn56bciB71o+2DjDd0L2+\nXC/8CRPQV1AhE8L0fChqKwigsdjjUd8GHHJA7an9gEhuzTDkfI4GMdIQUFuQ\n2FpeAU5gA0VQ/ledi7+0qP+jC1VnpcDdsosdvXUBFBGLAvdYNg+aYPYQHEBa\nKI7wbQYYFVw0qw42iKJv5aX3sEKzjScEq5P5/yrs6l78azOhXLHtUoEhPlW0\nNM4yznMQeVlKVUxaHhKwhsi/VgVJlwyS1cv7R86eCfb3fb0+B0Q8k4aWK2lS\nEYog+MlfyEyUruSAJbYFiMd+OeT3OJFIvVdX8nYXL57izRsSxxUKLqjYRztJ\nWVmze4AoxJR+p2SWMjZrWN+2pne7MtrhRriUC9MbbRuH2JdJDes049kDzJG3\nguUZBtE9eZTyd6eLGgN1lI20j3HmjlyyK/GD+iSlwFWvsCi+Z6JCAu6U8M23\nOYSLM7y4pIJmBo5X8XBwtXb1ckwnQLjKgknQd+FdCW/NXoNJUXIoaGq+/Uxy\nFtdu\r\n=FxoI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.957cc3bf5.0_1620683786854_0.2186509564393131","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/typography","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f17e99b9a63744326b4c3dad90688237558ab874","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.88a33cd70.0.tgz","fileCount":22,"integrity":"sha512-qHKANJMj3qT5HO2nqluN27325HW79H6yc+UFAmwutOkoZnNy2rs7q9ZmhANG8z0KWUd2xCeiPsVpUSLmSdiSvw==","signatures":[{"sig":"MEUCIQCT2ui3PRz1A4BGCWdiCqQB8PrPqI8VY1A1S6OKu/Wn1gIgNNHihL780UbI6F6ojjw8ZZ9I7qJthBTFeln37qY69jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcsECRA9TVsSAnZWagAAnTYP/AlvRjZipkVZUsZFIRvn\nvtZyNB6kUJ8p2q+B4BQseViWfdP92h1HsUmwx+W61bwGCXlP1Ph4nagGj7n9\nHG2eJxZgPtZEP/czDki/THRZItbjhm3PAtj8Os9tGkMN2DZL35Fxnpcr3+MX\nD4K7DBQgdegKRg/zLzc7li2nV+g8UuAN+6LBOm6K2JENcdM/7FFCWEytTYoI\nd69VfyayfNRMeyQi/KCKIgquU1sdpyZQvTDweMfWnEFgaSUqvYKxxZJ1LaaN\nEkB0kwEmNCeUF8qFZ7tWy4GOWvaaZxdnmL++QpifKHY68eBqZiVpyLNe3obF\nKoFPqok0H5GWEPBfKYfQ3dC+o9mzEtl8YMA1qvs2yZyn+GP5kPuUGmoZkS4v\nTLSH7Gb1d9W1fjUnZIXDABRffkHAuxixwz5AjuY3EGRefxjFUWvlSShyvo+d\nnpJsmisukZStCcilf6cwyZQ+j74pOlFDED75XOVeWePRELlWPWYQgDRk7yTw\n2jW1x3/DCKJ/4ePrvB6V2bneOt/gw2yr2hEszQ8QcEpU1M2j4cpfLcYcd9wZ\n1cS0edULuUw95SCDAtmXXjGufeb99E/KBjqjgmrtSt61jfWpygxUmJ7YakKR\nu2M3Cy4i9OVV0DU29/ZewBhpM9aZSeQ8SBZMZiCLTgt5nrtVCfMs//zCNNU0\nSrFt\r\n=UiSf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.88a33cd70.0_1620691716066_0.23083817054518097","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/typography","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"446305a5219444083f7953f16580f17d8f4da8b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d20dc6dba.0.tgz","fileCount":22,"integrity":"sha512-YAJ7vtoa+fg4M9esvkp6VsW8dBAowwq5a9mQGyFSkmonUB9gc85tH/1ye1RddHb9D3DkJTsHahJqd2NKX29F/Q==","signatures":[{"sig":"MEUCIAu5klTVq4nN1FjoXOq3o6OFTKdKFeUAZrk81+ON1Rg6AiEA9VEtyvGqDU2fDfe2sDdi6NUVM5Jl8MPp3AEbmjFRmZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc63CRA9TVsSAnZWagAACAoQAIDi8zOsRVvF+CDPwDGh\nwPdPxLIggE2LFAhN5U6+PBlSKun/hLouiKaSJbdLby6XHtKuqhlyTncYQNF2\ncsQjrhW/uxEYoTcputU4t/MiHHX/gCN/l9SjdbmDtKDfk7pCbltcpZ9Ox6+u\nUBIPBxSHPYkeuHPBPAmTUL8HtmiPpjnhJkctTy6BrlAkR2KXG+L7hgzTncIK\ncqaWgqWgCfhWxgrL670+VoDdMNbEsxg6+lcJw3WiLNhMnesD3JB7gQLDPi21\n4LRVe/7jTRce747A4ndsjKu/ReXTZOolbBhu7iuvhziW1259e8NKisN1Icfd\nw5tkDzAB/FX4ku1JQGG628zI/liufdHqyhf6nyUpOn3mXMdbIbA/CvkEX2QH\nW54kWjYUv8i6xc+GXNXM2BaNpvtbpNxRSbu261T3Mio+5f3AfnZQxs1sFUjf\ngrS6lhm+nPrds93/nt6e1v7n1fE4fBZmfSuZN4tSNtA1oZmsCUdpVYdkz1HK\nnn9Uq7e1+IcRUyQxz1eLIMsuY8jTFd1qC47R1ynv6wRfJbLE3wQ8GjCH1bC7\nfvIcveygTuuFTreoJBvBHj8/i7lYrZjasMCaf1Oa2Y935cNIqSZNWsoxkt4i\nzvkdfTOPgEhI2cRjDdcwuWjCMIm9KSCxLtYOsJZx33OLiP/kj3jrIWfAA2dQ\nmtGZ\r\n=k08w\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d20dc6dba.0_1620692663195_0.30807784039369523","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/typography","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1283e789bada1a5757eaa73bf149fbb6748c8f92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":22,"integrity":"sha512-KKj8D2OO1hW1Qq6PuwPf0APgHOD/ANqS/AAM9ifuiSejighbCQfrj/QAbXkvGzgYwFpbfdtvxLy8hVnCT3JNyA==","signatures":[{"sig":"MEYCIQCw9kKXHaZTPLe2gVOwiGueac32qlgd2UR2Gbf9sqL6NAIhALyeOMEVA4UtUUPCudGCKktwdDBXhlMV7etAyakpiIO+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdaqCRA9TVsSAnZWagAAKGIP/0TTIl9hrS1bXHefwctf\nO+YLs2fCViQYMERUzs0i3glDU45B1yuPF1zrWsqJJ1QLwpxMHv7ERUzvzoIQ\nd3dzLHHuMdzHBP9oG0zSweVca/dAEvzAd1MH43QQRtbKHmqM+eta6JI1G1xK\n6d4XZaEnIMnotd1dV6RUAG/Duy/5/h+Ms4XOaFPCGIgdO3TLXxq9xz+bO5cq\nsMPmtO58JHIRWdxDf6pP57eR/4k1rsXUbZlgSAuUOSHlRbFTdUsZMEquPBNb\nKmi492nYb+0tuIS+16SZqb3i6rvapihKD6XLwzttmbib5QyeBNFZ2MXIvIYR\nVHgPWeVP4z2lX5nxZ1ScnQQwjw6XrXHhaHBfztrqP9i2HBfWwVibEoBIrIsk\n/uaFxXgzrQzKgLengvZJOg7B1RLJHpTRpRgl4IHil86epofcvk7UMIGJ1OMt\nNR8KWSfzIN2R+LB5qcqS5h6mSgBvKYJdno7dZNnAHp/9OFPwSlxKDK4Qu4GU\nFf0hNQt7sPIlhuBbIMjnQC++JFfDKo9XmXvkmbPGBQp92zcx88+s5HM7l+xg\no+MsC22fFcHPrPvofN+OScvkMsn3jVeGsYBNhtHfzdj2K4g2RDwSEIiqwwXZ\nfGz+F7OzxmVLyNRdClX8ShuEeYAfF0IWBRCHcyVZlYv1APyQoQ27joahh9xv\nI4eK\r\n=qn3b\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.0ce2fdb02.0_1620694698039_0.34195722698905207","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/typography","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.cb162da37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4223030d9fee707a068d133640ef82793e10b46a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.cb162da37.0.tgz","fileCount":22,"integrity":"sha512-M7NPwlplUVx+MiHvMh3GX5elJRitIDaoEOK5p7oEdD71ACoJ6I4QFwXSpCIcttrGfMgfx7Z4AUU4r6Nki62rcw==","signatures":[{"sig":"MEQCIGMp58C5fWAokvZOqbPXuBq5j5dygBwb5wuDdxrt64PDAiBu8NGyHoF802T5HBElxAev9NDaniSZdL3BlipkD+/1xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeSwCRA9TVsSAnZWagAAzwEP/iXU8+7Dleyy9lOZDkJz\nl+mJ1hehduajyyjOrfG2ACV5zjngU0oK9IJxK26DWFJYV/YF/eQ2lqusq+ai\nyufqPEkJX49SIvi2QUK7fzcd9nLI++wpXHEC+O7nTWSTpDSXhO2X6rlo91xi\nKNm/ZT1HWBPniQ+MTTvGNsCvG8dNI5OPAnV52rYsmCohGe93BOxIBW1QhSdQ\npyRAjkXSJN1BNQ5ygCCUEo32L5+eitkccoFE1s5UHhDgUkN6V0c8e93wPnee\nPhKojC6ImJAFjVsM+UJbNrd8AOUPl0IVoaX0IfhYTuEFjGPFJm8jRnLuV6oC\npThaL8pQNEwOP7nE0oIYKbOFBRVXcNFA3F08xecE83CdUmKbXQDNVyyrhU95\nEo8pdFwm5K/o9Vse/PvCMY6EsKNrGCYmwbtg6uCqXWfI/VAg+tVIp5FNXFeU\nTHAxMFpSVdCpVFj5Ie38wKEDGy3cPBpnaTta4L/q9UDvuVKK27Qs1xdlx+d7\nuO2gVlIIvLGRSy55P10UwDOBBdthdnf4gFH06PAaKIpZh0BqMVvJci03voJW\n+87GW2FqW6e1Cuk2Z6vWd3AlCCR0CC/432xGQiJCZp7H9+IAkObtIBSMJcdW\nfQrSwdFQEVX8BAFOVsxXZdbGBxvOmKkZA22NBEedC7/oWdesYBLAr9qMFKru\nGEY4\r\n=p1nQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.cb162da37.0_1620698287831_0.34656488908838745","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/typography","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d21a4b15ba26791250eaae050723ca83cc4bb1c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.573dc7ffd.0.tgz","fileCount":22,"integrity":"sha512-GlVP04gkc18POSbzIMF+3re2E02L9blB1fS/SeUiMCGnJ5FLVnuCIGKOi4gqXqWQjPgW89KgBBqzESR44ikU5w==","signatures":[{"sig":"MEUCIAyCBTt8aAzZMOUg+bfHy57lYnFOrGuskCShjamsvTCAAiEAxAMplrEntgkeWytYUjF6X0Q6rYHoduFswXbtQZ7r2HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekeCRA9TVsSAnZWagAAjKIP/24wR4Y5dtYDOZcVTpFT\ndPhUL4wJoNBTeSY97pL6R7AKF1xCRrhcETPm/94atdimaOILNMTVWC3EigPN\n9av84ap9ZaNthKQJlmyMikmTm99yHqH94N86VjInB6jp5J2lzdmhlFjqJFjh\nLzHGNmcI85AD8m2ta/Z2ln5aXf5TqzzMFxKdCl57NXsygIVhARuhQEHIP50H\nXjG6/URAUjS5HNI2HMNaD+/QKOi+hjqCgfOGPh/3wJ+OUXp2lqHCoi4Xv/OJ\nxaB8E5sQhX6XNXFHBVfH90W+T8rGWu1O/mr5ABq63dQEpeXO31sxkzBUsFv0\nsYcvsE8sbO4ud8o3+Wv+0j9Vi9pcGkgDiVH+Eb9Id3ezypvcg4pFecedZstx\nvgNe6rSdQ4UkceDNNoNwa04/6aOCazbU6KlELA91nd0rkUGyyGQo5FX6P+Co\naIntFcMb2agztaINLyINWTIcRPx714w0zhOyNrPDxZPXaUkxxotawNKdKtcj\nbMHzwrbE6fKbYpyz9cK/7QnM9UTK9ZnR9l93iL4x1MVtf/+6g1+PR63Yotjj\nZ9qX9irBCa1sI/Lyq+WGBao5Fr/PifQlDo248wmcD/GGsX++d59BFWc9uzjQ\nwcojBl5WoNdurks9m0SKZqnmXEq3rmRdCiv/yrtFWoEgd0PQIqBEoxdrFhfp\nCTbW\r\n=mipO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.573dc7ffd.0_1620699421459_0.9255152003044138","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/typography","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb04097603e3d1796c5cfe2652764a771790fd71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":22,"integrity":"sha512-LFPqXDolTdpmtLRB5QzOl081cCU5C5qVn59xm/IxStk65TerndQrRPTSFdE5C5lEn5LW8r/5UuNsWzX9Wbc2vg==","signatures":[{"sig":"MEQCIH4uWqd7Vn9EvRZoKrfGbMaOdAlnOxKYbOLx620DiQ6oAiAmd1hR75gWyMZOSzFOEiJ6HwTEkB54rsjwMkQ3op0HHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxGrCRA9TVsSAnZWagAA15gP/R5OA0LsX5x2b3oBa/t+\nmeuP+qg2GQsH+Zg2g8QTfowFtIL6XfQpGczCm+n9tIQHToLPbOeulI3Z/vmL\nbaw5Hp1NRh/uGM48aXhJ7yCcu8rw1nfY1iILxrWGwFy5enc4F2A6L6j/ZSeb\nI0oRKfaMS/UKMwUvWtM+xdqiToiptn93UdYdzi1mHvge5MO0STW9wELwI8fr\n8XBXD1napGiklDNQMkOFCUZQAVEcZ7uaQD3Y4JrIu66LM8EAfPhIGUZcljl9\n+s6HJv1dF0QGc2bYU4D/IJCGHRelFOmxi9fEPEC7PRE33QjnXa3lBzZW23tJ\nir+ZBCnPKF4mnLaRsvov7V5S1ZiqRcRQzYT3WBmxolw/QUTT9rfSXKdzdnpF\n0pKnBtjfUd99dZsClzPEKHTY7i9TyA0wdFVhyiMU3vrOm1GGH/cQI0IJ01SI\n8z57bu9LjqnSsw2oFrDAekl4R+z0XaznCfaZR1LNg8l44loOjSt4JP7ntlqx\nzffb6LoRnVEhzZpAwiKqV16mqH98WxpQb1TeZPgkkJU9k2OHUitKUeL8xPLU\nYrX20/9bmxAgHGifMQgwap6oGF0D3MdGxWEFcWyU4oPbfK9+83wChxF+8TYy\nIp2UVU+UH3o9nBUzD5uwqS1emjU6KyWQKzeEdSTWmunimfh2P9Lv1TB3uyBy\nc/7A\r\n=5EXH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d5f6ad3fe.0_1620775338636_0.8730307274875995","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/typography","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0eea150df7762a44b2f6c773975a94afd6ff449b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.25751d2ed.0.tgz","fileCount":22,"integrity":"sha512-Ev4TWSGHJrfArIgi7ExvMnf5k8BWqupZg3S1YTeWKRREMWF5bexqECIeyNFwPaoEmFiVuaN6Lsl89uz2e20Lxw==","signatures":[{"sig":"MEUCIHZLyyTMWNrqeG3mnqTIGAw1ishkD3rwYuuOyyFaSjaQAiEAhVUKdYOROR/qU/8Jp0XzOsonBhhWq0VQZxOzviqOP+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAUCRA9TVsSAnZWagAAo8AQAJU/tl3NzH9FfmFSZhhU\nl6shjQe/vsSi27zJqhBltDDF2a+6dvE6mRztwjzWdGNLHUvr5EmNO+jYPCs+\nH+k++b42EWHiD/MhzxgtP8iNPQpnKhYjb/SFBKw/sAibrcD5V0X0rGf0MnSF\nHzB/YnkhsvzV6bAUSO+icjeGtCHdgbIKRNNVejH2jMO+XE6i1RFTeT5Ikvmi\nLFYN3VZfmSal75HNGr8R/SsLo4xCTD5LIQyXafDmfoO4UUVDutRLz1DS4zHT\nd3vx+CCrqyauAUF8wUpq+tHQzmZjFcf5T8ZvMFnclKFuU8tAjym3NpxWEJOQ\nZO/I38JN5aAVUajToknmMoRbpW7PBl6ECgIc1JVn3WdFErp6yFQ+x3D3PBP8\nJleNmSZqMKGXNag17rvjDu4b2nxgUCDkhbWUsPDJF24nvV7tpGGxcEcGKJxK\nHoZSyiYlQ3FMFFmkFdPH5XsmpE2yrA5MVCXa3HcwFGeg/dGG+L7VQz32V5Vn\nyGMmEvJIL9l2bto5TgJvCpQfoKLKXjgl8ge3hRRl2bkyoHBnjVFLVCcFRdRL\nVmZSdCXqGJuJvWbOZiKlyfQ5OwSbahbyLP9z1IAPdg4O8BfiRMcZJwc7venb\nkVlS2/3btpapS2B/AlbTeShEpY1dcbiyKshjI2XSWROFcTWKOadf9E52Fc6r\nj9ao\r\n=V5yJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.25751d2ed.0_1620836371708_0.6517244270795335","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/typography","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9f40ec354ac261608108e3f6631a27a534c327e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.a23ecb682.0.tgz","fileCount":22,"integrity":"sha512-CK21IJnctcmXn2+JoCYACvZpIZ0lo5rlhMd+EPhvuKsXu2XqcdJaXnmDQHTlVW3VmWC+myb6uqmQI77FH+eRTQ==","signatures":[{"sig":"MEYCIQC1rKuau7Hr40NMm0g3x9gW3cnFhG4obV2CYmNpgpQfOQIhAPFshtVc0r7MS+ZhK8S4qDcWZ4qeoNr1Jc+xk43FlSuf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnBz8CRA9TVsSAnZWagAAGTMP/0DvUDY0e/B39Cl7Lfie\nR3aTHiQ/D1Yz62EhVZ8JbbjJdvu+OVCzmN9o4xgZyYWYOVN7ZPNaS5YbrWUj\nO5cwigmxAussQyCpkpL1Il54Z3toBdLHqhXKUIFE3wUY1rbmHYSEWFJyrOI4\n/YPyQ9wI6tAT8e6Kue1MFiu/HuCaYedI2WbO0VJ/AVXb7s+lU0TUEs928k0b\nBne2GjEgkYQV4JxUNu8iPLafwROSaq5n1YF0bPdSyu96dWhkrW3Qm6J77/rm\nnsBvst63s01Faeo0EgQEu4GqQDC54vYAr6vSMyXcNr8pneyc7phw54ScSiV0\nMiZdR4i9BI4z0U+LZs1qAWOTZnjr/4MelWueax0SpNizNvmgvV5nCNJV1nOR\nH2N7shXYLebHhjrI8jD3NfIYAwpBx3M04OiGVtSzO+5ezDn1tMD9WvrqQKF/\n0zuMYPnvQrlJjcoVguUU+sRE9Ua6FfulN2VW2x73YcIRzMvk9ec7606d8Jbm\nXvn+v1sOJmUGzQFVxbuddw2caQ5mGrVvSZHEP46pyabXRtG0iknE68C9aUyp\nzSyNNUOK8I+ZhVmJFa+IYz2cUShJNfRYSOhL25S6dz+ntptgWTjkJsBbfcZb\nRZhyEqz/kH87Wkk8bMuyQwxBNr97MNDB/cUvP2dIkhh5YPswk30Ck3Wr8U9i\nzqXl\r\n=Q5uC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.a23ecb682.0_1620843772409_0.645921059593171","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/typography","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.33a954852.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a9940e610ff3b8a58982ccb03b73a0aab22dbc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.33a954852.0.tgz","fileCount":22,"integrity":"sha512-pFS5R09es2yOmZa+a+b+G/pl3PE6ZRmakm+RezCgEqZzBuXVOnnBLSYiCbCZLg6/IFSUWUZujKLm9q65qG4AJQ==","signatures":[{"sig":"MEQCIHKjWzE5aEIQqxnilGVZUU9p55NHlyIPeHdMSXBnTR+5AiA5oA/4gXFw1BUZN20XFzkhKkFobIzkowsg9MTeA09dYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUCqCRA9TVsSAnZWagAAwVAP/Rm6ves6xDpk4o0+dT+W\nsiYpEhab7RoW59QfllvQloc9eyA82nYTgWZoJ5fixbiGI819SKDX4ACsI+Kf\nJKPoDuRPAPbF0TWuvEClh6zv+ElzdkdP1uxbRVwP7j34B65z9ii9ctW7nd8g\n7LzQOJvnbPqFn0wPBfzpaT+42ng5GkF04dJoyOkfqmmnQnEpMH3QeI8uRUSH\nJOeezhBmoE2QLKeqxkHtiZiap+4H2tHp+f7t2O0QQrjnwFvP3yePqXYT9KKx\nV0iALdRJuv3DpM4MERyUOxJ35KEb9KKOL/3gyk/JZBm1Ird6dU4ACRoD+Ix5\nof+6Ag74ZwC5QhVZYDs3RXQuo9CMX+seM6JBNdHdAr69mlMnBnue3Vi2KZve\np3yUc84E+vEEyw+FD1HdnNFUyvBYETGkzkhb9nzkOKQE9HnyRcLWzRJh+/7t\nLejw3Plid2zfrT4T2gOXJOnXJs8JfIzjXOuneMu72olqIZoFtydXMG5DRuIk\nOE0XFETe7CVzVIt/ZZutqWbJMEV8ibL2K/Me+6Iua7rrPnds8JLspsmHHmtV\nQXgtST6tVxeFFbQ6Ez/QTYuhiGY1vrgy6kfDl+h8yiHdCK54uUDdOaEHojHU\nFqXsSEdkVSrTCqroIu2SAQZrgzPmYeFoudZ/2D8nV/Uzuu9MFg4te4gOC+VU\nGLDC\r\n=06Xl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.33a954852.0_1620918442067_0.6198752062041979","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/typography","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.a4484849b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84dfed646c49043f4103e79a7ea688e56610a671","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.a4484849b.0.tgz","fileCount":22,"integrity":"sha512-2+zqP2wXIhdCyKunMin9VFZW/a6UiGFfiWnCJcBna8oiu7NP4evAk82aR2Ns0Hnw0VRTMfS/Y6e1aYBM5JIk5A==","signatures":[{"sig":"MEQCIG3wh3r56uFYnofzwsih+5tl7Gu6FapQjFNRoHwSVnTYAiA19hSMdpNHWWbg7qoRbOZ1U7MOveGWg8d6bfvlLmSwTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYgCRA9TVsSAnZWagAAemMP/jYdQudq71FP7baYxbba\nxspNTNDieFNQqUMRB8uSUfeWpUdUlhMOChCHtXIa5sA174We6H9eLLEkoHaI\nROdG8Uqweok1nzhO6NERANU5XAP22frWOJnmqquBL5879JYG+Vxy1W/hSK+H\nzKwErYArCPIPUJfHt9ZlcXIJumEfBCdjcIyL8HmMhrgMivOUVHAjIupWOmU/\nzt3Hm1C7/7+GHvsrm/tL0swtEmfDXWYWLMk2+GQy8dyU0upCkhJr8iB5DtNG\nhigWOrFax25mkl/xdRvFGVl2RkNCB4iNOON7v16H322vrIPgWoxBhffFI9VV\nwRpFfBwiVTehpCkG8+7l3mnmXmfm4bsGtE0CKq2S+vkMyLw2zs/PUNx0CNEb\n+cdf8ThsJ0e5iVLVxk2ky3jDXPPSRVB7W4eanj6jKYbgNoOkFhne+2RpM2rL\n3GTPbod9kp3ccas6zYrvQmfI+Asg/ZQeQPFMJQvViee1jYb1XMO7ATrTv21N\nKrUvqNxmUAnjTGVVmnPwzCfJcDACeCjAVX9/A2vsXYVCvVOa1v901nt/QUNr\nRyPgyGQa0cPEe6Oo00mtTPv0Moj06oXeI2U8azvMNGAz7pkfespDGWupy1Pd\nxHo8DYjgiiLxfsB8SliAb52yesoFyxekHKuaLRNSa5aP3EnidJtKnB8AK8Jm\nI/Q4\r\n=VMjY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.a4484849b.0_1620919839765_0.08999982301827503","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/typography","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebb724a502ebf3ce8198af2cddf66c213d025f83","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.b4c3f513e.0.tgz","fileCount":22,"integrity":"sha512-grj9NTV50BglrihMFlaYD/qGW5zWLr7b5ZbZzviABKPo3sfuFmlDUmae4u/avAYslmJ6JdEbs8G+RAG5b1pCTw==","signatures":[{"sig":"MEUCIAg5ThhpMxP07SANoME2vvET9E7fjKGPpYg9lf197Qh2AiEAyvYQ61cxI1qruDVpEQ7y8AioYRbUhwZE0pyyFs4Rtkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7PCRA9TVsSAnZWagAAXI8P/AsMwLo2SxJkEoZ64LXW\nXxpa7QNS+5eZ+mmnZ55yDyaMEny2JPyJciMjaJuwAFLHvHu0e4xHVQubeXhG\nbHOu88U6ZVOamNgBlp03+f45NaicIj4Tz0Q4aoa8g/K+2uV273ZRCUMvIGO/\nXPfbnTCJ6C0+UuPiWNN3T3wh92icG8PIY8rwq6nm1OaRctY30nxZnnNu8MZl\n80nkV4EGgV87GLIgOTQi4BUmIgryOoPeclCwgYmEZYkGaPfGn5UBOS51E2ZX\n7uA3+lCh+SC++r+OrPjaKGGxCjand4QSNBreSC2ngh0C7b7d1AJ32kke+OID\nDNPRSIflzYuk4zN0rx743sffY4L+7D/4VxK9eYXDR53k681/jAn0kCmWmhDb\nUCGlyKLnVHKsfc1Fr975455TLjeKBTnGjMOWHgUoudnGbfLGZV5ilDCoeXUu\nFWMK3M3MFsXW+8frKHyjNkQVq/PM2clhAx8GjTcccvNphi9c6Hjf+S278h1O\n9TrlBgJuQ3XWCSG5InlCCWXjWcLxtIR0ffLA0qX8KVNHUYbrZGsIYxmSQzAy\nRCmWSptXLHat4DrvlsHQQhzFHYlfOh6ex4gDEGDhziYSqBM3V6NyVuhpLbsd\nDdYt5+4BI2k8k02/vvGVpbb7JBT8tETTfN5g81DAwzuysweEZY7sdR3OaX8+\ncGc6\r\n=DxLt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.b4c3f513e.0_1620922063348_0.6343980277806653","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/typography","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df337ca915f505ba6607fb239387b5358a933625","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.1a8d06483.0.tgz","fileCount":22,"integrity":"sha512-RGxiA4FEvdO3PQ8xmSaKGvOHmm7WNCjl9rizHembV6tS2rc3CvMiHpQgIyHMGv7WXBcu7Aa9V48S2vXJa0fkmg==","signatures":[{"sig":"MEUCIBw9mtzxygIhpsO6JIuTnn5y2h3u5SKr6oxsa2MYvEhxAiEAua5C8YYwPdTnTKLp4KIZ2ok5vI6EObvt1b+2E6l6LXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVAlCRA9TVsSAnZWagAAQJcQAI+BqKLOP4diE41n7gF9\n5MqqIAYtyTCB/YUn9WcVbM9tPGNGxHGFAYnXXgt6JJcbeMMzekIVCcEsc6u2\nglhX2nvqXfVADEEuw+mL+ckXWFE/viTopjBjCY1KGyVeWBq4aBERcEDKup5T\nzGcbJV/MV5b5O5YHP3/m8NVCzc3JTKQob31u7JoTH7NdQA/zDNVEUMh63M3m\nYelLT/p23wM5tgOXgGNr2Yb3PJApaflEi61fvdKxhepsqMj02ZlcCAkeJMwQ\ne7efNglKPjd3ABbt3XggmuJ5FMEHhTCC871VTkuYPXkqNgj2yNRjzZsKXX2T\nCAWUpJfDX74yuMcDpHVVnBMSNRWjeYY4hEclywstGRxb0/GmLK63QYPTGtyz\nEl5CI99dPx1rvfeaGO9IeS6KDKb35WGDGg4PBsi/Qfisi5XcClDb2Z6aGFuY\n+uMmCB/J7vBcd74ilrkvrfhURB5Ubx6YJ5lVeLujaIcKB/nvuh7vaSrxNoyd\nSUsImVGc2CNURJLDp9zA1c2NfhdDpScdLfK8y+MKNbMeV+xxgVvpwww4GgQv\nkz2r1cXF4sxXvbKMR38wpB8ERotRU4bJiV6EWfCZdOYGNmNTUSuHPehUm5da\n3efI5GrmUbAi3ipoQ+WUGNBj5lLZz1leSal/fwV4l5RgvCjFdfrlYJraa9z9\nScXx\r\n=t2xo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.1a8d06483.0_1620922405272_0.5950853741363924","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/typography","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8e6081836.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8be293954901bf7bafd6113c8e04455ec8bc2b33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8e6081836.0.tgz","fileCount":22,"integrity":"sha512-PJ9v1gtGIXFDnO3Esrv74E+cw51ybduQH3YJPSvRXF4SRAfQxEFKmne3f1ogVXpakN4Tnp0k1rk0s5C3Izjh/Q==","signatures":[{"sig":"MEQCIE8R2HZU4T2S6AOaGkfeqQ9xbI9DH3j8qijI05SxB/VvAiBRis11WGIaJLTx+U4B1hP5VzjkcP2A1wIiqoArWx+XyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5GCRA9TVsSAnZWagAABx8P/jPATPPDqeK28g68oirL\nJJKVz9L0bkUu5/mefz3HTFZNGFZ2Nu2/ErC6mbuXtliplKWtp3I9U2305Rfd\nmA2GSMF8I/RSCeDFO5bS6AiNSAtdlmUFwyuqbK9n3RtU8vhmIYPdOs87uQL/\nFC095rMreP0BKZHCHFFqK3Y9lMBK3cVzMNrPSM+xarxDsp7RiIFfahUO/WtV\nCRJxAetQwvfrFNn+SXagCUxmVSp1C7ZSM4HhPR4CzZdegGihOyFuVc3GJjRM\nsq4jeSeFcDx6IQTcIcr4PwCG8rsxJooyxWqCIu2BQvyzBz9N/8X77EgSTN1u\nrVQUVo1UGgDbLf3fal3cYkB4cI90xA3tZc5k0h6eV6bZbHzRF2Vl3F5zERFx\nwhjJS2RKWbHduDq2zvxFe1hNiAnaVQqpbyd7ExSIuh15bNM3WaOJ4XBueBB9\n8577f+rdDuCHaeRq9SiPR+P3D52tFdVhxOtEOZ1ktsYnC8g+k8iju9kUzL48\nWE0Z9G+3oRSKMmIpFvJMEW2m7GbnBKUrofdatqGJd+JZL/O3pi7QR16j5zhU\nDZEUshYejgUHsd9A/3M+bFunSeO6mhVSzA7DhdEKywJBrGUHca/B8bImneWQ\ngyrrQcCiIT73lIwhukoGDArz5voSHOV5LvsrbA1WdOI5CtfJxDDx91bS9TWZ\n2MwE\r\n=+Bi6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8e6081836.0_1621028421643_0.4887206461585316","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/typography","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"269295ed55887eaf1b09fba89e13a9d627c762ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":22,"integrity":"sha512-B2zyi8wRfRCKfzcATgW6kq9rTZyNO7AaMLgzaVH3D0nZKciZ65qgWa6hMNzc+fL+oqg7fhv7mF9QmSlfeO8DoA==","signatures":[{"sig":"MEUCIAk4ZsOvIiSe5pVQV+cWUsm9HsDGqZMSTsXTX3h/gj7KAiEAi7Oq24ZIueG1J3GfNPP6IoBQiD9Iq6TxNWjFyp/kNcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFeCRA9TVsSAnZWagAACNMP/itKMittIlb6cOIjAyu5\nayZgt2l6DRVqQ3abFSRz5m/63jSqOyUwsgoYpAtMSgbW4Pva9T3CA/0wbf5L\n7YlbZDcpaYCH1pGXn/BsipEKm4ytxnNjKYLsq0ldgvPJwzMJ52pd0bcRmQlC\nwHibP3glu+ubiGFJBQLqtdFI06ZaxjwTXNWn+wKnuaVVr5bLrRcRdDcgE1Nm\ngOaXdRlu7DCidUboO2N8GmmBX3oiLkg41i3EIpVHHrrukXkEWOMQWDMCzT49\nC0DCs+ziGsSJyVyObTXXhSZgRbmjx4UtY0lMWzhayHx3AAhC4VIr3NK8XWbh\n30vq46dJci112SlBcjSdUOw314ZU7cTLOtOhSwMbcgKNF11OqBSjEHi2wWlq\nG4LQ+ql9V4GCt/wng0fccM6u7TDCguebuxvPtEa76r45N4BuAnrY9hk1+IlO\nHXu2/USO6aaaeOeBPYQFr92R9A/Ny/BqqVIatzFdnklbviRRzUz5XM/UnHNH\n7jC/aMREKohGC1E7sm3LeIktOhu7pHe23BiqsOopLcVDzl/8fB3Ue6QWbbet\nlPBFooGsjOIxngCCVKcIdCsli+T5c5GUKN8AX84PNnuu5JNPdDKnNsEfWctv\nanj3bdvJvsGOjK+QpdeA60IcRZ0wiUhgYz2VoT+galBWn4zdUGx9ctpslcQp\nmUfO\r\n=zk2y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.a2b0f4cee.0_1621029214096_0.9777950990355295","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/typography","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dbe0eafe176ecc7047e770151451ea9b9d38603","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.e8e39ad19.0.tgz","fileCount":22,"integrity":"sha512-IJ0LEWaffsu45dQ+sh7YFpukmgzoHDQ8yRArATcx/rVCwH6MFhbuhHf1Oe+vgprRzXfmMWxv+XBmFLa9Lm77tQ==","signatures":[{"sig":"MEUCIQCDoDHiG30jGNPEfbFn0WCrlRy5jscOEuqNh7IHIn0JtgIgNz35NMmkxhHsmOATYpUxlLLcRWSUBjzEcB/QMjkAqRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/ECRA9TVsSAnZWagAA99wQAJeHhenItHBR4nLzQgY/\n2bf/EyT2XL0IewP5zX916ErijSDR8rXGgswUXXWt8FrcB9cBG8LpVPcOb9Ov\nbMbFOsEyd+GmZRP+I46ZmoVApJfneHFkuwqqhvmqBY/3XiVQL5PMqgGgdqMi\ncu5R4VJkrL8+5ZBt7EXDUltw3/3LAyj7Di60kkaIitWboULpG//ShOiPS43x\nS1w81Sf7h5eBSS15Z4WoOslONmnOoAPcgzzOYLjOBqE7WSMH5zqrr6pxRg2W\ni6WqReNqQ53DZO3R11bYc8FXPEE2B/FCBk+4rR4WHXyMILvjc3qPrOxCILZ0\nwnntQe7OLUzN7xeQkGqQGssebw5Nn+PZ6fpNs7xdVGj4u8ro7rKmZKLIV8cY\nisrQ9asIPoQ8hmewhj9emOkCPt62XyCZ80qqYNrPl1cuJG4OUb4p9RtcPVrU\nflyp6L1JN9TeOe8ic87jzUbraeF8L9UdqHZ0RP9Y12QsoA8u6MBdzMgEEwXs\nSbpE0RDUSbTIkXmJIrhMjRFp4BUx0ZIkvLO59kGVC0yrfMEf5Qx8sD9pQggu\nHauBPEVsO8P9V2apSwVs7n3BgJhmef6f+YDpYzApaAvwOaJeDqsn1hk42weG\ne9opOryOYp7OqPYmcahs+BwOKDfnu66frIoUkvrQihWyoxZS+gPnYP/BXsJc\ngISe\r\n=Xkg/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.e8e39ad19.0_1621368771458_0.013511173625355699","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/typography","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e4322f963bc1a672f06922780b0eb091881257d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":22,"integrity":"sha512-1AMzGDogSDaFcQS3ksgpgrWiOg/jipkmtEeeawdZcfs0iR32eweFb+jAuHDVENTiJXSG1AvHKB/H5E7fyifflQ==","signatures":[{"sig":"MEQCIEdByXD8Trrg+lPYySQp48E1LIJjkAUrRD30nA8DF/WdAiAJHvW3oXFqYjNT4mjMO6eow0zOqyx8bkHxirz91S/m0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6ACRA9TVsSAnZWagAANmEP/j5ygFV/d9kFrCdTkZso\nv1EdF4rO+6nm25eghEQefFlC173U+UVnITec5GX8UoFHFHsqevw2M5svxqJ+\nMNRqrHwclZeuEs8stTliojJe39lTMFwjbnHrBWJY7kr3dHVL22VZOvDx/1UI\nTGG0nuprPR74LXNDyPISR4NAULnCTq1kPPLBn0qpB/NUTlSVjR/loEivxFrT\nXLT+uUg+N2DsOlVwOEgmBhMW46eO0LXU8YFLOSLAxs0R/sekehRnihQjeTUB\ndeiR1rtCn9k/HFauthRVQVIV9wpvE75oy2QPT1mGLtTQQQb+6LCy/8ggGKm9\nNXIdzvbxu5Xyiop7htL81LLzs5cEH9R0Cs8PZCD11bQQ1rQRghDZxKjSczem\nZQK1NAXBvmxUSYVRCGC3f/BiiIw2ik7qyDCKJjUVzwlTT6M5JPR6BkKEKSHZ\n1Vc4XbBylcrasa50PcyFNRLd8NMy3BbEyuiBMGKUX0LZSAB2tHJkqqvDaCG4\npNtZIz4b8MyWU9iqwVpQ0XFbe14kt72yfRsgMTdEYUMDMl85VK5/ZFQL10p2\nCW8M5kEAMZtuwRprFcX15Js6yiGA/g/ce2JJL+ykTBzCLvIxrSH19EcNL7V9\nDr7+ww6GQmoGVTevmdP93+KEoKWAd5tjlNIGz6TxZ6GXoSBoU+J3eb/wiEsh\nuIH3\r\n=zeNS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4bb5eea2b.0_1621438080427_0.883911311023533","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/typography","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d82b173ef84c5f9754d9708cf2336ae97133c94e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ccce99cd6.0.tgz","fileCount":22,"integrity":"sha512-/4UFiumG6zING2pUT8eMGTCZuurxy5NdE1xUv+R4LSk3IStqitMMinrp7OjD0Zkjqa7q3ARbkt5QNKE7IT3pRg==","signatures":[{"sig":"MEUCIQCvYtUYTacaSJTLhFazqNhUGd9qxGliljr6AqHBpHntrgIgMJIkY75Sohl8MKHiE42TwunxIf7AJ7o0c9SdGEgrTdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPBCRA9TVsSAnZWagAAINwQAIY3K11sPXoCEPQ1zSnD\neR3hWgvMbBxwC2pvPCrKDVbgtsd6XPugi6ArjR91bgwre8H8+VoCwUyGZ2Kq\nLAjTAxrjXqR0Zy/d9VA/6+cQQXng5/EQL32pGmg5iWvDVa3H+FBwMDdvIUIt\nPwaF3TC8cW40qmgY/8ZKg35mH1fo5DqPK2O8Ue6O3FdGhuJ9q/Tco0fkPIJP\nTWAqDT6U+dTit7QFhdVnKAtMXFJpdAZPz/Sivh5bLz3bj1E/Bt3zz5EY798H\n8gGIUZqEns4VFJQVwcD3zHf/E+UfNp06YYqfAc02YQebEBCEpDJleT+yncVR\n7PhE3Dc7CpvVcfThPwIP2AJrQlJGf3Qg1uRg9K04v/MLvO5JBsm+WykPaaGd\nkiL+00HuXvjskQjOh0D04b76ApU59s9gapYoNhANvTQ9gZGZ5G0GOfazXqVo\nDhZ5hA6CeKoULivZZ30hLy5dpd8QOHp5Isf2ftYJgBQNP2c3c35CJO9wluL0\nsaO9IQMuNvDWk1tMkPPx0Th5jR+TDtdVnzpwnjbl5gJ6X05OOWniKOJXNHeQ\n/t61r1oTDNQcp11A82iYAUnYS4emmVsI2cCQWRciYUCIWWOUldEMFQZgvm4q\nbfZ/0UIvZOwzBCz1F19PxDKlmdEzM9aTJlxJVcmIdcsRYPP4pxYAaWfQ9EfY\npoiE\r\n=O/8Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ccce99cd6.0_1621472192488_0.3370972096067615","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/typography","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.14767a8db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2fd2f50c2c83bb1debf19647528e70ac00169e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.14767a8db.0.tgz","fileCount":22,"integrity":"sha512-a3oKVOHFpdgyol6JIH9MtVj7+csUQfI2YneJcwlrr2RlSu6Gl4aYqblP4FkOXW+eRCirHQHfTxPj6igQTGOLaA==","signatures":[{"sig":"MEUCIAvZCu+Wl1J+KBdkRqBQqmoJApJ3gJD6fp21ZpM3GjCxAiEA4f63zngF37yeDPPKf+3DZL2JSedUYeFocyc2GOf3wxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsujCRA9TVsSAnZWagAA8r8P/0bzV0RIu/W1SIcOKEVj\nsGFqlYGahMqbIhUJILycRBCL8k9Ms+cgsrRUvggomp74TDrLMO/GBT5fuGMV\n+TU6NRZnKNSuyx3jfImY7z+Oj0ZCr86kd75EoeRZ5brUdTEZHXB96Iws155y\nMMN41ZE2/YZsZqTtBflweVDOUsQIohi2CkdODZVpD9Ca0wuUJOK+TcwhJEt0\nTkW+xvDINtcHHLYfQEP5mPFZOvVqWoY0iAg5NvK7xeElxF0Ld76hk8jkKdu/\nZOWb79raf5DLwpRKCrstJ+0GFd1rUPV0UlPZr39jjAINM3EwIdZAmcjfWjyr\njKvYhHGFJCPY7ljcH/EgJTTZCZog2XmrKvYUWm3CumLzNIf+rTb+9bXMHQUy\nZ3I4iHUx0qlvhfJI9KruHQPILG8EjkCVrSJOqScFezb265aJbzhhXAlSkFy6\n8iv8nbh8xzSTm56ocAsX/utLFanwuxHXwv3MCLS8muY6AyFq/5dNCfYuEgQJ\nV4zfvqF8qvSpQqnKzrr6JbFbmppfFvRIw0vszG0Ww/oUj4HYyESC9hlxfdpR\nAASQyu5HLFc1qZCYM1RgJ6bOYjVflCYaytorVlhYzxAwBMO+Px4CsrbOhg3k\noq4fiaxf/CxAdZe7YkSL0GrBnEz3v9f6IDql3azhxCg7ebxc049rcq820hWY\ntOpl\r\n=wPDZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.14767a8db.0_1621543843407_0.5278486226983592","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/typography","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d91fe287b3ed422058df97d17d42f00701db7df","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.22c6dcff9.0.tgz","fileCount":22,"integrity":"sha512-EH7SVQIQq7z+ngf/ey1NTX8ROGTJkIZbDvW6sZUSrWvKiY4fQFlmWiZDN6EVSvkdroafPcaAJQ+yqAz+ctP/pw==","signatures":[{"sig":"MEUCIBBvVmXmxDFe+a05Kh+X+EzaWJaswDILmEUII5rx77RaAiEA3aycewSh62zBX4PHBhprZiv2V/4sQESbfN69w/JL2jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8O5CRA9TVsSAnZWagAAhPYP/3hAxXZ7wKH46SXDqhxJ\nw3AmbjFUaLjHqPR81aT8atYGqYEM+KQMWIYgwcC6QTB0wQHJGRs1aXosG1ZH\niWFXAmYNeG1Jy5JO2dKp7tqlGSgA4Mv7f/3w16lVuhKdZr+2fL8PLj6WRza9\nH4Es0kM6new5J2FfP/vSqJ3XnerOnR9JCVgo8WAFyNUTWdyH0eraUMQs4pFj\nWEY/AdNMk0QMpw6hDOtmeolSmOuaRJH+XJo0LzAWGBGRRo+CX3WUlZwL1ZCX\nqQPKRbXLTLpOjnONCOhCbxhyxJMEO/KJwcQ2kqLPudl+qmK6VH1ZB8Qq4C5P\nUglS5uPpbzUGHd0MO2PT3bSU/ZovMkXP3d5PA2sCFL5FRSHDi2JjnOLw8PP5\nd9uT/kDbPuSvnX6Cf7OuQdZftmj6h6R2WP2kWSFGiZIh6LOVRqJmU0SMAjZQ\nAP5nkithkrLXWw6PdfsTU2wXOdzcqPidUvlgWg0La8k5O12YUhW4nAohZKME\n+AEXWvr4gBRPc3pa3kLBOD0/5gYWHY/rvdccxnrYflMgrVE2ygmfzaYZVpMD\nCOQlckld4TsxQn5gPEduws9iURLsu8IVDYx/AlVqC4+AVDG1L/LVJ7/qs/lZ\nv+QOft+0KEvW0ae9YVXBVDiexAiJoHAXeJ3hATS7xAVhSQNoBluWrgKALYHG\n4ET+\r\n=wZaa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.22c6dcff9.0_1621869497302_0.22155206736547717","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/typography","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.fadab3372.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a5550dc0a9ad8ac0e7a1e205dd8a7db1a4ffa75","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.fadab3372.0.tgz","fileCount":22,"integrity":"sha512-tQ23pPu12tAraFVNrh3MVChIYMZ0Dkg85ZA0XzUel/ZrHGVfmYZMUpEnIzTNMQQrm0fmQlTVsZEyjM4aUpV1BQ==","signatures":[{"sig":"MEQCIFRxYxiWWOR9rWiEkCqnDT4C5wCvNdpNqTkTSSbdk8w1AiBEsxd2WFQjvx+TVgtzN5NSda80AsdoBCImYJoOiKbV6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87HCRA9TVsSAnZWagAAiPAP/jKmvXF7dtZEkvzGHhyc\nTqx9B2eJsA8BG5+YsjdiU4TDaVOe1LKKcll3hhAH6OgR1TLoYn+6RLs1sQOt\nLYv1IXITJlmTVWbDPiXA5KMciHYbTQupBuM3QqiaRMoQucS/qhxn9il7fAMv\nmVqzzWWR70MgOVHva7CfRr/8uh8nYnrsc0VvAxJWnkxWWEksKLJBxOylcp+m\nxWNmrPOJZwpG8osfcK0hqVm75ldr/VIh+8FksD7moOkJgbTFLOE1/Ey9271t\nJH80okaxs9swzDhc1pJ5tivWoxrugRR+BLgRpGt3FlK5PFBzVcEe2JE4Tk9n\nk/kzJlx7PMB5CVYL4a/xLNOIhz+CXArX3Gd3yzhQHXbAtuZDQAZjGwbs8JLI\n+5FRqwAcCbFQJh4fRbtmLw3rrBKrUnVQLY9MmnIjDG4U0vbUwae8vb8cEP1x\nRPwnvPcyGmWKbmamst9vigh8ywjXskPJMblUDFxPOjOTGDZP7ZktXJ2GPPuk\n7CcL5ckjttie49KqcyPdtCL2+Vp98dQH/DR0yTEWlRXIWSHT35QiMfJJvB+d\nDI7/tt3zm2YptLaK5vIyShIpONiVGRVbSyeiH25LxRjra5G11gySA+YW9929\nWK++f6phzoRs/lQwHGZFAyGEUXNO0xlyVQi/wQvhwIvWRhCHi41+xF3Gft6O\nnWOq\r\n=OBmx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.fadab3372.0_1621872326783_0.05078088040828388","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/typography","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72703155446d00041d54f73424dd7efb2b1e6ede","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.caa73aeee.0.tgz","fileCount":22,"integrity":"sha512-1cd3HioIRbEFe1iIqml6Y63JS5a8yuOkpmx52xKcsyLZoLhFbYcpk3uTFnnr95Gio4GV3upEFWMtJd4jpAzjMQ==","signatures":[{"sig":"MEUCIQDLJTGDLlDrzNnL/DoMO8I9a5HbQK/dQjQ3mPniRjrCMAIgDsi3MC98i/H5tnCVRNaO1paFUj50jVkrum01F3dGAyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQYwCRA9TVsSAnZWagAA7zAP/i6C6DvnX6Ot4UgjIfcc\na46K4NT7jRfA2kmbhKVK8uA+QyEc152P1YYbIUOm4HaQ72lEpkI+rsMV4Ccm\n7/cCXyCQrCUe1YxFIqsY4AYqXWtOGt2MfDx07iY5k4W/sP6ljoaN8E8mu7sP\n+8Rq4aKFoP8u+ync+JjWpZKPyvjBgPuuXC/bYzbniHtxZa8APuHbg2e/E/fT\niJPnkAlOh8e5oV3L5pqAjHH2XUHL1ipAiK9Ci1/lujHeOE9Ab22EdjDFPMRP\n3fFgp3puNlW6FW02Lg2tbfOpMV1LePbc/jYv/vB15ArpJhUTlYfE1J3ih8ok\nR9XgcxH0sjhEb3jcenACaWmMAwrBW3xJkjgbge3FVIOgMPaDBBGVm14vminG\nU9QVw+w6+fFo+wXD4USIzMWX3f8kyrm/kvAJQyGnMJZW9xMlNgRbTxNrzO0+\n+kM4lp+qt0nq6M5ffhVNygEgAjjd5j+g13Pa67DfOuhUXYnWlIUUj2E2Jysj\neO5Heh/lmFGqfxzaHwdg07fXpj56hF/xQY4CRFQhjBfQNOZ1UHAFomztRixt\n5hNmFCTRRXg25t9qTGZTCKnTJrx2xFxOTfZqAijgB99gpestmIkTBYtbEkWE\nHOtbAqcim90kkgSLipMt29UsUtQJVI14PRKTTyqiL4HoIZnpXVOwry2E06eC\nOYwT\r\n=4d0y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.caa73aeee.0_1621952047656_0.1303810092133859","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/typography","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bbb938daeb578011a0d6dd2e14422484e78929f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":22,"integrity":"sha512-3aW66gtEhzpatYiZVRiS9f8ZPOFPh9JE8RVBFUchkWtZmqd8sHm25E6/pwW9zX2/LpGkxDoITyTmM+iZlJQ92w==","signatures":[{"sig":"MEUCIC8Q5J8IQXBGhvQPiHNsjqbTGZqPZ3+OTlIvKNvqaPfGAiEAyf3dYxQmqAlXR82MXgn9CHBot/oJBwuPCgLutKx2sOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV98CRA9TVsSAnZWagAAF2MP+wQkU2AEo1Bi7b0Vfrmu\nJbszJkx+sQ4TF975LJddPPKg1MhGgkp0VEUYfyX9zlurcz8phcHgyvnahwMQ\nEYQLw0CQmtWWd132pRcMgOqKQrXjf12ngf04EbV4C59SzhBuW3ZwJwP0p0OU\nggvZD+Tt0r/mBWF6QVQIsf0g++MXc6/iUJ0GHeJbP5A/gpOgSp7T8TEZoyWo\nSePvqBBE4VqVt6n9PHhvn4gzrkOOQWEOjQxOKHwyWvEKysxj/maoBz/OHecc\n7Bo19LFyTtSYenIQmnVD+bkAbsnw0r3Rb68F+NG9LvM7U1iQ8jgF1BsmoqfM\nhelCNogW7U15EStaFx35XzhXtpq+oKVBuKmwDqiymQtyfRLFw2LzI3IZc4e1\nQotHW+vn2S6V+evh3K9DsFSwGUj7WIVglA+GpF6HoPdv7ORthLRBfjLbA7QD\n92XQoytgy3tDnYtTYJGAxOO7eUF7Yh64BjtTlYlUI9lSrKJv1EGF2m2hJY2w\nJpYAHIThHs6xPUo/yw7aFu8mth6z0Alrypa0i2KiCAnTo/yCmttx/I2cPk7g\nt4WYqv4ruAsTFxzqHJNNAzvfHk/CP0sXPSr5tXjCFmVBfcyK7NVqcPV9u+vr\ngbUXK6nuKxSOlak7YHqShXL4Obv4J+S6TIrx3Cc1LA15oli0GpaSnZQAA/V9\nJN42\r\n=LaoH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ec31ae1ed.0_1621974907633_0.27066700724049175","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/typography","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8530d3514.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a869a1c65eb744f02aa683f1db482072fbf092d8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8530d3514.0.tgz","fileCount":22,"integrity":"sha512-HIpVz0BX/ErOh3WDG9UQGWD005SUqbjMKwAUStcvFhfOJOgiK8KNKHHfX9VLu5BTOGnSwh2xki7aGaOgV/c3FA==","signatures":[{"sig":"MEYCIQC+7VG5VF1Jh1NkbknZRMtDEtdeoMNiy+dM+m7jSDIBhQIhAJd9qrhLiHHiIe4ARJ3wvf3FPtMuccjgve3vEJc+YYqL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MSCRA9TVsSAnZWagAAjagP/RNr0q3+yWAV9fBLjHXg\nhCwuRoKIcngePTtsP2wCDU5kvMz1hAsQTVoRi6HhT57T1DIigGylNPxWyhHN\nwSYPkRLW7s02u4/kLWoIQz2Q0upHFGIdb6+BnNh8DSRxvraruxtYJr+us54f\nFqvA6gKvWpdWEtXGNOwzLgBt3gYAfUyg6uV9If69scoQ8MBZ5nJJQC83OR9x\nn1Ec2AX4BLoqxhTKgP5s1rEzmDV1hhkXp1Y4q52diNhhk21VtEKQ7jd5/kmK\nhDzd7Y6iAoWQ0xTagJyyvccO+OqgYOZc3ZRhBavenVg1aMntJza3Af6wD/Fi\nhRe0M/JtYuGXDZRmh5Bkv32M3HWCal7hVHKz78BIr/DD+ig/wVV6GAwua1hx\nanx84c6xQArRns8tJLWzJU3KvOgpIhg8PS+zrYRUjSWC5IvkuCfpO9aAxEqK\ntZ5AiOT2CGCAf+qES9S0iGql+8AJ7DZuElTLJAz0GyX5nZQ8zHAraN68a9TX\nM2VORljzZDPWvhY87lN3Mm/c22/3AgMgwBM+G0VfBm4LYPt8HQKraRKt6A2n\nOzSU1JAW7sBToPYeqQ4i5ufzfi58vH6gmo01PpL9YLSD/yCz15AP+4juZ6X9\ndO196P3NC38a/f7a6phdxWadz/L3Kqg9HBqlxvAPvZN8nDzb4tiHiWcPTdjH\nifxA\r\n=Mo45\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8530d3514.0_1622131474337_0.051626860109989625","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/typography","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eece93915864413f0123d7705c4d33e1302162b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.00b5899dc.0.tgz","fileCount":22,"integrity":"sha512-BFkgciUyBfGMbx985s5K7r4eiWaYd/piEP6uYXsbRVNmrBV6uoh4Ct+MxxgTvAwEH56uQhyTQCqZATEzD9G6Mg==","signatures":[{"sig":"MEYCIQCeWRGF+L3jFhdfPcljwB6Ew3jSGtPLEjZm9kFpcuwoZAIhAK4SFQKQzxLlYpT8uQsQgPzvz6AZcazXy7wcY49qtwaO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrh/CRA9TVsSAnZWagAAXDkQAJ7Gya2hamX+TB9KmSlT\n1aunoZzhxAaSAmn3EKxxeHdMQgc3Zy3Rs0nWiIM+9nXrnyF/AsNjQvdji4lx\n+l/xmihenK3hbgB3uFTL/Hm05fWqJvP1lCEflk7gjJAv3v5fqilgNXOYx+60\ncwczwI0ZxJ0tMl8kgxh9Lw4DGGMPR2y8RPl13WoCCMzV54ulRXsxf1It9UWR\nI+mOKiLnNvaqLQErcZTxJF6ZkkJr44XoUZBziIOfDZnmeTeI6VXrCauQjW5N\nvIsuHZuz/5S+E0Zhx/gJ149QbTVN/cOJRhGnb9/ydsEsDRahhQFBQS8AkhDV\nIxjEOam9Pp8dX7n+4hKsAOlP8ffFoeYTpyYkuNNFCK2EbFj6C4AzUn+ZMzgL\nq6TZQcY5cq0WPDBNMfTgR0QoFI3ZXjDpizQ/kJSZkVoMRlj094c+nuC/Vo8g\nsWW4Ujboo10GTwt4tS3FtR000tF850aW1hEJoSoLabtEydUR2Y7t35nGbkFk\nkULXtdESX56uBdCpV5xF2HfuyaloYlNN+b3r/LeF8pHfKgzdvra2X5luOrto\nJFSPslkb7+2UIBP1nHRre4E4aDNrCLUrRNPi+l0OaewGN//+jmz6+nwTe9gk\nnpWIRDCrpATXkkffcsl+f3TwrFJ2evBNNzgrZqE72dff690OHrc9U8xboUyC\nLDgI\r\n=agzZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.00b5899dc.0_1622587518529_0.34395118928972956","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/typography","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73f6957521fbe4f5d341390916d263bd35a5ef10","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f1525ea3e.0.tgz","fileCount":22,"integrity":"sha512-K7YhGux17S2ABrAwbrDQw818SnVcsKnyTGJzWiG+cE1INTWk06y5gJwR9Cca0Li2iY9AIA1bB33aSXaaYgkSqQ==","signatures":[{"sig":"MEUCIQCL096mOVKEKXgnwBsR+zggMhNOL2Ge23ZoSkHC73vztgIgSvOqT8Rj+RVyXJt4jRK8UesV4OJL+I/VBdUIJiNlGB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8ACRA9TVsSAnZWagAAY04P/Rdslgd+6Bak0TPjBvOM\n1V37WAQjkLNYpgAUZfi4HKDJGlnpAcj+VNR5MTRrWv0Hdazgqdren82qW7Rd\nK1Ssa0lkC7TgR4EWDX8XfrCIcFGwyCT3ao+fwFVV9XZKKeyJuzU0/4FbjrtH\nzLqHKdPlanC4x0j3B/gHfQRBHBIXL6uRmEQlMCiMLr85IF/GfyB++EihDOyG\n4zixv0xUHsUGp4+fg5ewoNiE+R9HLdt8cIirh7E0SiV2IaN2RdbfxgynDOHF\nO+C3H8Z8JQE2rtudvJRb8bTXTIkNpLUNgH43YWcUSG6tXIitxDEZ6Ea+WnD9\nHREhsSkTqOf4Gni9GrZllIjbju+sce4A6BfM1RXDWuKhqxIld8qpjmQiHWCx\nyeubXkn+qrmsItUe77poeaC+t2e3IF/StkprDkVqC0d+5ykvLv6qro6jh3zt\nPCHLQ1AInN6GtBavTzwScMgy6Hc3vPl27Nm1b/VHsj0MUcz+truxykBSGgY5\nyq0sQq8MUevS67NBXrWNEh71cQsfuCRoL0WTgbylpDOWFmAEqOGvj0B1lh07\nDfWaMeNyntZ+ZDge76HDUuCCssg9k8PUkkmUNKDbUGlkEtlO/Z9FYAIwFAHA\nVfnHYjQt9IvOX3zIn5+ayDteB/Jljksh3D1i/OEspfy9+tJ94P/hjOdD4Qvv\n5xL5\r\n=C5Un\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f1525ea3e.0_1622728448113_0.2757228680815125","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/typography","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.464a00286.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49926c10ddda7d6c41ad3adb5cfb5061fcdbab6a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.464a00286.0.tgz","fileCount":22,"integrity":"sha512-kkyAow9ga+L3VL7EW8mLnDwwV5T3Ua5HwhI4NLiHi9ryx30MNcX1afcsh5A4r6vjPK0aMVfLb6UXtCC87GZjew==","signatures":[{"sig":"MEUCIQDhvgqqYlmW37PX2O3tnz/bf18QT56Ll35VoPpMKJWoVQIgVA2WU7faiFl/VD3SqaC3RbsI8jpah4CcmzWJMIUJgfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOsVCRA9TVsSAnZWagAAiIMP/joTjysDbOtt/dyF6mUE\nht7jrzkQOkMrsrcVgUm6mkcV3bOtHeIjJTFfHpPh+aPNnEeKJCu/BVcmIu5o\nrkS2f8xqW1CFD9DctIBl1lXZLR6NMaKIDHoYj09W3sFbKrqfB/ac5i+dgkBP\nEmSmwXdyrYMKB+nRjySfmJFCyFF+aXZqTFaeVRpVgOS8pHoF/aM1hzvwERWB\nHIs6q0c7hScmRFsVzElWGW3x10smMpDb3EyzvR5y84+Iov2LkHuiatCQ1nQ4\nMDtBbwNo3IOhkmjkILPykFph42rmxeYB2gAymD9gT1EQR5m4aINtFY0RFNld\nScGQcxAcDOcb85gtot1X/XfEQT+ZLayvy9orU1DhRge+5UG2obUdZaI4aIM4\nOZy6rqJ7yDnwdKciqOeZfAVljlNX8/iQUX1AeOZUuI0pSmPC0xPv3bQ+FtJ+\nTRPcq8XfVaBaEMd+jLz+KdOlZyCS5ylhBBQj/WtiVPOkhAK5sn6HrhROkc/W\ngxrqpWgCSTYD2DqrH2flyX/oTehJYH/fV5On7ZbngqvtE78rSKRFI0Iw2n2W\nl/dPZ2Irk5w6N/NNzhL1JmSDHE3KwXBzSChJ5idCg0keePgWtuEKH54bopMo\nEZdiaCX+HN0M9bfZsSzaWUwxVjMyiaEwbY1ZyJ9KeHtqaFYv4U6dCWypyXeu\nxakI\r\n=G3iM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.464a00286.0_1622731540836_0.7195327514797663","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/typography","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.474de7878.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f1d32c1e55cbb228dd61ebeb7a47b1e48091bca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.474de7878.0.tgz","fileCount":22,"integrity":"sha512-QU8SDyLnRaDBWiNYD7K3fEXEqaKHWfRnumQRXNpb1Q8LZkcYm8EvTWRBjRCGvcXCpqwVD8Nb9JLXIGApjSRoqw==","signatures":[{"sig":"MEUCIQCzQ5uKrDTcUgzfvZ63E44hDJ9QVXzjOU2e6+RatN/1ZAIgX0d/J8JepbAHVGKYrG3F+mLyHZjStQRJ9qOTKoou6ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPG5CRA9TVsSAnZWagAAVeUP/AtHRbA3sn9eL/NAYbPf\nMGsjSU4SvLO384onNbyrXPF+wiTZWWlacmaGcQ947cveUdLxrwKHUUEmlrvi\nOhGP8MfuxDlHIzHWkiYE3uYy86Dbsf0jzE5CTyExmVNfvQgMx8lwcIGkuprs\nZyYA/9AZdfNKBXnN5PXIaIqHwiW1wK+d9pmka/+fjGG71JuJIBstJRSsDEU0\nAAEJmd/zdyQOFL3AFiHx5P3Tk5YmaQVslOex7mYvZ5a4eRTLMHnIiZw09ogJ\niOFsHfa8p1KJXLQiel49dzKVgZ6vPQQoLVKpHA1oN0ZvfF66+yUWTvlZr53f\nz6GlZBzia6LvsXL8I6roKmarQbxKkN5HQEAMeAN4iLBZlOuDF+E66yR5AE/i\neqRtmm2ZGWVJx7yfHDrHZc8s675Fif0AxeELmB026t/AplK8sVnXA9k1N4mj\nclK/vMWUDeE4I42snSSXybI6NW3dnCOzOqP2ew5eyY1scfSyJ2/wRMnY8DxS\n3YxFTug1sPqadu8wBbTWbmCzeM3iZwIkUVdZInJ6CkKweJDqbIIPx0mYM4K7\nQ6lV7zMtN9D+QZZaQr51/X1iUFqtUOq6sYfhNK6vOX6CVFr2V3HZF7VPF0m6\n/ebJeUUHQ/FrIHWF1Vg0k4qxoHpa8TQ79kG4RRimqbAnfZY1FRBQ+Q7n9UTs\nInYB\r\n=e2Ou\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.474de7878.0_1622733241013_0.840594679794405","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/typography","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6f011398a01a42eb9af752da77ae8676091762e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.b87ebf74d.0.tgz","fileCount":22,"integrity":"sha512-fpPStRIwEHaDUnx8nhsXR/8PL8GiBoluJq3B3jBkFKDoQRQ462GhnC06ilDeVKjIj3H2TtcHF0Vbcnwx3bLmKg==","signatures":[{"sig":"MEUCIQD+hFNa3xvIYOCctZikAN2UIkfznwoljeFfTM1VeSz7xQIgL+9eBXVVyNfnaNOSwGSfQh5Ep+K/X7Gk5vqSvGuzfh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVdCRA9TVsSAnZWagAAy+UP/1SzXg6cJEnWSu6XFdbT\n9/eJ2q9DfYwWD3ABJTiUjwJtpD3EWJJX7ZPHPZxlGhKp9+3DAOR+P/7NyTGZ\nl9azH3z/DlJNLhtrgFYKyqtQ6OnvqyIIEZrWxHgN7wHChSUe0qJpDxNaiyAY\n8b5ShwubQXR3m1WLWXHThJuz/Tl8Ev1PA96Qu9LOcjj0vCt2REveEtTdyRJC\n6TDqcGESOS6+YBkl27polbgQv/myw+71caEgKIMGOpfwSw0EDwMV9rRAumE3\nYO6u7odubL4ToujtcOrq7x8SRqT214II9DI4n08nbpjYnQ5aaK98BcwvNQYf\navvLuXRmBJH8G8iXc4E+kYHVF7+pafZ87a4188oUcdsjC0hSafHSoe/rQSHV\nCpK+CAHbucxsEuBPdmEir9VqvtpIbh7QVYa9qOOF8fqIeV1reyVIvvZuwB9f\njkppf+h37gSHooyxgjGLwMBdfsSGa3NMOKf3sPDHrx1N4Usl4UyqdnDSLpuN\nbDJluEEg9mTs1F0ypjt4O06qFjAzTyKxNWs710niNBflbz5RNerPWmi8meLI\n2/71CYMkcN6ONRPCkXCe/fXvw0f9vjM1yHwFJWo5kO2Ta6OggI2Wn1fdbsSw\neyr4k5VG1wxq8wTfQSOSMdPWGndCGlRu5OkVuYR+i4ICcJV+oSZ+ROEQ7Kw1\nQavV\r\n=X0Jj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.b87ebf74d.0_1622742365079_0.35812649159137067","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/typography","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc847b1c67e9fd00778da3075789b08d4be89285","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.2daa49b35.0.tgz","fileCount":22,"integrity":"sha512-bD6bTmmZDtltrDUN+NM7oW0CnUL9+BdWkBpFSYjnSuTjpJ9IiVPg3lCqeZKPvSwNbAHgdhTeHH43/qBw8ZbuMQ==","signatures":[{"sig":"MEUCIAZy2WNNnS4Sd2QBUn59n6ndeNTszyizAle4DKbtkifIAiEAlP/1eghiRxZnWeWh/Onwt7HO7GQs74Y65gHKPkz0Q34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFACRA9TVsSAnZWagAAiNkP/1L25JuAVgo7RcdOP5hU\nLL/l3maqsekAq0oIRd1fmzXLDOZ05V1E+15TubxJ8Mt4iYHN5Egsa5xIaifA\nGTHA0cgZSdcSIhQdPAvOe/3n5xIA9FkXTzv3bvoQOyuTlfIwbuwFJK/QU4Wv\nVtj3mWC90eRNfERN17oXwkln8fXAblroaGQUg/nZLbAJOpf6qrGAuANLUWpV\nvz6EPerR1BXgeADld0t/2TmsSkp6Ag60vCtsSIQzRjKDo5798vxkHIB0xyVF\n1dEz04uXKGAoP8iiwfhMAF+tPV6kLEm2JwkOBb74LqpdlGodC7o/D4bXI875\nPYYH4QTyGY23UACY5gXJtHPByBQz9pXR6ma2iYtaOHnFaVqEDP4B1UGPZWZR\nwq3crDkCWuVZ7j4I7iybB2XFeukAr6yl14GmZO8LQBU9knf3I+xhKLmArsCI\n+gX2nbnRrjq1v/KRqaLDErWgEFQNToFpVuVQvJH3SCO7te6IAo7puSHZuw14\nnMcECCQDz6JPsx1IK59QO7kJJmqb5wuxTSVlUoy2DiztUXTKSUVjV9zlB8D5\nQNLfV/naH4ws+BDIIijhmztEjNiUQ13ZkO3L52zh8P0y7nTNX8fZpXP4fMMi\nEi2d1qGF/nJPds3LOOT8GLVxTAxV9vwme4CsHGSCmUQIUVBLWafk4S197iZi\nA4sG\r\n=uQo4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.2daa49b35.0_1622823232196_0.8151853443665757","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/typography","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.08db3d737.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b8d1698767075d1dd31f14ce10ad77686fb3b72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.08db3d737.0.tgz","fileCount":22,"integrity":"sha512-/BZ7JxD2RYlhzpG/4+MeJ5TKK4huaYdCsbeQI7MtGtpoIrXMoMGHuFOD9vtiarK5gDT/xiFaHmkR4I4JcMz13w==","signatures":[{"sig":"MEQCIBlNG92JeSy4biJFUWfQZq20Ph/uMg/lNnBPY+kN2590AiAb4FDgq98/8GegntfmYsueDjNLyKO5pwtLIN8E/7EYJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHkCRA9TVsSAnZWagAAuRIP/iLXIe0xucTC3e8XJSCA\nBLmD+bj5e19PwvEkDfAV5fJ1+r6DTLAcsZl1D2BbkorUu25Ve0tMplMWU4J6\nmSdhT/XS1GnkvmCs2b3enFLDYrDgN5EPOiqItZSswiHgyQErOKebK5x73L+D\ncFDoJ4Xkz1xi3zTM72hCyvTsw/0tgLG+hrnfOvpCyWrLW8xbaS6qzW6/M8HR\nAyss5gVYPYDE6t6DWnd2oDSU4hp9+mUTHD4Ln3x28JdT8CgJRid4746ETq3O\ng1Msnakk2XcAiMgV650EWLIovUNINmYX5woCluKs8qIdp4Q/rOpCUG8MekPJ\nB62ttnad8/48aBGPKqYvrtVmM8AfUlXj89F4ZmJ1N90EVt0cZ69knls4XYPe\n86OOB5+U1zQjXF/ugsjXpiyu0JEvhUOzGcRFTdMZKB/hmhvUAY3q+Lw2sRDS\n9Pyy3soV8vqFJ98X5XlH8guXueY2zy2+7Aj3xZeC+H/Zq4pEJCphFsZZmR8h\n5+4U+EWNbvhZxrP86wSWeEtKNIJyTrqcCJB/OOwb9f1i0uEkpe/fsQJWHrnl\nsG094xGJ0giJMKaLcC8zR/tPdcH9fhtDZG5jS1VpUA38Z7sfPA7Hbb+pjI/t\nb0ClOsZ4WuupDqv16eOU9mjwAZ2LM7vS1KL6ojEZ/8NvS+ABcTFiiNEnG9M5\n8hnb\r\n=Asos\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.08db3d737.0_1622835684732_0.4495905366350572","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/typography","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.5823407a7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18733668a6ddca5b37c799304622bb0c2e2ac853","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.5823407a7.0.tgz","fileCount":22,"integrity":"sha512-VLSOHVKCPpwizOio++0Efi60FBdNr880ZfoRtWjHhlvvtkeglDiVteysqxzzMlLO+1Bl7JjbE+NgVrNbK8ToWg==","signatures":[{"sig":"MEQCIDTO86I86Be6NQNVbKVfsGZt7B5xkl8g5FpjUp7jjF1qAiBwAN94VJquZ3McThTC2V1MdeuvLoZ2wsPWkbvYFvzCsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5BCRA9TVsSAnZWagAAX1MQAKMTPIGnEeXrnQUBdDg2\nw++HMQWXeAnPgOP/mHGcZwkbpi9deLxr1yYaBARNonnQsBb4ptBejq3UzJX9\nVe+oP25viufEESvgS/O7xRvIrqPdvlYw5mfM6QVPeb1xeaX77p9jrBN5wnZV\nfh1Jn7AlplTpdb8JBT4R1bFYpaDQOgYmuVRIf3iVByCK67YxIq0Q/MHYAy5O\nMGQS2n/48sC8O7NodsdrrwDTcoQfbfCSl5CakOUdxptaZ8ISih5XEFR/j6Z8\nSmzXjkKQAo+BQwWfqdTlKaK7HtCn2bF22HwUuqtdKzyGvS5TwI92SyMA0j7O\nLJ2sjnlF6Hx7VCDWIvrWJa5N5gZVjM0Me+xq5zyMsNhbLQGzK4laBFLvfK8f\n0adObuOpRvD/mFN/pc+vhpLsimt8MFgiixDjCxcc6KXztyTpjMETl7w+7RGw\nC6yGWhs1seR4w+Q9+sqEWfKBrS7rm2qXmov+rrAVY4sblQX34wWwPuKLLDvU\n+MzhMzovap1Ztc6oHBijaN0iWoEHlpqJS1NKKOJQnlYX2fkH1+DAhkodke8/\nmp5NFg2AyRN1QAR9X46EKej2HOk8dbnbGgqPZ+WyRHC2bNrY5+SqJIysJGOg\nBqCBo2gdujj8lA4yCvmzo+d2b/EDtskknoCcNZDD0O9Ww8O+Xx+Ymd8FAQQ1\nypet\r\n=/a2o\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.5823407a7.0_1623113281799_0.6878024936940945","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/typography","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea72eac4a69597f86c3216c5ce63628d7a5fc33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.23b0c5e22.0.tgz","fileCount":22,"integrity":"sha512-OKXGoysheuWytuGorIoBK0QLAVCc2C2Is2HY7y39g5p/psOuJnQXfHLdOQLKJxrB2L0PFOR2G6XxQSuMryH7tw==","signatures":[{"sig":"MEQCIDl4roK+a8STZ5h4ZUOrNsCB5l8593xNnJMwWovQEll3AiA5h+mkrHyG42P5iRPoG58kdHN3XAfc5mIcVQf843bUrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5kiCRA9TVsSAnZWagAATsIP/RMiXgc6HabhWIM3ic0Q\niQNFASmZGOEYI06+roa8Kqn8LvKSr8Ry1/oyWVFsurQto8YT9ZGowUl5rz9o\nsEMUbztWl3og5sEt1t7kZSyLf/Djfx2KesPH6U3sm+Rtn9b70PC1N/UF68/Q\nXxOk9YFZNFWrblwXVUJYcekx9/cDdP1o10LgGZunbtGpVjCZZZbWww2Zkcr7\nUJT9SQDRro00pvln0lsVtWKpa66bNq30uMN2TJYkm3Obf/wDUoOuKS0FY6ep\nj3Cmga0dnNMQ2p0QYYu5M6UeG/Qp+COgngIW/AWvrsHDtf4nZaarVSZWo1HV\n8/HUmExKmODAKv3y7GqNchX8Pk5GKz7sukTqg4d5lA9YWsu2JjykVXeuTb3E\nUB2ihI+FCzE8xMTcJMJCVEkHedEbmJMY0UIlURpi+BD0SrrgfnfSfRN01fta\nNhRFOrHE7iYLORFf49w36zUoZQ+YckXUDVYyvunCaCJQ7xDYQJ/v4FtZN987\n4d1SbaByaWOVa7Vrw9Y+hL6eaWY6Ypxao7cuz1dhS7nClwVQmvlExXWtsd1F\ntB2SES40VAXikfl1Sge6qqgM9fneFMrpvp3C/Tgje9rHVDmvlkKwXf8Ehnsa\n2XEjFtjEjTxjAMOy2cy3kcSpT78nTli5WSgevEvOPIadDvrG8qrEzWwqOuLK\nHGIE\r\n=KS/L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.23b0c5e22.0_1623169314532_0.11582893532979877","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/typography","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b86ce072e3cc78ce528a24ebbdd90d0da44d949","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.2952c6a76.0.tgz","fileCount":22,"integrity":"sha512-Q3vmDpTwmvbB571wuoYp3E+dYaYoBxQt+5jaedDU6oPZ7dc+n3qNElFht1LQ3uc1hgSWLSlXV2WuXkV/JmgDzw==","signatures":[{"sig":"MEUCIAYYay0zIlns92FZJAmx9Earcx34mz3gmc/5FUgVfT+GAiEAo3l1ZjaWQnEvuL40bbrWfToyCPDZuTkNQegWjGCzP+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uPCRA9TVsSAnZWagAAXU0P/1R4bI0FmwE9weKuj3c0\nS2ogiIMGkd6bJ44nhsefnIApsWU6Kem86w/KrNN2Hi0saAERYkJpEJKI275A\nAF0HNIaEpCn5AEwpV8lkZQeMM3mgJ/vMgruDL9tHconsLZity98qGnE2owEw\n6E8QkECkhC7CozVo3wNV2MLKZQscT6e6FMokSJVtdI3o3ANvLFqMG+q5J08X\nngr55AmE0PzElFhsRxT92JsawJSftoavNQeyrwLv+pq276cgFgTIn+CYwVfJ\n4B/UUpBJFjWdSJ4xldumCvMhJ2r9MO9K0+lJqcyJgnGsDig0ymFvot2yckHz\nuOKcJu2XwgOw6K//5cteXtBZsFm4eRvN3KVrsFenawC136HJpGUip7fczpqI\nNA2Eea1SUdTJH4h6VK/1Vb7PdWTUKfb/uS+OPxI7AthHI8UDzQTAcW+rxYNt\nNHLfyeqqcLTSEHCC60ByZ96e9ysazAllJQzneZ66sJHZ17j3Ll9iwz9BFrTP\nx+haRuuCrLSAuswCH+jI0OrDSQmsuPbm1zZuHazH5obYMCEoY7zC7yNnV9iO\ntgPsq1NbqukhmOvIc3U0Vzm5vIilwdu616mBxWqCC2EwiqPD3Inhu9auJPkD\nfOMxzhFH1ULYRv5cN1RZtkCofDD6KpEhKGaheQRO2ml4zC2HnPZ/2aYDhXwq\nKpMZ\r\n=0ZMW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.2952c6a76.0_1623174031595_0.643860495342278","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/typography","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f12425f88.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89f2493716b7843a22a3332ae78e682d7ba20679","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f12425f88.0.tgz","fileCount":22,"integrity":"sha512-btReKznBwiTJ6ET0ylE4r9N1qrjHKgvyyseo1XHv9fFIemIsSVQ1hCYFhk2Kq9Cjg2i7KaUfw9JoQSJwg//V0A==","signatures":[{"sig":"MEUCIH8JCYF+uVNND4ii0TnT0MMv1h+Ac2zCacQUmPv0sgqSAiEAq8oCZNgFwSqcOfBRHKdFPaEOExJjiQFbYlXkESoEDX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVkCRA9TVsSAnZWagAAaO4P/1W9+vD9GZ5xUuGARPub\n25O726zM5XF/rDF1qzruW4Ws2UVZZpAILCfLwIcNUKGCKAhM7KGsK62le25h\ns+6WnN9+D5x1wHRMUXvbQ4KpOkbyYfQ961SCOujCExHMfyj8mbcgoHQx8IJa\nfYfnjQTXa1JfaDhQ9zSl3SVu9EdJeYd6rjrSACPAxOvjlznPCOtDA6Vo2opR\nv+eRicVPwsq6EqB/rFL4tmdwfY5fuuQwk5VtFQfBeyZ0YC8lsCQ620cJKbzY\naXNPr3lpRpHuAIOFVt4R8TKJrCpapUumchbGQUIvR2Uyzn3zSWKuQsRuSRU5\nBeVapLiDsC5piyMkPY4OgPeMOJBLq5Qtiqh2itLzOzbxg+uxtyKrvoNQHn3F\nNzMB8mJhyGex6uI0PhXoC4b4ONfxKyc0z6xNDIB0BDXJ6Gvnj8165G9fTka+\nZ8zFLj7K5poJjRTOLP/hTVb1qyjjFYzaL4W75rrAnzdvPwaa3IFXPmxkXrR/\nAPEFvgCTidC/iSw/r9x2eTHji9Hbe2SmmgMqsVoFOkVxccu3KGMX/hBOGkst\n5vpu68gXG6U1ZSBwskIXhTPlue8lvmqpgH4oa5gm1RgvTSq+We+wzgdJgFBV\noSu2i0CeKNN8y86rtBiRQnTVj8uDl19QERygItCMItLOdvIYvD74hgZoZiY9\nZeQZ\r\n=Q+XH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f12425f88.0_1623287140630_0.2503824949154181","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/typography","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.e543628c3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94b1eb70b27af6506ba54ee6a774cbabcf4e9a54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.e543628c3.0.tgz","fileCount":22,"integrity":"sha512-9fby8cFWfkzS4Gk9C8yZ1oO+FbEoFKd+n7kuKhI34adRBM1J1AewtE6RCaS9mLv1WsbzrWljsDW9Eua2hzZNpA==","signatures":[{"sig":"MEYCIQCDyfjikMEGFBeHQ2VGtBqgPM+XHm/5cRBXn6DrLScyCwIhAKW5Px/pdlyk6uu3pMb/u9rdevzrOoHemq6kYDHydIKK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWlCRA9TVsSAnZWagAANO8P/1IZyCx4VBQ1H5fkOZPz\nFVtNhjamOCTPPnupxurkX2GestxEkcvlmk5UCrj6/kVAyF7j61aLyHG4+gbW\nIaHMvCXjCTQ68FALuZ3td2d3k7ojpK5juhiQdi6F2BDvj5ftkhYkhx1OHTzk\nQ6tebGJVQdnKEtZjUet3wyJsM+t/0hHzIRDY3FzZeyvQhNw533MtYApQkPoX\nEd1GtZjwPD6iwr8rmdIb0v6y/SrxrhLrjztxTp3QFBA8OkJV0IzO4RjMHSwx\nFtwcYbJkyDnpyWPCacK4PDwnPt4xhQuYNDeNd5ThNHg2AAL7vq77CbaintVv\nItj5jUmvRyhf5tt5liiGxf7Jb7byeCXfA8XXX4J6ocxNyDaHxSk0e4XqIKjx\n9aMFLolPfy4yqGddgqSlvkQfgBehvZ35vDbF3uITlMdoVy6KmWaRsqDVuGbe\nKiio0EFy20x7OfNg9c6IymvqdzsbGyG+0Pri56JXXPVF7VrXyWYTrS9wV+/1\nZ8eWQzLrD3KD0WcK7dTOJr/im+tbP6xwNmrySDJp98fmnRyHNGEuoLbJFjSj\n1oa1EOBcsZ8eoj3SNyb7dS6O5Y33cxv8l4k3NZJrxtuq7R3ehn4tpyQktiNO\nQoLV7UmUMvOJtxdL3j1B9SQZdHdD047scv8HOSoudP56DBkUbVTHt+bvGqS2\niAHa\r\n=wTOm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.e543628c3.0_1623287205366_0.4516275176400355","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/typography","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.e0c346286.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7322d4cbe330208bad45b277ec3804e8e5ef5e9c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.e0c346286.0.tgz","fileCount":22,"integrity":"sha512-J6U3mxjMWyejNGfNyZnS+TF67al0Lgd2qCS/zjrB4Z48141KFwYvNCxy8h3Lc3kq3EX1nTw5SWgMfxKG0X86Sw==","signatures":[{"sig":"MEQCIGplf6HObzLY+ztHMkCEakQmKIRcRQUXFkrzVZqjahTXAiBwWwANEc6RaglkUYNAhlPzK6krNkfSNTll/4RWFg/iPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9UCRA9TVsSAnZWagAA6RcP/0hzbCviO9dV8VBaOmFV\nMc2BZU5hDXDkQVJ1+hDbPomqPc8oiOKsk8cmkZqBpEgwC72CBF1S/7cDz6f0\npdMgRpKSVGHs4qV/31hmccz8/vOTl28Wta/akjy5CdzYm+eEcdG9IFfFT1yg\n6/IWvdqfgqDlI7Y7beYlNCqE55EaZrg34XvVJNBi4jL+Q9yqv9/hsr/o0k3f\n2Kk3u71Hok26WjRDGbafsJgYjxIL0j3dqIzhSstrLFUGyY3OLjNI2PkcjKer\naJAhU3CrbtdnkaaYy5Y+bEyCim+XBuG69JfG8BXodtJeZ7NO+pwhCqnT82CN\npy9ciHD9WtwJnYVbVt+RufvRNmeYoucFmIjtnnVlULv3VAGKXv/X6HvdYw/d\nTqsptOPjeatYiE7HDaXLvUWjUXN+Vr4JuPBxxWswhBNmCoFqg0qMoF0T4S/9\n93UhKc4A6OdYUGsczPenUu6+DaD2b70KSwoIfEmm4GhM22C3cU1fJ8Mzf/Bb\nXhMqlRa2Eu2gBkD9sT5Y9MkJFpQ6x9eMCcCvNR0HTPBwsq+46v4SkUHPvcNB\nI+Lu54mrsu7KyzmrgT2zLEnazaTQmH3f/URlUmEoNfvPTZWA2kN7aoBRJsYs\nVuLiwTeNCTv63G9xM4p8oJlaGYZo88Du6N9nr65pyi0T5ub6GZ+jZQou3OR9\nPHVa\r\n=trNH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.e0c346286.0_1623342932823_0.7226070063878625","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/typography","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f43af5633.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ade9546c9357026c64ca0b8699d4f61140d3305","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f43af5633.0.tgz","fileCount":22,"integrity":"sha512-O6KHtmeFHwVmkSOxQUGc8+pa/1fLLcFnLyCWCdtH2gTTp090RkKasO0QOl4lY0fEwqMnjTHgEX88BHLL+nIMVg==","signatures":[{"sig":"MEYCIQD+s/3yv6onkq8KqC2nPe9/c6jsoWOGbDsqjgZ4UN4ILwIhANp542FvWxUVUJLD9UCqdghyU7KKQgo/Di948lRY1bjS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwneUCRA9TVsSAnZWagAAiJAP/0BMF4TDD+clZ5wPayge\ngzkWny/cqCU7Qb8PqHeoEFfOt+j9bLq6dzEM+kXqznPP53ZW8zgHCbZPsgDe\nRsOUX22aol8tXFMIVqzYadoaGvjQ1LQosW9jYoqnQYURfaKPHsAJp1M2oe1j\nF0mDBjl8GAX3C92mQ8VzJEJWZqJ46p65jTkvN/wrO33GHsc0IbCMTbUD4Tm9\nBH66TpN8a4s8vBL9ZGlcOvXWuLZ5sIOlpCtpZbeiXgFrIQ8d2it583ypNYj+\nZv+P4B9+lAdsXPIGkYtdsT80HYNnquORFLOTxp07zwiuyK3d+JDPNsMoJ0MO\nNljegIOBhtZXq2HX862+Hs3acbKYT2aYNV9fHrkG2LASNT9VQWk1BTPymY74\nIhU1pheo2DGmD1JWyaGL0V01sS5xGdNhDSBS51OVPDo6ZymNvfNprzxbxwia\nxd+gny1vxWNjWF0gjsptz15kRRWgwYejFUZma+G5TSi9+T5HqrUEOsQ0Cm8Y\nB47Rn5l9Extb/77aYCcBnbvgbsdd380PEU7wUxkOqfgcygzLjDoJrZweLJdW\nVygEoipcRhtsGRdLHAntAVVjlan2qqnLtVyKuzsQEpndbBl1bbRStoBR3aov\nZIRge+vwRywjdXq8tkgKOAm19saD1NB1NK6hNgFq3DmptUSAlVpSfNtIiUNH\nb3BU\r\n=dvOD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f43af5633.0_1623357332566_0.5953195949339853","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/typography","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8415ae585.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4815100c3c5887e3f24a94aa4b7d088be57108ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8415ae585.0.tgz","fileCount":22,"integrity":"sha512-gzSKDZ9p3978xHwfjyGTG8sXGiMpU+UKPOCrXuLXc7pI7GBRYolp2YUBRHNgTAzmlEJIrqxwYo/pfuy1caVreA==","signatures":[{"sig":"MEUCIQDXcwUZE69h1at6MNr3ZkOkkWA7BQ0Bjs28chCNSeaiwwIgQe0R+CP5saOhzd6mRGddzWkNAnf2ZFbvKzsk65Zgqi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nKCRA9TVsSAnZWagAAOccQAItotB/yqfE5p7h2qnwr\neHMhY3XV82PNJkuB0nYwee8/lVqmsdSH4PU0YsPl9/UkMfSB3u0pnPDCtrmh\n+gTFkwOSOsD+Z6Q6CN32bCv5JQYFngZ0qV9kQIYOjRyTClXPbmJyXc6zGQ+T\n8pK0D9B2Y7l/4frI6qjwr7ZY+XKMwXfXA+xmQwidT62g6MJUlgP//MtlT3EJ\najd+QgSQNwPaVU7NaL7egmIERnugKhR8v5VB8OOf8P+3ciSO0bfGbp1oRPJ0\nl/jCF7TX8vIPkYeOnbta3YClh3NE4DY7g5286ELX7ZE0UTy59wOSfMUkgQYr\nOtLi7zwX03UX1lpxyYao9T+9eOb3iJ59CUGml3l46pzxFkRejewgr9zV7gE8\nQwQ65BEklkeOVG/p94kpl+iY0TKICuDGI1oVGRGOhEpQCgU2LwtaG7RjEDjZ\nSpjM3VDvorhvmxy7QKNFR2JyQQS6oGUBj/8qqNWO3TfztetjihzqYOeHW+Xu\nJEo9oC2EO5I+lkJRrMNdZPkEtYCDScpSETU2QkClqWtb7kqr+3DtQ+8Aw93J\nMEQ4i5sZiwYqzBIAoJsYVbE886uh1J1hMTe2fUBQQ2Mhr1orquEsovPrWuuU\nqd7xbApvAfIsfAX5QIyWt7qRqJf9xuxlVX7axgYaurUZ3GYB7yQeI3iq8r0W\nhRKP\r\n=U9CA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8415ae585.0_1623427530467_0.4477104157478753","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/typography","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc30c67ad46c7aaf5fb896f4bbdabe3235255332","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.598fcccc8.0.tgz","fileCount":22,"integrity":"sha512-Gm0hj4WHaqhpQnrQlTuEqlKiACK7Rulr4bvgBzKJeR3oWv3DOQp+mYKTpcbHsym8ZuQjfUiNGpoF818sxZSrCQ==","signatures":[{"sig":"MEYCIQCj7wUaNsOr4XZp0DHjzMmtZ2xQ7+1rC8JElUgVlZZd9wIhAIj+hfiEguB6yAt+FeIdYWxLQQAZiby4NTO46m0rehQG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9mgCRA9TVsSAnZWagAAXb8P/it/70sukewPImAeZwZ3\ng/uggk87AMI52y3xVQFjBJYhS45xHO+sYTQROdT8X2WGUJDNP2v/7nKdJGGr\n/+fqwJ0ibmRJ3KRcBv58H/p6mDd2HNwO7t5xhL3FAoUa6M9NsSuDompr3eVy\ndo8m8HntyJGyuS7a6oKgge4/B5xq2DYosJ203f4+Edvs8mSlj1In7XZyx8tf\nLMXxmminAeKqrzXsy1IF7hyGUvKanwn3i9f/Ix5EANuZSkXDhHM2dGbWtB4l\nu2mWP8S/4WGpzB4fb/7OzyD74LW9w153mVvBbBk92e/UrOOtd/PCo7D3G9uk\nvFOjiEECnd0PnKoq3FqTSQID7Qq6afBaKpCT7fR4O+IbcBqCN6EW2Ni3nQpM\n9TOywhDSD0Umxe0acYYpVstiP6nhCgf4YlsdIL8+A47PMR8MbIoVy4OjkJaO\nSrXSdWr6Zc7ImnJswezWLiiajabumQyrLlpZcA3d+UUiK+OACGk/SoLxvcqd\nsZXs1D5pkURoSjewb980BZpUxL2So7lhjLno0+/DpVvn0fsMwTH8a6WLu7xP\nZzoHpeXiOvt57drUeOkrkK0rLhHMsxme4XScaVis0HkaBd7hp+HFQp4zDD+Q\nTvSKBx6n4uPxGpw3ClWcmOcqcma+0Pcb3MhEGwtPOROC1h6Xe1aZjfpU/PMh\nWoro\r\n=GfuG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.598fcccc8.0_1623447968222_0.31711792354232915","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/typography","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.5d0605188.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d85618db4f38426831615530a5a47f6cd73f850d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.5d0605188.0.tgz","fileCount":22,"integrity":"sha512-nDeGyuHJCJ1yxt7dJTcab2XdNAgmqcuZRuKPR3lXf/LdAkXJ+Ehts2Tq+Mv/xx7W0zrjnOg+cVXMBrKHxdK9nQ==","signatures":[{"sig":"MEUCIHD/kl8/4mYzTXtcSFhmu75OUamM7YN2N7mNd/joIKzoAiEA3JVHepXPNoGcOLTe7wTVD6OngbYKrAz9R5nrwLU4aug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5QtCRA9TVsSAnZWagAARlQP/iai2EKxXcjKu2AGaklO\nmz5nP5u0EZ7WI7eEZMqPT55U5U3unGSV9iB1xNaG6dKfnlDjPWCiy7m9LwiT\nkpMoaGeMFdnabSxWA/qJgrB+AoQxDHs3U14/A0+s/vQeUyz34cRtbhW+pH/U\nbXxNDpRWDB5PUvNUpeJT6qJWTgXea07LqpEuDrTB6ksJ8nGLFrw9smKLhp3R\nNc70jlKmNMYngdOKDbjfd5K/+eGiuVO94azTSxEnUtvr8MeahCngQkuzNhSc\nLJXeL4+cBYrfxNlub4LfxueyKKGkMJPqlaKRBC5oOi8mtx0oSj6bwczlZlNh\nMWK4XatgdRb7v+r7rDmIDr+5bDNHHCOfJNbWU28GYGYLtMOGHhDIvX7S1RsV\nd42VvSax63rqwYo9EtMRGkqDxr22hhY2o5A2lS5kkS4LNYSmAsnKdQjy/rrW\no7fVGtOvHtqdHk2ePkrNybnmLmpuAMhmxD5etoAV+Q2tbec4zRnt4vj7m4kN\nzuTXBnZW+/cTQ51CE3NYsM31tdwNORSyalLufmnpZ02JOzwoTDvECWqGabpV\nv1CWPDuws3Nu5/eazhXNM9c7rdXxttag8HXtujXv4Bf3w/8D2C22nwOjj2bZ\nzeXCFFCmRfkv32uH8M/rlxkGPVFfpLpJmxs3M9HlAx91/4g/5AHt9CUb/TDB\n8iuD\r\n=d3WK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.5d0605188.0_1623692333105_0.7033803738721662","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/typography","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f147a2271.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f5a7100aaa483c38a085206c6e3bec506d5a100","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f147a2271.0.tgz","fileCount":22,"integrity":"sha512-VaufWuo78xaALp4cN4Fv0/MBnR6T1CrkEXvOzREE9uHHe6SH+GybWa36q6jWRKCN6YWqDNGsNjg34N6RN38iNQ==","signatures":[{"sig":"MEYCIQCvnXBiTBo81LsagR/gnQui6ehFbR3fZMrA2C3VhGuzNwIhALjdb6HOrfP67NP37x1zC/LfUaAMiHqAEqTFbvedsaB3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6tbCRA9TVsSAnZWagAA748P/3QI+x84Q2hhmjubv3Nz\nh60YyCcR0CFUHOngk328UYK9IfTYjVLOuTj7X6/nd8FiyMIrLLWAhxLq1FbL\nU9ODQqD/1xC8agBLijzwZpIzTYTLDc8zixOWPDrXH8TsqoluF6/EFyMgPSik\n/vuyLhOlzSi6ng2iOYz5p7Kqu9QkPdqF+SZ90wGf2AUAVuMkEqi4IcFjLOAV\n9+vJCSMObSZWSGOqifC9xPHXmEN5VS+hVRFBRDguLSCTyKaBHlzSs5KOJDwx\nn+rWvSx5aICJSixR4GYiNj8X7RSG/fKvsrcgFcfWbjTUOEsEsCMUFtK0FAO+\nJGVlmA0TaRI1Une9tHLIA1UvbRY2LK7vmORIv2PSLeKUB7v5CTFmht/n1oxz\niUnbpkSDWkwP27BA0LCyci4TDpmae5GIe7JJaviRQHzcwbggADAmAszBk5Ei\nj53Mpy+bTq53xO7K2OqrJWEbcQR8GEEgWVRie+N51Axdacwze8TYRUYbP0oZ\nGBYX+mw9x1tSFaRrOpPvjFwlUkHQQcdwKdbzQSRdc7o/90ndxZRPvjns3npx\nHlg+voiyWnTPgZMOZ3XdLDfYaa2idZ+1c7sq+dfUbFHhkHZ1sr8Ucz3yzqi1\nrRSfi/YWZx4EaiQe3qhRxjqL1BdjmY5y9o41mJcv1Nr5Kcctsm6+l5vFjMtq\njSyE\r\n=tUR5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f147a2271.0_1623698267580_0.770475497564886","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/typography","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.33579e00b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"95c9fa6f72e7fd9bfe37f7fd83ef7de39d61e171","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.33579e00b.0.tgz","fileCount":22,"integrity":"sha512-PSMYcIDkXbJWSu1S3aBsLPh2lmRQKhFd7+wnVeGMTRX9qNV/+RINrSE5TZmb6IAKsJKDW84tKeMrYXkkbrO+Ig==","signatures":[{"sig":"MEUCIQCBSlAnVaB8W6DhDEV7NLHMDhdOtRf3BCWgACI8/yCongIgCxgM/lZGdcCG+1i8nlGZICFmx8PoeermCkyxZvgL6nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KVCRA9TVsSAnZWagAAH74P/igZuU6pzNT3w/0kf1XZ\nxOd9/wRCz44HTETpcEFBVbr8mNHn8+VEfklRdal/4DytWSWNj819BbfdmeVD\nAkZYxDs1i6IcSgpBduXs0pclXlriPD5U9EnicahIKpUpMGMlSDlYFmISYV8g\neGfHgizsobzNejgP6HDZIJZgCr+n1PxiHa6mXXJdIQQWQrAwnvDIae0okQTq\n5ABLoSG6mrBcS6Jpf9y5eeq9+qZBk1iZUK4KCIWuBCs3gAJLTD8UXLsMRoSt\nR+Kvw19hyk8wxo1vfGRQEDbbP234ldRuP0NWe3lGmAV81ever9qTitQga4Wc\nwu4IgmGt8C01o1/txwr6ELaPy1q0E3VjiaP/i+aTG1Q3nzgL0b+T5DHTCLLs\nc4G/RQzw1v3H4jsghjOQ3z2GFEyE4QqSqRqtn6qbV9R1jUD7uxw60Lia5fro\nlQNRZ14EMR1Sz+9+nT/w+seonp8DlKHX2Brqu5qneW90x1Qnr1xB7jNRf7CJ\n7OVfp1HEuO3ueIZT490A6EMaGfB2CXmY7xSnqneBd212gGoNmyulVHk8LQF+\ndWPZorjkcoQcGRcDtO37H7BlQTqvOfdP59tj7DYynOk7rvu9wKm+PFrhRFfA\nEGKGYBez81slaMKSIIWNvwXP/z72JKOLLX3NlAJXzsxOXxUMJsmbgR5XYUvU\n8hPp\r\n=1pwd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.33579e00b.0_1623716501384_0.5990012895103936","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/typography","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f91a40256f7b2ecd46871b5acc48653b07b2f7c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.a6909c0e6.0.tgz","fileCount":22,"integrity":"sha512-XgTKdFn6STo9fmJW6mguKaF1TQluqtevTAgX5swts6dkc9/O1IvQ9FJ0XCxLVZ8//pRK8TMZKVECkZXfANwa8w==","signatures":[{"sig":"MEYCIQCMYCzoMnu9toxfMLYAfr9K+xCky0ktURUZkrtUovSS2AIhANbrNE8QJ0iMbRvIBwwAknVX/vfoUELWWXl9wS39natf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGeCRA9TVsSAnZWagAA6EQP/iFLSCejOaD38w09prEM\nH4tojOg49BpuI8YorJiMZuOWelDx+7iLMCDIQo5UgxaFzNEHyv7GzVLRrMr7\nRktXTWFqvCcAc630DDCkNyvjJ8rPfjolPMG1fmsJvUwdv8JTkDC1/3iCT+4Q\nEdvKyPlc1EcIN4y/5aAXlvNsdIjSnpWp54bsJfWfagj17/tc9HSoRp9urYkV\nSldjFetTg52DXuXywBX8MYh0bbo3WLUjiZN/IPsvwOetBxx8uix/gIhl7qxh\nxijb5LSKejCMPhcZf3Jyi09vQjCTZDlBrI+lZU3RoF507dkHm76FnsJtN67c\nQPmIrlN0nWORhU62yNly/WWbKixIq5qBxQymk0u5IS069UBgoi01JA5TxFLF\nMMUd23LuHTK1+uiMF6lY3oOBXJ6OfftmaRDY+OiE7+d1uPKDs+SMsUhX/Elr\nNY/tN5Iyx5Gf36XagFv4505HzpPrZAD7ZrzZnlnJaq2wC+Z10goRypFsayMS\n4wu1Dz5VLP4WLlpsY6Pk4nh9Yu7D5Wov88LmgHjIqEBQ1v/+Y4JMEYRZw4TC\nZtJr4FCVyLFfaz1LKu0lSgTZV0QXvvsVUuSVJLnDgHzcKnpJz7ILsi9F1HUY\nWZX4XPMvXsJ8ZgkMQUPJudjGyBbmJ2nfBwzQ6Xog3ie7XJkXVP+Pvuv5W+2X\nUi/H\r\n=H1fn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.a6909c0e6.0_1623781790250_0.44043437003868213","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/typography","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cf48414d76c358cdcad5c01d8eb9378d4a55e8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.c18b5925b.0.tgz","fileCount":22,"integrity":"sha512-gKKFQD2kq3cyNS5dAPR2SRxssaO6NASVWH8vB+qs2hQCEIhkx44XnUeGL+d0iFC7iGcTjt9BhXR5VcYekr0qZw==","signatures":[{"sig":"MEUCIQD9v6usZvRY54DGSfznUbebcvi6F9RTW/ttykitMeVEXgIgQ82Fo8t4bqw/iAVZfm9PZugSCpfMxDA0yG247ItvKWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":110750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWYCRA9TVsSAnZWagAA47AP/2n7Jq/wzTyfZO10jsYf\n8KgUxm+lRCfqRIvSBl6bRuWf7c8EDMJ+475KdmwdOqtA/mYZZJXLwTDCS0JZ\nuSkL8b+WEGBQs1UcyU+XP6vCE72kd/Ug/8FBV2Ks7gWCEtVTD5FT6iVB5yVv\nUewQ28RD/Vk2KnchEW9ZkrGZ2M1siHLrYY3T0OXauDr3J19sHISyRFNSd7Zk\nVvJ7NSwzrcUZmxRaoJIm8W8v8U2x2wdKDUYlZtm35EyBPUIgjr8IAVZAtcry\n9EiC/SpZB6WKN37Hll5pCaNT3A1OwhcHdityvc32MvVu2k4AZc3oDicdJu1y\nycuRKu+RK1PKL9MHdh9My6tBOYGuCpto2hacpnMtO/ZdxchWVrtdQ/7sXJdw\nKJAFGHAV6JTZ1Aq99C560Y0xcfvMaKjRWlrN3ndlRR8UA07JGbBgkvJEJHIa\nnGyCeKL8V2qdW/dD1s74a41EMFGzivk5eTKTL5WfsyVTeGG8d38YrCdqDY7Q\nVdqLIxuQFE2uIp5tUFN9feKo78Wd5mUJxjq3DIIKImjTYXZIekXKz9HAdySZ\nGlnlukTbFGKSsZwtKNGc5b2CD3d12fw8qixtA7TcUPu2wFGyEnNuVDQM7gek\nn64vPoAd+gyfq9ae8JtHjJwXj7Kd4eDyGAD6W8sufNinVtxdDjudnmCWGUb6\nVb2V\r\n=D3KU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.c18b5925b.0_1623791000239_0.09983097239509253","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/typography","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.271fff902.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6252071d8b8698ce965a10775abf03a0131ff25d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.271fff902.0.tgz","fileCount":22,"integrity":"sha512-K9d5oLEO0Y9N+LBjcybXI0IZ2SsK2I/ocOH14NLDpBC+yDrf2cmRrcFerSuSHXpsCodF/Y9sYrG4jffPDkZTkg==","signatures":[{"sig":"MEYCIQDodieRsmSeRrKTkG87P3FNHo3IwL+xkjEw71kL/OecOgIhAKM/58Lfbg/eeuX+kvy39qsaeBvxLdlB7RJ1S/sLujGt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7HCRA9TVsSAnZWagAADBMQAIvsIURoU0CuH7qLE8O3\nYmq9rc+Vll/u4qQeDyCTU9EmIFpLXlFCCDl7sN6gyl1fMkpjSHHo2vNOctw+\nuJqlLgkQ7YxdIHhlPvJEnjykzNndCxTqOQwxClN0XMmi8XCsEQApkuTZJUxz\nZWQVI4ezmm8+b1x7CeRTknAEL7CJPGlq3Jq28fXq6pA5SmDE3VpFwssOJnE5\nmR1mYI55V/YXPgptmh2OIUuqx/6cedPqhaV+uavZl5cO+cdPryl5piG9jWcY\nTwllnClrmS9GCDy3rVCRvYuwtHBBaj+kGvjHw75CnNMjzY8/B6UfGLMxTW9F\ne7dxk6zqocx+gw0+W6HQV3pda9erPhwBaSxIFqxsCIcIeU5f2urUgP8X91m6\ncL2MKsfwdh1nB3dF2oGoRqT6WBjc1egS0gpd32Jil2S1fp8Rn5+b0J6jUzk0\nwaunFbdzjXIaUWYF3ROSyHv2Z6jSO8zuOepi80uKUirwGVnajwameTniA/QF\nI/87xXRwlBzfAtjnKe5MQyHnT2zsZOrYJJSEeQ5OMn6Eunu3iDmxGZ2dBLQE\nSMjTy4zC/uq8jWIydYqEqyCznFJsU0OIYHIbjubRye+FCBCuvV/buhQQ+R0n\nSfBo8o2DwRXRaB8EItpMb9KEbjAzmcCqagOdq2h+1+xQGsGlDaX/tP0w1iYz\n7fst\r\n=dZID\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.271fff902.0_1623797447033_0.9639807689583453","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/typography","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71ac3d6849d503b69ccb1fdc41da63cd18141961","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.7ea2e830d.0.tgz","fileCount":22,"integrity":"sha512-pgO2PCTIQj4RfNBrAYMku5hLWsC/BpuMbietLXe/+cS9zgv2csNC4FWACi9NWsJ+4Ak3PC1KSJ2XdFrT4A0tnA==","signatures":[{"sig":"MEYCIQCuz5wgBd4xzmFnRwCfLzQxXKvhpAVxmrUKuu8m8613AwIhALYr3+7mRtojWYqEg4KFtGVSLRSMokI9nOmmOoHiYv3I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8fCRA9TVsSAnZWagAAS6EP/1kdd0v4Af5rudBSqpqv\n9+1b2JJj+Msr/jYW8lhcs3805cr4LNuGDHKivO+Vt5dnXeEGXfGIIypnfN0e\nxortIDm+FzfU2VIhtdF20FOQYRqsUiDuNE6hxneV0V7xi/9Jv+fLV3r6X6lD\n/tcKuPepP2Oz0xKYXYM3od7hSuqa1vv+XJXwiyqssteOmavu8/feHX2YlkpD\nnTC0qhIR9otvKIkZIAHjbZKAkIUl84OyDzvoKZf4vobkl71qoSkuuCCgTK4n\nxXwOBVV77O/z3F66RqNcZ0LtyEvQiGPSWmWf+e01dk5LrJN5fsLbyG5wOIjP\nsf9Fcd05rmIdVoygtURQZ8Z9A/yt4e0fNCMfs2sG+LIkOJPKMmB0m9LMpMi+\n4MblKaZPXphG/gl1mNsWP+QS4+uRLP2z6jtQCpiljcQmharUjHTw1P5rTYZv\nzv730cpNKbS3zaIhYRcTPj9ap1WD2gg1gs92ZkBTTGtSygIbcC4nyEWBXvlf\nkF1uF54WP5hopHP20PaHwWM3dLNNnWnyGK0qC9GS74Ez2Jis0jhI2vrxfZvl\njpctq9U4GpiVqqSQGVDJXgJZT/0oHok0eBeHnQQJl7Tb0kp9nKa2IpETeG0N\nCGxTmPrDDmnSM6uFzLtGofQIpUAGM9LdMT2ZXDQQtMLdJHw5pXv+Z583F2KZ\n28oR\r\n=dGkt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.7ea2e830d.0_1623797535163_0.4811244255423379","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/typography","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39709f5209daa3274031aacc5d71ab68bb4f66ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":22,"integrity":"sha512-2VVFQfjmxB06/fzxa9KkuGd3cKD15ak4uhJ3PshwoTtVT30D7d0n8l/CzUg/HhsIN7pJLZtXNjsRH5c01mprZg==","signatures":[{"sig":"MEYCIQD9ZuvQHA7c7QwvsRC6ltf/IYFjkEHJPFW561Ej/DxoWQIhAIQwimSRwsxOu1yK2NUKXCtraP4yOYSfGr4SULtVwxU1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymexCRA9TVsSAnZWagAA/jgP/AoLlX7VTRhj/0dZAJbv\nFGrR4GWRZHcOsW9KzEPZBiVFm/H3DWZMb1UhjwtJLckDEmnJ9XLOKbjQ+VBG\nNPMwgWL8e8HfzfR83oEz46CPJCSsMSchrwlgZv+vfQC4kh7knVfSFnwvDjpB\nGdvNjzxuTZr17nRVgOtU/cxKgMHbF2jPcm6Jhu8lzlOLQ8410jDVGcX/GpP6\nGM2lXdZrovsCg6fvHsbKljaISvHpmPccsVLITgbtamzJgW4C7dmkVAlXD0Q/\nb29DZaq8+mNwCX24lvtkhD1422Aov+d+iDKb4kS1QLqCDPM5rASW4X2c2Vpb\nZgtqgjhcxEgi0aOCXrTFDY1bDP/ZYI+8wFBYHrZvJ7e/qPzCDl477Vrb5alo\njdJKmZu0mHtps3pNHdcUx7iLwijNPdwMRau5V/27JGcut8FUsi/vxzxazd0O\neeZENE6nv9NsyeXg0xmMoAAnsTYqAI/d7+mPTdtnpustC9k4nuP82GqUtC4y\naKF6d3jWSTb+wjVnitex4ijOSoIwqAM4xNOPTVjIeRpcSWS1DnfRMXcRsCbr\nIO4q50/N3jmp5FNUqSI8Q7Dq6AQuxyHGqgAxOi806nXKocC49TXxOkUtKhjk\nrYqKjq5/DOA7bd5s7F6zzYnWL/j6RsV1CpxTQehxDs5UDvBn2+PkWUQ1/zzB\n0Jgc\r\n=pubQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d96f0a1e0.0_1623877552849_0.1450951813454231","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/typography","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.a6183801a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50e9d71d72dbedba59a83a7476b35bbd3e363f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.a6183801a.0.tgz","fileCount":22,"integrity":"sha512-ubMk8YLlqT8vVzDqcex9omRxPql2Rn5EIvUABjBcW27bwOpPdQtAT4qQ1hQzttjkDnPpgwz5SLWIWm+zZh64vA==","signatures":[{"sig":"MEQCIDUs8Bks0MdFFXYssPARm0GaJ5c2Qt6+ATHh89R9RX8kAiBaEvZ5iuPIW3wfS8DcW4d7+9cTwkcT8PlTRl5N3C223w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWSCRA9TVsSAnZWagAAnXEQAITtYUOriisNaSGnWzBf\nDVjFPYP8xabYZThvTpP++HGjPwaj6rxKtduihdNGuJ4Q7w+eImIgmY76FX8m\nxzS6+waaaCmtqVxm2zvu6imituWKOobVYVTHRMUYe+FuMXyowMO9VRJRhOjE\nIqqnCNUbcJVyhBt4681+2n+Rfxtj4hy2GTVcD1UHhqXqyG4xkSe2UtwrA2qM\n0yG+xh6+l5m/JZMQ9oxdkTck1PLJZ0gPRBM8pEWmrZUWuzd9DC7be+N+R2bY\nymbZJudO1KIPKd1qFVQsJf6oyUEnwNjlu99bTG5cZhelkPALcTyCzLmt2cgB\n9W0sug+HaFnWzVibIaa2Qsb9IJ49+WQzfrHpz4dl1QgQ0lV7AjgF1TMcO16F\nv4aHwzY887GWzcmP1zBcpGSr184QWGLCmU+dhiVnezVeL7pepThIU2NSZuCV\njrJp5JQWd1cZ25HLilqDDXv3AoUzU9XPCdOpK8tZceZZw9HPFd8bb04zsIQp\niU5zj1C1Ww5d2wRsKZCXOdnTlYhglvdFMMencmf5gCcIvMe10pXFJ72qbddv\n493rl/nAUly9MqmIVZRk37JrPjaEKznQlpEue/hSmqFXO6GXpDXbAm/XzX8G\nulboHirv38gLay1+a6bIDxB9vPXN65cRiD/7SAki2RfF/kTiAxFaPYParZBL\nL9bF\r\n=djFU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.a6183801a.0_1623881105996_0.8185728835838619","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/typography","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.940550232.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"539dce0e083e22e23392db5951dcb1121ffe790a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.940550232.0.tgz","fileCount":22,"integrity":"sha512-8w55zhdwunfCkmNZItCUk353NGFYTFjYOKGZODjvYijzR9fEoGOXuaCTki9JXcx2nbmPm0lXpe83raU7uOye5Q==","signatures":[{"sig":"MEYCIQDYcw9HVDjjlIw3o3h19QvZoKgbrYQJ7eKj4L22lqfd8wIhAJmw0knbf7Ef4hvQEppQA5pStntCy0XtHIBuUXn+EfDn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UKCRA9TVsSAnZWagAAKzwP/R6HB9mNNbHGLzcVzpnW\nQTJTw5zO46tUlZijlDADG402Ly68r/U1hSjr1UmdC+7sclOaH2ldQrpzKm3e\nam/lD1eKzBm5VAFjWIXsLQEVhlcPzhBtpbmUZnHvCryw0SLowhWcUUSKQ2GA\n+H9HaFTqNd/FLQIqAdi9euI8aLi2P1kUBHnor7ZVwYrdufyYMh5Ep/5RkLQS\nKYZd+MLD6u0OG5m+XJOTbheXGY0Sm8XkowSG1Ji7+HcHmtJfXGAFRYDnDYO3\nmRbMYB5kdWwLPi7OjDHY+P1Y2UArrlHFdF4Pii4rROW01SOFNTdnSiDsOwfz\nWbhlfJei33w9RWcGPyJdxjQlMyMctgys4RzmkVSJs+qvrUvAUSoQFX4x3FXA\nQuaCQ+5oLHhBZPxGXtQ6spXKLnCenjnP7CEpYn+PNw9S8LVeD691OtACEPuD\nt/Ysz82tcaW7ug/dfnGItAg+55uvrZRNPhWMu+yBGwdQfWHn1s0iWSqFrQe7\nIOn4N6FyLPdsB6U+DlcxSYI+wKZuGpFc8pBEUI/bnEc9r3AiqdKO2Xj3tyzI\na7ZTfcFMEBKHOOnUzunqBGjwB9NkTD1531AeUpthHnhCD0u24rNqgsKlRp72\njEpTHzXntADd3egslhZjtIw3LbksJZWehg5+VpuUh53PtgbESMzHXzzbbp9d\ngjr8\r\n=1+cA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.940550232.0_1623958794270_0.27205141432442526","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/typography","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.f705e8048.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a925bc6326ac6672444cdc3236902a1365023e3b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.f705e8048.0.tgz","fileCount":22,"integrity":"sha512-5QQ7Xbh06i5KMxcD5wNjcELn54C9x3hHJIfl3QhfKuaid6MYHsqhnZ/547u89TvI3ZUfsAm2cA0k9WrAtiCbZQ==","signatures":[{"sig":"MEUCIQDTqj950unMuFDUZJAiiZPW/vaRoIvjSIXlL7X5soXCwAIgfl9lniZ7gkdKgUfKXkDUVkQy2SAvSoNcbyOfL3iB2oA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqZCRA9TVsSAnZWagAAO58P/3CQAAGOHYSAqUMbEVN5\nzQ8dIFhg90L5xocyBhIvO90Gz5sGNhoERDJd/cNTC+rsHBVLIROQNU+GVIG8\nsSewrcIIDSAkGACSldFQrx+xAHKWRCJrvvOdjYm3BcFebPAqbXSsh9/wvVQ0\ncYoYfzN2J4wWReBoVlAD9NCg/HWA5HiPe2jn6TVK6C2tlvv2GESTcSWBup0R\nuLmLkAr3Q+WYKcdB3L+86LgKJtcABCZZHQljfXFrUkef4cFISxTFxkugSVd7\nP7zXNzNj52z9kIKrTUYE5LBXH0A008DTqU0N9PgqhAAZKeuskllN8wmP60eK\nxHdDEgeJGmKfI1eSGbhPxtsyiGCwKzTPavF4WBUuzowRsTslaI/fs8fQ7whF\nKJnjX6hMR1sjn5lMjQdbp0Pt13/ittUjJ3jnBA8EsxRSzu/SmieEWWKyYQsP\nJLkG1B3KhL+r4lIEO5fz0SF2S5fKQuL5mmYPX2sb6Zv+1pqsecFnrfdVK5aB\nLOhqL2rdmsji7rSa6Qp9aI2gtmQtHhhNupuUy4s6KRN3vifIshoh1VReH2cF\nAEIhowOYQZLl9LPD8UyjQi7I+v6m+1181KVcvIC2CKAlsb38bSlihV9xuytp\nQ7/k2HpEJZ6L9ne25rYk7THBpkBtgNtXYLuX/Sisl1zx8No5g1LydYbFj5eb\nBStP\r\n=ykFw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.f705e8048.0_1624029848697_0.6613000112808087","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/typography","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.08d791f37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab86b3152ab6f9f294d411d817cb8503ca0ed83","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.08d791f37.0.tgz","fileCount":22,"integrity":"sha512-4jhRlK50B6DE+PZoeNsUrJRCAvUjSYE69UGFPs2oY6w7BJYFeYVEw82wQ5ju3cw4iEyjIeqXQJGOWVwqwCDC7g==","signatures":[{"sig":"MEYCIQDPi7yQoGwFqKbemld6BY940FVpJa07Bz7ZHRM/sPnYewIhAOT86usnfHrQkL3d+PhOT2xVWmpGV72+6MrYmippoHOS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQv7CRA9TVsSAnZWagAAybAP/jTBxkM6c//p0SQBSO1m\n6ChCOgbQGQj31t6BaBwq5rxPumg1qoVTokGMcBwIvAiMjWX4rZWhOZI4dlpU\nfr9uMDtaGz8kl2SZOT68H3/M5p7BBQXSX9dWzriKZ8gqd3NVP1PmSf0oIx7n\nt3hggNaEH/Zjj7HsAZpa/MJg1j2fhrPZzlUySWkkF02KDK8F9twjZyd6wvtl\nK8jU2Yv43qswiBJPII3HaQ1lzrpUUTIjOWxydtsT6J1d2cJXUxEB349uDTsw\nP+H+SBrMAHiFv6OVmF5QRo+UoDGTKpG2c7TtSqZIClZMNNHp3uD59a67K8vS\nFU6vAJ004m5A2eW9ME94RL13NqHTRFXCD8Eltjt4H1To3ozz16UoTHb5MS2w\nj3Nvl2dTVMKAFitdcy76Hin5K5OwdawpMS2G3ZvGzCUpRGipG1T5CXILlg2H\n6YgRYLv0y3UW9P1kNoCo4DfBu7MH/DR/EbUDhJr1FoRfxBjH+Rilf+Bty8Xs\nZpb1mT4a3YAFJlr6UPX1nu4e+BKNfsQexh9fG/jT7IUs5bJ1yFl/WDtzt782\ng32H/k2ZtzrId0Suf0C5q7I7uBWAdLD8YNLhrkv6PHpDHOstZJsKGp022up/\nrhpEN5tL8k5V8j7B52JMU+oKftY1ee31r6VvyU9Fp8hPmRm7cCfr9jB/QKlt\nXwuL\r\n=Zn7J\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.08d791f37.0_1624050682586_0.9987342606167655","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/typography","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"687a64c80746d55e0dabe969390b4ae5f72a86d2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.e38d7440f.0.tgz","fileCount":22,"integrity":"sha512-nDdXH5UGsgYS4l7+y1vA/+yrwkDa1wUvci53tPdyve0uju2GXyXwP7tLPXPjsOMgTMHUdStcIZng6j4oeqGpnQ==","signatures":[{"sig":"MEYCIQDGqlPNRS5yTjAQUM5Ov+d3hKm+TxXKQif4+ZCzN39gYgIhAJSdv2S/20bDJfU51x1/dEVLhzcdrefHFzMPueE90qRA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M73CRA9TVsSAnZWagAAeP8P/1nCsk4axDwQgG0xsz51\npJSPZ8J06ycIeAaXpbFtxGk2E31m8o6xtulUG9k+Qe2/s5EvYPhHm1oVJUyb\nzWBsccVysJ7YIvOVz5EvDsnCwrbUOlj31pxunvrpUklsGBCaVz6XTJQI7fzJ\nCTy2U57ZT7+jBqJc5GluPBuF/XOHbYt4VdkmkOD2GZd1GN+mWhpaexwgfO1a\ngDUAEQAjD5XgPtV8RTAzHDEUwNoGAIv9mXHWeOv0rosZ5p6XgowZQs0M7MXp\nso4dvrmeOScqSkkAIPQjF90CYXaBzSamiBqGS8K1Cf+3ZYE6Ghvm+ltTWmp6\njeRoWODkwcF3E9N++lBj24QkVr1yys/ri2qapgyd+8vmMgwn3Pun7h/lknL2\nnMgUecvryYqUykxxKD9ZEvyTvRT66tciWoiL6oimWXipxV6nLKu7iaMl9w2y\nJE/Dfe75Ii0dw0LTHkcZso+zjVy3AtGgyO+6II+cvQyKMrZKHQJh8g0c66pO\nsy+T63rfXcjEcJnS5vnrS9o8TFRfpk0Dtno/xPJim+sFlKrvvEPOKGXholB2\nQ6IXaA77TkbSb+88j2yhdnzhC4oIKUg2qslmrwx8CC1U+U2TdMW9QHJZoZlF\nChubF0vq5GSmyhRze/22MxIM5s3B4qM2jwomW0CVMTipo+hgT1hxXmreon1s\nlzvG\r\n=l6/8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.e38d7440f.0_1624297206847_0.1920550428772585","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/typography","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93101d45403119b595a99ee4f086727b442fb1f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.75900a5a9.0.tgz","fileCount":22,"integrity":"sha512-BbGQ/dwlRouAcQidX3dVt7WrqZoX0C6xaUtl7H2aBHfmZDI6PA3p0atDhMRo502IzV7L6yx+BL0q/V8QIEyyGg==","signatures":[{"sig":"MEUCIQCo8e4kfZQ/Ov/buR1HDypUk8aQHZFJOWP4zw1tbs7bDAIgISXbfP6/0xsUAcvDB4UpVVT00nJEKNwRI/uXdNTLLdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Nw0CRA9TVsSAnZWagAAGKMQAJAC4bfsr4KX9M3QrF9r\n78+DgbnhUSoVCWDIt2/Zrpa4AdWjtTV6S7wiTp7JbqpDoiUOpQlnw7wFKtbm\nca/DElxFjMXkNPWSLFd4i51NnvBt2lZk4NgaIpH2CnxU9bbwr+GoB8rDRetW\nKQUxrt4Xm0J4FxYfUyzH2JtwlfjI8YMJAb0Op77jJxKqxinKToB8lfPb9TQd\nMdy3i7acPEI0LNG9vclS3It7K74amLzy5xTk5Zfm55S1zExKZT4tWCcCnRce\nF3ugTUJbjc2/5NNfOx4xwO/HBl9I5ZX3jNPRGEfEX7WcdzZUQLEOpIK72smL\nH5KMmKUzAN+0dSwzl/XLig0BXW0bNlGzi4Hx8/Vp8d5s4bldfQJSE1McMd2Z\nqq9QsgH85upriw+iRFgFxhhMxiL/2U0kKWBlweFNbzC7ge/rmSOcDNtjZxOt\n8Monyod9HZWznrXlLLneYGJjEs9Y410+ciyqf1HUOxH8fFVa+ENUlJonytFT\nGiGb6iWzCszoD7QTJz7vGIDxNxALJEfv7Z0HYTsKtS9W5c3OjpMBNKdGh1vK\npMlPrqa9tWqfV9mPAmHRcBf/4QmwX5PIb9W/2WNQLIhwOve8RIgJaQLRY9le\nPQyIfz8O6Xy+Cy1XhlGlJZi4w0A3DkAXR28OycyLMb03H3YPIEtDEyqzOAQz\n5DUt\r\n=eKX0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.75900a5a9.0_1624300596379_0.11466438218119412","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/typography","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0752422f53a03b9028938465c4e8814059eee42e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.33e6f50e9.0.tgz","fileCount":22,"integrity":"sha512-ln+elCEj3OxMatogSB9XLB7i+TebpxV8Jck/g1XzPZ8CkQ3pJZLlZnbFBiqz5PkfVwLkucbaaTjrwUIMC2SyEw==","signatures":[{"sig":"MEUCIC/17HjbPBrM7vIrWE4eBL+n5bvhR994p+e96/D7KbtKAiEA2JXGh72GAwoZFB1F4OrAsuaEH3BfCeEi3eoNZ/BXdvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxBCRA9TVsSAnZWagAAMJUP/0QZ5tpXb6JdC1HJ4Wtn\nN/76IrHcJnZ0s3WRyaDDogNdtTBLjgnIpt5Bdd8A9Z2SxjBrbvJ0c+xEf7ix\nqw/lzLF2FjsEDhfuxAz+7TJGDZtAjwhPhcoDb+rpjgnCjBjPK2M6/H0hsi3i\n0fW3wnopd42thdrhx93Pem5LuN9jzDp1dWyhEdyaguMcsbkvW61EOsVymQ7O\n2Y1HlaBCltHrVCLFq8eI7AWk/qOJ5v6pRxZpq1BdeQoe2wWPV2OT1zfg85bQ\nrcaQ2EeGh1mqBuktvEt1pTasU2xqzhY6vRA/m+bPzd/0OKJxQC41w0j2e230\nk9PAxkAvIVNZy8YD4vIzv1ga9KPastfi6PdJp3MmHQfr8zdYrW+R+i11MmO2\n3v3FQ4zfSMNaJTGRGxglhWGflosXUQmABJDzE3b4bwgR8xMmFI4tLoaMeiaL\nN03FguIJ2b9omxsr1Vcd5ruLIoLJ7594fVjGtJgYqxZxbu+hKm4cQyoxMt16\nmovQMcCpy4m92ZxvybOsnXNaQifEHSioLp37sWHKCA1A2D+2kVyNZOtWtlnr\nIWXzjntPJfGDWhLnaRLKFJPVHtPw4uipnc5C/b78zSB7wKFTQpYcjDAZlBrH\ncZjWGuta2e+EXzva4RSKTtXi4BJinLU99Dww+IED0YantRfdo369PUGZHsbj\nm06j\r\n=iA4Q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.33e6f50e9.0_1624407104904_0.8821532134383321","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/typography","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8c685301d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ffb1d32c9aa6abd08d23177bc19ba0779ede36f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8c685301d.0.tgz","fileCount":22,"integrity":"sha512-hlgYLrL6bpGXNDt1iItYrizeOMA4iTZB5+yNOFXG1m3AEqlscVv5sQMxSzNgZOkkiFp72WFkFUBlUOS/9U4Aiw==","signatures":[{"sig":"MEUCIHen0JFAVBZRBWBfG0rTWMJtVW3f44QnLpfDC5tZJLW3AiEA4GcAmTPPQV/gswgs2bpoiiFCiRSXNmKo0xxUa7NpeLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xQCRA9TVsSAnZWagAAgbIQAIjPUZlS7eTeK/P0ClCq\ngsu0c8qW3FhIVrfhftDsJEiNgml8JdOVw9JMyZZPIWtgw8e0wk8h9/okxr0l\n+mo+FG1luG+Lc0Uaf06VPNS7sbkRsr8LS3e4G4vr20JKTssW1hQYlX6eEwLB\nAR/Ty0L4dOqeWvQYClH0dSzRjgsyvqqi1kHYTBr0Wf+M4RAi0VKecoHkOqzj\n8lCsygrRnGS6h4iMy89Efr+U/ga0eJTm5K8KY8YWk5QSosqhYiyhM0qr5TAz\nmDWjbiXaW4vYSjDyFNpe/OTM5WIgZLUaU1Cj5WY2aaGp47p+v9nvpj1fEOnB\nTaXSckICxjaDYeu7rvG4fM0Wbwbtg0J2OmxrhfrNZuKkcVuEiC1Wo3khKLl9\nMlbDjJ1ByFItOEnlpovQzNuTvk11vf2ZIK2PONcOB0umUjORWLGit1+J4T/p\nXVjaaRww4irryE3ukkg1RHhTcvCo2b+eLl29RyJ3YYXZNOs2r8Y/K+eksrWl\nCh+aHI+RiBawoThiUu9oGBbGjULZNhWiMhPzZytd4xNGtymVJhXeCEwzEMML\nGNIRssQul0R2GHHNIXhvKNyAHZ5kLMH5p11gUfGQRpQcsGC+aKoQFiEONvPM\nF2DYehAP07IWd3GD7fY/BckxQnIxkgesfIxArtv6/vRQ1ZvrdBDypGma5L73\nZZ1Y\r\n=7xsH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8c685301d.0_1624472655690_0.7514898705975546","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/typography","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22516c91efb19278aeb8bc40473553d32c53a86c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.8c7d994ae.0.tgz","fileCount":22,"integrity":"sha512-BERy8MSwsiO0h88pawI76is3ZETXoFn4Ofr1DhK0Ne/lW0Su6n1e8bSEKh/V9oc1QtnU37MSkkvUv05Vh1MAog==","signatures":[{"sig":"MEQCIGfOY2vk/i5YrYVzUWetFwGssvlXN8ERrlgQoCkOA6STAiBTIEhPh3LyeYTBknjmEkyqMr8evmq0osTupZWMC73sYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04sLCRA9TVsSAnZWagAATfMP/3QitReoWqgC1jkgIKUL\njOtmEAKW+qk479RgRCFeOb0UVTiCPpgmJD3oXBHHBFL2sFA/D4OC0YescLXy\n4QcVMbhUXoWFOgWRFpBe3iXjIvghhdqVIse2u0TiAv8676MWSIWRXWb1AoTm\n6as6Z1Z/nUq1gsIznypOlZJO9awfch+28iizutd2GrOqLm27TfXVb9vO8pg9\n02qV/f0xgmz8V0rSp3Be7Y0vVwxWgecTvTYnWyG5DtYHbq22lmK9NV7sdle8\n+wkbLLVN6gxbJzpSRUmOffod/mXNsBtdsxMjPoOut/1oBLoc4i7yJ7wLYsmA\nH10OAR8Vd4KWYd+vxAHK77aOdoSFaK7nkWAspn4PREbqHw7dXCMX4sOTL52J\n30oiA3RMnT11Xh1Do8t9KKxsf/Yjfgu+OkjerhMUmjTWKkfpXEev/SKsAPsB\nFu/8YUELgZkMc2JVpPTQ6JEQOwwDWxv4DOj6C0KVsDtZnbv44ZYgyQhC6/ex\nykO498BeiIsKyUegZQGxoRc1P5Ior3qRqQ+3lTihIA7pA2qQhunpmU4/qIJ7\n0SFnbGS0FuFZanawbLOpbuywkQLeyQgc8kcbDGd5SuCAW2/Rus6XrjtMC7/c\nr3DS1b5bcb8o9NCytcVfCzu2O3zUnZwhJq7ZIx5Iuu0jvpyzQtZjFIT5PI2i\n2op2\r\n=atus\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.8c7d994ae.0_1624476426733_0.5363805515607307","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/typography","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd1be3900c2a8163e63952cbf163409a5b1f73e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":22,"integrity":"sha512-yg8B4TGvJH6t1M5IhsQ7NYvYuZc+UGrTO/MBB71mH1WW8cppKyAEZYrWuYnYoI9ExhsxGiwZ9OYLNk9puWEwDA==","signatures":[{"sig":"MEYCIQC+cSaUZvCX7SW+d/tHv4apjwY8ppaEpEwEGk6lKB0UwwIhAPmcgiMegaTdumkT9YPpTJyZUwAP5rzIVi+9GXF7xcgY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K9qCRA9TVsSAnZWagAAHU4P/ivhM1f1cek9KuCktXZR\nYiS0Ge0fPvLIaQW9tYPf8ouSZAxkLgvy7hhnIXLc3njiH7Nkrc2dM99WIJGS\n0jTKyrKAMyulN6ELmtRn6iCSdXZQJFvFJYFVff4eNNBEgpSgFPoIZvxdfQiZ\nUQZv69T5JFCUkmHYFgiCqvWD2p8dStdh3b0yb2IB+Om9UBNa13C9XkqXsK79\nzLC+9CPH2UIOL3K6QyrF6v4Ti1b0yWLhPRCDFoh+NgN4zBcTjfHN9Y0mFm0E\nDeYW7ji4A0j0D1nRbPhlr8aSRxOhMTre8ZxIgjDW0crOV2l4oehrzZvDQdbr\nixx1fyku0tWBhofk+yiAcQ/zYPdMeIWMM3xHezsk017il9ThLRAeB9t0CAWW\nHe6NqROtJGXtnDKzGXNCwQn26tV9Y5o/QUahy7bOPYWSVfx1ZkRsiahV0v0l\n6L3B0liLW2QA44t4gIVsPC1CmaSb/w2xvQJ+5YtgUg5hlyoyBVAqUt0eXam9\nGLF4fNn2HWDjpKzm6A4/re6HFgnLeBmA6DbZF9bOzsctlWcqH9/5KzDUYwFI\nsyp2ZluZhccH045P1Xg/JFqO5YSjHyoQ2Gs/sxFiONolDgZ7mB+gIi46+bGF\nL9ormrtxjoB/2UbGbd8U2OYInJK3W1AZzXqfjeRgUl+Z69bwo0AYTYd2DZfK\nLn4k\r\n=4Nqo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4ccd39bdd.0_1624551274239_0.892718019592813","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/typography","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"794aba24238b0ce9e0b48aac103c26dbb24ff0dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.17553e9f8.0.tgz","fileCount":22,"integrity":"sha512-qfoPoUjGjoFZjOKxUWT1DaSCXW2hXZJuqFEMqbuMe8HndLLmYTMqafDStrlSAdbx6yKq1jflpTVQH85OPZs+2g==","signatures":[{"sig":"MEQCIGh4mRtUtXBZa8V6LnvAuiPcXV0/LPw/VDQsPE+4byBrAiAjJ2vojQO28KxT+HWutb5fmhFZ7AAuiHw6UmfXDZgfhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKbCRA9TVsSAnZWagAAVLIQAKUmFnI8ycVPqxxZSTZm\nTPYcFX6Euy1Cz6qD13sc9WaE6MmGL+s3Uij8Q9Thp01d3DwN1L6A0AY/THYk\nshauIE/Dzs3O5EphEAAZXKjpQCdGZIRTO9Ipu5y3qVx91lZyW5AS8ATnRBof\nGvb8jRBmyqUhJUSS0hgSwC6ELetZ7zbRMd9UmF4Ia7Q+mxd5wA3HwnFeXUSD\nRH11djSUHws1xxXjoqrfKQhfuW2PjdMJyk65msnriVCohZJTb3f9T/oILp5P\nRzvx7115F7na8KWxNAmswZtJvJivMF0g//nQZhJndtUC5Zw+bxu354sz6ekp\nHMFXdYFhX82QEWcYSgRLXDiCWzkF5R2TJ2tr8BGDygCKLSj33Bc5Frbbz75y\nb117tnb3VCNVIG35z03H4ZAQZkZOEctrWba0etldc2x2byQyN+WygPHsyg8P\nvNOLjBcHKOiNsrUA7nFs0y7NUtIjN1/QhWhgEoHCt4/WA9PTiBF/cif8dbau\nqIJ86KqY4ExfZyTOqDBBEWK430TBGFjybpKQoOTpfUSDN/hhKALggUvUXz1R\naQJ25HOfPWdqIzumlCjn6yvvrXeyq4EVEdsiMUaih9/2XKbygKYi/MN/qRVr\n3h1+PQ5Dc/SXVPvxYbLq1eaa1L1Jtc2+jOyb7MS40SLgRg0wHJyeBmEEn5Ke\nH6EM\r\n=2RET\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.17553e9f8.0_1624920730702_0.08618275510273565","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/typography","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f683971cf6adb1c55d5d9a4f76726a21fe72062","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4c80072fd.0.tgz","fileCount":22,"integrity":"sha512-QFcdYJlDzhA4I6Zt2ComlB+KQoDTmnfPtj7FdZMkeyprvJ+07rDXr9sTeJ75FKoJcQSaIgXIQwN0jEugXbp55w==","signatures":[{"sig":"MEUCICTompOydj9ND3ouhgymqMXqsiGqWvGizc/lVQ0CCFD3AiEA7Qi/AuMSqObSl2WqRWlafTdfC4orM0EyaCHsmWmG8jQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22khCRA9TVsSAnZWagAA0WgP/Rgo1g7xziybsfsrI1gt\nxRHi0SCSdMRDDHwG/Ny29hSqLesKOtm3vITVqBeAmzJxlV6lECW6ly05meSm\nepQbZvOImjGC3pERzt54pj5Y4MNPNkfwrpXrxfahmPrzxJ4VvIdDp6NSdCLe\nHVfEjbb4s6nFxrA7/Fou11xv9xC1AADg6UsdiMm9i5gAR/DpuWVs9eHDyXSn\nc0KJdiuZAbIq1/qKDN1bpFz/vJ8e3mVauRdeUC560R2jXhHFNVYEVWfXxqAe\nMIHXIVJCIZWAuL0wgW9ShJ3mGaiCgUnQNfnrCRna/1W7lF7pVADiKqfAoaHI\nxEb7esjn6pVABrcKSYV+JpOe7YuMGniaV0e2W0exC8lFsS6bChJe3n8mab45\n5bDdBF61b9F7L0cUgyGxmRqYsyDndjDwLFzOK8deWFfGWiMT9y240FGGCDkl\nrt0CZpy6KaFnMXVVArVibp6j72dlyD/N+80iNvO8hjHOkLlHlrjxla+zQHMM\nzY5X4blb+3AHDCfECibSzdqBD3yFflHTUhJqz2TsXlx1YwDqCfT4n+jlySVo\nkAzY6rMWic+TMNo66Yq3GsFvp3Pi9/nO8gtehoY6qmiP70zDNgsbijCwnj0n\nnx6gVY6dYiTJ6gtoGXulIybinfg36YdOlv4KrX+YK2jRTG4MluaeGGUGGR2R\nddxU\r\n=60XQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4c80072fd.0_1624992033178_0.08421782386075627","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/typography","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.796811db7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bea3e555b4a25d44372ce59161b2dc6df54d54b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.796811db7.0.tgz","fileCount":22,"integrity":"sha512-/7T++y2O1TEmg1vSk5m69wRlHh+D6rMmcxr2FYxHDhNMKKGKfXZ9j3roo6IrOckYaNmXY+tfC/Ayyjb1EUZqyQ==","signatures":[{"sig":"MEUCIFPoOj9XAF3n+9Q2iNEHUp3SL1f96sF47XGMwjxgSQiNAiEAj6qVCV7qIr4w97C1ggRuHWttTTHA3EkImDMvCEf7mg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QY4CRA9TVsSAnZWagAAIVEQAIE6kRKvWMRS2FcBtzQr\nQVqO43ptH+xv72dLU+AnmQ5m1pjnOw5kF/mZG7cOZP58gNGm7gIfpDtWQajx\nz3j9xpeG6EiQ6Akfwu1QH7HaTsQcLy5wLYNYvs7kuOjTZsaH2CCPUGHS1Jhq\nOoCeyXtxkONDk6s+k28tTfSnwtWLp9y3HVzcCSj9dvbUjUjZoXht4ubYTPu9\nPOmjRxR+2PXkn4BTxE05uYdKP1rgh5h8BWuWHuxD3H4c7jInJTXsMNAxKLli\nOYYFafc+8s5trEzROL1D0iIxYxR59hTclbaDXxcu+59R73Rc+Ryj4mgE6yXJ\n+e9UaLTUWgZCap6uba0AbxB7xZuTUQUfyq9jDgYf6ibGVidhXwXxqusdY1ho\nJstpbZelXQQfpIs5diJ4RTAmtnkJgv9Mva9nHZk5Z+BkQ3CvRQz9PQjzi/5P\nutIqt00nuWRI9SNYQOQuRV/vFQTBmKn8R8bUnCk8RPW7COYC22TRVn8mX1HE\nwRWgADSVbBBmNm9VcHifYuXaIOABcarZuJ0aVjOr76y4DAWah5QemDXu9HdM\nrxAh+BJY7ICoPoSZi0tlTkscdkwlj5zNs/WpD8bNdVVrWo5suipW6R87qFfK\n11IV+IouCsvy5RkwZxzbOureJ262fmJ8z7TXP3gJtkRaVCiKrvn/mP+0rkOF\n+4k2\r\n=9MtM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.796811db7.0_1625097783662_0.5616983904726152","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/typography","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"609346dd810f4600205ef49354d17c203c20de79","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.70e1efdca.0.tgz","fileCount":22,"integrity":"sha512-HvM6a8ro/XU1O0eMCheSWUfuC4Ln+1L518DlsR9X9rvzuIODdl7HaaT+upGbPJoH6aXmM9/FRx1410qZAiVx9Q==","signatures":[{"sig":"MEUCIQCZHSPxmfo6ssdj9rKWOhyzaCbbzk+ooenNViszxIUqOwIgagkzgNiYiBxZF4Fj/V7DKngWq3nMfDRvZKG4zjxkfR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYFCRA9TVsSAnZWagAA/PQP/jV3MzGeBqkaMw232Vpe\nJ+lRA4iSPHnC+bYVqpUCi+4fQtGk5GWUk5/AXOgw3OThZm6GVEg+JMVVOS+o\ntNFao5qlgbYtFs3tji7qNaNISYD8ZUGe8a+W5zjuCSmvcqpImeEUBALwcNdU\ngy361+5pj1r9jpvK2VWoQ5QGvx//d34Awf3JKiBINNbZkiruZPP/hV9s9J3i\nZ/gtJcb3ALPUuujbrREZtva4qcCgAl60k6pDxbyp1baT57MocYnLV6PYlHyH\nb4S6Gbc1Zh3uI/lCMmK+M7ZUaYOkMdS+0ooORB3Z+6y836hkI01apAzKWKOs\ntrFxJ3zzOrHPbMSvBmlQq1dqJyipnvbjVnNWbffZvMBkDXfONWXmYKDhKgdh\nugTBpnDG+BC0/h6ZQvFq3cCfB/nvylSPoilln3BXb+NgHl+6fkllA6TKxwAG\nR+DUcH0iZ3c+h9dVMWLzyF2YkysMPLNoV9hzs7/09Fylngs98icbgVJOrxLf\nOuSmum94LBOGyyQwklucU7+F/9e7X7l9DxEL/UdiDC8RQG6j1bmCJ/JmsOJ/\nkJ0bKHGtDj4z9XsWiWIK2HtLTM8Pw3DfVLpQHK3Uh5OMbAmBZpfsETfZnh34\nBVMW7SSNIuIZSWvfSZpcz0ziMn5RlQ9cx5MaigYIhLSoPDh+jzUmiglt1i25\nP09X\r\n=5NsX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.70e1efdca.0_1625159173326_0.09299546754806354","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/typography","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.435866d32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa6a2f0a6f1a818e8e8f2f4fdcc6d6eb964ebb2e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.435866d32.0.tgz","fileCount":22,"integrity":"sha512-WkrCcX7wJHnsiIgZl1qJzUHfky13207VvUuFaWTj+0gxlZRg+DpMxzqnqu/mj51Y601VzlCkbr3mNtBVkLW7VA==","signatures":[{"sig":"MEYCIQDGoH2KqK34xgtQJN/QFSrTX0t7KDpRYyxb1Q8nIYCgswIhAKm0x007skqAff+s0f37DNLRaITPly7/SqMcPl+og9HZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kICRA9TVsSAnZWagAAa3sP/004/GGla84xFlTFjGU/\npQCZdSzI8A4Q/oqWCIIZV6oCryczQMIRWgAvS+Z3Jxj/TvXalyu1r4U0yvyg\nX2NYdJLS0mg19RXF7dhNxXvE7hYS11RIhzyqr78nW7pWC+t9U7S8OD7tGv0y\ndd6zINQEjWmD4fokbD1My+i92GeSJINAXRGGBRb6MJ4gNdDAJLBN/NK69zAk\n4qMWBuhIPwDkWayQg0qjVRcxba8qHn2NMNBM3aU3jIBuBuQZ6N47WudC9Spj\nmxCw2L/4VMRQfzNpPMOrHxQRDAyibELg1aLEzNDnY2kmxzRhPeIWKnXCvakX\nOjKvRlg+ishkVEAN9L6xn58FhsTasUqU9zmvgg7iHXvVV3rPg+UZQtXpQduC\nQKkhhLgjtrvx5UlVFeIaD8zrFwNEDlt4LkuIkQg25NaVSpLqg+HUFZ0DzLE3\nh/S50wSeif1cLs0BzZ58hg12JmKtqBVfEWuJvY+MsVMUF7Ft1E+Rtpp+WFEi\nOdlgh815q94bfZ1MefDUtygKPFGj6MrRnLFnQW7W+xhHqVCGULwit3XERacB\ny2at1q1+r/hq3ERIrFE3NkGgejWE2ipMVLjC1wHnAkCxcdnu72aSHYEYBj1b\n1nS+CK46uHC86CrDhoqgNhklai8pCiOhLHs4GO8hKoYxf65AOgDruQni5Ew6\nNxwG\r\n=9na6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.435866d32.0_1625250056342_0.8505246017219088","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/typography","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18d3b98b36070e52232635556822895b1ba76fc4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":22,"integrity":"sha512-VPy//yp4tPaGkJcBd02Z/Y1RWf0pPLSEIdNEEoslW34eLkF9n617KBtSKyDzCNO9iiju9njnvt/8IcIucyqnug==","signatures":[{"sig":"MEQCIArJAE4Zaw3HZ6te8VRbukKAhH7pWOKvdBIOVXu3ukM7AiB0UgobZIGbT004NelUAWpiuEXpfm1YbeFceuVf5C/tmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36hvCRA9TVsSAnZWagAAU4gP/1qZCsud0jP31qpg3DLU\ncxGQ/TfFC6/lTdYFgnTpcjon5aUaVmfMlBbFamcIh+LYeeTnZ0J6kgGNKxTp\n717XvKAwWGLo6Tj2imXS+Rc0KtNgOIVFvaYGxOBKb/flzyNJefqr0mXjbPtY\naluJlrzgsOfD2TIs+Z0tr7ffnyPjInifs2A7Dd2r/1DoI/D9Iwim0+Y3n/bi\nhGBAGo88fE48FunMEOEHfnVrOybw5yurYiYwC5Iu79VMAv1A1chyWN+SbFUx\nhpe7+OzHAk+khV4mmjZwgNDtw2c7OpOfP1npj9mCGLtxDGQgaLr8hY9/Hd9T\n+0y0cGN7YoGiLoA0MQU0jFZq6/6H+Y7q803AHLEFQiYf0hux2CdzyKGDqMoQ\nTRYGtEBIh8rsYvtivaqL/xK80NmTmPF2SM1uC/c2wHqb4/gTBtL7J1LmBS1n\n8quUU8nmYt3efQlo1/HiwNweP6hEqRQFoqWnIsuglwkyNMTRFt8gOjMZeDgb\ncpLwg6VO7Q0WNttD+ZNMIqXpMKnc4QKPBuZghjteH9AuFywEx/rgMQWRW2iJ\ntHqfOt6DvjsAaXWJDm50g8NR/kdsyAQPAR2YXTi2jvvTy0G6BIlnpr9gtxVy\n7Dm1Fcx1s11Z3meveejM/sVcVkdZc6rt/c4nVeXY7afEbyBqlTp0Nv+lGNbw\nK+eg\r\n=O+Wu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d0f9f3f2e.0_1625270382303_0.2572551636755902","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/typography","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.adeac0549.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e289aa830f05425dea6253ad6e715cd2af49636e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.adeac0549.0.tgz","fileCount":22,"integrity":"sha512-ELdAM5p76sGN3V9uHsFZ8029D+lMdiRgBD1gRJAKNhsgWM/s62pFR50xElXC9ZSaCrD22z63PJBQTsvGcopARg==","signatures":[{"sig":"MEQCIFzgWGBipyONIuSLjPu/369xqsuw+Q+4XwrdtQMz2xSUAiBtOxNdC3HdP1aQFhAcufI1kO/WttHo33hcpVx01tltQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUHCRA9TVsSAnZWagAAOYgP/AwdZhDs/cLq4SzEr7/1\nt8MFR21aUT5NVNIlWxaXXTPisjHsTW4uvJtY1eLfwsLYGr+x3vjCf3TuE/5R\nfvi9jv2Cvr5mVmvWc6Jc1xsg3mBPom0m69GK2mU5eqjBvGwpGF/9vXd1hdK5\nIxaaEcWuHJF0z7FkJ+FffYGna1wGFqnpiTHVDCxRK9rQ5JQjIEs1aK6AFuBI\nvvstfKoCNUeYsyt6vtgftAJOA57btGmBZYy5UZqiOoXqeqfwdgpdSokF+gXY\nZVVxriz0CnOQVjWyo6sslzfJC+dYw5fPF3VL/yG1HZNNQuSqfVvU0ACDHs4P\nlmj4IFcm0LTbkPQWeP+EpJUdOshOp8ifvztnL3ojJ57PVTtpaFiI81t7egxI\nrLk0JxCqPagxZLcV6aIr3PIhJKFVDgF6/ZMjdWqutNtjRrgL2ECj/L0WwIdU\n+Tf0wZkiya6kDvFUcDKDATujsdo9ykPzzS+kBH2Zawbg8ClaKe3h018KTYs6\nqNp0X84U0EygmmjdIQC6lPAeIChRSr63jASYcq5BhPZJ4Qn/kxbAeZ98lXnk\nEJA9sCG3iSK7ybKXyy2puiROLP6Z9+Tq2cKjzBWPzqCOAdny9ATDzWbQp+HE\n0puD+jhmilu2ciiLwGH2w+mPBGgaz/gqf1cmbN9fF74X7VzfZpBA6tD5ElEo\n4Kj/\r\n=tmpj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.adeac0549.0_1625756935188_0.32132163836243954","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/typography","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.068fd5028.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a3e536239cd1e55eec9921229877ef9cde4f288","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.068fd5028.0.tgz","fileCount":22,"integrity":"sha512-VIhejltxgBamgBH9lieTDZuHxmkyotFsabBrHUwE6P2+7PF77TsqAMhYdak2JzHKDUcSqHtynJ2LLs/FVOIpmw==","signatures":[{"sig":"MEQCIHJRO3Dz+pu9Xqoz9cK5RMR7BCNfeNgg2UdORI7lt/ICAiBKbnh+016GL0T0ODYdH9cQGt2fR2VunIGwFFNKrwGXHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50v2CRA9TVsSAnZWagAAL+IQAIALzQlhDpj6N505oCz5\n7BCs/TSnlDNSbsbo1XSTmF2H2Fs41cg7xtkfHJCtzJuLmoBYxjxbIRTWrdmQ\npVn8+dhFnRCeYW228jR2LQE64nBRJw1+mTQRlVBr+xX3UCAl18pxH9Ue4/B9\nAjHDfXyrMRHpG7B54uBWKfKtDhMa7MRkwB+5SBCpn6cRwkdRU/orNaYH2CyM\n7OSMXpALr+zlJYQ0tnixQFXmmCyVPL67MiVQwumzzDweiBmPLMhqf4LuyGfG\nHTzoP5ED9cciSioVS/j5YIiIEy2P5fayPQ9gnabZjw6wfUuuto4AQ2JsyQey\n3PeMs446yD7Czxq9BFVHJeNDUIT5BSL3a28rrKQd/D27EVycYrzKa59ouSDo\nV1IAVultqKbTgBeQLkrV8Of5n3vkQDMEo2ZuRYvhi2w0jKHKz1fjtQpIDoKK\nRBgStk+Lmw8f+OH/NJidZ/qemPtLfA+UochcbHoZt4LYe3xL39a+yJH7criJ\nCNGXErCEpdc0y8IXOZirzgx0JAjA8a7Hv2aaPnrnAGmBDUtbhhujMX5/m3Zs\nfqgPDuRcXIOrcqpg7ZXl17mBLesTdEu2wcNXMxm28BwwAGTv5MXNRfBbuk9w\nr0qG2kueX4ISefiE6cjwII5mAlFAMF1QhJ4pHCHeCSedkfhnYMUv4hOd9qtI\n5iFS\r\n=rMGv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.068fd5028.0_1625770997447_0.8667915711412888","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/typography","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13dd82367e4e8e5993334540aababa9aeebc171f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.5dfec7a14.0.tgz","fileCount":22,"integrity":"sha512-kbpztsK9G5WisuMwFma3BQU/Kg8u31FjQKPWza9cXoWar3RQeaTVPnOmgR0b3yOnTIFDq5SZBn5uDDuS54PGtQ==","signatures":[{"sig":"MEUCIHHj1aTpbR7ttoxwCpNlwIEM7U41rL6Jfn+qNlnX3WoMAiEA2oAV6yeUuLUrEKK6WffzXvXlPpdAS4vjN5RAxwGgYRo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KArCRA9TVsSAnZWagAA7sEP/RHMHdeuxB9xSS7i3Ks3\ncGdf55kzlNwECnRMI2yP7AGuJbMMsppBBj68p06383RpPGR5biEu2oQdaFEl\nOI+duLnXKQDUQEF9sAeJhvkerv6R+w4dU6kHfo+uI5HeKUDNsoyqr3VBPvj0\nQmWz7Dsboya+k2CrX8M1NuYP+m0LG4VRyH+0YEmroNNYcQm+a5tQ3H5sbWAQ\ncYMJNJtGlWa9WMLC6TEBdrrQrfD1W25SLmJQmCvqbkRgs44WP7DOkl7Icxd6\nPFGf4z4vGliH5zZN+lOde3V9U5Cc1zS1Uu/5WPaDs51kCbBsOzUXsx2K7zxY\nThGYENjIH801ITFgjyNGvKINRxNlqWzjD+pI3cPSrUPFVQSuFYtf87hJNjys\nPxd7I8xKn5Rt8EZrIMbkuZSI7kwJs757IfP/OLoXGwiE1Gh6+Q2/PmPv0cDp\nL02gg7XyRQL9w7kw/IN8VwtLat/ufFS3M8203PjCMzXLAZvUcnFhjMD/Hm8j\nhCBjt7sk9fbk5gT6Ox3ilVitInwPaGZQTYp8okhCOpkc4e+L4bLImfNcTjvb\nbxCepssiDD7o80x7rV7cVH18I43WebNvwCQEueIaccXPByKLLUVih2LZ8K7+\nPgr9Y/jL+pmaiV4/WyZHof96z229OleCSN9wXyFQYmFSa9JASnvP2wTu0DnX\nXWYD\r\n=bVHZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.5dfec7a14.0_1626120234866_0.18257873341123143","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/typography","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.07a73750c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24c2e5ae147df2d66f777a4ac8b3c09424404835","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.07a73750c.0.tgz","fileCount":22,"integrity":"sha512-OLVsOeSp/tpyK5nwVZbiO3Jd9hoAqKQzbzt/uimJW/aouESNLhOj1Iw8hKd/qR6lVgouceGUnukBiQF8+3C9xQ==","signatures":[{"sig":"MEUCIDSVP4K7XFNuEdqqZ+c5Mbhyd62IGsDw445J8p46CTscAiEA/O6bcDz5oObgaFJtpveOC/g4V21uclDDVzeJyjsUMmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KUlCRA9TVsSAnZWagAAjQEP+wWMvM4dz8DJK/bOcmiH\nqivqMLyXdRP3oT7c/W9YZuHy7+LAPMi8ddhnimMkSNsTeQ7eASgkBzfYNK5g\nca/0Qdz8BNO5AInvzaIxDek9sFvuHFbScybYQUJEZsBnnHA6TpND+PsCYq9U\n38eHWf3hHfmmgkNBA25CFcB6h60uqRu0H9bNXp5RpSMMOMqdIkc1pcUNAP4o\nof9WAufvSK9TXUYielzF79u7wXYGtv6HuwjWopid8vgf+41Dsesj8wmOFbYG\nvTxDeLBg6kPwLSZZuDgHYuoz7EO87xqYX/iOdKrsbLk+O1dO5SmqQvLglKy/\nzdIP5uJPRNLeG2OJsHxWD+qghfp/sXbHLh19PIIuCgk/zsF1wJ09/fQLvw5U\ndB7dlTQ+0FlWZjjDezp5osaK8xFDK/71oE/+nNo4/zWJH8EvuC5Erjc06cLf\nOxfI2nBPBCN/3/pNsjmWHNK2TpGkjGwRqHQ6VJ6myukOP1C0Hm+vpaYO9dpM\nNt604XenRiiE5RX3TKApd8K+GZYrWBPEdI0vsWM5BDq5TVIg+09gqdnC7Qe8\nHy3CDSJ0DhoMj0Hnmq0CU5+XyHd3hpwaW62sEAPcPUqYiwNibHOrxdhlSJTS\nNfETyk8oISfrfF0848WLVKfEbdt+99IUCjQjoDwn3BHe7qYfxB//7YeH0Ev0\nG4GV\r\n=WlZg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.07a73750c.0_1626121509300_0.18117184660588292","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/typography","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94afd0323470ccd77e7a9cf90af0b935bd7eada7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":22,"integrity":"sha512-B8WJyZJwQk4Ay4uQWFLE/Ma8K553wsfKU96S5NYIiuI6LfgJdyoakrhntW9wLClbK82LUg2K2ELKUzC366TFVQ==","signatures":[{"sig":"MEQCIHgvmz0ovs0LWx5+i6208At35eZcxOc0ocGLgO1Mb3mqAiAC8p6GMIx/LNszYvdJjfHLNbqfB4b5QgJ45uZRdm30DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGBCRA9TVsSAnZWagAA0+YQAJrxNi94niLSgq5B8qmR\ncYefsQ+dGNplFAtV1VxxK+D+ig2tMQEFfhilI8R/v6+8DLVFbh6igNP8jTsT\nLumr1sBZ9KV6nZ5AB+7F5ZpPyS+hnRsUgwSDjyQKElO1eMIIvc5tHfhG4aSM\nHEUuDFCsXtN3p5r16J9ehTs3qmDCLYF1EZAa/UHEihs+M27HEZ92A+2OYox/\nr+6NB3O00P6BHykXcveTaKXZrYDZTG7jw0M4N190Ct9r3m5dm313RFUre9oW\nFLKN10hyX1A3NAUWAY/ye6irqj2QY3oZL8cSWoPRV1jS3q9tFKbTFeYZhk6M\na3+3ct+4XusXRLuM4+7D9YjulD5dUN8dSTdWbqO3ysxIdrneJBi+qFEwot51\nwI0iwQqAKGO3Z5keu9BeRP5lG7nhXfuq/52Cl9JTnxXFO/gkgELhz/+NNJc8\nfSULxZ/77kn9EwmpLFUH8I6EPBKK4Isv3QCou36trSTUURoiM4eatrz1tgij\nlcVhOXlEQKAHKitM+aOIkuhfFmdq8z8D//o4UNMi6eRgSIa2nWd4OMUta0YH\nY3UTuKt0abdfjV9iiJ7HdDUFtnLyChZFQueGTvp4YIk98dZg0K21Y4PAoV09\npW/QuDuvkj3Jo8PF6txTV6H2daA9QiXXhZPq7VAs0ACcfIyZKn7HHne/+qIc\nbuW+\r\n=1vBE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.3e4c6dca1.0_1626141056922_0.8552074479257012","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/typography","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d828e1534b0bb026054b3a7498f3dca7dc3b3bb4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ea77795b1.0.tgz","fileCount":22,"integrity":"sha512-gaN2DqFi8LIQxQNpWCR6E6bJ66EeKv+M2YXEbFxXPf6avBdn5WNpdV84GTajV7Dlbi0rhJdqPG4S99lqXEn0Zw==","signatures":[{"sig":"MEUCIQDmS1z9F7qWSLyqaO+Bw3S+lCTQQSYvjf3zpxXsh1/jzgIgNHX+3SBi10pQ0Jst3HH3G2eOsoOjux9wRDLdaieg+HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bXrCRA9TVsSAnZWagAAwA4QAKN6dkk3l5MliUGFH9j+\nIN22+obu0JY5KWu7UfRdVdNs/MTsKpquWvAJZe69fp6QOmzO57zIqsxmkVwT\nRCnZ0PfI6rChbGUXCy+lMiFgSYfe/WehHqW6GPQz7lq5nLncoW0Djd8OmvMy\nk8AS/FM0MYbrZrAK/4Zn39DCIMRs+G6VxQfTwxnCAylSXhOt5Yf3/F2TNSSA\nMcJEoA/oIrPMVT96cfjSIc2naMhzVW16RRJJBg50i3N8zU0FSl64AmyLvzv5\n8XkQRAY4vYBPMNgdcNSRLwUehHxrqI5Texh54Vsw2vmxH8KGLezBGSW+Fca2\n853BISnU0i2F5/RMxvTEE1kInb4Igfp92IbiyfnjtiqfLLjv+jFE7hiuHUNJ\nLYD/V1740qD1iZ1B23t46OXM9JkKPmneq9Was7BT1fQ7uPTwtq8mJVTrAqQq\n6/cVJuQLg93C2FBa1LFU76NukQ+zP4BJEDA669QqxcV/f0A931YLRCPI/Srl\nn8IMT/OphAfgH+WDoHJqemNcQkALX5ow1ohTk1EY5+R8YjfcBHVjkB2zSLj1\nUaGY0YG0RByARAxW+83dG54xR6mnO0E9l801wZw4fabrRgzE5KcecwielyYA\n35w0KRE+zPkGzD/BUZUFyg7FWAAOk5MsGlF63/74UMXmRTFIfLLrz6LducwU\n1GrB\r\n=zeBl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ea77795b1.0_1626191339289_0.3994474869781741","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/typography","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.15a179fad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f990a50b6a14bb75e8f639c129628f7ed955eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.15a179fad.0.tgz","fileCount":22,"integrity":"sha512-RvRKRezGUbtkVLnhJl25nBwOFs+OhmQGgS2aMAdV3hTxcXWP/hY9FndGeF7wDrOx4PX1k7m1z160N6II3Clacg==","signatures":[{"sig":"MEUCIBHOu/trD+Di/2Hf9zkezQKhBywmZykEgA773Fb0w9R+AiEAzvUDGN2auDrTtvuyJCY9tzve+GTOJy14MWQKSE9OYxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7da8CRA9TVsSAnZWagAAlhUP/RrusGdglCBAoPHlXs0F\nueggD/fg4LWX0soDtECyvjv/XCqDyKQQKKw8M+2YdxLEh2Xwa9YBYrcuunaA\nTAzIKQelrJF9+HMP12izZZ+GzLU2QqHRXp+HdkuOh7tsBaf2FCzD3iY8aevh\nc7RJTZjWQaJgAhNdBufX5rRBEH+TnoaHH3tp4VYScBu97F5Pl8nXOf5c4LTZ\ng6G53Bx3p2SL13dzGw0n7b+4AD38uJfVV3Axz8FZ0wRC5v+eG7dYPWHBrB40\nXTaFMVLRdbnzaf3I7Lal36xLvpnup8YrklnQZzNIFMmwm0fhMa/OqJW366e0\n/jSO4foG+JSWpr1E/cha+8uvvEKyjP/+SvSSnp6hokG9B2a3tIpsDERk5NoJ\n4oNucIczwGd8ZavxLE8RB2QQ7lyMi24SvHVzGQ/OPf3f4wGhtNh6LpN4ih6S\nkJphwuzEjGwps5bQt5GJbO4bVNd9Ij5BSjon/stdwJewOtv+GQDKkwb4lkoo\n7XbJhbLwvq9NpFnrSgfA81LAjcAB9pcSyOdOR1c2wBH1H1AmbD0xMb18Gicc\n8PWoq/UlgcqNESGPTGU6EJ+QB7qDjzXBGQXfi8IIsJenVs1U0qhjJw0FxOO8\nvjInDltNANpqkPHhWqroGu665LAzcbHpoEMumbziGBA2KjORM5891JbnVx0X\n89nB\r\n=8KsY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.15a179fad.0_1626199739806_0.514390405543099","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/typography","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e4c0a85e826a45e0d145a281df93aa54058e36","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.c73142a1b.0.tgz","fileCount":22,"integrity":"sha512-RYxEeRJq0o6JT8NcPcHOhDoAOWu0hLQFlWHUOahzNl8f7eEvCI9Cg/AAnUDnFSIjgktjovtmzHC3TEQ8cwWNVw==","signatures":[{"sig":"MEQCIAwgUrVIhTVo8sKaN8owHi7oy7oJyB7e1jvChPsvaJkeAiBRSvD/X6YTv4cc6OJLOFR+z99yBw+6RrjAinRy+rtF5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d7rCRA9TVsSAnZWagAAD6YP/3sDbd9FjFJYxF6bpksm\n0VRjIHFRFpbm5uQkUZSiKDaXBdF2ydZB8FNyDSjQf1O1ftUHvywDRbzdpy8n\nTgCPkLATq+nA81OdcPckEVTHwHwRQKzhlz/+ulyE/cYhn4jkXYudJ/LlsIf6\nS1rp6GxDU6sknpYPfXb8gUFwwJdxg56PInEE+pCBp1KCVtoctuhQUP8JvvU8\n4apMY7LxNLFDMzsykOyCxSSOhSdERE6u0v5DzDHV/Nd5Ys2fY/JRG99itiu0\nSMlz2fJj71WoAz31v+ShuGgMdrUaQRf/tRF1f6IrF6PxqtLslm2Wq4W3ufhA\nQtKjDdpLz8i4jTY4PJZngsGMYHZ7D3H0bEXO1iTETCWrNqSRn7WsE1hpq8Ox\nOExr/vWyjKO+6PvqnPY8uq6GvnRIGfv932JP8xHoj/+GQdDRh+bcrr+nAhCp\nT9a0vVkXaFECuFX3y0VVNR6j1rVaI+1lufxmmljGd38UcssgkiKrhzuWLcbL\nd3nIPVVm9NcBZtVuv+JuSo2iueUSCqS2lJFvCXK1WcxDKY/5O0laOwLzupqA\ncFHd8KfxXU6qEH2efJhCAA2FKBMgX1Cs6dw96oS8fG94WAUlUm1DyuL5D+go\nloiVde+I02YHE/COEd6RjGR4XpEyqitzbUqPBzMZtDXVNAFw2VA6wXmAA00w\nhtOm\r\n=xsRp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.c73142a1b.0_1626201835407_0.5487559839574885","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/typography","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d923db73a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c77e6956957e8384a903520000f331ac711a77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d923db73a.0.tgz","fileCount":22,"integrity":"sha512-kIz3qW9T7/YmazyTjq06ay1uYtzClCHo7jzVE71Pz1/iK40cynpPMKHzV4JAx89U0gM9n+24JZbT5svfoQOe7Q==","signatures":[{"sig":"MEQCIDlRhEs2Js7Bt2jFoI11KToddw1osbvQQno+87VWEiZPAiAcEzT3mcRduTPq6kQkeuhZgciNWru8XpP7mNUDUErdCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1UCRA9TVsSAnZWagAA87IP/3bOjSuSYi/EarnYMnaE\nhJW3h6bW+vJnpn3xIlvhUq7Clrn6cMJrDMeRDMYI0dmxfxQs4ThXS0F+mSW8\nqa9gCO2JvkJMEJcsGQ5FaPuq4kv8CSg/+2eygqMwwDFidrqFerjJmV0gXOQx\n7NMvoMg041ir4IqDMMSumcWz0qrqftWASDN6vuLzhTLU+a0nbJOkZbFcizqP\n0JjrbLCga/oxGG+45JpQbtlhUSc2JlgPXkFO1Z91Tta1TSKLpLXmCCYz4KjA\nD6RCTdJi2b2OxIqqEdNrXp/4AskNtzmWIWF0ccwbGc+Wu/uzlYv5Kr0ybr4I\nedwiyxTPbNQBrSOcsiEq+D1no/cL6BHTkmz1z7nFVPa3LI6cPE/Rk8G8o147\nS54bokyrIX38opAXSqo0KivEqzHTy65rIUG5uE1VAG2vcWgB9oSGnLpsr4Ol\ndEwmRieoOsdpOhHCs2c+13woxWwfq2BNTvEB4ZAdwCub+KyEm6G3N8rgNW2J\nslfcFY1SUD/fGAVyxtVPIFuIqi1bvwlZ0c5A6FSLCLdHfOajyUUDSdplumyH\nqAG6xmfq5YSe/9lGJvS1G9Mc3no8szwkK8IPnORmfrQWzBSpCRFDj8Kbr3da\npsKBNFCj5EPZr0DFtOLrwE4yCT6ZFgqb9qDRS08ZRHggrKBm1ROPiFKTyPXu\nXZT2\r\n=O/Aw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d923db73a.0_1626209619678_0.05815093410871386","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/typography","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb858a4cca6dcb12111f9e77a3f6711b30f3a4d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.22d29cbb4.0.tgz","fileCount":22,"integrity":"sha512-lIzU4IFjaSfVRbhsabTiri8CD+fEe9/DaGpoDm89sHm7b8RbN1+m+7OrePICcWgWFo2swRndph8qhzh7gTYdew==","signatures":[{"sig":"MEYCIQDW7VIF7b15xAt47sn5PsPQ+rcmle+X74MJ1byUz+GrswIhALSMJTEAb6ymPUAzXi/AJVpHOoLBF3lFVikgy+m4m7RY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hiiCRA9TVsSAnZWagAA6/IP/3wgskE7z2HBwtEiYood\ntak49HqJ74wG5U8dJLLro4Du003TreJSAjidNDq+IwTGMM7Wz6Y2MnFrwmvL\n0FtvCgUXp1pb/EEabjHHKegm6y2U+A1mi5UaHr3Nz07938UdgZm7WRONYXTU\nRZlpE10y5CN7Zada/8ivL1xpxur/4iiYgj0Pn3rbcNP9eKzLu0d6jHcy13O2\nKmWQcUajdhRv3Bx7TPQcKEY/rhNDBgePXlp5XHb/6rFA3gZA3SFyhsOm572B\nwZFUx8lWrFgfW7UvNCfxm+1T21JCYhDjwp4Mp8cNnMQgCau/0LoTpET+4Gxf\n1srMBujOJYIyOGgNBe1jyxaefArR8F8tUTBpSPjj9MskjN/ay8Z4C1k0Xe2Q\nD893ui6JDnByYtorMtpwKYTQhHTY7MTwkouqeuHzuy1CXuUYA+OylU7PE7OH\n2tgHJLkJxj8AKOgIqIXbqCUQjlYEa8CLGndxE6x+PqzMm976eQw09K07hUv3\n5zSYYZKm4hfC8B5GzT4KKMCBON6EfXkmt1l9Lmk/jK0ZXpk/n/9W3MxUOJI6\n+lYCPJ2UDdhToRxojM1JuRxnttSKVNjx6vpXAkC/6yeip2IDS6eZO2H5bWHQ\nkprVnQhNgCm5YsNlw9vwQOIcXIkHPeByFuZdURCY8sZoK1Qqnj1maAfYVjh5\nslO9\r\n=klq0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.22d29cbb4.0_1626216609777_0.7672301052778929","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/typography","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.2749604bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2bd76b5195ce4e57504879315ddeb4234fd3d04","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.2749604bc.0.tgz","fileCount":22,"integrity":"sha512-gZeMzpzjC1hfwqQem5XBxbRkRWlXNeGuutiQC/E+eZHoeNgOyNMccbczDaewUBvURSc4IDxSjsjXH9k+TAoVKw==","signatures":[{"sig":"MEUCIQC+oEcqr/spsV8h/1O1Y2X7S+Rw7INVyLaVtgEDbzn7DgIgR3gmqAlgBXUUFfQ1cuwJ5cTTSHqvcwCz2wkG4Cd/oxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w8rCRA9TVsSAnZWagAAfHsP/2Iv5skSdG4ihBZXd2iR\nODxJ1df/RwgQfOKG9aoRZw9sTp/58DNmAdYjSU2riP44tS51xS4og3kNlGlA\ngslDwOISlIwZzk3HvAYPh6G1bzS4nNTTt1qkSbYT3eiAb1IMMWikDBUgc9aj\nmXkcNCOCv0f1xtiwCcyY5L+Mo2QIpbsRcgHYjEpf/qRuJqbZ0SvPDdXbkc2B\nLjzU5o/8N253xY2xnsXPZ4TpfmUpi4B3ocFt4zJ4yd7m+DzRCXIqaDUnoKIZ\nMIMkTog4jdWr5EfUlCYFKHufhtmzYBFSHfyT5kGcwu9W0jEC8qXv3LPG2S+9\ntYYnC2VPQ1r6KiXP1rDvH1TaC+kZ0zYPQ0BmuIF4vO9uQYoeYlkNqY6mTzNA\nZQQZVr2kNGnyiaBxCv/51LfoJGfci6KlB9OQbMh8OqCMDv3v9V5LCcYpALCT\ny1WJd7cjidKBSMH77X3HRDualG9EE444jxbwmPw5YgGJWM01L0DpstmY5DpZ\nIwIX5SYVmJLCBkBsAo5b6mQd3Y7THh884UWd6QJ1vuNI+3r0eQydZSO/5Q+j\niNTPR5qNrS9wX1zUjlJZdlzq4atxq4PZt1y7QBsETUQlnsIFa0VmsNVZ8UYZ\ntDg1xNPaNhkY/jz0WkoSo6slrK637Vd59t0pbsC2GHiKIIebUu1p7pdgJr5F\n4HXD\r\n=0ysC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.2749604bc.0_1626279722570_0.942759904796213","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/typography","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82960566f8afc7eafce0c60eda6fc60ef5e4839","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.e1703bed9.0.tgz","fileCount":22,"integrity":"sha512-8Tnt1M0xTX4RGlEwOrfXUUdAmokB7DGZSZ7D4ly3zPCr3IIDgWnzNLvb15LLkNuf0Jy54AZN6fHeKQp8fCV3bQ==","signatures":[{"sig":"MEUCIQC/r+kpb5BeBpTrBXrprWpeSDpu/8f4jKSkNmfKclte5QIgb/6wXf3PSJwDGgXHUpXtoZevR1uQFx27gHcxB3mqYsI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71uCCRA9TVsSAnZWagAABqEP/1YKNhQmdq2xNKVUIUEu\n5dbasEmSI80KXU4U1PapoV9DSbx2XmlZDqDOWqMByYkiaTOORP8J3BLFbwC8\nPDza6+gvzW4sRWrYDNd/L4+dQ6lXXhPS/FnjKVjUSXruJZr21n7U38adPa98\nRcn13CRonORSzjys28OVHZwb8vE3KXsLta62pHRv0W1JdxuYWaWnvzC7ty1N\n8GXcEse/smgsc7nXUxnio/NeIXeof40mQdvhQEuSjZv3rTUCTKAawgzoc/UM\nZTT/reS1UWcX4V/xkY1QfCZPE9HeN+zMGv43ejTJXMrTCjpmj63hJz/0jBuB\n9FGXRcfX45JADLG0gRj3HrdP/UZy4En9p9uGR8UyYhYFGOUJwtK3h8nUToXB\nOsovOYNrj+Q0hCcuzr1SQlo4N2nqIKu/6GcpSBrre81g8Yk2uizXGfyUaDyc\n6uk34zU5Kp0VJGuQAMg3QhkAi8Qouh1XECVqkblI/HMyGfkEKXLabbaBm7sG\nkgMNVJ+DmX74PAmAXANzssOMGIAV9lua4p1BZkLn4SFmyqHyK9wA3VEXNvbi\nK9xGbn1BaGtHPXGcNN8aa9Q02zpsSMyuHYDGHXcYqaKGTqhQg3xJpUiGu94g\nJVla0BsTDe4ZqOuVhNHgH1Dc2S7TPl7v6BfazRgaj7J9crbj19XnD6jvxajE\nKMSO\r\n=HZZo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.e1703bed9.0_1626299266318_0.9817076040747217","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/typography","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f66e2ffef53bdc0606685caf074df4e047014f54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.de48eff0d.0.tgz","fileCount":22,"integrity":"sha512-wZgcnzv/fr4ya8lLChx3JYRLDVCAFemclwgBDL8QMt9r8KL3BZdhQUBjmqPQi4bev2a92aC2lUyF15W5HC0LGg==","signatures":[{"sig":"MEQCIFt47kzL+tWRZYu3owSage1ESzwL0k+DojS5QVi65EAzAiApMw1wSmfSvLw8dLuSvCvUvIuZT4jD37KAsf4tMLH6/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GtnCRA9TVsSAnZWagAAg64P/RsIMOWcn8QqeXLvNYKe\nIcCjKcjUSLAlraVg0uOLQeRXdNIPQAlGWvZ8Mr3WAU3L2EICn6YTL+7px7fK\n5h1T78C2JHv7l+GzKiNfKzCmkqeMqsQ543ox81mQRkAI96q63RyAsJOZwn1T\nMm7GoJvACckR3zmwG8iUMMtpQFvnsa6ujAB2Mmx/buSavjnlPaYrMwyBVdGl\nRJQ9FGxUeMR3RG07l3kIT7uRPJbcqiChG0qFwMo7b2mubtNeLDkKSje46JCq\ngcl+MACIsjvvhbwa8gSs7Um3EHPXB0kbmfMQ13EZA9npX/VswC4PidtfhXwO\nj7Uihglwa106auecLmr9tNGlUJU7MEbltFd0GmBYjX84/1tzfLJPovw7b0/3\n65MBoy3Tw5qWRE8Cz6z/AcumIGzeBWk9d61+42qka4jNKMEYhKpUH2/HxIJN\ncx/+pbIs8hzKkNnJrPulzU8erSNtb9/MNFXTRBOWEzEQYpATjm6MzVsgbxOi\nHzUCUwtXkVCVR4B/P1l22gbfl500f9nj68Ky6gFI6mY/udxxCEEUQrSj7stw\nmJjHgoyQ10sCXOjRs4Ob+gQGR+W1Js2/qPlKDCxe1xloKZb7XG+xbvD1DAmd\nFACYdL/LNYy9JeXvgDAtbeFh7viCgAx30jtbRttAQwyTXluzZqqlO7S4c834\ne4n1\r\n=Iytg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.de48eff0d.0_1626368871108_0.320328586638569","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/typography","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cb0b7af816adad38ddad17384f5d067528826e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4f060adc5.0.tgz","fileCount":22,"integrity":"sha512-j4cEE20bqZlP0I8VhwGCSJfthWkMbLBIbx2QDStKsGPFtvHZ1O9WF9UWRJiyDjbnYtDqO7ePE7PEzErCTOzQkw==","signatures":[{"sig":"MEYCIQCgsGTOUwo9zOnSCU19O30E3pTpIKWzdoLgumyQcFfsIAIhAJXT4Qon6Hc5tgPBrIXFvJa9a9ltcO5/K4qBgKbKrldM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IrCCRA9TVsSAnZWagAAKeYP/2nNALePrR0lXWUs9IkA\nOxCMavX8w9VQwwDUPeul5P1dzTQygQ2KNwLtCp9NpqdMFu39haXJxaYkhffQ\no7pwtrk4qIAZpgsRsfUMwlZ9zMp4hS2LuSKnjNrIfZuDzRwUYnSIIo3ghGzQ\nLAq81gl5ipmYlA2FGvYkuFdhe/aOhPLfDsGzvRlwHyQMqeuIEAX97qIQV0z5\n2gicIuCw1f4cDd8Qk70MPqCnBqaqyZCweWofZlP0+AgF8SCoqvcClMCqkx0f\nXk8eNTUmb+mj/xOJnNfglso3s2ej8ebeK86DNW2OM/EhFRmekJXqyANDiAWQ\nQf+45hew6aowVRfKbx+lqPDLwC6qlVu4hij5V44OoTn3TtlhMEYRyGkA+3ij\nW6HYVOA9wI4m3mzpKN5mg1zmQU/bhQXvWo5/1pNa9Vixu6sGA6MQiXEAcREL\nSAtiXMWKcK3tG6V7IemIjeYmPOrW6kXMwFfzZvN6eUPik2H3lgDd7FxqurtJ\nF0YFybxFfqSecchGtqbGtyA9QuYJrK5RwrGvGG8x+CS+PwwXmSYju4iPFs7q\ntbM9qEXogW3g/J19cUnPYthvsqSQ/YHo1BZe7RjWV4s7kIOy6vhs2Vk0KDWm\nGfLVS47OEFeXzWD1e0tL7MjQXjm7cXwyY69VnVp5yz65UKcYpfT/o2bOb/Rc\nY4mY\r\n=rzJ4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4f060adc5.0_1626376897926_0.5062731538079441","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/typography","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8781b523b3f41b5698d6b94c873956a354b98aa2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.bd25779b2.0.tgz","fileCount":22,"integrity":"sha512-fz1Ya1Wg3ewURzjHvnwaeXMHP68Gha9c/K2Neer9BiM/xkkN0MG9zsAuvvmEohZxddYMvq02I2Bl40riVxiWzA==","signatures":[{"sig":"MEUCIQC/6KtFukTKFYM6WGK/qar3KQv5WcvoOg+pV+DmkjQdQwIgG3R/qXuTMBnDfeAxA5ba2dI5f92QgLyF4KwqJhXcIro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2aCRA9TVsSAnZWagAAT5sP/3EEAzIy7p7yxmQ1i7J4\nfoEyx++wSrWwjalhaQEPJbhxQJlIINyBm7Yxg84eEA0t2C0UdV1odZNrc2wP\nsXgH5IxrEstEmr5loimlN6XdaP83wHHfQ/k5hiZH0zKBWxV/PndaAPZBN1bm\ntQrwbXN1mYraPokIpThny0q9Exd9OTN+JGBarvYUAwfXXIBs0NUq455d5wvH\nCSEMKP36CBvS3Z4clwGOahBPHQ1e5ojvEoUZiIdm7mxo4omR6v3LvQ535TqW\njflc5ES8mIjroqVleQCPwTMkdWwNmwErouo2Fkl49FwMiDMoksuO7PXnhY9r\n15JtcA2it1FC11vtq7ZLeWod50w8lozzdWZFxOqOk2j4PvHeA73HHgIDt595\nCLEvB2hWu9VncYzJJlqrII0j/tUWGxDMWFmSZMasf4UZI88sr3c0QKp9tL8j\nS3Az3qEDim043mvoZc9GZgwcruUZFU9XfywD92bFWQ7oQL6G4QqGUpGXKytn\nXprleqRC8im+rjf+AAZikBl6NETe7MTtXKgqeEb0W4dkJlp1G1RcLcDWGmpN\nFsOrfU8NgJ5oX67jr78ehRzx6M+QXTk+NCJ/o2cn5TFcqVq3GkgHMWfjPoM3\n6Ja0bxXg2Wh8QyVA6I5gbdoRx/oxoc+USA8g3q4n1X/V9CZ1BqcBoHwuhjmF\nMSrV\r\n=6dbh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.bd25779b2.0_1626381721984_0.5599086753939628","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/typography","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ef6c2e2dde4c834c9116209b15a70d51c0eba8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.9f68a932e.0.tgz","fileCount":22,"integrity":"sha512-aLXyCaIPKo1nLNPIkIjzoc8HTk3iHbKBp3U/0ks10xJvhR6Ef7nA9fjHVlGrDSm597UH8r4S+q39VNvxefVGHA==","signatures":[{"sig":"MEUCIQCvr9uiYJ1DmKBvUzAK9RrbkbpVc3gNqi5LsN9hNv599QIgBkY3d8NABDYJ1Qp36+ysDwPhusGkJ6Md+IgtpispZLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LF8CRA9TVsSAnZWagAAghUP/2JAWfPtu5Zdud0CFH1q\nHvQcG0QoqqYbrb5a753VJrA2WKIqlTmirXLMraRzy5SIAlNQqIusIgH7OSaH\n/nP/6R8nVmuOkapzkl1XvYrad6qCG4MRSnKxH0rEsCaxDiPqRCrHeuR55JD0\nsOwD/A6HxUicHpHBMKI9Cs/rMAU0FruXofq7qhsWxItPRPzW5c4+WQbEjVlp\nxLKWDDqT1oGRTrisX/kcTCa5yig7eVM94N4Po0xqdkRIKh2RmECyDnfkxGSg\nzbkpu5y46maL0msdwehG1qdmsYwammBfcS2v1KtvvnZCMbSkf+UvLDz2dLUB\nO+cyuXnbkshlZWe//NEPUBoo9RdrhsLovbU0FHm1YI8SF8NArx5fpR6vZfOU\nRr1F3k2PBRYYaEmgIjBCC+tiYawkV0QIfXHEqqgWPMEhTJ5hMhopZsN/gbXE\neko5RdLOvh13C2rffEtsEUjphAh7R3onQ5iimoO4kKoTSj1/KVy1AugwsEfw\nrCwJBiq4KJIxMcbTHUeCyWZl17vdRi/Jr1GQ0AZXoLjTcRtmQ8gW62it3Pcu\nl+7R1f+BSj+kyY4dmp/hnqVJq4Oh9jau6JYM5Xv1n0iHvAQRCJ6p9pTgxnSR\nSRsl7g1Xkegf1mHEQE36nuAvmIVbVj4sEl07W8hcG61zoUOKfjJxttgc7sSc\nutb/\r\n=C9ES\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.9f68a932e.0_1626386812584_0.8722296887982415","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/typography","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f65c883b4ce88855a5677f2400a713adab5d4468","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":22,"integrity":"sha512-Z5tvXy3YkCn19p3h6e1m2mlJ8Fd7CpMck7rxNoyfB365pRDl1jIuqXsX1s+4DDLj0h/q61ugs9aNfGekH89KDg==","signatures":[{"sig":"MEUCIQCtKUp+qFY4yj/ajpS655ZZi8yU9naGBYVSXi84za9vrAIge3NNyCnukhdLBSXazTcvEiDLuD24j3SlDE7Kn8SA518=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5hCRA9TVsSAnZWagAA0qAP/i2Jr6UEwFA1PtedKW6d\n2BjucrtzhyNrisa81OOOjK+hv4nf+U+4caV8FN2EU7GUwQrf7vNiPnFKFLQg\nUO65oI1+cgkVnedvewr2GveIRh1orQ9rB6xtQJl3/izUFR7ydfJmyFYSm1Ro\nnxIzjuX2ArmRqXPJ9ySFUubLtnr/oNYQ8okqtDKx6aLbwaiIpweNJlECAkVy\nnhybYy3n8qAAFbqFASass/00bDdjQ67gJQrQ4Ms+SuDjlmkj7BuDQm5cfzje\n0JCURC8wWOP+3/pVlx56dt0GW4FC6U2EDOlPKJnJs/s9ibL6p1xpz5UKpBdU\n1rUaRh7J/MhbtXjI/Rh0Po5d0AI0JwxaOMSwiAJD/zrpvLqD5ft2fWE1OPgi\nexAb/zGhT09cNRvKMWFT8yfrQIfxKMw4FfHLxKJhiGMf8ZVu4AQi+g1DORiC\nZOXMDXPrSjBblvchChHtl6WBgirO6GTedrbiiSMIPaPRmPZTnKnMgj0OaM2X\n+2QyuvWW3a2yqLXPJbzVGwPySFzsUFVeMUAo5p04BzJ/p0J4+PBGAktJPLta\neUrMcD+DzgWvvC0s2qqRXpvB+gjlpF3qN12n2fO0Rcr9+3SCoMIwmngj02SK\ngo4S2I+t6lTPIA9M1ZiyEBhcZkcBBKMD7tH9EV7sVHxejnJDzZjXqw4WFMQZ\nBbX1\r\n=O8JI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4eecdeaf0.0_1626447457664_0.36664237859868165","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/typography","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.7239684d4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f24754b9822df1868c7aa86847dd598ca9fc3791","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.7239684d4.0.tgz","fileCount":22,"integrity":"sha512-1Yy/jDrefxHiSBvAB924QW6pop7jiUO/oAt4Xiv4Lga2OK34MsEe86g94WzQHAuQsCk7Uf6l3uKtucfKQz+mzg==","signatures":[{"sig":"MEQCIGgV5OjV/iez1kYSjSqDt6NESfrSBogAb4eZHODZJP11AiBvl2gZeIE48hXJg7/EOccNBy1eks6vpVe3tLrzsdfGpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ay5CRA9TVsSAnZWagAAD1sP/RnRlk90ZGbRAyCEm5+c\n5w1ARcWWzfhSH6oBsga0BK+fz8yRQva1eUXhWs8Q6/fzQ3sNSsRbdoDmRWGY\nvXjrioPINuND8H/IW6uwJGJUz5fuH3rn05ozjPRLCvmkrcYOc1GfgRiUor/R\nMvfmzFOoVEGlcW4ObLvlG9iAAqVyTqdZvphCJI0DJqjObM6UcFkXmuqzBZ/a\npSXV6x2k3HaGQ9JsyiOZn4xkBPfvar0lryeolBxJkq4wD+e11q8HW7QMmEV6\nbkvkrCg5tLjV6K0ZBGGR84OHZgW+90mMTsxFFwwa0zHX2AwP/8MqylEaFTnr\nT30rUdnOQRoEY5DRdmdUKyECG6bUjQelUg1sDz83BmZkymd1lTwFplnhXHgW\nfwt4KgndJOgVaPbZj/2f6FHZBgCaUiqSpW3xNOhXPawvFnVEeHrp7ChWwIdT\nJzER49ryA5nJ3p8tLfdIEE54ILCj+tEKyw1sZJCTKrK5mTHzzgf0BpMOuxdJ\nmcltZ8XFOaMRZ4GGHPc/hcGc+HuvVjLx8DqqmHwvBAvhU4z6BoGKa472qkYD\nkNzeBjIgK+XTj/BuWZDXo3zKI55HU62ngHGgckeeIOtfKSS5MXCLGo7KpIeH\nRLPGOPXBz5o85rjUXWGjup96uKwBb+lJVG9RovjWxrMGCjamgQUbMFXCcqGj\nbDfU\r\n=C/f4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.7239684d4.0_1626451128944_0.13301096816891578","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/typography","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d855b4edef66402a6e49182cbb6636ccd73f8e9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":22,"integrity":"sha512-lW+pRzE7rqd2O8W/lUnh7UM50u/7nASszITJjxinX0GERIj97bRjhINTrTSD+4hgG2npkkG+RtseCDektF2wUg==","signatures":[{"sig":"MEYCIQCKwxuaEEC1G8iB1eMpiZReGE2FwZoLma4chR4ATXi6bwIhAIxxNWEpoT2bxPepfovtD7ARR85CG5Y2+/M83+ZM+YDY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bA4CRA9TVsSAnZWagAACBAP/0iKMMtUYuzhl1+0in1d\nwtXRlkuPRRhz/Tlggycae/caeX11XqnKTy8mfcwpCqDLMtAicRa+p4L/ynK7\n1qTWqTPJLbm7cOzsBpG6RvDnX/hiXTQuJyD+2Qdn/5dmEdESjYNeOshZECW0\n/7DqSFJePDXzM6VafwGF7YKRaWV7AS5JJqhbz4oadswozoKC84Tw3rjvP3nu\n2cVe8ew0pInL4+JlAfCjWF/kLR+ICpwoSelDJvB9hRxa6Q8xJaU1NUEZNQkk\naOHjyFU+QsXVMvsgEM3cxbNulpPJYzZS1HKahuSX9kkN+pyt/wOUH5zVBlJw\nI8iwt1RGW0MNlurGLU+8Jx1h5yngMMwj1EIU26T7joRHKVWS4K8ocWVB0K6O\n88uVG5EK19JgJN9QmUAlAAaBDuXwDy0PUPkO2Uv3rSdc/9tPRXr+jwyuZFxU\n0ORGC41HnOPGOpWUX17/p5qlCy7l//M8bveIG6FliYFjRKVqhTaZypRZ6pi0\nFj7K+bAuMx4GStsrY/vdjLK9XGNuuFdqqsc+RepAIl95tsGu3el1GGMroyAB\n/IY2bCZN3hUiuXJ7fQoPlZAw6qM4AV7k/lKQFl1e2GYm6fv6S9rKaYpLrVQw\nl3gkkzQnWtSyL+yazLqH/3DHB5oE2eaQa1NlWfypL2LqNHZxVkiBigMduYRA\ncZla\r\n=dj/z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.d5f1f7c72.0_1626452024769_0.8955326204582796","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/typography","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7215726710b06ece97e49b21c573cc3ac3f8624a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.4d95812f9.0.tgz","fileCount":22,"integrity":"sha512-Npd4a2y/s5MILG69HuV1ii7hSSlNqtX2WcRHyQPuGfdMJHc2D/MtGTRAxL1TX1t1IWHn3XmG7o8IRmMsJ+FyGw==","signatures":[{"sig":"MEYCIQCHbGwU/A3v/aIASKodIHkt9Z14Eas1MVE4PUcpfbpgJQIhAJEibXuyYAiYHx9ajXjVBuXUzmyQZeJGxpNM6MsfqLOI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eE7CRA9TVsSAnZWagAAu7sP/3vtomCFFy0Cbc5eaL83\nP8I3CptulLSQRKGgIl4xvxLABXzITVn4y2n3qxH1Sg38wc2fQFAyt3Q5bLPY\nxeKqgIw+1PPlswxBbCp6FMt/tUpJE0y/UpEXSgJRYg7hT4elh8d+FvryIe+w\n1LyVfFxhFjzjp2DkpdxM28GP1uOK7NeWUyaiiuv1xHwrusKK3zabU2h35XfF\nKqRWz1FD+vtHTlwYJcelo7DReGtcv0B5Etq2gOqPgu7/K693PHMs5rQgYi2Y\neAdls/eHPm5Vmt85c5Gio3PcMl66q8a4cWK305S/d8KgP+lxOCbJFmCUBoby\nS7rZ5hICUxcZsgY1F+6TP65LUO6A5QNAc5klCH3QNqak1hFoMCmzKLUmyk4c\nrPT7DO+C/kGG4upLSYMdRI0Z/OViLlxsTYVxuiHzTy1DCaAHBgPqg4AcU9np\nyusZdCjEXvOMA4UVsFoh05rFvNLemJ8LYAO6Pt6SInzXx9apeVas5VtyITT9\nQBmqMlvaxSiVLPO9pm5fvLbuiosYtTpUD2xoxVwK49g05oQRLmxncMHEYrVn\nAQCDrl2SVfoK/C9SVFYmqlI4o/FmRqkXuSffqleURfuWogvB9RTC4oE40TrA\nIjuYQp1ALODU1IKqSJJycWN0Z+t1ThELZGyCEf30aiLAJ0/kjN//MXtKPdlT\nW9tm\r\n=XIHW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.4d95812f9.0_1626464570724_0.9414034678118717","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/typography","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a8db8a95a24bcac1abe5b3d9db57e88af282ad0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.38d1846cc.0.tgz","fileCount":22,"integrity":"sha512-4CzRgCoXYV3cVoVzbBq8BbQvACLr164f1mGgmrlhQ59hZRAgMggLiF5aJoPRJMXjz+GmvHa7uB4wAtB3+mtRUQ==","signatures":[{"sig":"MEUCIQC75ih+4BTu8cHTXnJg8cbz8t737yQnPdKW1dl7SDgAuQIgDgoMzvG4KX598vQiEaXphYsRFasCzO9V44td95ukv0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cdqCRA9TVsSAnZWagAAdNsQAKHZZYDTGBJ4DHUmS6tH\nDTwkKiEeGPqeIcltVdjtfyDAksZ+gLWK/kFofQL63Tym5vGG0wJeWvbXF+8t\n4jVYm2ROZxPvLosOD0eYu5szLtAwv9hJ3FGrzkaPg75kxwoAv9h0ZamNNPjT\n7PBUfAkIcCeqlIjDlv8NAlSKz17ASggj76mKa5ZfOvP5E5l8s3y+EOKzYsxh\n49wvyx3CDedVje+Rfc17k/kJTpIv86XMOQCA1CVDgAUG/UL9GJQ51QOZyEVn\nUU9K78u7rpnbM2CE0eDygqfSWbxhw+jdwZGqhLmO1LEdWfQQ8TgjNojXWjb6\nn0gOJ6Mcw6yqZSwPV6zPdNnVEqVXVukHSBfn6DmCTXA6YQ8uF3eMs9QGH6OU\nBjshXDVCsQl5FsfXWG1OdMqScUuuEmaTtZB5ACqDffXHJ2Bjkz1ATT4W7p5m\nzgaIvMcAFaMKO+GWKXUAvAc3DeA0mZwxmUoOtteZGNRPF3Nd9A1SIlI6Dbg6\n48obt2dcK/xoRx6uFVdXJ17/yWsGbdX6PP/R0LarZO1YpUqCTtx8tUSqPm1V\nzOk/l9//xQJRU79rrnB+I42dccTO3JvPfywYqH+WvSRrPPeQJsK25gKMhATy\ngILiAFGqnqz8l/G5MhZwgk8NlviI7ka8hC9bqEHdV/Qliemcg5/8lCuzFt0A\nZGyX\r\n=ICOT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.38d1846cc.0_1626720106528_0.6083614535993926","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/typography","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c976eb761bc0747472f7e73c78738c6b5dc4dc5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.3f691eccf.0.tgz","fileCount":22,"integrity":"sha512-ll64ZyhxJM1VcPxXTfCgH43nrbSBfw1LiaZ30nS+AOgzHl8uvoPAGP+jaQEyC/V3R2XWAGa7tKBeb3iBlkxNcQ==","signatures":[{"sig":"MEQCIHkCLvDOYoTRb8a3AXRECvWgD/QTsHotHpOCZc2t6ZW/AiBFHVz3C/aSb4ef5rOynSo5+dwn+6XXHeH34EcaPY5kOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vT9CRA9TVsSAnZWagAAojgP/1XWigWKPZ1JMkCACZ0H\nzGNYHsOU4piesqt8xlKg87a46YDgoMWy4RfX6+fBD4DyQ5IwEwgcKiY/2xOd\n/e45iIe7/2axPuE6fXk+kfDMcdYxfGvi7PfkevdfxJkoezS3/EBy3MGaGOHx\nNoqlIcMKUKmsvoovw69M6jLUM+zPO0CVDqcQpkKJ9ZRp/WKkY3FR9blrNk2r\no1ntALnqZIZACcokVKkdq9M72XNYhJFGsi8CMtIW42YeLFlU38CFGiM5hY0z\nnas067qqTXqrxD6hZvCsztDrxzZlqWp1Szr8ReKhZL/uOmVO2KnwKHQTKqIb\np4q9nf5c8DyNSRtq6iwwlsPdi3HnUKJWCCluA3z7Rpt68JRCqfiup92QZB6d\nV0Cf0+bN4jMmj6ordnyVtFPPafzwxouIn7Row4LPEhWon2a/ZahvKWRbDjZO\nl8G0E0UTtQxRtwuPBbO4P7Ugd8S1Tk8w+bm+EkUhb9YUVRcANf2d0rsju5o+\nKEpXG6QkyfgQlxM2OjtfvlHV1qQDW+wIQ8bvfDxA+kFkVR1/ZGwzaXNyFrjI\nG7uRX5Rhv/YXzCI8uCffkOLcPXnXryKK7alYY9NbXrLAAEj6ByjS2Gy46FGk\n7mV8oDwGLD3oihxOLiigboV9U8dFh1PQkUHzmUEkIUkhs4hCFY7PwGpgLwzl\nvPGl\r\n=iDb8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.3f691eccf.0_1626797309802_0.8827224804788523","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/typography","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3426162ceee4ab36c3dadc0d63bbdf5bd34fef5b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":22,"integrity":"sha512-DHjmaT/hbao3b+wDE9BJ6S+GOko14hynLgZBFoN2d6s25LuFCn8j/aanxCQd2loOhpzMmzwdFiQqjBkE58JbWQ==","signatures":[{"sig":"MEQCIEzwIjOrT9+7iSlBeCubn8hb7GsuXlcxO/mw4wWmiXr5AiAmIbhyIViV14XDweGNFkuB5aBNOT6SsWPXw31u6EM5aQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBDCRA9TVsSAnZWagAAuLMQAIl6PLoaLBBe05oUmsA/\nFSUC9D7+ZXzV1Eg5c0QqT4nWRxWHGXKQmGhHdequ50xvFStPAt/riirT+4Fg\nyaAQl5RUkIBgZkgNqR5ZvFdYBW/vg/WJH6RIKLhZRk4x6aAZIWCEKqtIUIRC\npeS0pVshP1Dks4+eC8vtzMbxtgAVmvG3CUBFvHOmLPq4Su4ySg2MWgb/1tJP\nu3eAab4aZi50kckZPaJ2P17FJuESuF0ITg+49hWIHa9s7MbvpvJqX6kjUpW7\nGN+JMmG6Vp0ZHn2qaKpHuZj0xnjP8Vyba9Sdf9FgLF1WTBAa0rd1O6cgeh48\n/5YVczAhuECtlkYJHoeaJo1zT9uNqvZp7Z6HbnESXkDrmqWcJpUin3PYtVFX\n5Tg2Y6k4FoWGXC2dpWdsYXXI1UVq2vAu/U+zYq/bT1/vKLs38zu9u+2fVnGd\ndmBQU65CRp0+EsRoyMPqF1sA0rJujPmmZfA5t0JN5qN8v0GsdZQLfw276FFs\nJe066gZZFX20/LUl3Bw6zJcEJqo5V0Zi+9/TWA5j0ic1lPTWNiSgnk+RqWVw\notdiXJ3WZnO4J7v5ziiNZcahGVx0GtX2PX4w+3DsgCUwrGSidDbnHQh+C2zG\nGSFCTsAYRdXMUhzoq2jVVaG4fxWV6gLQHHCVKBTbfJ6r1wYgZcDZK4b20BVx\n23dB\r\n=Pcnr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ebb5c73bb.0_1626800194552_0.010620484058421864","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/typography","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4624c87585f27aab739a7f72e7184703223d232c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-nightly.778a0e8a.0.tgz","fileCount":22,"integrity":"sha512-DRibvdQ+f8ewpyH6HyhXePrF0B5TaycOwTzmlEH0rWhAOXCztVOu2H8+I6jNQUMM1QlvJhdr1XGB22HzzJWrgA==","signatures":[{"sig":"MEYCIQD7VMyksShzs9sBQFT7LlhKSfNrsV2qNwtU9TxXvvPqJAIhAITM4wHZhBfcnxCHPlNXALLYiB/DVhvGi/drPVvVWrpW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqICRA9TVsSAnZWagAAkjAP/0pd3NmrxC1Lg+Pgbls0\nqW0XwETLuj8C7euRiwEsq7+f/1SEh17C8x0SAU3nKs64jfA3ALqxcqLeskJD\n0xiZpQpjzdmWlSfEL/LfNf6t4jSl3XDLLDB5boJ7o3nPjtHmiluByOJsPuCe\n8SKiUTYAqZiiCKdP8EiL7fMFgi3u3siQJQmxqjFasM4b4TKOyxrWo4lAnzUf\nYPIUJNwviHdRnJHk57csPgYgA8MHB5JgW87QCi0rS06Mhw3OLUXknQZSTMDP\nQUs2p4yNhtUqMD8fKcEXo2dJZ1frqF6l/RAlxQAHtWTTDiQaF8/HJ5yfNSvc\nTY9DnK2+XCzQ1ZdxcOYUawKOoRmjdYP+hBXAij36lUDL/dAoVVcLG0E7HK21\nSfRKdYHO0pjU+sx40e/BOl/mmtC4u7xJucF6YHjg0A+kivpDYCmUKLCOUdGp\np2HHG7f0hiM1Nk68MAraNNApD8wmGUAcR7brUBAB0JAMbf7Yl3qUt/FKISHM\nG2X/06epl1TttZ2tKdVFAvwLUWTSvbJ19XhsTvIpNt4AIBp8ztCHIVf4DOCW\no1zlAuI7YvQiMoSTfyudWoQhZYdvh5sc1SQPjgyJx+3dzhExMe0azF+EUcVF\nGQ/RMUT4VRD7kwOKQMR4h+MYcjfMZKTmU6+LFTN/aUSaIBL5ojswkwEReSrh\nnG4h\r\n=co24\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-nightly.778a0e8a.0_1626815111911_0.6526131547485587","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/typography","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.791311bba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15781669cb6644eb3ae1164014669b5facdee3c7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.791311bba.0.tgz","fileCount":22,"integrity":"sha512-j1MxDahKDly4QbIoJ37s/1Rb9FQV7Dvgb8va6kzkxzT9GvZc70Wblu0KkWg/MwG59QjNlvxom9y0YTHfv+EX+w==","signatures":[{"sig":"MEYCIQCh3feA6dzai3IDrYeth8IsU/BXa4oEe2FckJsM1xIxSgIhAKVNLT77ruqdQg7rtQe3F+zcX4DIWPxiGU+K/YerXluo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kSCRA9TVsSAnZWagAA9/IQAIiOQODxyPwaR3y6TNVJ\nNagJ6pJrv/19lrfz5e8D/cQtr+qgnrT4RfKhHXyNE8eo6PBamlWFEQ14U338\n+Sxh16RL1mSFHj3PX0z+lFAbmagO6SF7HF1EcEZrB3+QIQo/I3CNnRo3lKOS\nWi4NfUV7+zl1jk/AO0pN8y2SYGmZEYGhsvkAO35YTNVwluXTbQO1Vb4h/xMW\nrSktTnKGLltFsvyDGsMoRozm588LkvesEJ8MMmMeUFUV88a/IQGXAOlJTkCE\na5Ltkj5Z801rF/PiXPSKCJWt3/lWwq/Tv7TK/CGVkqCtgbFj5iLae/aXD0v5\nAyiQzgJ3YkKBJuHfJfxTlyohHM+F7Hoaa9VvEuobKHaNU6UvRupsjjalhoKy\nWS/9qenCLk8L8uKh1NUloHQzMG4QXfc2uVPcYecywOesa/TyA6IpRXo5uFhM\nPyBX9B5cKr21SjIV54Y92SjRlQwkQtGJbiYXVJpclzOW7Bzs2mE5Eub/AQNY\n86YVIc/xQcEgxR21SqUiwrB/A3s6nrMgF+M7KS0A/nuuWblokn29lHwXQ0xI\nsUUJCUKSP6qJ5D0C7q5C5R/EebaQVZaCuzNBG18Oy7exN6f0GnbAATsEtIZe\nOMmu/lasDByKs/HabcYSeETrboc2dsUylwr/l/NvZQ1Fs343oV2eCDwnGC6c\nW7TO\r\n=Dyld\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.791311bba.0_1626818834519_0.34485508083657646","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/typography","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd3db4a78e2867cbdc670e8b7132e9b563dd93c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":22,"integrity":"sha512-mIFqz+oxxd2dFEUGsxybSJlR6ron/H2It55VfLR8ysVsBECrF7kEjJ5rZz9WuMB3MnhVUv+sCwOHz4T5Un5RYA==","signatures":[{"sig":"MEQCIBKQCnFDG/LzA5B6sDYb94EoL0EAR2fIG5x8reH1pTEQAiA/mEN3/1vhfy7l/PVYVhBjPIZY4kx8rD0kaU/jI86HLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7NCRA9TVsSAnZWagAAoZcP+QAdMKpHYASzzaEtDM/q\n3ytiLc5rC1m5k12Bf+9t1dA3SmTbbIz3UWjGmG/idVvcHlNk9Ckf5U0qHWWp\nHzHotGW4QWXmc1f43Nh7XOVQa9Szt2cJTzItN5iPBuRy9RIfQXJnzz1Zock0\n4ODyUTSqskW9NfoHd+pNduwlfZiKehsPyZVp6OlyV8bszviEF9MwySlGOW7k\n2xxXEaMwza0h4eZIgEkLM/NF8QvN7a6XIFs9Dafxy18zwwLr1nrh9ucngZV2\noGKiMO26GaLZkAivfvZtFxLfWxSi1Wr0LVUJI0LchAO4k9m+qtyk/Lc//OA4\n2JAP3Qua49RcaprxzxcjVPd5sXR2jVqE+hnd5JZHW7PkyPep9I4criv/P84O\nitauKQWiNa4fgmdYiX6EKcj+oihPMUly+CtYrkuzHPwg0O9uVLtESymfP7SJ\nmihYJdEs33eg99Z88i1pkPjP3nleVZVUdTPpzebeQKliHx9if3DoT/8Mk6yR\nsQUVDj0nT9PskVvf7xj/qDceFCGCHN+0JmXxv10azB6lehsQe5NGTKBz5aqv\nvaDJm5dvzPu+buvrztP1Z5iTPG2fXOegURqKJdZxYsADtGRce45t93HOqquB\ngaHFj8KcWIKInmsEZsC2Qs7sgjlkNFNqrccCiU4SC+JC1/nQBLdMJyEUmxZ0\n6Hg3\r\n=iUXp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.85e9a6ac3.0_1626881740906_0.04253945559112893","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/typography","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.6b0442278.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1a92718db4373137a796d6a1acc9920e9bc92aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.6b0442278.0.tgz","fileCount":22,"integrity":"sha512-EGRR+ZQtPiYKrpbZuavSWeFXY0H4bujTkBjh/o4dmCAZwthA29fO+c+ARTIHFBNpKt5RRh9MWR8JpyT+HYHOOA==","signatures":[{"sig":"MEUCIQDvR4rAMTm+B1clqn5tWyvzQoj+MceGqsGWdMLoQuBX9wIgFTpIY/WOkhDdetw9z89mojO5uNTkf9DrBJYYXg3emNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+Gw8CRA9TVsSAnZWagAAmfEP/iVf/T8gEBpmCe6nrvCp\nvMpRUjLqIiYH8jVlUeDTRTFm9sEU24jPJj+FEoa9knHxNIFsJvOg0O/AzURx\nmyqwunJpkty6g8U2CHdlfKc6yQOwEZc6JignkMRiWWpLcVfkPXsVq8nUW9zI\nSqE82XvhrFcBvpds1BDj1Czfn56LWP+naZBUj+6Q9sAPFqnNSeEu3adRG59n\ndMu0wgGb6AA/SNPbjON/roYE4QrguKQBXAHK5hPE2rp0yYOPLfkPUITRF4PY\n1/voeHS5uDBhBym6dfW2zk9mLuWgC4ZjgoVuNvDkPm35gTphinoGV99kMGZT\ngycOIF9Y1FH2U8ENHdJ1khwiQFTNIRcBe30vuVhKO3mA9iZCJpSVla12TGeO\nUjhkLz3vytyGCu7jHw7lmGreh5UwVkf6SfNDA2BnhlOuPEutkwhAZb2wVBpT\ngFOW1Y0upruMcdRTknOa8RepXhYoLMvvdYLusiWPL3QC7Vzh3LW/nj8OE8Go\ncXy1F1aULde8hhxpJte9yKVw4TVWjoQH0nWrfKBeH5p9yD5rgVecWmVMs7tm\nAJ4xw0/Qpsvl7wF0q2S4QbTKqEu+jATXIPfcpbZnq04QohWAUa34I9PraZ+h\nDDYR3atN2YxxIXVxoidHR/fAHFUAvwVtav8h68CEYG9gCCm6B8cVe3KhxYl0\nFRdO\r\n=jS5D\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.6b0442278.0_1626893372691_0.6648717020974766","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/typography","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df791967fb6fe47ea61f3fc2569547627a88c0e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.5f00e454a.0.tgz","fileCount":22,"integrity":"sha512-SfWO+4UrCPL6LFWLwxNg+2qUYkTyyDL/lrStiN11Hl/3zHgI6Wll2zLJyprSrV659ed7jO1G3uMChoqmBwirBw==","signatures":[{"sig":"MEQCIHYlAQRZUsUCQjGAp7rIFwY9WqAeBQfwof0VqByEN0rvAiA8Gnab/Cqk6DpwxqCfnK0rdr4pNSYS8iaTUUkz3xnGfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWACRA9TVsSAnZWagAAr5EP+gJa3uyrxmVTxej9tFxo\nb1cME9Br+QMhAjapZtK6ZWb6d2zaUSXjOTvEeD82jK9UC8xmu1NVw2tQaUC7\nBzXys1F3aUZhhx6Uqq29WcucOP7e332byegtCY106tc2W3eZM5RNCgmGHG1G\nSjRMW+odnwfF/mTkH12BUQHH5EM9Q5O2d8kY9D3s5CGw6Tkn+hZgjSz/923j\n8NxpEAmtaQwB9hmYb1h+lmhPI5CPHJN4kSIJCm2h/BG5/v20Et5xZBkXZ3Dz\nufOxzIyV74+1qlHxijOe0AImc/Gy0fusHx5Yux8POn5eLqMKfS7UEfMjON4M\nhxdxbviFLMg4motA8KgekTVeY7uYnfF3hIsNei2+q+oZQtw/RycGnuG27leT\naTJhckaqmxnEutqdSCjysAukY6NHG/jNiOlBC8RVK3LKJevoJXFVXVwMiz7e\n728EkeQoguar9/t5Fbc4fGFJanXbrCt7paO1bL90WKnlVeVisKgt0oSGLYTO\nkPNNpay03dkuB4HDBSnzFSCdd4N/W7op/BRjeHRwpROuN+bYrF9QThaV5/kT\nwl83F4OQXoRy1aoqEr3M9TYZSaiQ8aM3p3P/lsodkCvBiSk1w1ATz24hOhfH\n/AuBqlVObRdG9zJOtM5F5ynYlHw1prTDE2AUzRquwqj5LM5w1x/0dxbnvfWr\n0Pqv\r\n=Mu8o\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.5f00e454a.0_1626973568627_0.36459237535981615","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/typography","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4a653f2f1005a5ff8f226fc4e98ce362127d764","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.90e08fc6b.0.tgz","fileCount":22,"integrity":"sha512-HYrEJo5+bIkEn1H6SUX4W0jD/+SACaAqbeStIzo7uS2DF+nyKhwy002XtJPZOnQltzzoAkApdQx+IZ10SXmDmg==","signatures":[{"sig":"MEQCIH8yigKadMNFSzYon7/97xPqkpCLdc0I1W0PkImTNkXXAiBJXy3QYkGp7yVlKPljTnGMneHdNpBXOyNBD+3d154eeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFbCRA9TVsSAnZWagAAu7UP/0u64unQI4v8haNSsraC\nuHm4jZCNK+ZPxrhlEAfTgWYCcMyYpTQid4mJgDkjX1IgexzsL+2fRDsKwNPn\noO2Wakw7Hy56A4jOhAs7GZJB5FFjgqXeYbtlj96tmDXvgOi5pmndXablpdRR\n12fTRRwheu+pzsQHlR+Tl+6/AMliS1iC5MEb/UvSV/x1P3jSJhl8g4fPfmFX\nJMlaKSUeoAYhUMgeygM6ww1TLYlAjX/a1OGKLNG/VjY11+iW6PU0pIdRSkhV\n4z8PceOmpwYun66v+RlXRmLubNWxwwforggdqu3DIFotD8v+M+//aSMfCVM0\noYBl0sSRjPJe3ddbiGJqM9jU7Aj2qpMTUZ6RjFYcF7VgdMDM3cWOwpWNv6/R\n4CjypyOsCs84Z5g2RWj+NNGHS4KpgIh2GTFr7FvhdGRq2wNXmx4Qtx82t2Qh\nsu0g1uLPL09U+bH41+r5pGOyFmisB03ZJU+fFcJGBJ3Y9DRjUh8sjBNqBfTN\npZCOPzFAQ0KxdqBmv09JGKaaz6d1+8M4FeIuwT2KyvBS6z5RJ5S+LckX91mM\nfSP0UyIHTMHjXt3pCPKteqqp4rT4poJJX8NzAuFWcH5PY3VEOhsFG3sgtFd1\n/ims4FwWc34qIJTCPHpOu8leW3QURz2qu8HtLGLQPSz/xhsu4C3CwBxsXZJ7\nP3Kb\r\n=WuM9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.90e08fc6b.0_1626997083575_0.6347997725249164","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/typography","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45ec3321f3743bff4d16c70b543f4022041cd21f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":22,"integrity":"sha512-unByZOCcWLCRu6v3KB6mvhRadmErZoDiTUqiTsP8COYhjRozfyaeWxIO7q6ozjoTzVScniOQu/tUDB6utyYHzw==","signatures":[{"sig":"MEUCIAiDKqv0m431KS0vSJWdoIvvSxqnrOHIhBwZ6nRZx+8sAiEAw0ej/6YOOkGmT6drFr7X8/4D3sB0PmrIap18OmQirok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZvCRA9TVsSAnZWagAAX/MQAIkgOF6cgO/poK/MmEhV\nKNzy2gYufI1F+Qotq4uvQnUiUUc90DWETUzJHq6EJEGYunWJc/5/F48snUTY\nUx/vkftYAGeVZFv5w5OtcWqe/viE9qODqrexVHXabQFAYxmMHs1tXDulqijy\nTBMmkOkhyq7ld10/u/Ce+BzCzjUcnogquoy90MmtQh5SGb/QOrNM4lkCsAeL\n6bcg/gbAjdlvCKr9mwsZ5x84lCLhUPNEzoW6Lir3VaYAtSeOEqAdNMRafhor\nVJ30xWZXSxCsVFL8x+MKotc/UR9SD74R/mihIUBuySNKoy/Qnc391ZM/KDie\nPGDKrArheQK3sSdCQ68oVXT18K9g2+mK8YNIe6tXv7Ch9xoyd23JHMavSFcj\nsYw/lg9q22tVyie3jgNGKsYlNUap2X4lFpWq9hyF/tv2PdTr4iC91rjWI7KT\ndoxuuH529ZermU09o2NNVjFNnzMUPpUtZXle67HenW3WIYrYZjD7KaPXFN7h\nxTQfXiE0e4idORnvQXFsW7OiRH0rQL7x6AWnqnrRTUuoSHF0wE5o235jEttZ\neob35DFoKNdObhpbjvYMxaNavk1G8WK10+9YYSIVHTMjXnJuUJRIY1N/iltc\n6RkZDq+TWiH/+dWaSZow0Hw7k4pAaBpHiEz4DP/qht6rd1NlqdwyLHWJJPHG\nVS/f\r\n=Eefi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.cf5b9eb86.0_1627063919134_0.7520680464222713","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/typography","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5fb55a25c80fb0df41438d2a06343231f4d0de4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.3f36ac75c.0.tgz","fileCount":22,"integrity":"sha512-M90nlGrR0kfc1A29imbY6ltpenCC/+Nyv2SZFWd250g2D2NX1xtnAo5sx9MIECB2HVYgy5BI+FhXT03MMJlilw==","signatures":[{"sig":"MEYCIQDS8F8gTY2d8XyM7w03N2k6KgQSKsN019TZXLC/Oji/0AIhANNtfcksZLq25EM3HTXEh2usUU+pKCZV3/2QZl9Z8oMe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wsdCRA9TVsSAnZWagAA0YkP/Rfw2dQxLrB/JiPYjDNa\nKDQoIDY9/Ox4cohBKz1APM9bVAS7YmJeuP0s2Hb3acwbvke/tXZHpHIy4sdv\noE6+D/GAfEpODVFKSjuhtvebtjpXIvtJzW4RBN3QL8g0Wsx4ksbLxc8oqBym\nZ1tp8swgrOWllNqpdbC6uS8gkgN+kisHRln/s8bihLQv/Ri7Ke9RT6o3Rgol\nFac4KF7uFiHL4f2omHUSg4UWJsirtECnm6NkFeiBXJs0pI7/32jSwf8VrF9+\nO2G8cYSJFdWo7n+F7QKZ3Y2JHS1hrkDe5a0zL5W6VkBZsyr2PImRJcrbupHR\nYpas0b6Tyxwc51dkgw19FdJzZVb8NFSSGVf66Fe4nBAF+fUrph/X5xoMjKT3\n42RnC8d5ldlvjc1t6pFV8+XfvLeLup8Y0vc1XzjdFmKi0D9CZn28kgXVh447\nPYcyMxXHxsnlE57k11wcd0LlKvUenJ00oohADXHMNtBYgoawzOhCB9EJFltq\niul7QFA4x8u6SZjImlZ5y2ALPb+6/qyk7NuW9ovTOZ++UbH2HtS+c/GrO53p\npLzNMmdpBAcM1l3GTrKq96yQKSga4Zogn6FrsbKYCu4OqNgY3n7kTHIHudc3\n/Ub38MvlnC/klSS4yBeDi/2TAEBY1f4jc//Xt8C1BWjBfH+L5dlshf1UyuYP\nHKw9\r\n=xbaH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.3f36ac75c.0_1627065117213_0.060652390527734745","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/typography","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97ac81bdd7ed0dd7f55af95c1eff9361743906d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.ea1e1b850.0.tgz","fileCount":22,"integrity":"sha512-TiEiUhs6yeZRX4z+G/jo6g2cY3QzNuI08pKEgpfjgKZwB6LPx5CX0q1xytdU3sHPU8gPGFOPyZqINcnpc0yD+Q==","signatures":[{"sig":"MEUCIDbmzuYiYoeT4Q/bLc7QTr4a5KPTWoP+p9L4QYC5V+FkAiEAhQ1h/b94TkirVKdhPYwSyRqT/YdjPoWdAW9as7NNnew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5CCRA9TVsSAnZWagAAvMEQAIM8rYN9fHh7DwnCR3GU\nA7eVFr0if+R1NCj5o0Cbj4uzMBVM4cTv6fIz/EX1xhdrJeEPAH0MPxAyStyz\nf4pfVj1jsc+P7glRKBpQL2ZX2+W1aWBjDNX7Bu8GbLyj5D9AUxiiTS2PwwqH\nwIMY6hf8DrJV4m1Cb9YpGVPp3xNEzVBlo7kwTpeK+zbb3CFSIzW9hYMCIbPF\n72VOLG5awXs5QHxKxR+IODAW3yywNDagt8e5Gyo0QwiEvmOGC1/P69tRIQk3\n95nOcAaOAk224sHdxEIojnnNvaiOG/C+9xmuP9yRWMEZoIusr3EjLs64tEwS\nK5gebDJcGT2ptiiJHWGC/nDbWMRON6msR+9kX5gdAGbE08wLaGt1uPHmvLPZ\n8W6YBIynuj0fyRaLAObzzun/HLamexiRKhmE/qH5YjvDAffE3yz1mGz+ZUe5\n2glOedgf0C1TWi3WIFccLl/36YOzuQ7q34p8hGCoF5OBf7p0c3bcieTAA8WC\n4Vf6lygujkHD4W3gy6Vmk4hyqeX2QG1/np8ApuPqEkwq7+nJNv4thifvefrr\nPVBxZXzSP/r62Eeld75uW/qZe1GuImZ0w09DpmTaNuX/1SzbxtC4VhmJk9YU\n7mEzv73mdqtElYqzCXg6/0QTcRPzAVfdzxI44EjfRJL0FNP00oP05k31iOv4\n5f3N\r\n=3apP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.ea1e1b850.0_1627160130600_0.6919416097782767","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/typography","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0-canary.22f390c43.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ae0cfd43976647b289015cdd793da9c72f89444","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0-canary.22f390c43.0.tgz","fileCount":22,"integrity":"sha512-bv7v7+X01dFapQzAeENBekM+ujG83kckd0es/NeV5qp1XeNdOMWq5OEMJR54w+D2B20X65bAF6xXDQg6xHy6MA==","signatures":[{"sig":"MEUCIFB3sHUyPRz+5e7tBKO2bZQq97IbfsaDi7RRf+RmSERtAiEA+HQ0aplsCgy+3vfeQr07OTes9ph0et7NrC2Kh7FXzjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFeaCRA9TVsSAnZWagAAfEAP/3fGRVeuPzyZEVecAnUC\nK39LZ+18sJBLO1hPX5BT9UU3I0TdgLOzdlCjP4YwFEjWgmARxwxMcjxUDww4\nwf/gpnh1wMuA4p4yS3wYe3Q47TwdAhmvhLgnZVJ+6lyyyj+1Cc9PG++CJKha\nWGgUctF2erY/6S+MGgO0aoTMU/i632UkvUNPf4a3Kz1YYQQ+tZsLwSZPnav5\nmkBXVWBYqXaS/JwktjV/VA/P/lLhec+5HTPqO8hNVJafWDnUWhUH5xhxji0F\nlSv/rEmVDSnHm3/fvSiBYygjeKTEokFty2+Qam1puFQ8TUN8+bji9kvaPkST\ngmfTNp8dsS036dJ61Y5lealFBsWXILsSqRPFDxKb6gw9HULwqIsSHCAdSgmh\ngnlzNlbKvHh1KZ7M2NwOaGMRcW3P050G5YH6tuKPNN5fEo0YE2x6+n1fTViP\nUNd3kDSFHpE/abCsUh+avryNLSosU4M0HgqPT/cZWwziMte3RBYtFqOBmOGb\nmjLgnELZZhmMWVBxYSUp6+lnv8x7exWfscjuS1TvixL2Jzd4eEBGyIrFb9H6\nx9RElej44S5o0Wmbeqykz2/nSGNi9SpicNmh/cgFgBjcnvzMDM0ARUvHfpxR\n+0Yz+1cN55uLp8MhXTsVzpUnsPqXAr/fddUonfNOEWsB248VP5IVwEzLj0je\nkjrP\r\n=qpIg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0-canary.22f390c43.0_1627412377809_0.7842622665448356","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/typography","version":"12.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@12.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c14c82872e5fb02d485f387ca0b7aa310ad78da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-12.0.0.tgz","fileCount":21,"integrity":"sha512-NIAczsiUueV445+686qdVQC0QohIJDIOyVWbdNKnhkUmo23FcINLEcDMAtpvS0CJyqSHm8uWq1R585Wbx2kvdQ==","signatures":[{"sig":"MEUCIQDvOGQ6MwamOQB7AwA4K9j+AyvOouUyQmK9mdOqKSnY6QIgMmL0jTHtqaP41F6ykf++xwXC2JYH+RvsBHG5t1ZPXI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNPCRA9TVsSAnZWagAAYdYP/2o32ENVim5DejAb8MZV\nInEjQbWJybZXHvhNpxhN/WkPRWW7SGnQ/PdCKjjMlN/UGUivzgHSoDpwBb0A\n8qZpeGouxXR7dkmByL+n537/RiFXgnEjSt1sNuuGe2mppYdId/frDgoxYvUa\nmlKXBjpJAUf988C/zCtcnP1X3bNnCCDGRhCxhyrYa9YxfEc5NEQxSNrDxGlp\n62kOW82pV4wDIUJ0DiNlv5GFRBkydHN6Y4Tr2hQE5DmGeMkAyie0hB63pe6M\n6mSSbsykhwT6z6MjqwvBo3iDXuEIUpu+b3IyB+JUdtwNCBKn4N0V5izR2t4J\n20Wn5wa/g3T+QuC4L3gqYUfVMmHY4x+oqA6m+U5IANMUvt3n1qTN4OGjnJzV\njccco+tpSwsHZDZnfxH1rbQtHbEyGC3KWV2SRpT3LXjcH9GD/ZaIn8EFNdWb\n5LyjAc59iuokLqZXRlb0zwna5bhlKvh9OLqbwyHjp3Cdzt18iOvkQ4kG+B3n\nOT/RGBzlmAYblFuLDtXX8JLea5p8JcnT4sHkNBu8sSBFSB4sAydkWU+PdWxf\nTyD115yXzoiYB/gbHH07oqf9Z+pZ/GiWuhaVzJl5x9RyMRphXAzCCQ8HSXja\n2ikTSNHYu491PI+U2K9jXIgDKS8JIZuXpw+B4UwWcKaZzp8iECwhEozb3CAp\npCNw\r\n=IuKq\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_12.0.0_1627415375220_0.610604929076831","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/typography","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4f3cce4baaecbf88887698f7e80d52587856e41","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.ae85f7eba.0.tgz","fileCount":22,"integrity":"sha512-BzwCbuscIwhcMF/l12BUL1YJravBvQTuodl6KBmVDd7wgs4DoyUEMluty/2t31wDX9nBdF2sL2DtTAf9KTTVjQ==","signatures":[{"sig":"MEYCIQCrWFDNgQOEPLgCV0Ay/bYBY1qbV+UvC7MOFambmXIJKAIhAPpT79M36BeTBIRXZoqe0MFMt//N1XP3Z8q7lok/0fh9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOsCRA9TVsSAnZWagAAFU0P/3JYYs8/luhUtx+L8OaA\nvOW3OJSPZXsGjz9hqlbFoDll9bdYN5HnNgx56j1Ldx+Zd4cRA/QhraxOJy2Y\nA0iRYaaXnb9qBO4w4LxAHJsfrtslgk/L3O/hDfwL6jR+eFHDoOTzGJ6PRzEi\nV1oJQ2aZLjog+Vg1uXsURyLReFOtXFHZ9pWZe99WPJJhoZNVUZUftLIhSZ8d\nPISsrV/zmoPKzUkk+l0Dud2ia56s6ld1jJ89MbVMWRcn/mff45/MfdBMCK7V\nTjIB99pWoOhLni9gqXA3iPmQYtirXbFqqqldqwL+/5U5j///GM6vtKv49c21\nX6yhGd5rHM5Rielr1wDl5M1rjxAiSxo2+VSGJYFWIfnZPapJozgSC6+LBsMt\n4VhMZSE7FPuxBrxBKbHyhhY3DKbZ3m3mbmDUyjV6Gl2b2oo6Wp06dJ7C7qus\ngdvmU5x2DZWyllhTK+aks0KRAxWYk0cJyWPKlWrU4yjIhp9VW1fdHj6fvB6Z\n80pPVkH92mKabXMkSWKB1YiZ9nz4sR+hRxyhlQXiO512LFRL4SxYVy/Ksk/v\nTbeqQkzHmdZ5aHnhvemftGqlkGHJtdNoc3QAjVH2MS9voAq+2yhoe/9Xaeq5\npgWT2w/30KlWNW06odaMyBqplIbjwFhimaR7lj/Y6lyPaxAzjTwg8P9Gow3S\nsXcM\r\n=E1yp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.ae85f7eba.0_1627415468367_0.17029363750334592","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/typography","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.5981207f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"213c00d2bfb7ffedbb081381a418468ca470b618","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.5981207f7.0.tgz","fileCount":22,"integrity":"sha512-DUe6Zusom/6Hof/wIvO571/JyMTSWTBNci5tb0RDFCWWXW7eIcRwa8/6Ml1SgcrpBOt44+eKxMs4AidVUOANQA==","signatures":[{"sig":"MEUCIG9Hqi4NH5+jZRbIorXrZDpgAxIyZ7+PyF1ia3mfAU8XAiEA2Ye+EjshzmAJxfL97Eu5yNtUap6e/HNjWybomQ1uk3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQhCRA9TVsSAnZWagAA8hAP/2cfiihFJW18dLdaEOzp\nPFmGfEkyMLcAb3LY+ftPWbeImGf0Gvc6gySfs0Fy0HksqNfFJ10Zo0oR6k4L\nMzHZU/UB9Yyti3WF7j2Fsr6snfACwWla5rPVex2LIT4FPk+JbeueyraDQVEN\n/3oCd49xTDF9tC+8Oo1hD922jkei2kkP0QzH5J4WpUl/SmirlyJaZ92ozD74\ncCGsw5Wp7jUueLeZ9tG+/B5GI3BLX/0jXUSlIje+DvbR3W4M4oxnvWdOBWL5\nOPkehaE+YNig4a9ADRdQTdmWK9PchzMQdtv0mjkASbsDWa2knHBnYz64rAaK\noKdPnEfY1T9kIqcrVE8OB+/aLu/q4w9Ik/5UJ6K2i7SQaltsE3oAh/cfEDEE\nXgwvtck+kB+TyX8FNCeFfmnEGVE/QP5qs25FPBPiIscGMOuxl7KgcPZHuAJ8\nxnb/Yy9fmzDHvwvOpIOPestAK4OKWZ07EHiP0cEbJhfubNds6MMTlpKx5Gj6\nR90f5yTFI8UP/c2dLFOxP/Dy05p7RKWwiSju4uhH/1K/z0PAVV7BgKsdCDIV\ns5tP1VZBeM7gBQWSeoBfiTuu5Fuikiq/DWxZ1fp1kXjNBG8lZxCtI17N4rmy\nU2WqGbwQsxQ8OlfIYvUndG0/R9BTB69y25lVBhyG3kxU5EHGg8YQdgOxGbGx\nC3N/\r\n=W15p\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.5981207f7.0_1627427873167_0.5276469035515647","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/typography","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"163443a6035b41103ec371c3e6d2fc4f7f4ea264","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.83bdd0222.0.tgz","fileCount":22,"integrity":"sha512-yko9wPbmhSgAfpRlfSXUtUZxXxsn1GH/6jEGQplQxjAPH+BSbdGio9JukhzHPYNUD0T7eoq8/PvOGYgumvfE6w==","signatures":[{"sig":"MEUCIA7rkMMhSLxkdHOyGQ1N8DTjhMa5wCtvwFEZ3LHC6CxFAiEA55BmNqIntK4iVAsj9fCrlw9Oe6tOXtfwj31KoAfYLYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMLCRA9TVsSAnZWagAAqt8P/jp1UwZzCB21Kgz+KqiX\naUWzzbuTWPvx+sSkK/fK7r2M7nefTFVUvMNYFndlqA1zU/eezsuohiyJjQOx\nzd7noGIt6Bnt/sgIKHs6Fw1jGPob9qHuhHsDTqvRzWdY0glSRhwEzOEGz80X\nOgdR+qQqe+UDiweZLfoAvDGjVBnYX5Ywwy/+FuOxjuE61U8sHGMNy1b6nR87\nIfqbxQC9AbbOa2m0QB+FaeeYvUW4Fq+186OgmTZfcZGcgNQLem9eV9WandIp\n6aT2yDTtdp2W8YcY5gbZxIhs3qL2seE/HeonCni5c9d9onpDBJaFSn17lfVq\n4sFHc1+0h2W0Bj9GEEChlrEL785FP0uPzR09AmMCsvDowfGM722s2FKgrHZB\n4DreIj/5iPalCPdKb47Ppryhgux+tHes9s4NDhYVZy/4x/iScPP641SllDkS\nTX2hhgw/IJUvsXY3oLRg+6wtgufwiPh9c5r7eDCnmcdlg1Q8YDUVsCLAy1SU\nT7wG8xHqQ1r7JoXVhZrlZ5998sIRIUNMPa6n1jbrQyU/ygRqeeSJ6Vl9dJV7\ne6mJHtrSeOV/aopeclihHHNRulfXfn4yfHCQrg8cE+LDJ0VsbOJSNb8x3Tn9\nnIh6MaJEPaHvNTp8btqTnhZGVuUybgmwlVzsXgdETGepgFHljNQncxoJ6QJt\nBmBy\r\n=f2gu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.83bdd0222.0_1627493131419_0.021454472419838","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/typography","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.28656298a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b1e944ee812afaf5f927bc779d1594aad1681ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.28656298a.0.tgz","fileCount":22,"integrity":"sha512-OdJpwMF0PYmsbsEeLs421lx/m85BlOd+XU11b3iE8loxABfkNjfTx0XJpEpJCTgHQfsev1tXk3n4ifNADWtY+A==","signatures":[{"sig":"MEUCIQC86vK59FgSETRknxw8tTKvA4pKezfBvBf4XftrBVrtgwIgGbrdIfOvqAoPyxtpA1tKUs/6yv1gfY795QHFs4+LgYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+hCRA9TVsSAnZWagAAu6wP+wQveYsouLv9YpuqAS0F\nWTKgoi0OUA9umpwh9hMmUOhGpM6PKYmnzGd+WxzkW0WIT48h7EVuqrDBgqV3\nn1wuICoxAC7RQFKLNV1QmgLvn1lIV0rJR1Z3s+aq6osJ/MrXxrtVyv4Gio+J\nakgAYCUzYildIm2xtoFm+/lG5YzQSaxdMB691aaoYaRBTAbCMPrKUtRBTl2X\ngWiGnaESsdybceumJiHmDNMkS0uft8jbm2OZIPYaQ/ntxEWcDToslbTsqyic\n0xCy2jxTeCmkbeACc1gEccdJuWpcvL76fkVrKm+a2MjBy/QkwiDkrk08PF8C\nO0qK4+4pXeUaJVRl1cpCGnVtl42utBSk6uBrdf2qAX0CRVczzB1JoQkE9vEi\nKa3epiYe30CYFO9TGTMhMX1PxiNYYN6RvTSI+9upwYQSGcxnrP/dnjN8lXfN\n6XCHViYzbBZ4jNTV9qYHzRYEA47tAAyf43PHY4hMEiCjwyJ5oT+nyh6D4Ndm\nIBnaNXfbCUuHp9uxuvqMNgzYPVvbri5Qp3yRYQCxlScO6WbXG5W89ETcRj28\nCoefq3+JXZiKMFrRkd6kMbUWGMZ6KUPrRyabCpm69kGWeNA5tJxWXNOFCFZW\nRpNegpxX9yJIzLv8MEFlm023BPDt5t7qQu8/sHvz8SawHKA7XXuHK4g6OrF7\n/8Fm\r\n=9A22\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.28656298a.0_1627582369577_0.6219645964747273","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/typography","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f9b060d39309a7ba650ccf9a2da5dcdde66ba85","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.9e797daaf.0.tgz","fileCount":22,"integrity":"sha512-Lg5rLQbbCpUOMtPbH0ty9BQimGbj7tNh6VkgNpL1SL9T3OqicyjxnQtUQq9UZIrr7auyzLFnnmiNtq18nZOBaw==","signatures":[{"sig":"MEUCIQDL8LAZ2fGMaic0tGkGNwJCsWhqBGmXt8TdC6NYgCs3BwIgPcHkm3sPG3pJxejf1LA5+mQD5tA+97jwfup4bPhZVys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvTXCRA9TVsSAnZWagAAnBUQAJpCAgExufxCMxGrP7zd\nklT+HWfpPkdteXRc1L7sPcFNEV1rAPzL8DJ8gmqDPFvbxa6ktCh/RV1gRcDt\nl3Md2eRxk5GMSC0fzHtJ25k+a3R26rwetS+ZmFL4OCFZoDgFnOfnRp4ViVUG\nUJFUesEbbir2/r/+8Iyx0SrSC/McV7O2UCMGfWtwXx7nOEqIMmV1WDKmw21b\nVoIZr6fPEPhVsZJxvkWfEEdO6cVijz+nMjGLgVfRgOznIE/Wc5M3MGzIzhm+\nUiZ74JorvIMlYC4nC5DYJcK/hDstXLaVApLEEkrkPN4+KgWD3ZU4FlR4socb\nU5oyMYBioWfh5/yjMdNPJaoedzdVo4JjjZAyrzSqTF26Dofm+EcTe4hGzMQc\n2v+Oszks4odMdn54TPtLJpkrAd4/+VdJaMBJuaeVuNC1u7BQtnuwFahBU2NW\nIPJhGx8jScLbgWgKqNgS7muNQuJuJKcSWOGpYINvcqjFTcWZoEh5RwoH5AQj\n1oujaTfXonE+N/XkZiVaZ/eN8yLHNMOpnUzZfvrMnsA2+QmS7HItBcZcQtLE\n8jexEtFYNCK3KzYQKlQCL1u5iDEfeP4sSF12rAF4G5q+0OBKYNUbvrzbEMUM\ndWSWpoHLXZrS0w6+Qdp7X4W+uzhY0aCSJQLWNyqlfxPnAwUaVq1ijmH7fqWV\njNHe\r\n=5vc3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.9e797daaf.0_1627583703829_0.9459473579854778","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/typography","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c1c682fce498bb0b53b6ba48742b801395021ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":22,"integrity":"sha512-lYxImzO5DdQ2Dp6cKvD1xG17rLj2h4ssGerg3SM8Jd5pApDAmp9qg2LD0Q51iENn6LteIg0TxhU9rK4UGNyWEg==","signatures":[{"sig":"MEYCIQD8OX2HjIvBevnNoPdXwLHWSHympv34qBK0MuuaOu8zfgIhAKLLFYEjP1gsE74Nn3YSzVvUrjbpEX3nHyZww+cQHP+C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1ICRA9TVsSAnZWagAAfDwQAJCkJUNaIq3WpcYMWJzO\nFfc711E+Bgef6odMejriAIfnGszPJqHRPVIgBIOQ940scsz8PWhfS5tAO03z\nik7w62m5XMdjw68DR9nwdtK/SMXG36cwW1yZzDLEaWPIitpsAfI4vAG3EP6U\nU/x7FXDdLuIF04e7IvJav9qF179AFFnWnyuAdmGkDAibqwVZb87/IZf6+/X5\nt4755SmflUdQxhRZ09q1FqBgoQ50HlD093KGv+rS9MI4UNh9i6IhYLJg5o+J\nw5CI7XnGKNxPKcISpN2djmavhwxGq8M49TYHzkivRmIbAbsqfkBXsraGMcko\ntLwbzljhNoe+U2i+xFt2XIjgY+zzOokiwpfpgsCndlA6mfy73tSYwxW92pSF\nMY5pPWqLTZscaUMNvB57MY1Cgnu5UvCNQ5p8ZNRx92bA9Cih9zVXAEcO7TqK\n8f83FbfuZJWkXV7yh35gLZpVkBpT6dIPgvPuFherII0J9Ns9/tJMveIskOz9\nBlZ9EuCnuPJlIJoM7+pJxk9QAF3LEIukz6hvJbw69HjjlNvL3QJyJVNDUCp+\nC+NcPWGw3vDEmbDQvqij/PWfhpFmFY3bQ5Q08CwlIO2aqCj7U+qicOUhhv8D\nLHMOXIk/VcOyahpgJKgF6zSTFjEOZv2/2g1PdihwQz7WffS7Gk7K0G8PDG86\nFFGD\r\n=mRnl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.adb9f1ad8.0_1627671880021_0.14621394422420186","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/typography","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.cc5377458.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50fd65f04803cde57cd85ed792150277dce08a62","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.cc5377458.0.tgz","fileCount":22,"integrity":"sha512-N8qFjFaf9GfIO9sUpmstGmf5/cOwOiQ1czSmw4y6klKhYebFWDA5rvmanjaNVZJqKu3SYr11DcAByHWF4NiLrw==","signatures":[{"sig":"MEMCHxSIKg4o0yg9Nza5cB0GH6atF4JJaSDojviKM4jpkLUCIHE6D48c+lpl0MZ6WdnKh8GxxvNd2q1UDxYjFomQPyZP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAUCRA9TVsSAnZWagAAnDwP/jOc1fjOBSQPdIdZV/B0\nCj+9/lF8mPlyQrk1K+gmF1MMEG0aJXd1c7JESwCTDQQIdxLfYsHG7CzqofQx\n9v8+W2IBqdt9dpYQ4/zFi+27WlkkPdNQfnu5OLwbBmYIJPi3tTKjZkAdr/XV\nMscXauGk7Wpg2DwYaXgLbltkrNIlvwLPZQbNUVQWPnNjk9myGNO7IP3W86Hc\n2+uLLPb/ptWpNyZ768yWGRKtPkIXYjxoRXs68xQ9mT5/cz1XOGQfcdPZhseZ\nNNNzMco+UD3NvIbOPhb6VFxGUfHsQoJZJvLYdntGDaqZqwyCjwMhM5Ki4rob\nQfk5EzfE88/DFYRD637tHpW6V9vr6e9D2cx1LPwlkXB+b2cLg4ND3ee/tD/a\nDzDTqg/DSq1W5XAZK1eyiabhCtmYK/yD2taC77ViBTqWTs5dXgDGQaFDl756\nGtD5CW0AOxFjRJwPhaXSy6i84yhGmLAUfsqb8QtPparQaqvqltql0ueItzhQ\nQEuhqubWOZZaPfJeBJVFW8k5wu8bxm44xrWsunMV0ecajA3vcVV0+JJBcNjW\nZz9FWUyYt9NtGShEjh6SECAqd7bWydv67ERo/G3ud1dgvfhDwlGZ1R2AxXA+\nP+EYHWL4Huwg1j3+/fp3a/5rDvehcgwWFg211FRYfjLilUpvodQMfq7uobBQ\nCxBO\r\n=Fuam\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.cc5377458.0_1627680788702_0.9302885686039095","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/typography","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.a395972cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c9223c51a337bc000ba6a366db75844aaeb1de8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.a395972cf.0.tgz","fileCount":22,"integrity":"sha512-QtjJ6R36XBuoeKGvCj6QDUwxzaXTRt3sUDdtlUFk0CW4yGUBKNQ0rgV/zVO2Ll5Z5SvoEmUTee2ZgIGAGBNqNw==","signatures":[{"sig":"MEQCIGjM81iJavxRRUq+yO/ikCPJvjlVzvV238//TnSWszC7AiBD6YkRaHr6biVr9viEOBIBdSshq6OrBkuHsu6F1/86fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbO7CRA9TVsSAnZWagAArtoP/RtgDuJlSNOcraGFQrW7\nPm9ZSIluqqh1/i3oj9yQop+2R+U37aMS/n7BXiOx/cNntRi39rfEz/7zF4az\n9g2bsRzsRYWDbKU/grYTtyyYQifW7+xfFDTya4gQI9/BqImtLlNv0Iughc+i\nlce+A4bLsYnyUDZgvHc/50CBSRO1rHv29Lqs989uzhjw6TaGE7lhEy42KjEh\nkel/NGRBVkcb5jvS7AZrISGVqKT55JklfPjmCbElxkkkc7qwFOFCQSZd2ER2\nTcHdRlW2J+p3BmAtrBnNVszp7StDqaz/8Pa73YlRWHYTZf1iGKOJz7h4sLIU\nR7CabgnePynufSYYkZw8QeN9bxaRuNEJD57762BT6hnCe30NE4pCgHKeAbJn\njf6Ua8iP/GnVtRs1GLcQqRVYsY8IK1nx6D7Mp7JuweZczzjFRWvuYMwwC8e5\nl2eF04Siw6AjgyLcXOr3fFA4Yl48SB2snwuvrTMznjjEUtuQZeIXBBq4WgMN\nGMDosc8IM2XmFTLjzM9rhJNEmXGg0HIXvHk3Ckwg7Z+6H3nJfXqzg7uAQ5nf\ndZR9hGyAfabu6DSrNpIy+ffea+fVyR7jOx6hw1vbLREzM1tMGkngJ4fwCxmT\nW2NE1S6vRiHxD+FuTVWYqLYBxQu09y4cBBBaCbdEy15NQQcVZpCrh35iwAs5\nzDgD\r\n=GsnW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.a395972cf.0_1628025786866_0.47694012393955276","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/typography","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc3362091e1205653650f933edae017fb40e84f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.7c96e6b98.0.tgz","fileCount":22,"integrity":"sha512-oE29pEOSyUcpA2ll23QXETQRD5N0Eu9YvuvmTifkRWpMqqkJUUZ/W/WqfECfCuxdbQJyihdO5eVNygFDddmPMg==","signatures":[{"sig":"MEQCIHY97oFVEYg03GIexd6QXfJjifenI/iLB3/C6JEvD2H0AiA2XzkiqQf9jRH2ByLyTPmGhce8+GOIkz6ywiDf6Wv5Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+QCRA9TVsSAnZWagAAVD8QAIl7a/kfkhZknpMGA10w\nuEviSSRjmXK1L1+DHVIIWrOAmtNOxQfAZp93rLCHopmx7WR2umxBY1x7Pfzc\njPogrkx5mh4ALJXh1oGm8xSls8oShITuw0A29pGDG46ZfyxrFj1O9pGT4ZmJ\nMaE2SXNsuaYXCAOSBmOG/3HsgpfyAml5Q7Q8+VgP77lQueQvP/FUEq9XL941\nX6Ens5ZzTvPR16co9qHtOo91Yje9qbS6cz7wm69iABmsLMci+nYTimWOYK9Y\ndqHqUTEzmfQxfYJ4I2j8LvzPtLt9D0cpwmQSnyxxlRp5wRnIa1RQNckKiS6w\n0DJ0hnvyuuWYEUOu0fpXaGxXvSBx5fls243EmAjl3NIRwfsHSfNQkLAXqxHt\n3hqhOwVeNBuzpcLBJ/sE4RdgqDj8D4BoFjj+BPPkMWneg8RojVBEruaubbYC\nKkr8LEZf/AuFkdLHOundETeyGUkx2luachobzoDbLDUOrDlAEfrzYplKYB51\n5Yw3ZLt1PBiGfnOZC7q47Sba263jvWYP8SdGHZMWBEin1hjSE7T0XJ+2mmUu\ngZqDMDpYpODZZRmbUrvb0hEOv3y9OVcqsSO/w6k5zD+SDip5tTAfiWshUfLY\nPMz12Go43iLOs7L8prRLU6ct/51n21YOrc6QK477uWI6p6RslZNSFL4FDl+i\nrGbF\r\n=le9W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.7c96e6b98.0_1628028816693_0.0016570061898453226","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/typography","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e1d78f67b71fc61b6f877a27462310b6bc80199","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":22,"integrity":"sha512-RhiRMYbF8GmKPgBwbecDFJjQg5luZlnG3hURGihJ6EH2/oUqj3EaUS9UkplUCBLgN4LpYoGJYFjQNuxSosSdqA==","signatures":[{"sig":"MEYCIQCSNTbyDLWn+c+ZXACdKnzbA3hkAUv/LJmUeuWxlwHytQIhAKbkfnlg00n0WE/+W1lLkvuFiTXavNinSa2YkROSeQCV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCynjCRA9TVsSAnZWagAAu0EQAKQ0dtllSO3COfeS+i5V\nC3ko8CKNRewsJuyNMPGIWf9Q8LAGcdKc+2KLBPlE9ToAoLmyVxkCjM6O8FrH\nP7/Bwocz9Avs9hG0wz3D6CAxJe+Ighrg8i9mk/l891/Z+kat/HlhFl6u6S69\nkygZ56D6D0vpXC26bKeZoqQmgVphtUEEZERz17JkSHiMXqAwntUd8wOI0q5G\nSSFA2oxb/h9NAtnCQF7EEoWmpywfiVpp6PLcY/btZujpEU8qGAr9i47dbhH7\nmqQS1f+zGQu0qm4j/pr0MeY5N9iDZtQaWRnuLIw8c/01CD5BImhE7fkWwbA4\nA2rI4LWk7XiWScqq9DdlI6Bv8lOGLhiTkeK5SRq0XdP6RtjlLEJijI7QZflY\nFuyMDRG8i7Iw5Xln6Ce4TsGcdUe8q8rW+j1p/wUd3yxMOP+i4TEOMGs/3jyi\nhTN21Xg8b8BMqO0WJ4asKyxR5w0TSumwQSi3tssepF1g2bww7GEbPHf9ksRi\nplTjqnJiUOouMT9j13aithn7mbC+xiVWJ2+ro39VvQNW5tZPESl1v90mSZMr\nnHOot8TTIE7kDpO4vTc/H6agiMiVicGU4PevA2mWAoOXAmgxaqbDqIL+dhhL\nNPB3RulsR6lcngR2D6Bxa7c28nzIDeF02qBO+5bDuQeyowYPm4eE+sQOUs++\npW02\r\n=uFW9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.a80c8b2c2.0_1628121571599_0.8769869394759111","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/typography","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.3dd611091.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"032f3bffa42b0dde6b99d7d8c7df495960eb9f02","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.3dd611091.0.tgz","fileCount":22,"integrity":"sha512-yz/8q6xO/WkacIUHkGJChXjTXykV+NpfeRDXqggx+ryXXklprg8cgOb/okJInvLdjK7glhqKe13YgzQC12fsQA==","signatures":[{"sig":"MEQCIEKsxSl7tpOiRKoTp6mQpPkTI4os8C+mIzDDsot7d1PRAiAW+DD459K3C1trFK5cvlih4liaP1IX6bMR5HY9V4j83w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FUCRA9TVsSAnZWagAA8D4P/A04R9VXYxObQQvGbRZz\nzVtadmecze0F5+hYoT7gXTPOoviSCkn4di8kj05XIjK/Fp/9F4BDIDhvJRy+\n+n0BhX6uj3AaS4Y3a9TbQq5CE90qHUZw9OwCAbvGOEfDFo3DhC3CU/rKmj8N\n0OPMR67Qb1b9j9IfG9kNQwZHMzRe84+PaWeDrfY1iqpwjtkIhSBiHX38i1aV\nFas9yhx0Dnw/eQVPdK2VSvW6vO4YVp4AcV66+tCwcEDlrjjzguubgueIhuoV\n/DTXYOymnkvph71GXc1G0H65gdRnB3KC55ITyv+DXAMv6et3k214uTFEJqag\nVsUon+Vvi0VwGwVSVzuVWqeV2gzUCu1WU1GqFBCBZQmC8vtQGZ6Z4KUzQqCa\nnNqMSimlwvOcd2ayHSbBOQsLRmlGR7V12HkUgRXXP0wUPdeaY1CDCsO+rV+M\n3ZbmRW4uTYf31SikJtJYkP2vsItUdXhSFtFqtQb+oe9q9We1l7dh1lGgK85Y\nLvJnaP5FDECR/xLiS/AOl/Pfk3j4jVitOKPdvW/qkE3C6ehOoycQqcpa/JTo\nntk5LaMjtgCPKq/JUNsGU62WeoLZr7e8kNlhBYLAEXkBVg5q0Zg/IFwg4puZ\nptXspVY3hMdCzNTFF3GdWU2suyxDwzY1jRXehwZb6L4zhYPm373XZIn3zZ3n\ngZlU\r\n=djpT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.3dd611091.0_1628135764629_0.08545196913977726","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/typography","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fde4ac9b341726f919bc2bfe28c4f962a539543f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.5dee37ff6.0.tgz","fileCount":22,"integrity":"sha512-lAEBpUi979DEv8b1CCDdOjzTDm9jl5eYH+t6mNHkBbjLFvlRXeE2EGOIiYB6pS4eF7ODWzM0aKOS3rGsZPqloA==","signatures":[{"sig":"MEQCIE0bh2OTudsEv7rqnKj3H3cQKf9I37b98RgmWGilnuzNAiAurNctvLUiQerLWrLhqpBWBUcgxuG0yubYz5r4YCBzig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCLpCRA9TVsSAnZWagAAn/cP/jJE83tv1VSEfalk2HuN\nAYymT+yh3cVkzv7r6B7IR6K0vjou3sLgGyRlMil1xZ7aTdpwh6E5Wiyn9n2H\n8Hy1eC7gb2ba9hvhX73K0ViCAFN9ZCPstQ7GjNSgB5b7bByiwKj0btO9Lk8v\nQw657iKp8xAkbBhKDh5/G54XAPUY0CgRp98uE552OMGP1TrxPGQ7t9jDbEQi\nLRc/5w3sUBCfzAS8iG3/MJwclET7H9yXTiXz5tIrq3LY0xpbCe/qqiC1BpFT\n5L5KwBILXtkU5BEdN9DxJ8pioK7reug32xJIiyMmUVEOpdPiUjlk6wKs7oI5\nA7AiYEafr1TLQ9ZPwpaxt8mFbEMP8uaIXoSyBA8GNn0av9soNMj2TbMqH+Rv\n8ttCU9CYAv2YnE7DEs6/mtgHYZkWfHCif16dqI5XDWQjxqXb6oZ1HGueeeX2\nqrZC0ATxq1dfwL1TocyRIGpu/QKmx4GU1UKNdoKjuTiyYMrItzaNupCf5+Zu\n5S6RonUQBrdrlPlafF5UNY8CzTx0rDGWIEmkPAiJ0kwzwTLng2u6ZUOdvKQA\nyftH4ckQEq57RzeTMm8WlYTKXSUbK8m6k4b805qZIUr+vqgaxkwtdY4jnnkr\nDhS08BwccYGcK1z6llnHAmg4bdQrx0Oxk3f1dw5GPZB/8PcVgB9pKX1chXlV\n8Hpp\r\n=xYai\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.5dee37ff6.0_1628185321468_0.355780488018697","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/typography","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71cd3ad343840f002b613341876145940d92f4a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.bf405d22a.0.tgz","fileCount":22,"integrity":"sha512-LT9OhvuJDL/svfFShNWFCVMI4KvALMkmMQ37IXLJVgWO01ql9gy8PL2FddlupWw/Ro5XCgpplscjyXmlDXdKfA==","signatures":[{"sig":"MEUCIQDnFPaEancjFuA4bvadimU4GsKa48/zLezPtlxXs5p2ugIgYNw8TMrDrR6XJlDHw6wmrO49j/cAC2+krnclRspN7iY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEdwCRA9TVsSAnZWagAAfdQP/iDeliEkgywAvRuEFQIv\nUVQlxjnnEpBZKk5TQ/SZ7hKlwMJMJaQ/+zoDKlLxraqXivoiUlkxyZlo8Eod\nJbacPv3tLAnfc179jL4fLcUBLGGEym4lvSzPdaua3blG/2Fw641L02bWZaUm\nvI08qsNGEGbY7kZEXTaGV8L+4lFoS4Yc+565fkcVprCJc1ywGxX3piHDWedm\nc1GxGIeVRllqGkIfZgwz0RoXni1Zg6kWxrLE66U9hfFQgUU468X/QbiVl+YK\nr/KlpUfxchYbLb1t4AE4SvmsmvqXVzUFiAilvYM4QiOdp3I/Rh/uhwo7745u\nfaRt18AxlF0YVHyVrFbpx6Fn7E1eJykBkweLkHZ4EI3j74EEqvYu5M7iNlkK\n0g0a8QE0Aii4LVkDEHL/C+uyHqDFVKyxX8DvTy5gbs4FUXu2ilD6gtu5xcbQ\nnoxYkqoGVrIn+HCbTGVgQ5gMXXh2csUW69oqshfoKs9ZAkb8f5NrTO4Bt9kS\nnWGzP7mMhjT6s9rBaecfTmwMoGA6Y8y4gCj5uYCY3au/9QLaoXtfx90LAuJc\n2Knonqn6sZn4I0yyx7PAfUt7MckBoN091Zfbip5N9O1cjwOfPqqeMAH5ZcbQ\nWUwM0I96Efg1kljpsVXBMeL/kNCV8+FRY9nKwd/07H42qU6bN47vBITHLvTm\nGptG\r\n=mwrT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.bf405d22a.0_1628194671863_0.06946915782724261","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/typography","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f769e0d4e1d79fe783bfbb14d71dc1f24f1f8451","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.b47dd37a6.0.tgz","fileCount":22,"integrity":"sha512-2F2o0GZILQ+PksASPwve93x8iUUeywd9YahCrsZQQj/2XIsdwuyj5BbDmMUlQ/l3p/BhV/j9pa4OQr/JQRNHkg==","signatures":[{"sig":"MEUCIQCZ+v9hONEO/I+pY2CTdVVW1kS3YJGv86T6J5uuqaTuQgIgM6lSSL7Fi7l6iawaCXM2JoaXceqq3PAPWwP94ysN+kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7kCRA9TVsSAnZWagAA6r0QAJZ+ugUx4qjd7l6SuGes\nYAPEFJw5LxrwtmhhNjgK/Apn9InRuiO8+pp0LSZSyt4796yaGM9lL4C+okUo\nhsuAoJy4F1uP3yS5mGLpa0ZE5gDS/kjuCG1YGAWVlxeKyHGle0vepPMU++tO\nqu/FmOtsSYCoxLFvl0iRM8oSlurHZ/6YdM2Jfu/+o1IFgn/ohcADgQp9Zqac\nrXGb1NxA3CAnUqR/ZWIb8ZQPXM3Q5B9J+IFsPcP7PwnL9NDOYcud6MwdozJ4\nC/rsWzzYcXWyDbwRsPUXZEwZM5GgapXwTLfTc3OyJ4sdYetHjyxBUPLDjYvQ\nYy5rwFaPfY8aqE/rhjYEGFaOOQYbYtQIYMDUFyeKvsJ/0G932btroUDvV8de\nUk5oxe9ve/DApjN1+0QxxMLbpj+mnH2+riajph6IuUBUU7kg8W1+8EwFq4Lr\nm7h+gXUw9CJrhFUvJhidQaKMogHpmYxSIjIIa5h/2xruFTGBa8mhPhD3W0On\nmznt3uDjtHAmAE0Nuz4lx2cIXFgjmE6kxsSO7IwfGKcfce9yhMXD1t6ZPs/G\n0trC3xnwyy9gtGhxT+J5DlvstM93aGZkuByqo7MsixqQb9VJBRiwvDmtnRws\nWbSjWla6LBww5zbU9UjE6R9mQKatATN/yaRF6cHRMiwQivAnnPuuIqLTjnJh\nIiJT\r\n=zNyM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.b47dd37a6.0_1628196579985_0.03530400076491991","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/typography","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac59d6377aa9b929a6f42767515fb4c2a6af9a0f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.6c82b965b.0.tgz","fileCount":22,"integrity":"sha512-25VrOdPeRbDvItNod6OGRvkxN1TgLZy6ccWxwDxi6IfF/1gTNftnfqHLyge9FvAAdExEQPhuPPqTDwoXZNW9JQ==","signatures":[{"sig":"MEYCIQCrrpSgIR/tIZhOMIQQFY8kG9gjqI95IMSaLgGAdk/udwIhAMOPR6JxrzvQHS9nEwrQLqh0kph3Y9u7vv/NNGxY/71Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/tCRA9TVsSAnZWagAA7jEP/AvTCSayV1R7frixXnn2\n7bppUOQsf/lG4LVZsh5jamdYf/IreJ854Xvt7Y+XSIF8lG6yuOpSK1k19UEU\nVLL/2lBZLlZCT9cUJ0iRwoC9VWcJJ6TR1v/OGc3X7PN9ell1JGZ8h/4f5/gF\nb3EQB5O7rZKQAxov71bXjo6x3jYW5L46l3zhPimIa4kbwnsK/F7HD2v2Om+e\n6UVuE3+WvbjvF4+1XA42HEDcGoa5asMwywnO6Ovj0SsZwNPgkQXnvPTsuk8G\nq+HCxJfWcRXThmUP5R2vObKvnye1Ht+wFEPezM8UEW+h0+uu6tMdoEWiPAlH\nUWXH9g5DSsAQd0zxVuxh6ciIS+gCXngTCUhgnp+x8WJcY4m2R7+rrCdVdKjZ\n1hKogGrDpIEqNyFRDUVNULRJ9U4KMy+3X4Hv+H4LQk8qEDrT54B9GMN1bhmj\np31uSCyjxk9e/ZRaB6/mNXQhzbCtVNyUnvOiS+WK2ZKw8es8rPFx6z12rRwO\nWN+arBGDoCHf5HwKkX7KC9i7JdBnC6/LSttgtrl0S2bLjHOKj0rTGbnM5OPF\nLufs45/cMwFONTeRY/7dl7sE7+5q9rxVZKALtfMQxBVrGAoI10OcVmtTDuKK\nOfhwRpf2U0DrkWxoKDHPBmeFxZLXOD516M5srkqAOP415GaUMSZYh8o1gB+v\nYSm0\r\n=i60m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.6c82b965b.0_1628266477293_0.42583130355123844","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/typography","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1f4c99b62bff61ef8361c297b1b040c378d0247","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.4ca11fe76.0.tgz","fileCount":22,"integrity":"sha512-VtSpyi6DrWOWrpN+eazfKHwP+ZSMIGn81ys8IU1Pm9WmE0oFH7tKGx8xSmKYlW5kocF0Sd5N6BnRaAzJ3SUEBw==","signatures":[{"sig":"MEYCIQCevF5jUkYtSmLDWvXcCSrwV3njGdj2kq2N4CJa8807kgIhAL2Lz67WaCJftukWcgGgtO4zoDNBvqHTVM3ZqqQiYSbM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWw7CRA9TVsSAnZWagAAX8EP/itz84JlxcL65wjjNNff\npx7X5tmiNn+sGb55TKJnS5KYC0mHTVI4THqlXI9PEvO14JC7jfM8D8BTl+xB\n38dVq8+QKnhsIgdhOLVfklfw6fQA7Nv2oceHs2wQ07SARmGM8IqL10X92cGa\naRjrJ5MS7vv+vkuiamLd9A4YppH4NFzFlBGjulTBJ7CrO+YSNZuU2TgODpGn\nMJf5BecOiorKT8pptJmswcKKahNKGrM2r7vH1JxWJulJPjTDJqF+hWGGd196\noDReLJQ8YrUiz9NgU3cBdpWWuoCfHqtqrTgrtNBGm6VlqLOhqNNlYwSUWMBt\nrgD0OH8lSFEM3vJ5FfknSrEpq85f3xvvZCsYGgxxgYpysa72ZEr8vS9OyQMZ\nbSJIYvPPzL6U8lCMljV0Kw1TnbS0BiHa1fMqzFLbz5G+CT+9RGCbsKwXWT7h\n0fSWzbcPHEOrWzM+FV0ePtCMl9w2KDAmRdNLedpVw3QAiAfDE3rn2V0/hPvr\nhIGLoSBcmA2v1YiGfsFBlkSs82H/Kbw+Sv2HyzTO+m8qtAFbSXBb6PjV444w\nMcKeovAJxLVbn91r1DE49aZnlYJUAl2P+ORSdW/GV0XUw66glRbXlzsWRokl\nJ65YLdggCp7IZQ0OVdqvsbBT37qzJBGtgMEr5O3wCFVilMu/7luhyDjuZ1GA\nk9YT\r\n=QjSc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.4ca11fe76.0_1628269627130_0.6430187689051967","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/typography","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b77a346685f1f971a82656ae1a69c4408a480a2d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.510cf90f2.0.tgz","fileCount":22,"integrity":"sha512-A8LIRvJ9axcCBRTq2V7/Z1l3gYRm2U7qEUczQ95y/1IPFfuTe6j4YkLJtT18+6nUahxVsuF7yqbKzrG7Iky0kw==","signatures":[{"sig":"MEYCIQC64Tmc5a59R44/9MahKEjJK8/Osn0O5MHugynl/0EzFAIhAJ11pgOHXOhYkvZ/iVAFxFHDrDZ3mwB7L+EMISaoSF/h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMPCRA9TVsSAnZWagAAhMUP/3fTzJzH4jEdpLLS+4cQ\nISVfc906O3HJcWWdyWED614AHBqEeWi2j+aETWk+Btyl1yUszwVfh4i5u5MK\naX0PePTd1aFj59Iw4e5FkVR5KVBON9CDYBCUWpR1d05Xwdk/odBlz/7u8VTs\nelU/Hex+fiX04SgVYBRhttgMGG22nN42Pr2uHNmjp6UiseZeyyLSAXczamWy\n1PSnTRfGr5PY10wJKcaLrJtjxGPL0bsJNFTRJ4iYOJC8kr2VYv+CbbGOGjxe\nphLALGE1LLaruyab1R8qX+oqk6C5MXMopYoG9dGQWmSGrstzVDsTUKZg03Mv\niO1yevef8VpRuEx83rP0m11oMlf/UV3DHbTLgVJtoQvp/Rzfb0wjNPPL/HUc\nGO92FFmxJVOeHRH7sZsx56WZsWNI7mYmVkOOancyd+xdc3KB0hg5Wwlrismb\nKrTrs+S1jTxU38C0QZdPvzU6RZbIyH9Ts4nrMTzlVc6NqxrCoKdNmKgiX4La\nr4aZu9uSOKY1cVEhluP3Maw5rwfbqj327nNuoz51VcAs37vl593p4XGzlsbk\nS85Tfzuk1BbuK9Mp4ocenpD15InS6jVVEmw+R/Ul1J5jEjoX5qeLFMlNSQd6\nVAgpMsd+9G0NjpYCYRfi5vPVbuyEaBsklBHZ5+WvqV97lxboGXHGM71He8Qb\nDPR9\r\n=0dd0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.510cf90f2.0_1628529423011_0.47495561984385537","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/typography","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fb1e2c5574ba93f02f0fabd95860b84c3e24c34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.17580ebf7.0.tgz","fileCount":22,"integrity":"sha512-Vczfcbvdfz/QQWSWhKBr42Vb8OSA56hEsExebfqSvl3Q/Krv6GG2MC0KpVmRSTB1VUPQBM+QRs8ADNRu/u5f3w==","signatures":[{"sig":"MEUCIQCBEYdWDB9G24EEK6kHkaKl2+qbktm4aycBHL8zt4Q/qwIgMBY8Fl0I0mTEdvyFfJOAlZTgVpsZJr2RGZJ77fnHhcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXEmCRA9TVsSAnZWagAAFNUP/0mP8b53/RaWocvlSwgZ\nMOboccme7bk25R2wfIen1KBYbNWTZbgBYEAi+gtfjGgJcr09dppECIlf5tBL\nY1DcL8nfYAyWg+8KYUWnUjVdwNqc/Tvj4c//uls8ucI3uobhqv1r3XG/+2id\na6fdyJcox2XD0VBD2FGtxXQefMqptd0vDFlDp7fyjYic3vzQY/9QW0v56Nk/\nyNBUiAp9AknHREuWzntBPC1d10UGqIlW3dn5Qin/araUujf9zrK4d0MbfDDo\nuY9TdLUmgtajlFoLoA/DqW+fAtP/pYzy1y1Rzgn3UXLukEaOZwVI0yGbBY6E\nb13yZ6XMpUi6jmem3kaMkS0cj/LJmIYBDdXDEzOmIjlqn85ICJEzdnbcwzHk\nNnyYLyE6C623sx0FDepvltYntKdYcETeBL4KnDOKq30cRYyTcpqb22gDEpm3\nrmlvKPYr4nKJZmqx/eq26//d8ygd8DSFClXV2Eauq8CQhxr1M/5AqdS1hM77\nmBEdPv7uVRBtKU9kPFAUhZ/HIkin3jQxAW4IPKPvCoAPkM0iGquvrcUzMPls\nDETr4qNyiUkRX3tPJXCZ+pAdTNZBFrz6/niECCaDbSW0+wvYjMjcDzNRe0rB\n2olTRoLlWFqcoMhgkQdCIIqYjz15FNeAyuY4/1ElP7Xsk1UrEYMR0uSyGrM0\nz+MH\r\n=HyIS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.17580ebf7.0_1628533030805_0.601331195292192","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/typography","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.7249a3060.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c73e38a4365098d3cef7a67e0045dabac3ca8e60","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.7249a3060.0.tgz","fileCount":22,"integrity":"sha512-Y50DyAvz9n7mhVElck0IhjZhMuKTJ8Ve/nERa1xmR7ig45FLrncBunTXtpzjSvxyZ7zdLLXIh+FTRW4e//vy6Q==","signatures":[{"sig":"MEUCIDqItSdt0c+InjXjUG5piaGkJip3ATIDM6FyHiYelvJCAiEAhiMJhGitOFd8nIxpFJZ0SqfRPVHVgC0R0jUTka5YZ0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIdCRA9TVsSAnZWagAAZtwP/1nQuMCLfnL694AKeaSV\nxyYK/N3Y14x/321eki3JfO8HsARTH+rtTZZuBA5YXLXbOFycW/yX77hYTN6B\nPEADcqCcKirZI86Apsh9CnXDcxjurhznG63NrUBoTLaeNqMRdbr1QqXBU+8X\nGJbxRpxjYF+Wpi/dmy0L6Sn1jN5QzNi51KxGcBjJNwwUWamivOhZsuHC7wBE\nywMj+cnMR++GkE8SIsyUosIUgNgdMLVBegr14exdyUFygjhjCvTcdNCDZXbK\nFAD2OWzpUTi2khvIi95KFfOHpb/0ZisDk+dhzvp4l0Ir7U//iiVgAdKeMO70\nK9m5dGdaLAqLTDpbJ6OOUUZaPjhSt4Kw9aYXyQB3hgOhajd6Po1ADItzKetJ\nlN+uYqc8mQuq8fMIcIDUWIYjs3nowxJ+6Kcp3nNTazApnii1QsgHC2znmyTY\nwORO4qWQwCdVr6sGa+HvH7J7738sSs+bH69F9VB8Mr7wcEmbMZwJ2GEOCp/X\n94xytXTisNSmRUvH+7UeSrYuXWN8lW7zQoNzkcmjqu4Jl2qTAibabTif11nz\nZAZk5pdccYQJ8GE5krShLUU8PNNLleZuHAoGjY9Szvek1KDLYJ9pBOERfuuv\ntEO8As0t84IedSK9mINgBLH3sjnwxA6w+ffZVCF5Iq97ACPoB3aYGYKQ9jpX\nDBfW\r\n=P9cD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.7249a3060.0_1628533276917_0.6377814778396056","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/typography","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.4c405863b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45a757dc6b2775c57ee67ef440f09b9a01e208ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.4c405863b.0.tgz","fileCount":22,"integrity":"sha512-hujrlu7x77qsBNl5bHMc46sirS6cfiTFGpdW/Um7SIxP2QI6dnPdHDpDJoEYgUk84rQpLLYr9Xp1HN0QFq8qBQ==","signatures":[{"sig":"MEUCIGonGGEhat3MHUnMOlunUrNRL+wZXH0GqpnOtg+WXGRYAiEAjreWFsJvA3eAkVCvLiuvEb6fPWBk+Fl18hr3YPgRWoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEroRCRA9TVsSAnZWagAAiV4P/1UqCrrRTK6cnz3uouHM\ngRGlbDz72hsXW+ogcw/5mPWTXHnkCuxsFgjjAZM71T9LLMDQCD5zcsiirW6K\nZkcZbYJ0QWu+v0BoyZSdtIRDhap6UanTp3VOyju/KwaXmJEHmb1MROcdX5FF\nW/HJ6XSzM/8zXdhUgtP/tClby05+TNV9ta/nqMG/h5A83DVgr2ag3KndsH3Z\n/NVN57/YLXLB3KPpqG0onp5pARQAg0DTKaYoRmhIB79nIt3m/rAPh3QnQW75\nJBxqDSU9tsjKlRoc0lm3z+abVLEajF5AfDgkSaMwYpYZE1ntAXjbj3qKNk/W\na3VZdSMHgrK+psgMsV4AVoMICm+jRFGHYBPuf84o28ldNO+oCwsYoN0ditCO\n1Qthvu8NURY9YnsQdp7nRXn9QSGR0TrFeMDggmVCwCh5Ty9ndl/2LLHPDL1z\nnzxzSpsXy5L1/NwEjNwDaOM7DvnyrOW3F2fmgS+ycPCAFPzq2NMm9W+AWlhA\n3WQpFsRwfQKG6e68PZKxIIFLLWku5mErJrWUIF/WAX4957emH9mlotonzEom\nwy5NjZlDXnVM0YPTdmnDUnZBZuqa2mY6m9b60yALksiDCAnzk64jvdMJTQ8h\n8l/+CICDinD2NOlm1xgUDrwZi4uBTvX8vusHl0lMBNNX1+nhhwRRucZ4317w\nQD0Z\r\n=vHH2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.4c405863b.0_1628617233328_0.6877229876215492","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/typography","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5384448ad716534f284455000a3dd9975b6b2f9c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.f4241a42a.0.tgz","fileCount":22,"integrity":"sha512-exJt94BCsw897gIlv+lwVBYkRe+zOVwLD3aHLWbjTdJbDavEcEKpJwkJuuZCPtUBBY8OLvnlAwGj770UkRrDpA==","signatures":[{"sig":"MEUCIQC17e1aTwzlVJGvWLy8DNZOhaPACgBb+lZkZ5VSfJyC5QIgbBo+UKRFJNFJFu0plb/w3GBQOr38S8D2Hzh8+lWSwnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAHmCRA9TVsSAnZWagAAHwMP/RdubT6koFerEFrO7lUa\nuI06qgRu1N6hIbB1AxhzdwgFhfED3juuknCUCYlGQvKabytkljHIwjGbhF01\nreOGn198O2MfvdP6raNbBH24F/wTD1djTIhmdsCmrr43t9Ar2ufhH2PDaCAd\nXl9iJcyErLO24OmLBQhrC01VGB459ZdnFj7504th6qcGn0KY5a7Sn3c21GwF\n3pYSOlPJ2f+DlWe22Pia9dI9R1DOElWKo/MX1BPaXi/bR+MfpFPMWO/SHz+R\ngZ6q4d0Ja0fLvqCk8H+Gaq1EZAqhOSKCZWfuyszExRn7vrJR4kMKVMPJTelo\n7QjaCffWzdeGxmbfymyGoPOIOzHnmgeN5KMqU7ZdNoflrZxvzo1M7HwEk/dE\nFE9wetY2oP7Q5cJc2JfkFjmtl+3deuaiMROVMAdXxwSiw/ZDbnRNsJt08PxA\nN94SHn7C1Mcjq7K0Yz32YSWQgkuuBXuanrLDUDmXFZ1eZSBA6zyA+o16rx18\n+BbRLqVqVcjBSQBHkky4NEOwkAfCB1tXImYzow9YQBj3kl3BNhm7spKAeIYp\nfk1orygRXOu+mS7YIdnD+SMZfJY9dkYBtsoqtIx4hIuT8aoYeiA2zYDf70KB\nqDuiS14pSNFb17S/SAxdke/snw6evyPofB8G38e8ibAMqXkh3JP6UuPkLY3P\nV5Zz\r\n=irTr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.f4241a42a.0_1628701158498_0.9226333261636097","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/typography","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"191988cb3ceed170ba456f2bcb15b87ace597c32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":22,"integrity":"sha512-+E60pCjrVBsNcXCkUrzlk4oDREM5Yp4HYQRsY0w87Di77lv1RDnpLNxcVAdTi/j5OocnlHYfrpyKH2Oozl+yIA==","signatures":[{"sig":"MEYCIQCI0q0CZEktE6d7fENbCbVZfu4iY4DI4JWtOe54GJvaNAIhAO6pvrfijXTSdMkPdBxkcsYaeE8zUFfP0kL/bNA7dRSh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEBCRA9TVsSAnZWagAArLQP/RfYujeYIfy1j9XTrU1o\ndT3POPvaF75Y7c/v4oluM8ahOR51xR6HgmvG6/csDw/UwEOTlUicBzCI1QI+\nxiQGEAxMSfU59eunvP27THHLEh0VBdDOvUpAlQ+UViyQgnXfkHUXFUoEsfDQ\n0XJb84o/8EY2lPsvdnHuqHzgkNIEOQ1Gqyh1yhVTGhrvmODNmdKqxawbgzo5\nz5lAeJ679g3hN4ZtRrSd7/bLrGx26rbdVPIgFrf5HiGghwlSDO6xhLMa5tAo\nVrKGTZoVd8kfOCAk3MTch6/Jn/wyQC8zGdHh0mWnkBf+Awzrs4Z3oc9NZePD\njJH+rvmOGA5qr0LHmbqS1fkws0Nm/2Rx5ktDbh5pCC4snnW71LE49JQYn7ry\nCoL1Yxmst9qH9zYXSkQ3XpW9RjCkI7bOwMvfYn6If78jKjq4TJhvlAjKFJ0e\nkkfH/S4TxdXOz5h53nW7s6Nn9pCasd2ppCHW26hks7SBqcemR31/99x8VT6S\nWN/YNHlbPgWlbLSDBFSm5WCr1KxJ27WgJd3aTKjGc+WrAtZAtHgv9Un6XJWE\nNoiiHY1qAZp5vRmMOVqv/R+6Q6GCwsxelnytoyvNuPBsM983/7+D7duok8oH\nzxTlnIeCo27aphEt3u3RzKzumk5C0NL6D32gP616ajnJ7Lr6gRAjZWxngWkM\njJCv\r\n=ZUGY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.0ad12ed3c.0_1628717313178_0.1719387783814652","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/typography","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2105accac6cb3745db9bc0b659c8db1393a3cf6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.077dcfcfe.0.tgz","fileCount":22,"integrity":"sha512-gzoCvPXA2ZUN+TGurfd2qALScrrREZfghJSyXE9tkSzHKL1F4BKxTkIb3suq2wShEDCUU9NWZmMvC8ogVoNpEg==","signatures":[{"sig":"MEQCIEShU0fLzPIpEJTuEO19h4K5W2Yj9OGHVmAaa0M/A7MmAiAGiK0jM4F6G0ps4oH6znPMlxHzpJeALQ+gG3uFImyR+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWB3CRA9TVsSAnZWagAAKasP/3uWIGzqlA6xkqQ2wHxU\nl0I99x9/zwNDE6gKh6A38n2m8XoT3bCRaxvKyQZ3rztjsa3D6XD9VYj8sH5D\nzl7FmjQs2b22fvlHiAUVmR3l3UhG4FCDZXvOIs9tS6MfxeCemPDw0maJ0xvg\nw+S0d6YrQNRHkvbM9dGWeta813V91IRnMssiiuEA3tef7qBbONtD6+C3xwQ+\nLKwPtiwdwIWniGxhasF6pkT/4hv8JxNw4TEK1IwMGL1YVsz0u7l1Fu3q6jPx\nqLRa423G7pkNIdMo5nKrhW6ChOO0x5BEe15t/SHmkwTDhzeNf+gFYNqfjASE\ne3vR3VZcCog6BTP4Enwie/BxU52eiKDlztTn0R6hmTzBDbZGaQPDhv/EtHbG\n/IPVxstS8oRG+n5CDAfwCc3MQW13o0fhn5xqptjCDB9k8kK0rljbl2M1cu9t\nxXJIEqWUbZTXh4iWy9tFvawbkJ33zbXe5vdhwRQ2V4J2gG7rnHBiNyJtNYzY\nqJ7mXKpilsD1+DWJaVLEF3TUdXGnCk+totyZJzBc+JOXDnMQm40kjk6qUgKP\nLeeqqFKWEh3CZLTtgd1xQMuLg8U5ytsHHg8GVojxHVsRir4z7FvhSOi0t7Bn\nrfcQkt+PTRBy2jVHWpzbYoqyfIwJS51WBUz6qzJ0vLqo2qrZxg0diO0UquHH\n4ULZ\r\n=sbVz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.077dcfcfe.0_1628790903084_0.7839573182579904","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/typography","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.e3346766f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39fdae7640dd8d67c78f455c2178679b40547d46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.e3346766f.0.tgz","fileCount":22,"integrity":"sha512-2C+RTvjexOZdoq/bgGGv0AT89lU6EGGf814H4iKBD7ZaZYicnjROA1/RFjioicKWhoapDAX9vVk3leY9aAXVNw==","signatures":[{"sig":"MEQCIB6GOQvasA2iTDjXS4O4bL3TZNoxRVreBid2fjrWA3gJAiAqB9IoRcgRYumiW6v1ar9SdkTtzKBywMg1dqUoikZNuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsu+CRA9TVsSAnZWagAAyyYQAJLfukgok/gnxf31t79q\n2ETR2PwMH/Is+YSM96jOVhQBvoUqZldIM02IdfSlk2PBR7fR8kAMTTbg8HrX\ncf97HrZ5BxPUhVYFbJPIn58l944u+OkybNGFo6lrYEV55fPQdrS95auO3JH5\n4QZoQh4tqFzhYYtQfiT7L6V6PEIpz/oeSRnqvF60nipq5IGQVGi+DHRWoC18\n33Vvb/LZm+nTKIdJQ2IOqaJynbf7RQRenZqT1guBEJKaf7PUR5zSSdbEUBX5\nP+C8p/AEMhY/1hU2kDTIAQ5p/Tr7yLlfwmFdu5Tu0Jt6YDhriLQtQQv2+ad6\nj9G+K1/c9KAwPkBjuCkikw3lNFEW8wLAb17tInqCMrAWiAEt61OAdHGaJYDB\nlgx1DNQBYPnAs+fVvjeCncGHH/NFw9L/8/SzDDxilLRyL1gloSPOKmq3WGrf\nNsvJo+Z5raqMlLTBOyTtjZEGWDdHCq1DwDOpXdGMoLGe7FvxCEa90g3rRegv\nh50LZCM37cvua1eDqWIlJQ5OvyWfORaLpECTdivVHfQEs30EFEOYmTuto1ji\nrutw2FvP+lmzz609Uo5G5vlfQg/I6Gw281HfoPRjtXo1vtZbwdb90qy2V37Z\naGkpz27SEE+tW/q26O4J2Wjvy8jlsLL/LiMwXOeje1Ml+A2OXHW98ejPN/Jj\n8R0/\r\n=UqSq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.e3346766f.0_1628883901923_0.0374953343342721","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/typography","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be48d683afee847f304e2bb0ac12c871d4bf71aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.2fb068fb0.0.tgz","fileCount":22,"integrity":"sha512-mBVoxdq3NPUdsIZ6j/+vC3OftSh6xZR1H6JsnqT/P1TraVLjeTEOi15cLiZUhLh7+9zdbSyAEXwCyzX8qRqRsA==","signatures":[{"sig":"MEUCIBcOZDbuv1rDBS/sOqsKP8ZlvhpwigE8Cs4Mb4d+63RfAiEAgXMh4c7iBRDp0rG2OzjzWalBnrQkG6O8JwgVd7kzN6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsx/CRA9TVsSAnZWagAARAkQAIGFPA8R4hvp+41PPdI/\nZPpKF+MgotTFSUqaACIbO6xEP28ZaD1WmP4gc+Wocli7gn1ckfkrCkxWZSxi\n2lH7c0DU0nQbXTLoMf6VFcIVmhhlqqyCarF++yQgt54RdbAEWkRhu5pP3f8p\n0kIneMzpQPG/XqYZL92dcWwVYhEoO82QeMzdTzCmoLkSFrKCBkHzqay0CryU\nTwpYQ67JaNmx12tKJfqCon4UhaWzEXLfAjGpW6cTl63vkoJ7Ko1pfpTVRAj3\nKQEUDlXk/XCuMDici4kgAvl7akXmniU5OAwwe4JQ/vrPbHqq/WKYbtXfMor/\nn4poIGVvTjda8TlUscrKc2kbnwcdlElvL5F6chHtqVFMP8T/Vet4KyvQ8apQ\nrDG4Uc5GjfmQP0WnGGs9RzfBuCfG/Hd3bG4GMJw1VBGpS9Nkf0DRHINL4VjD\nCxBQtC9fnbb0IIYgKyVpq+F0R4ru2dsrmrUnsz7axsvISznPRtGJSRA0Xdl3\nAPH3nDu4GgfY+GeMtPnMXT9Th/Ia+dpncKvrKaTDz8yDsbO5icUX8oYNJmy4\nVwmz5Z6MX9PG12ZSwWfsxw5ABWPh5UcF9/E7XX+53WZ4dtWS8+aE8SthVMyw\nHo5Tafsr7IiMB+adSXOQPV2YixNl4GE93MP5+tRDe4MsrVZl9zHg1cjS0y9H\nvv6o\r\n=5mZj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.2fb068fb0.0_1628884095298_0.9422598684159369","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/typography","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8454483df3cc19002381db1401a797718636b456","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.fb76c5069.0.tgz","fileCount":22,"integrity":"sha512-U4w5FIWmQ6s73J/H+G2mE2NLc0PRTGEpGzmjVMj6NkcW1pdqDqz/Hcj6sHXfMmbsqxb2c19p2+1kcHP9ajyd1w==","signatures":[{"sig":"MEQCIES648vu7/U+KBcUM/Sue6Bpm/9lslxfzLyoTDgr+AqyAiADnfUb1Xig+rlPU8qLe9Mz0Bg5yXmuTtVVdXiZ3NUvJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWYCRA9TVsSAnZWagAAKpQP/R+zSQYqtEclKdn6KeOR\nDEWn0llysaT+Gicr8XXCNSBOYgV+/CNt2b6aoEQZ9gEkZdphcgtZw9+eMvk+\nHv4hXAsYyw4Qdcg2UEnlM2Ve1+El+x4aQepOdU6/c27fUc33W4o+RjGr8v/f\nFZzmtWuzSntDLD5sml/W9DVtWwkC/nwiVu2BpXqMHsJbBoCE4owfl2UB1eIi\nYoXhM/Z4qf4Lewl3HBbE1JP5lCeWamdm2nOGqVikbAj3UCi5ELgxkM0Aopl1\nXcjAv2uAOH3aUG5i9Y2mLCfrifZFKHDXv1Z9OmSdpQVf41UoRuJIzUIo55u8\n+Mt0atao+uClFT1B3CY6vRk/5nTzSjkwohwQ6WVux+HDNIGHKb1+XJnXzUcZ\nKg3BWHpL11vmfWNoMKgGScDmP6vz+fZKrZpLywYGW5k04PCrdgM4oZSi9Pkn\naHWJMhl9+lJQxnCsnIhoK0wBHpHzdoQDDHDuUUVELOl+8yKwiNvN+7uFbeut\nMJnsZHYBbk2tEN/dJLVltY1a8uzRUIloOXJm7+/iUX7GGsjg57cbBB5X3zXc\nQj1cwiCpFIyG2TNa5AkHyot3tffMFOx5hOh9HY3JAlafg9oSkGz/7ux/exCd\nHWUAWy9e2UIaeSpDsd/FYU9KhgtyXV7Qd1pEGW8NXpHn/qK45p+j3Bb+pLVu\nD6rm\r\n=QcQn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.fb76c5069.0_1629144472412_0.08761605319723054","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/typography","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.457d89aad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30be82f8f48e04bfad89d5f48b8d812400465f35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.457d89aad.0.tgz","fileCount":22,"integrity":"sha512-HKKELQL7X1dKEcDx+JpIfqiD+VH1E2NGVh8wTufsleoQdtGq3caBRTXob0lN01IikGW9rOzmnHFkWWrPIpfFWw==","signatures":[{"sig":"MEQCIGFw70Ts8snk96pZ/80rIbXFem1vLxiG5lGTwscQ/5iLAiBUOD/5GIOoCuYbdz4d8Jxh7gQRvwPIpweXbHSBcH2sHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9P+CRA9TVsSAnZWagAAF44P/j5KeoPcMqb5NWnem+iu\nCzUDYNzWDhC2Ca1JrI7EBP+X42Z6lqp9kKor40ANGDyZ7VQQjKVCCyGpZw5o\nYc9zWiWOF16Bzp6QzEgzcy3ZnCjRmB6DUVdWSrGE8QfxvFxsEciyEcKAZE77\nQUTzYwpjdOFTfUNiAVe2Ecl2nI8fdchFzTaIudGZzVD9sIiNA4Yt2s8Bu/Hm\nSzpO2oKqyc3qoazGtyON+Yv7ftUR8R89yNafK+spFzIbL5N1BAx11RazHIdT\nF71ykxE3aJA9N6Lp6f1kTsid0kb04rBhiczLtRdKmTodURuLIqNMaetzPaUW\nKWVwfBJcqhHXcGmp6HjcFBafrxzF+0LCD+EmrRWU4TUmD8h+U3oYNWklb2l8\n68go0Tu4CSpXRAnHlTboywUG5rI9x4wz0kQUOZd2Mj3Pir/Jmud3xXjdnUaH\nVGCpK+9FGIGDwVl9DJCsvlLHzUmeHO8wz6ofGvVE4Xp1TVfLf9I3qz/yptTs\nGhEjt14i44OtJSVvbs2umdxu5Zs6zMjEuPjL8XrCPDUx0RceNqRL8+eeNdMZ\niBEMfVbj6dvYkQu/kYvjvn1IG2TYIdpfLDD1LAlLSr+57/lmWLW67i/caNGb\nRpWtWe2a/dPyW7wiowTVka7ajDyVVz6UwcjiHlJFUMMebJIEKnMkxG/SX2PK\nNQAB\r\n=0B9b\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.457d89aad.0_1629213693873_0.2608480676348086","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/typography","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6da4b8798811b51dce69eeb14ae5554f460e1d34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.0de2f2edc.0.tgz","fileCount":22,"integrity":"sha512-AO3sWlR1qN224TQwaRDD31zah7aQzQxmm55QD9VV4e7LaKjGtI+2kPHRkVDuTPuJRLHGQseLReuxH+moKV12PQ==","signatures":[{"sig":"MEUCIQCjDMtK25gurauwSc947YJWRgUGVpUwyTeHqmmRtUxZiwIgL1fxBO3OA/TkDxF0Hwqjw6qs73uW1zRLGQVsSnWcYw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCHmCRA9TVsSAnZWagAAFFcQAKFNPXiHoFQAJvDvvb8j\nRu5Dixt9Zc/Q+UUBA7xnlsav+bcmoK8RPcmn3gzHYiHUaJMaDyEesOeRIqOK\nv/AfXfiJ19uXLlYc0y8uJ//9nf8JvlQtEss7U+f62FPDMcdLBprR8CfUg8f8\nzAz4OaTRZWXudOdce/WHXiRgRjygKL0VnaQKIOuxaQu72IIFwvjTOQwNZHxo\nHXFQxjIyM+LJdGmOdYxOx+dBeXPv56q1qwTjJrdKfCoLeeuwQv3Og3IRP5TN\nxOHb8xtkxrpNdZwyx3pluHatxGyLwe2wpIj9hgYGoCXqma4BIDGSTyHsVrUw\na3GRv9ms8JbAF2gNwbMoayEYKfSw8zvAawPOiX7Y5wbrZEX8B7kp5idxk+/a\nkkuEZ55lB1FTJTShr3UomctfaO+cHDfcV6iDVA0WUn6d8UQ8q99EMVE2Wvb9\nOjydN30ovnUFipeBbhsyJTbk8FXRofbdpLyAbkliBHjYTmhpUzXos1HLts1q\nOdiF1raQ0Z143Ic1PRHQq1sMJ90ltr0JBoa2JjUSxPDA1L8lhpiVwZLgRit0\nhgxb/sytag3A8NeOy/r+Sn5D3cJi7o5Sord7egm6Ev8Ie1to3PkoB6EFT1P1\nzhkUKTvmW38GmEbHCyhgYN3whzYxiLAh/wbRSrW59fErmiM+X4BhIOxhi006\njEuQ\r\n=qMWo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.0de2f2edc.0_1629233637899_0.4174418358071097","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/typography","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"914eec1c19c643d3e18195210dd0795858f680ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.1f9259b9d.0.tgz","fileCount":22,"integrity":"sha512-itNlNHxR2uRTz+7E++21Aubv1hgd7WpGfvgS/cPiDfjR8uoCErweL3xE96q0i7Q/9nssWdrW3QH0X3CpPEBDbw==","signatures":[{"sig":"MEUCIEkWFo0dnCAohSRGTUv9xEToKI+Y/nixk/cZqD9DYTNRAiEA3oDiFa9CYSpoqDt7CXP09aRPgnB7FrUgfOXhgHVbEcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDSiCRA9TVsSAnZWagAA1lgP/jbFdRaPwNM/6Zph0ZWr\n15TggTWYPGzZ1W50trO8azEym8H+TtU7eBfDH4zlN7nKcRxpf/vnVdW//E6E\nXJ38BDdu1e+pYtfp8+L3pxZy+r0TRsAXzapQ5eiPdVKAVUtwuNMqwKkTebWc\nNhGRfIdva7pPK8xgdq8bLWThMl5zCLtSAe5e9gnGfk6UW05UI/h6lLwgy1cz\nQiAjjaDcRJnmz1Re6pMDYMTh5ntXmnuogOFX52fhmsN3g/XWHP1qy+hY2YlL\nmPo3YEMDmJ9nfYqVDyhETydz2Gx6Wf9i0AWxfhpan5ByPXMALTtTIfCKDB4p\njyDHsZz2ntrANSRSw8VJ92lA8g2Vewbv5N9Ii9iToSzdhss9dUc6sw1y/NaR\nywnG4+7gNTgyWoe9hM6qxlYL51qxOCxDG8LbQYwWlkO8VJelbOF9WA9p5IFs\nYKccDPMS6VydfQGh3ZejMjVPTD9eIbzyRk9RWjn5j0XJYoTp9fa1vvjvfUeo\n4RGgU1fWlNAIYMHvCcOBr9ct3D8FSF99JuAYCchNF+3I7mdEPQJMbHhbms5t\nUPDMLF/kHwPjZhMqZE8mg+llF6i32+b18vNw+MJyB//ezxbrj4yNgkXYINSa\nExPsilbvrYXkD8u8abO7pw+/1kNCqX4v6UbnQT3XMZVEFzjKgGyQwFsCjPp4\nBkRl\r\n=ToT9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.1f9259b9d.0_1629238433839_0.23240303642399374","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/typography","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.3b9290351.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c697c0c1043000e46e96e47d215cbb185fa5090","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.3b9290351.0.tgz","fileCount":22,"integrity":"sha512-ydH6NZ/jPmYrAflZyXOOVQzZYJqO+plAT0x+l4ZcNgqMtC3YsLff5jIAP5Gi0KUXgwaU2RB+IbXnRWcFJasnEA==","signatures":[{"sig":"MEYCIQCwmcm95l1Mbgk6XD3lnaPV4vNlJnWGGNynh66XgDeDMAIhAOPjjEx88/QfwRZ73uDbeMI0mQqJq4eZyCZu3KOsh6nX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlICRA9TVsSAnZWagAAfB8QAJGRB9/leXvlD2hPZI9u\nZs12OzFW50wCYHrTCp3p+pOYw5d1ORgdDE59Sy8G+e4xJg1tkICsoX/H4owp\nOID7LqFsW4p0pbUTEQu7N1tdEeDO00RaINgC9VServoDOLD6YXEKBZ4EcCrx\n2Kks675T6od+vjpDvjNNnM+vWoLjImEEEDdqrJxgU2ezBviUUcKAPEZ7wNEj\nwc1s/bCionJMTkFyIY6oRvRmIB5T9XEklzuvAm5sgD7OvnJ6K2il0ZEW1Iac\nv6Vkvedf923YwLIWUE5yyPntMwAciQwxHIeGVvBEjZ5ueg93opLs4kQ1vk+W\n4O86DqtG1eMSzoWWIsVVN5CqXku4Axz7aijTr0W/R29RJrOWuU2i2IZWVOjB\n1UyERtZQhtSXk8AioAM4nLX5P3dlcSjrIt1NLQjmJ+KWNvnzQMcLl4AfexB3\nswt1JF5OYwmr5JN5vqGNdmguqYkONsQ2v1n4sdWV/8qmYFFbVIL/5fjXD04F\natCdUwqroTkLY455mxcBzx2ytzKceFoXtkim45VSfGugueuffELcmmj1BTIm\nGxSvq4EqpaZ0Sp5jnjK04xpmYvrLo60LHb4HE9RhiP0e5gq5PK4WmXOljPde\n9XfgmrCgupqazoP+KvOqDziL0Z2mMKxlRM+XEAs2yEbOsV5t6G15eGBi5EtC\n+foS\r\n=Vswq\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.3b9290351.0_1629264200844_0.16794307386441565","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/typography","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1f6a7cc782ea96a352e9d9285f20a2ab3574a92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.43d2eed2a.0.tgz","fileCount":22,"integrity":"sha512-7h/CDmlP0VQ2NRom8G3CEhAICrbIrz2WwwqEzJfWo6jiKPwEXw/BVnevrW8foC0QEjFTGmTIEt6NgG2pKEoyyQ==","signatures":[{"sig":"MEQCIE0myur6x8OUHu+vytVUsdmSY1asucO+qM1+H8uyC6bXAiB4DemXJ3JRELKzrmeDZayqbQ0zkrLZJUe6TovDEH9UZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS73CRA9TVsSAnZWagAA25IP/2MM7QQq6iMteNR0MKJK\ni/nhlBYcYYyEaXQEiJfnTd+ctUYjYXEIsbiCyQFo9XfqstjTcureaRUh5iAP\n/bgmGarUVOHqxFIOC/tOkkkp2JhmyDSOufEtwN6lo4yTxFCn51suPFOZ2eOY\nQX/RhAwPrugp2FOTURFuX0YWLMQ7/0hONZ5hkFd+VnMR6Wv0qHn4gPAbh0bE\n3DDyICq77js7b9wpBhdVz5MyBuiL/YjJ20Fhe/XRoeCTQ/NBGqMuZWny4yaT\nd+CerxUjS/jdGP0CSAXZKI7/IV+XfSFdPQNYTu9sWOYGIzAcCNDsGkiCjnYU\nw8KWQ7535UTHiUAGz45vxhnVNsoyKsb5U+SfEuaFPyEXpjzWG5THC6cAzpVe\nk0Hh2W/QKOUNST2tIL6FpLGuF9lLTnU08Ca4UyuoiKu6fgFM+MC6wIqfXBAR\nmdzPukexjNKUWkp27saIdudJ2uD2hlt9AG0C6/G6/OfiwGOG1oRYfbyDtZDP\ny4fn8uJWPjKH9cu9cUXjp8U8YTyjUe9P8AOktujh7hNxeyS2xpNYkL+t2prE\nMYPxH3GiJgqTm89ZcAWfYnB0Hb/zs4CziybkQvSAk3o31TIGK3IpwJARJBed\nRZFHdP9mgIKBukfjgHEB2+g1hDbJ170hD/PDUp8UiWj6TU/H50NjKVVgf2Qe\npnXA\r\n=hOnS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.43d2eed2a.0_1629302519151_0.3023563392661386","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/typography","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.0a9069300.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb39652f597119fd63fe16996bf38443d37cd8de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.0a9069300.0.tgz","fileCount":22,"integrity":"sha512-VzZE4liOiE31+FekXd1G5g4ebqGzIy11vkJknNr2sgdeLrUdlyXPIS++5UOEGmzNAkonYl5GgbcOU9018dsBUQ==","signatures":[{"sig":"MEUCIBe1PAfVTEnCjGSo//9K3k/1C4NdDg7H9w2vJWX61EgMAiEArorpuWi4a3xLMmCpGsxje+zqkBG58enJ7ncuWCG0swQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQTCRA9TVsSAnZWagAANH8P/j99YQ8DG/fmFBdE4M00\nU2aX6xr2gBbf25fpQ/ucmIi4YGCdgH54Hfy21cSd7TqM0q0/GR+pZHzKG2TL\ntbkE8P7i471SdnPkMD3uGrnGLLzcDGtGDoMFW4F9/Ohg182Mol7gO1l6Ydob\nX6ot7S2XxOx5YXp+PKLfim3IneXt0vNyC2G/gKK/RUw40pZnHpcxjp1HlnTd\nQn/0xvsNr6c8FetGcfkuJSyG4h/BWRDaeCLaySHlu9OU1hY2+xnvQ5nbRYNo\nfsfxEbXmOGI8XgwkqsRs5jBGLYE/A3LEDQuPwKOZ8/Up72zgtrURdw85A0d4\nszqWoKGmpMKTQHdyhDSq+rUCyUDum8+EAD7reAVK8HK/PkItwhrqeFRcMKR5\n3OUqlZmIa1UbF+Zgcqv3X6ytwVvAKqNFaDZosz51NxGL6rfGJc0pc3nzALq4\nbJ0ieLN9R2JHLU8KiAFkTWGNubNHudJPjvGGt9wKSOK9MvPv2a4dFM3YAg0M\nn7PQ2a6AxTbSFIz0Vhs51h8KTW4sYWta3/WH/OT5tBrK7WBnZCU9YAsYhY1g\nvBPukQYs9mtywj2qZhxa9bF2cfUe5R64n+BNWNvg0aUYPOld5npGXgN5QPgE\npg7N001Hc8GrDiPjb4QyHcmm8+uOrCnemNbgCIn1mxB1huYCFILwj82/XnFK\nwr5K\r\n=Y3X2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.0a9069300.0_1629389843105_0.0608621467722521","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/typography","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399b5eccf6b49b6822ad26e7ecbb90fb3264b90f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.7da413ed8.0.tgz","fileCount":22,"integrity":"sha512-TGKKah/25F4gECYd1Re6h/o/VvAAkyYMkpm8CEwO+xIky3VRQq4qdY4KI+P4YK3hd1koP1WJpNeidhVkX5Yxyg==","signatures":[{"sig":"MEQCICRuqsBRY2pVzZl7VlZcc71eeoxpccNrGzlLrM8rfO6RAiBXqoP5bh2la6+IA0t2HZK5uHr5E53FWlfLYJWGPNX0VA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87HCRA9TVsSAnZWagAAwcgP/jnlj31hPl0AjfBaPmwE\n/LCSl9aBWmVQVrVarFxtXOSwZJtCRc4LWohOWtrq0hNBP+yjoZjFbTU5S+OX\npHsxzjUPpbLhxex6XnCbdLwDZ7T1rmim1y+dNNmtz0u7znu6a+6stHsFqOvM\nhZJy3gYZJF4I25Ip+aGT+2VYDYHOAvI4DqTlzFg+Q2vqVADstSv+vvn/ujMH\naRrVmR1ZyzS7V0BhPl60dpFXXUCv/EZD2kFbNZhuhaQIVEWFKKKFlR3embwS\nVyVnHfO85m+ta0ryiVWauMphV7AaDPjtZLDRwK49/+SaT+huNJag6mpNitHA\nEVb4gQAhx6zMI+WscK+KsEalGS1yVtN/ObICOtWj4Qh/b7eq0/eUFPFitrVn\nQCpNdCfomVumVanX6Q/b3egZfJO7jgNcd8VlhfzYJ3qkOCLnRGNMsPkdKmJJ\nKUhBrPq/9LD5jFHkJzkZZWawRbawYQlA7jAo8PgBFdS/X0gSq5QPuKJkr5Ot\n3hlU+s0J9HBxCdaQXxNY7NGy51T2yFc0cSFFlFKCNm0xCUf3emptrHtN4xoT\nQGGBtI89PAK3QW+2M6nfmj7/90izvCOXBNnEmvdhYE31hI12Nmrqsiwp5pof\n8DJW5OB1rCDiPcoUGQ27yXiWMZTiiomYFZx94Xd/Tri65vapJYrWhOYvjA90\npvfg\r\n=l7HF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.7da413ed8.0_1629474503449_0.9356556112175676","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/typography","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18137a0967d7362ebe6abfc1000f6b645f6c3f18","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":22,"integrity":"sha512-793Vb/oo2voxAGGqvYc1e/wtR8z92NA06iHMSYfaTk7r12U2UtsEvLV+PJH5iwLss4wQjKQTDQWVRCcnrlxPTA==","signatures":[{"sig":"MEYCIQCI5qVf5r+yUDHyiD/9lJfER5kWXeps30PzC/HRHIjuAQIhALtYA/Hz+1QuBtXqgKrAH+MXYle/3CKKta0nz03wkZ8O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAM0CRA9TVsSAnZWagAAq20P/0/51NwzAHpH7yz98RZw\nVqAHg4aJuPsKTpCbdcGew5Je2nnlIy4iDvwQiq3tfb/8hnlmPkTdFHuTFCOC\nzyavgQT3gzj8uuGAJ9LuAeVa4miTXCraVyvEv3QJbNx0qVOhxEegRL9HFa81\ndscJSVWlIW/U977XfHPWm63B4VyIwUlucpf7bcFEAF4TkTbU1ltA+TuEaj/Y\nxx1Mo5dCLVi3S4o+PgWEATY+uFgqyaMD+sGE/qgvND5c7iDcWl5EsGWAU6N1\n6rehH1+56Z7GIzbT8P4tK9ToxoGZ6d5oIBpTEC7GYs18sfI3vYKcDchcOobF\nhhTLR5Ide4aaosaZsNRLmuX/PCRvOmkK3QpthWYi1dxMYrdnnaYbCC6OWe2Y\nHbHBtOr7NF5032PprnNLu+trB+br6ddgC2xbC4OTuTrP2aFVRMJOrP5U8vWb\nOTOhb6x4/Qp9mmEbiECJFYq9m+HRiBjWm7iLxgMsz0ZjcNfT7Q+p/gbQGTBv\nywmZjjEWnGF3sAmBOeu0CtnRhAnPdQzsqEqwTxeay7eitoZGhXqvf9eHTU95\ni1OBJKA/HWSPUqs85YvLKiOk4KTw2jAdnt9C+eaRLzI+ndHuFXQCZxQvZUsb\nA8bBtLxR1qMT5t7aiXxF6SUFTUNQiWRI7dd+OTirXdb9UxW+5FE7FOCkPxe0\nC7kG\r\n=FCMs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.e1e69fd8e.0_1629487924469_0.1735870915708586","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/typography","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e8b3e4cae445dfaba97e371fdbe639849aaff4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.f5afc16df.0.tgz","fileCount":22,"integrity":"sha512-rzxx50arcn6lraYTxQkuoTJYKrs8zC6U1JK6KL1iHb0l0Tx9EfTFfY3xu2YCBJlEpj3o845gyHZGr6iDdeSPqA==","signatures":[{"sig":"MEYCIQDfyAxOAcQ+VruTGFxQ17udFdkUqF1b+ohtuUBgcRQulQIhAI4llEFJvbS3q0r5TyIhsq9Wkz6kU0uLUbZ3LZqvI79h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIA/xCRA9TVsSAnZWagAAXygP/0GXn9c6PNYtQqRsy84m\nXE7xvScJhg2TWpgKlYukSAwtCrYjlcAVP3EAVD4m9/NQlb7mtgjQV15Jul3/\nPW7Dk5kuGzuv3meC/uYklMsPGiwHKFZG2h1WJk7nLd7nvsIt/47lqlnypioy\na9vd3XkKqwKbDg301VQYf7OmeYzGxjcxttaQqZTk4e4C0OLV+fW40WCcPDI9\nwGRPtFmO/53zd21nNtKrEQyfiyOZ2Ic0ysW+KGd/wcE45EZ72o38uLPRjAlu\nYfWOFYTC2K0j72QLpN5NlX/VXAn5F5FEE3nOUaEw3cQD1+0VOJIPr3vNY9Ad\nuo0vAHWKb1zhmVJA6keIbIVnnz7fTzfFOwAFLJys25U8bp7/G0LZ61xvqUfT\neGlFHGLKRB2uMnVQLLyHUZWr5b6fXTjgkZFACxG3BR170As3SMwVXSWq+ESZ\ncAu8o5VJPEMhsRnf1rXdewSeqoET2HCFyinOo1mNjd1Tq0zJ6LG3YPJ8xyq0\n4Pe/Rmqoo7PFRgH9kwU2VoGN3fKpOj7fCY82CI4+/GjDsoOOl1KEM4Gg+1R4\nfGHBvlgfAJI/WB/8vGhcqVZpGk8L/8Dt6j6dx4MZvvBiLC0UStWiABQ2Xcwg\nJTKvpDwaOC8wEMx/RLIE6wgzMtdYBYDyi8xV7Wf6hYpmDuQKu2je+BPqZpya\nTuH/\r\n=R8Wg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.f5afc16df.0_1629491185479_0.49887516292697787","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/typography","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15473c037eec81b2e1052f0674ef668d6f1532f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.28d0d75bb.0.tgz","fileCount":22,"integrity":"sha512-88+uVZATGeB2+7Zqg/RRCTyUb2hC3RzHakZq2+BZbitcRaaHtJh6oytSYv8VrgdXP/ZdvfcCyNRc0kB2gqBMIw==","signatures":[{"sig":"MEQCICunt14a4yJ5OpLwSGP6voXxsK6LVlfUF190f3dXTuF/AiA9/T6QJ/uj6VCXXVrXNJobWCbKRDOdSOJi6IGoXeM2tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqaCRA9TVsSAnZWagAAKIIP/2cEDuB9+2KYWGn6XEUt\nasxDwG/zNwnscNPccLv1uGyKCmdDcNCqmn4fKqsWs8vuexS/qsaGYp84dZzJ\n3kXoNau2pEnRmNeQ8l/n9nKODz6RUOkts6RPDEduHI++mT1np11Qsz9oqZRk\ncKsp0mi8HN0LyxgP+zPreDuOfEaQB8TbN2D7P1RDb4gQAYVVPMWSMqiagIie\n0y/hadeL0YRzySu1Tq1pxlcUSvGZf/yVM4oU8tGJCXZjnJlwB7j3u37uI6kf\nejFVMR1/qqovU7nG3nGT6NtaKrFHBJZTfuFQHZA3i+RrChbehIhinbyrHx7x\n9tSRKq9QhIXISD1CswJflE9Hkc4T5wl3SZ8KasWj8yYjL43JHOg017VD9eeW\nMpBMRsbLF7wm60Wg3Tkpf2Vtv8p2Im+KAxn78aOoHc/898rH0K1pEh+o6gs7\nCy0qtKD3BxB5ehA5mu87V2kl+GE6C7WKRsvPDtub52duJDLMZQ2s/KEgCXK6\n6DqsMgA8YunvKppoN4/Al9FYOkRyo4vaHcx8X+cVkN6HUjgkhSkXBG9jM/k8\nxEBD6/PVBPzNbdYh+TlCH6qtnIQHAen7fnA4nS6dJ5BAY7GLWo3mit+tiCKy\nmjJaYb9Zds7vapzTvmp61iAWDWXqTnbDgKd8a0KxOQt9q22OWVrm5Wh4ktrf\ni/GM\r\n=BbYh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.28d0d75bb.0_1629498010296_0.23373243038139124","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/typography","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.21ece5360.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"121f090c910b4b6295889a5b1d27b192c1ca1976","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.21ece5360.0.tgz","fileCount":22,"integrity":"sha512-Zd34yNXgaZoMBesUtv9haU6odAQ0JriIfqWcAdFjo/SXtY6yMQNKalCOB9a0IyW+OYWeQRd/EX2yFxcLweGYxw==","signatures":[{"sig":"MEYCIQD60ycgd06nTyc86CazzAlsWGgbxX2ooBtlD81H3gDj0QIhAMxvropxKIFQqeDXHh8+g3xyzw79GtIRvCpKbpEUEBQW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5BCRA9TVsSAnZWagAAQb4P/joY469t1Niu8owoB/d3\nBFF7b54hCU2oQwctroAwgs4Aedu+CPvCUWmkabWHeegpGGk1SAFyA/LdGmSb\nWOvX/OczOvaNEEFM/C+dcw9nG3hYxW81D3WkREw0CYY/QKwDXdnfX0VWfYxE\n5N/5wLKD05IHd1kIEQEKyVJXW9ntAdBJKGO+lRuz0tVHEYIzSJeMQUdgsO7H\nGXgHZQrehiFNzGRSnhBtfxu4RFQaCCjnK2Bh9htWyE0scYaLPCv6bF0AHwZW\nKE6SQVDkZnBwHPN4l9SRVk4G7kwxi2k/AbRjprfY6ytBkqyDejVoFLXp9xb1\nNY5jQwxo6dkjG2NolvWfBgoImYcrzvp3JT7TVLJGboNOC0xnBCZFccYk7GBq\n+TvwNtLrl33LqmC6h8pR+Jjt6J0KDDe4+XO3+xlE1wrcJARJ7uWzhNZyokKg\nMU8Z9Krj/dmMnNevKt+6lA5ugbExZ52/ZmIWMap3g4fDxN9JJ+W/sig2n/0e\njN/vXYwNSrKe2asrV/8YtKFyKCZFxSvMVAUyVNQrnO77VgKrDsY+x7IOohTU\nIMlMq+aaVHZ7WWP5Jx/B9DVOGLymkLxOY3M2Krb3Svn+GTW9qrzpKGbWWmuC\nrjUnfvmy2HO/fbt7feDoL+1BG0LdAmOVSb8VesrIQeuiyEHxYEU18mDmbCAq\nnppS\r\n=WcN9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.21ece5360.0_1629503041566_0.707867044572636","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/typography","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eca6b86e10c7bd45b1ab8ae49f5c7e4afd07ee8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.8de07c02a.0.tgz","fileCount":22,"integrity":"sha512-oVJho6F51lVPO4rPkJamWT46ZqMgvQ7ZlxOvUQlkzg5CG3WQGK2zvkUF2/jGCCIz419n+BzxkTpMJvqdSic8nQ==","signatures":[{"sig":"MEYCIQCcYa8LYP+/uVpq0S1aqZhFxCV5mYx67aeFCTyyoUWDTQIhAMnFsQzIFsmpJGJqctrN+mjsB2UrMMBMPwhWOcfeh8Dh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74kCRA9TVsSAnZWagAA7uYP/1/piruLb1FVNZtyuLwS\nviWa55tQRvPvoI/5FWOO5JW4n3ZXWTcRqR5o6Czica1nAYmvmai6ZN0gBFrV\n8Xcsp6cMPjvqSoP1up2vAcyXZ6T0POnWlIhiF3f8VrwCLFDDOn7XJp4VAAMX\nHU3il8ISNYoCM8xRmyncBevhv66NOzwGAq/ShF3sNGkklEa53zjowxh40F8P\nALEQTtWwKhPUG4zXK1TKnwRS5SEKA2oaV9/nI5+M+MJgAhwipz+XieGzZ80G\nbXgyRMxOXNSBeoGcHgetGlM2rqAOumxv9cRazAaBXwvnIfq4XFhyGKkJbR5v\nZ900uy4G094ErcNZ3XBWVoi7vnNRm4i+sVhnvTKWl40dLMHO7pxp4zlvJTkg\n347xoQOIyZt1Btb5udMSq/chgdOQ2FufBANOfbyeaPMy5u0VAmQWjrB0zivX\n8OaLv9XzGHpvZXRnJLI1i3VyiDo+Jd2F7EdYIWSb6Uy7KQOAD7okNJZxOKoL\nsiZbOKTyIsiHBgtfyE5GowZwfj/moSDCHrNqVukZHEjotOmAvZ0tyMBXnoQd\nIzOhAqcTOwUgmNNhrsoQ4sHW6zTqP5D4dJiZyYivRGG16mTg649fl1NzEclQ\nUvcaYBMR4sPaZRL56VddrKBQgTcStbuD++71dcmo57A4HBfijAaICPtYWVpL\n636o\r\n=jyx5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.8de07c02a.0_1629732387795_0.4191231405611646","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/typography","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ec3c413ee5f61cbac8967f7f066488e7e5a7b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.65aa63b0c.0.tgz","fileCount":22,"integrity":"sha512-nwl6s55DIwGIWBabYb7u1qruZWPuP6bCBgdpYQ5yilLIiSx7/jQpxRPlZqr442zPiUDrL6EHMX0jWGVHF+Kblg==","signatures":[{"sig":"MEUCIQDqkAHotx/bwKwdKHSopdlgvUD+hQwAuFB36eD+QvrueAIgP5MlHBXgKe1eQrtNQX/ruQEfb344rYvXz+xLVgoJgko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAVCRA9TVsSAnZWagAAmaIQAI7GEFH+HXAUM51icfBL\ndwGbllmTZ13KZX2Yiw4EPigBxV26jdDypWvG9IBRxMU0ajXQs2EeKtKXcoWL\nZVaTw2izvRp7REeu6uA76CEXKtO7OyXXl+rW3h5a4xb27+NlFLhR/XY55QEf\nH9uXLYxnWdNadnKEKbNyZSN+D6jn6Znd0lT/fl9AOeoeV84EVAtFHQVUWFkJ\ntt0UlJjoV9klHz069wOBv6Lrv5HGf/tfRsxMZpkiJRXNfl4KA1k5tBNW0elR\nuDXMtuUxXjT3TJ7awJm23ht8FTbf5IH9MVr9DcDzpemxzQSNwh3dmZuUDzTH\nZ24rUo00dZ3AiJ7M9oU69XHnpPmci7YEurj7tbqmgWVmaaTtgj/bYSbM/BQY\noPWg66qKKMq7vaS7js9lrZqoX8kiW/1a8oqkpAC5t5u/IJGH6NjWqwd0euU/\n/39StTGS8v9lF0CsRI/0vXkEo3qY+HO8Q56KZgVmHpnt1oieEYT2jfskXReJ\ngcjULNxcQd5uUsaXwE6KK1d4IGdjlKlo2M1FEz8YP67KeV5madheMK2froAQ\npD5kpLAO1tQaUVImwCT+b54aGJ5zp+3H0/b7aZU9//xan9Cm6HamrehKQ983\n3oHpSG/WcggXN+biEDZqHe/vxllc40PfatFZLkr+tAsN04NbOOxShXIwHz7X\nw6Na\r\n=Hwzv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.65aa63b0c.0_1629818901309_0.7204956503543842","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/typography","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90d2ed6065b412a0c93cb5766df9b1a4fbcff853","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.15981e9d9.0.tgz","fileCount":22,"integrity":"sha512-Jlxqm0bmBcE0x2sytgcjgt6AdjToubUQe1l1gAuTYzB5kNt1GJCANG7c0ZIieea2GgEBs9QT+NOlMhO10o3fLQ==","signatures":[{"sig":"MEUCIQC8CkrzwpAHCoxKddD46jSknfc39q7MyKNRvc6xQypojgIgWaJJ6fzQm7wWjv3sYrqVCFW5+v6Ivmq+UacFpakU+VA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRt2CRA9TVsSAnZWagAAfbgP/3zaDIsGLFtw5kPuo8sC\nO7Wfbg1K8zKbDKMi7xrhQ9H1sbHxsGYrOgMltdSZKBwStKBQRcsotofnYwz8\nOEzxMcJVH+DtlQ56rx5SyoZ4JA0rHCeJqDdCiiHhg6QJrv+NuMpTP4+7mkZp\n54oEpBxeRb5xstGOLtKkTREEW7RJjjQ4h6TR3JYCCbkT6XiRbfslmiHgsqVJ\nkXKC46tKJFqPR8og7YOhxgWXBpAgLrpNCCZ1U+Upd9QIgRC+kI2VJxvkclXw\n68FuGLMJYnnnt+ZjszpG78PqtO6CpCn679fTAVcNP2Xj4QsZ3irqWSTPbJyq\nWK01wIMkaqgNAMcYArlB9ZAdEYC5jD0Jvyf0MAzmBVe8UqX8zUFCVEAmlJ+x\nN213EXKxJAdoaJ0g0rP5pmI6fVeF8fclZHh2cCDmIRrJkxx+mI16LEfUVnuV\np8o/ioXfWu8+HJyi5Fh0KEe8VrXAYpmJAkjmpO6xe3ofeZKTZOrZDZB40II5\ntDc4fhlrorPmuDJzEOJpG3ANjlEdqm1CaVcWU9jMVAo/LJDaXiAwKzwtEzTp\nT/pTa3R3KOhkhPzX/OlCFigazjPZjpOqpX/9oC9T0+gsUx61/cbtQHoOA85G\n2qDYqJuUavnLkRVdkYStUHVfHvLIppFX9QTgD7u3vQnSZR8RLX5FuOdQEhUC\n3Zbp\r\n=ymUL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.15981e9d9.0_1629821814485_0.7778361817693489","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/typography","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb5b8023eb1a8d57c52e333bd74ed51d3c8d158f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.fa7520f62.0.tgz","fileCount":22,"integrity":"sha512-DeTdBaFt4yNRqxNpFINFSKGTUZdm+HByMEYfvQXEw6ldYxQItc+4URgb9YTlnI+Aftvoz1GCsLE9nGzppIEu/Q==","signatures":[{"sig":"MEUCIQCEyjBFJQlvxFfUjk49h+DYxc5gKqR+HsvTIuM+Ng4nFQIgbFeqqkkf0jMJd1S8Xkx+h9Y4EtK7qnhFJeaZ0kGyj18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJdCRA9TVsSAnZWagAAtVUP/2tt52q5OIwx0qAY9ncO\n8+fmS4XME40V6+JpXkjvIEM5uxkSMvPGiXfPdzYvlPWWP2obXoGn9W4IJR2H\n/+Mer7tfWSXlvdIbOLWt6E9dqqIzhsX5Ts3vgcMUDgKjz+XV1rqnFmU8+nFa\nA9uwmw3zQhtLakYGamJzOKkGohNBVlR4ghn5KJ/ETzTfv3aCPs+sxcNgCMts\nrVdUY6zofuGrTESKWkrVxpmzNHgv7JMcRo3hhkZnmFj+uwWX8lI5W1aHaZ9S\nMqsEutTrtkumHXtHgQjfBKIirgJB2gBYao3aiUY2Q269jh7KCw0H+93pRhrA\nTf35HR5GJ6pcVYusmfnRbabvRJtUjvRHjNkRP2bCU2HW/5iodAR+i0eAHcnD\nhkNaRPCmcY9OK7X/7xXoYbUOG1tORK9gyyjIkWdRPKcQILK1si3LEVjlJu1i\ntnUMbX84TEEy59nJ/SfYizZKGrTHkjE9i9I7FxqNVQIz1APuEh22Fv3FzpkR\nB/XCI5Mr9i53xLspLcHqALqU7Os3I9vL1ZYPd+Dj1+quZSFgbbAsnH9XjTsq\nCA+fN+S/G50Zo2dYANZTNXdv53TYk7EqUOaACvnqS5oAYIQoJ1dD6r0wKoCf\nFbqNrovyAy2pVKYGajdjudSEn6Zppj7IRoHzhOCM6PL4ybDsQAKC9FcoBEug\nkJNO\r\n=slwy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.fa7520f62.0_1629844060944_0.7598383973975018","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/typography","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e14670396e667b1aad6cf320106eb6460f24777","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":22,"integrity":"sha512-Fkwi3G8IQ1NjLf9BgUnouIW2z4a6Wob1WC5dJehVFJSFDaJLyyEto51iWS/4GErqCx37kcBKmMmyehoSw86rJA==","signatures":[{"sig":"MEUCIQDO2BZPnvIX59g9h1HN3oV3whPK3q4bKFeIODJQ1WX8OAIgCpGpMXPA2WKTCTQirBVr2oYrQlcT33khObc16oZCd+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXcxCRA9TVsSAnZWagAAFWoP/idhs3wJfMa0DuK7PkL0\n9cVptuuF7TDPCpJaW6GoGM4w9tf0wpuWvlnLZo1t2uRsQi7vqecFUbSHqe+v\n3VVxhn2dErCWXsLa7mVQryDM0svdjha5ApuADYsYQLdG86QTYZYnJSfLJ6+r\nEHc8spy0v3B2AIK9b5vR9qB07DdukZj2qAfzXP33bAhJpU7s613H0OOWjV6/\nlwXbmb3EDQF4Nh3lZsZ6hoHHNwsloS6ycn3O6oTfoAFlZY3A+l7g33eOq0ej\n742BCr35xN1VPgwB+jnj/2drHexxnF9Ntr9ugMJlxVIBlRjvXza2iOG5nP4c\nZX3pirHceTYkzydEvlWhPsoEsoGWx92ZRBf+0hMxovDEjYzOKTyBhTLKg7xZ\nGRqqh7qTD8VvkuZ22tV1k2wOE/qUOTcOnRKwzXaCBDapj9qg0tGWJ4J7ynqk\nMTzR6WPjIrFcWbTPzQ8sBptUX8ZPYEyL3viAtpw5mF/95QL/ONZY0c6b59Of\nyzr2Udl/+pqlE2cej7IyYd9kKKaWx1zF/ndO19+aIz7rBZsg86+O/b8131jl\nSNDup15CgLyLI9Afa8ee23tu4OJCPFH42DFkbOUXZ1k5Vd9xuc/uLZlS+o6P\nCniSVJtUfQ8JFDJswf6fRa57NLfIqW85DUpX4DMyAdzkpBhVsO7dcn/NwFst\nqJQK\r\n=NuWr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.ce25bc3ec.0_1629845296980_0.20732379275939783","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/typography","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e0da9c2ea27564b2a8f65ba34632745aa3a4add","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.12f5622e1.0.tgz","fileCount":22,"integrity":"sha512-RDTZ2HPhuz5ylugIU1tYauDM3lB7zLP8JobQhCSyE1SzQ+6Rphdt3mnIU3GA2PxFxnPJclW/ooBf8Ep/YBBncg==","signatures":[{"sig":"MEUCIQDX8xYx2MyoduGSpjjvGCzYrVUy5y80UWi809EeqYDvDgIgZ7PFyI6tzYzw6wOqSctofa6cq8y7eOdKK1e5pYx/I7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX4mCRA9TVsSAnZWagAAv4QP/00K4otoBOh3NsD96CFf\nGzlstacp1qBbG6yu0nsxxtxpbNuZDsILsMyaMuOoBVeuHHavJr3LH47Wu+t0\nVFYxDIh64jRAAqFko+hN4NFXG+Dx/wo/krQJj4tQps5kXqHxb7I/3OU38iTB\nUWK02dTKsw6KEZ3w6kFPZ2BTc/Wh0RO9L01nWwbfnOOkDhrQzprA8Eny42O3\nHq0n8HM7p+RaZMbq9oK1o0O+G1cti3nmCZgmZkGnJbUyXGts9400EIax3RtQ\nptTHx6hxArQnk7CK93azM9fqj2LgDgX5/mQCWTReOuGe8lhIqnrYmcHwVWUL\nudq94E/UQ8rkmNmnq6aKIRDQ61OREtckW4lry7CScPeOfK4c5LrtIKcYXdg3\n0o/G/pGr/9lmDeoKzQf82M9+nW5Ztx4ZE7JJnOcYQci1SU+EV+Pr3vR3svKE\nQnqlXAwFIZLi7JFZXEtMmctIRyvSgd9CA0qIBsmhkFLiQ7nLruQYBSk8uPV1\nJYygU98J3KiXgW5dfw6nFBUOYxKNDpJdxYL3BOngJV2NjP+pgFOCi7wYukFe\nHVUr3VddW+vM1RXdDhB1EIBjda90cq4n5cEhLJirXxhsq97HTtQV26I7+DzK\nzI1iGMVIe4QJmKYO0rXq8GAQ1rTcIisLg60emwBQn0DYLpGIrcZL4fsZ2NrK\ndFvz\r\n=ZGBP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.12f5622e1.0_1629847077957_0.06431124454726356","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/typography","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9236c1373a89996e807e5bf754e9be2eadacf8dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d97f8f133.0.tgz","fileCount":22,"integrity":"sha512-e0MVBe+qktMLGMgkY3LJKrlavB8Z6LBHh8mt/HGUIHKzd59XEnYSzLhMcJ66WPB5OgbUnLpJKa/2D5WFoSq7XA==","signatures":[{"sig":"MEUCIACDC0eIP8V+g2z7IAfLW0tWJ5LngAY7P1X6HfnpTvPqAiEAxaW8JUmgXeWyE5zfcPbZdXEEf+MU4e1vqHdf64cxK94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozdCRA9TVsSAnZWagAAZSUP/iFKaXWXZ8jGc4FJ6D60\nuUa9dkImuvGtGHk1UEAkBts/gD/0tk4kBCmSq87cyK6XrZ+cIwhAn1Ej0DdN\nTfep/iP6z6AgwNmoybMUZ+U/3AqfMvq29rRH/fxXgrPT7egb0dQleJxSiF+U\nc2ZkNyDzG5V6fL5f9sYYSY1OOx4s/aabmyleykQ22q/Te7PxzUEAFVzF/sps\nXlX4jwn8wQpjUCa7DqGNjsaReda+ml8twsjB5ISntyWt3t4TiSolKegyLToO\nPTU11xMr1wVvY0MLh0tsCZ6jv0Y3h54TTXTQVLC2HiK82dCoj7BgKh5zJ5qw\nyejTycU2osPhxyCPeF1BDThFjFsccLddZpLzalGHvIQQpRQ9tmXMRVfMavFD\nst/dGNOokn8HPaEBaETCRy3WmcZvPneCvNgljKNTh7vTNdXaH7iub1tagass\na7IJXuvPzBq9yZRaMS0jOxqMBQXopftvpFL65Y4orYvZ414siNjqNdmhWAas\n0WQIfG/IRpwK7NJTW/ZdaWV5JLIPP1pv9mxnCOpbPsPhcfr1QiLg7TQ9VfQE\nWJlk5uqmCXddLV/eBWF2TdBI6YugkKYyn0avkYtXdjkDp82uxLYqjduRY4+j\n6FFILyKB4+m2jFAu+bvgLO5IW5AoyTcwOmdL48Xk9cwufjwJ2Hur5nMslFj5\nRSK5\r\n=Pp/x\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d97f8f133.0_1629916380970_0.6007926665120085","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/typography","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71f6d306f7b6ea351142fe175bd09e5815b1b6a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d86fb6fac.0.tgz","fileCount":22,"integrity":"sha512-5YOC26uNBPKlZ5+3f+GQmDpN9TNEJrbuSdKAI0humCnZMLHfGgux7fKcytxQR4tLTI0HzL/G7XWX+YQ531TVYg==","signatures":[{"sig":"MEUCIGvzMv/ZA42phogDETyHpTRg/dfWWfbwBvdiU0G94+6IAiEAt9qKXQkm08jJlyCcwAhD1Ln0ICPPeEUHeTH/8hfbbVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpGwCRA9TVsSAnZWagAAgAQP/1XCteBIomYdknY6ffrf\n4+f9tdcMJGDDdhyuxc9YW1yZLyvmb03PG5n+PkXeuoOAaf9PW+QabT70xe5P\nM4lEfT1pHZ9/bJs7gsLjxA5NtY/10G+ZDZgnh1LKkWHg22u4mlD8CZrAm6cn\na8wpL0pE707XOmzh0kz+bed747jLtAG6VbudfQtRn8nlvvJnFSvfLhv52B4Z\nqDn79lk+R4805NY3hrVDGuz9Ljo1X58VQgmddN+Oi2+9RchpMWpXSIjAUhUj\nHh9UZzm/hMkqbs2TLtWla10DUUdC/nPblebNNURQhMAqQ901QC5kM8PSZlhk\nQHksz+3wmmAwik/DEpmaNvkrXydFWLc4pJXtieNoEBZ+abu5rqspjKPLsvya\nCx0fJ1mrTmwStcdqceKkoHvpfaMOQLes0z5r59fCXg1/wkO3QjUvAcTp9k7l\nbcMBYU6s+ueRSs0IlCEbXqr0brmdmRXLU3ozA6MJZGoVYjeQZsjyDHbIKzLt\n8HjxgBjqlimc3nUZdtlHmCoC7CmF0AFm53V4ag0HKMfsjO2+Rwj4sX24Maa+\ntr8BaFLaXRMNOjXwSpmqPmaF5IeLdcCxl/Vab2IifwkXcGON1Hz8IgRzrAaP\nSBqUQWDXfMxZoB+PHDHAB+EYKKQJS94s/qq60Nm2cCZ3p34c3FdU9euVzQcP\n7yim\r\n=Ef6D\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d86fb6fac.0_1629917616421_0.8243486582327733","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/typography","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04883488a8eb3ee95758e2f7c79a03e85220107f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.e8554dbbf.0.tgz","fileCount":22,"integrity":"sha512-HCiY9V9VoCNFNSEdojsWzS0Fh0pKDB+7/BhPmln1W0nG9TjZyJnzEe5jhGoJvX/why1IDhnr1EQT4n+j7foU8w==","signatures":[{"sig":"MEYCIQCI+2+ON8cviI/Q77aUYEbIE3L5cd3reYdtot+1ws2X7QIhAOc4sVxhcTwAuy18Mr8WZziTPppbBIQEbg1pcZ4TlCBi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr0wCRA9TVsSAnZWagAAXOgP/2rQnHapWx8hTge56H/x\nEbNBF+8CC/5T0dIExSIJ7oH3pffryjiAFxgVp7Aw3ubesBBt7ckYWZ8fUi+u\nZE+oTecuLUb9t4swD/bNkDEwyZppIicD7wAYxJ3PowllG6v98AwmccwjPy7D\nsMb8s36ubYSFBrUpGbIZYBMHTeWbdlvcAXpwxba055Nevq40g5PWE4SkaXqc\n8JB45cujo4FpKMnPStQRTPTK1niMvBmBhLgGl9wqrzCArsfBw+QM7o+HHwbI\ncDj5RhI+N3oYvdFV9Ndbqc+v89WdWZH4rueYBO8w2ptOX9eBlUxVBnxsZSrN\neAvVO4xZUGwEAqFjaTcRXACTT+OZM1Id4RnehMlNT44blt6K20UykqRDP9mn\nNufB6+TRvCu+DXvmQTnld+bEbHO45y4oboY+R5Zv3666PGgG+N31kE8/MAFL\nfavWWI331uOPdQgWx1JqllNeEVkSEyTQeNAvbgfNmpEwWN9SWowbPBWEzfQj\nkOF1ZG9QYenHAaOA3tVLVa5kQJRtHc5n0rSwclMHPV8snHTGeF+Q9xGWv/k5\noNtYno9/yU89bc0mBaQu6Is95JMW6J/6eMbBqqTZa7g3luTg7qv260GwD4ZR\nTIvae2D5U5oQTt8RSGWD7JLXVtIwlG9ngc0pf4ebe2SVTbP4BkR5SAUjDPB5\nRfGD\r\n=HkdB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.e8554dbbf.0_1629928752801_0.3267447152940046","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/typography","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f41b948b8283f3527105f1385aaff551bd58416","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.877e3fb0d.0.tgz","fileCount":22,"integrity":"sha512-VlBhR9iHYp+CbzByAy7NQO4LkRTYuuthPTIBn6Dd296earMMykQ5vZMEKsE5/5Aemv3jb1YY3Hd9+vIfeOmw4g==","signatures":[{"sig":"MEYCIQCVQkAVZ3mMNBwGmgD9HDlNuEusOf4fShRc7OUpnJgKBAIhAJ32o2zhgKeM/+6FqOI/uBKdZLBpcOLl+Lke/gttrZX2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VNCRA9TVsSAnZWagAATYsP/ji2IGIgBdSC9vXb+6zA\nFAA+s+sSUK9uEf3QSL1ujPVRzd9wxdzE/Tjck4NWf1X0zv3SgQBB/MsMg6O+\n6PYkNrQgvo3yEIT5J40RYIfOGn8nDiQgoGcdwwFLWmbIDsZBTTrFVJbLS1Uz\nh73RlhQy3KktjQRaQ4ycbAkBtOMQy/uH9ONOp2bT6ZgWWLy9XLSQ5wDBq39L\nbDFOQOU63QrQBuFt4+cGodtIYe1/G4QGed/tmLE7zYv7qj/I3j29ou4nRGxl\neO0ySDlSRXtAuB1cVtqPnoh36YskgbcXpXdRTLW/4hNscmIdddbUe5Y6riWb\nAnP5mZ6H1CMO1jx5frcrZ1SOk9OXxvc5iCh45h1XrWn1t/8jYVxK4pk7DDIs\nAKCk/twzXwZ+iDJdxlaeHhqKolXSDu8GVJCYwbjTDy0+RNkrTtDoQ/mCIf63\nI5ndcG3O6vU1368jCvI+Y5tBEce8IjSqabm8pajWu1k4FXJlnvR+4tQxOsM3\nxOfFFsKdSpgAlVcgySOPeawQ41qtu0beXB9VRj+ClgmNoBUYluuoTLtY5JVa\n1tY+qqO68NBBPCk4Jb6hzklXIx+8Rwy+/2D+IpVjfd/tKHS+ITHcnfKTtS5u\nBjjSP1JocxPkkbywE+od3d4NNe+QExEHXdyxslL1OD3jXbBSYlBKE7ZsQ9Y4\nG+kf\r\n=2n51\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.877e3fb0d.0_1629992269780_0.15932839848618152","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/typography","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.6236f3576.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae8e94ce5f7423cac70585324e81c354b535c82f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.6236f3576.0.tgz","fileCount":22,"integrity":"sha512-shedczezwyCn4OVVJ4LpLZRjn8bjGwFYmhXkDl+NhR3Uwzv8JxxcbNHCIkiQsXVKQZKp+1zQo9sXEtv6cRB1wA==","signatures":[{"sig":"MEYCIQDRg8OsXey5uxHYegQ6xQrXGDLp4r6lndqCGBHM3vqE+gIhAOA42+eHKHtJFFlahHaILrWlR1vnagDNnyCslchityr3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vOCRA9TVsSAnZWagAACpcP/1abac+NwvrXLPaxGOFZ\nRqpbn4mSbqcvR8ugM2gZrBa31ErKxRck/iCLmDTxGfDvtlJTsyTzkaQBMTiU\n1c+RsAC+z+5rS287Tic7ydzVqnIjwul8PFgZFGrYrDKNzH/iD1zfYmkp1b75\no5sit3C+MNu3S/MdI11l4byZRY+FTf0hRjKFBt8eM5pX5xXXmzgsLKwcIG+L\nWubRMUYwqV4QF17qeU/Dh+sASoL9ZziEzl7Pdjwy13pqubd2UM6gXAxBGgKr\nUJcz7PGdnA0HzlCtI5Lym5GT06eHvl6SQkQMdCkLSQXO/om2xE2HsULpAhHf\nfA0AukdbGvaP1y3GEypghWR5IEs6B8rh+jrpuunqEvfmtg2CljvmAoyO7yLt\n1+hoAn/lRNFCtP/qtwtPPeyra8da94nLu3f76YvoqgagaKqREbV/lkmHf03L\nu5p4soNABzoGSxvAQDiV0y7ePq4Pc3FFPK3FCgehGLI0TBikbvAMcjY5raxL\n44QciQybf7PDcqUoBmaxeh9G3JiKqVfOC7B2LR0QhXKLu/aItRMBAEjxksMG\nWRkxFx9GVuWf2aAUJP7ZCN9THI4OhLZTVP0oXeGDa2bfttFJ/60vUkJpOMC/\ne9tt7nRgHBBpqnu33RU5SdA58ddpKnNMdAqYaCMHyeh1Jtnm0CoQ9QZYEl01\nqEXQ\r\n=PEAT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.6236f3576.0_1629993934615_0.43704006286565233","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/typography","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2ccb0148a0b4629982fa498974687cc9ad877f2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.1d19158a1.0.tgz","fileCount":22,"integrity":"sha512-EPVy14Y5o8lV+RljwAhTWTsPkRunH4z4csGc79f0vfYQ0zeYWSIT9mCasqFZAKnIAF2+l4sPRG0SM3yqU9mwVA==","signatures":[{"sig":"MEYCIQDSkf2Spuq8HtqJR41ratfhjxm0039p4mdb2qZr9feUWwIhAMX2PEl9JmxZ6XdQs58cQaFHltffF+jASYRx/DBDnLdD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qeCRA9TVsSAnZWagAAIskP/2HUttcuOoO1ycq6ibsz\nbJfBvmYgkdSHFO7B0RgvL3NOzNX6+v/F5FrT+12j8N7Oj7u07AruYAmPzJ4j\nhsX+d1MNEWcFc7qkz/B7ij9l+HcUJbanZINJS43ekvcD3khKihPaHtAfZvfo\nzmdP75K6kgZS9aVw64b6j6hTFaIKCTOzDdnAQOsiF4PuOw8dODMBEp0N8K+m\nBHyEFUZp3Rb/k3+tmN1/AQbGnsTBHsgds2mSEWDRAN3hUmKQLjYgHNhquRiC\n8qpz/+6f3IIhP5XGCq72ZA2VSWlTzn+eTj94VGG7mt4d6mbMA6+LY4du/Yu+\n7yrCL1vxxK7OAyxQzKsgdPmZmPLNwKUwunrUXGgJTvMcdyt2P6wI8WHoO1wt\nthGysGOzExq/fjN9ii5T9S8BtaW4gCjKXjSzNMVgwS/Rhsnqdr0SWHfbBQtx\nyloTHEUYrF2H25bLS3wUeztm0jYVHBJeeiXi0gYuqSr5TRex4aFfg8Ac94CZ\n78E4aQdFdVR0C2XZOHrkIS5Ntn5C6O3abL560YK1yN+/WvWJ4iFgS21BMeha\nyMsM3tZNDeX0e0fpaC8fX+Eelp+pdteNEH5jaObyMQhkL0uKtcZYRvzNWk74\nkT236lozn7SHOqKs+E4rEv3eZn8zLYED8xa2D23YOYuGw4hUW7/+TWApUWAZ\nY5t7\r\n=sVDk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.1d19158a1.0_1629997726283_0.4447461154852086","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/typography","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4cb04c9cab34a4655118bc29055cb181990c7c49","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.6adc9e83f.0.tgz","fileCount":22,"integrity":"sha512-TqI6eAUnCNqmRK6hoOtndcW2+Cik8x1+rFLXUoY6foOoEF6PcnT8EX+466cjbzHwE4Bqf7vPYUwQLgn722OVeA==","signatures":[{"sig":"MEYCIQCqkcaszqzm+zODt5PDdRpFyV/tIlRt9GsJIaHOfuY0CwIhAM1DmyM0MOO03cS2usbZR577n1DIkLRP/+tkkrWUkshT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV84CRA9TVsSAnZWagAAxHQP/0NyhyAdg2fz6u9t6k8y\nhwhYt4Afikd38eY+EqW+3foqoHKg6jVmdvcqHqPR8hcvGymeQO7kCcqJQMx7\nvymW0ryLfisG/Lt7p90nlWqj31KczUL9enxo9PR8Hq/sxBK/ZSyCkveE1upq\n4p1POjjHPG96AtuD8uruL8SAtmIfCYtAfUVmZ55FbClQLScajo/CNHTfhjx9\naLymRJy3oywxom4BTEyayUC03SrfBAb0EzXXl6HP0VWo32i27/R/HowguzRj\n5uqTbi7Z4Y4a1NSDjZK2jF4i0gQ72Rec3M2+n7IDxFBrePShIky0d6VvHiJt\nGbITBg6/LnH4qwVGoRuooGcrtYnz/awMGRODinJe0Fz7CNehCaYi3hcTSUR/\nXjCfdIe6ZaXjpF6Ubul5YOxhOCLB5I6rxJs23VwxT7v2Bu0GlcoCe23CjxGQ\nX3p03K1Q4nFBclzkx+ygEGQPO3kN4dHBcpFRjKtKNo9cwsQgjURNt3khspNy\nAS0qP7a9GoTSf6mFodkFASHkoWsBdqrPt8NEPUdpcs3qTLUDipODcZwHWYXl\neLM9ksp9lE9efBpwA1xp3nGf/+5m9M/ANI36ddu27LrJRBjAZriAD+03BaH5\nZU9wjT3PYK8VkJGgdNxJummRbev0gTAvPI9yqMCKVLF8quLJfpsvCprUTuBG\neIVC\r\n=e6kk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.6adc9e83f.0_1630363448004_0.8745959798358831","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/typography","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d082790f0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91f525c99de13dca18720052152a3573526c0f46","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d082790f0.0.tgz","fileCount":22,"integrity":"sha512-s1CXbVYYGI21GtjkQGn8MwC9G1VAKQr8jD7zVmRPu4XV5fkRXvRarT+QmRhqIgDlZ36dngUx54XAFH9+kBreGA==","signatures":[{"sig":"MEUCIQCLaRHYC7e/8JLXl6awJAwby5S6QUPZHln0CCLREZZl1gIgOaa7+TcX3IVorqWvzsa6H0qTZnLWxMyd9PHEQXNTVNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aCCRA9TVsSAnZWagAAsSgP/3mHbMV9VV4h1/ohfXH0\nCJ+glNeLmJDKjmBydmlnxwofi3vLT3PVS+HLNdSq42wMqMLRaE9CSHBlAH7I\ny7TA9tE6RA1q8U/JGJbg/Bs9pNHWJyWwpclRhjds+fQaqsNIbhUxf81Aalr1\nOF6bmI1mJZnLEOvxyQxBU1mNqD/ojzXGW6llDurAO8dVWFUDkenAU1CN4TdK\n7/IRSlObpc7qhfQDVUDk2Gx6Gu2XddQrQ0v8QC1ioVJoUIUK4l0w3gx6m53G\nTm6+hV52vZ8RvuGCE7Ds8zwUKYLp+8n8o4IRAtDb9NGKeR8XLa74uH8+9xWD\nOjdv5oVflEeHiTRp4vlv0qc7/t15TlKtdoR3mDf/IuS04Y3cUl0pHxV0HEoK\neSYrdCik8mC46wiHVPr+v9yzFl9JZf/xrJbWUtZokEGua24M9vJT1EvK3lJO\nBUO+FMKCfBv7CMAOSpU+u/cnD8lXzmVAPM+TMwLe42P49tsBqznVSSfq7BZu\nao33GiZP2A/KX3kXTyPFIxzA1Jc3ahZrVbtwm9G4ZAGeka2a6cfJtbrPlGk2\nNq0+5mCm3/9ErhREPBgeloBax3M9XOsIYYvTpHWnlC+dAxi0+txId3mKRYQ+\nLHEQrHnKW+cMjCZttgAmKBNSqZ4yw1331Pz5FZeGy+Q5hdk6/O+azsPDL4f4\nLYVg\r\n=hdvu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d082790f0.0_1630533250483_0.8690384639723552","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/typography","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"443d39a8f71337d1ba63ed8fd91d34381e5913f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.e2c4f0196.0.tgz","fileCount":22,"integrity":"sha512-lphDzidP4huzsUvipi/49/8qSp7VX1szt8HEB5KNT4ecO8UMbDs9+CqncD7DLyOzogMUJbVk46vld/Yk8M28XQ==","signatures":[{"sig":"MEUCIQCaRo21TxiqSZkFn7lSKbIcBnjOant4t3j9TlJTK4DiIwIgS6ELeFKIVceYgUUia9Wzf0VaVKyrbbnUAFclfJpT8fQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDK3CRA9TVsSAnZWagAAHoQP/RKrbvi4Y2k8D33HVsKl\nIQmJ7muUqhZQGmeqyIHXN0zHuZEqFMAgD0pa7pRxP42MG9q4+pk5SKUAcY2b\n0J/BZNCuohm5sGZXdR8NesRfd1WBiQhn06QgJK+wNdhNTHILhmQoMQB/ai4O\njE7VjNrTNHY01zkOSWgIPk/ANKyF28EpIfEE0hrFPc81AkVH/xF3XMznENgr\ns/0xuLmF48f8f+ZVu1ZkHWZpwVygjM357dRk3VZpkpfxOEA71l+eNuWLdZwl\nc3RjNyGWkEK8j3J36MRKx7Fh44soDJ8BZnt8NHcNF/XCvRaeoSbRt9ysg/ny\niQ8rvk+wAwqq8XNWslGppe/e1LUb0Pioo1i1Wprqpy5ecPoXog5ovi2wKK7/\nS6T00grvOLhj6mWYs+zYQ9giuK8aXzULPQCFnyldn+Yx08zglp3YNTX2yWME\n/kEMrc73+pSEJyAIsgQJedYu7Pj/rkNMXZ1kYVkjaox8kbr8izEtU8Q586zi\nuJPnzsK6s/6knJ4Qa789K6OmRKrdToklrSmIGRcJj6So1l/dTrhZdFXMY9of\ntnljoZ6WtPAqy6wwyyVx1tfAbhdpLh20G/CJPkmKwWrFzSQtWTql0rZbs5RK\nF5kL8pIXnw7cYpbJgL23+8hJJoMkY2GZVDd5jXlQrFlyP9schDBZgaPWlaNl\n+xrL\r\n=sIZT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.e2c4f0196.0_1630548663151_0.055486919004990476","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/typography","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.611db508e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d3c5be42f6afbab111f56d43760469d9e65c0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.611db508e.0.tgz","fileCount":22,"integrity":"sha512-T39oyjZxV2/up/t7Ln8AWaqoXVb9vFsuF3Rpf7beC543mYxRD1ftWruzbwfqn7BF8aAiLc21iJEeiRMeJQ7GeA==","signatures":[{"sig":"MEQCIBT/w7KRePixWehTDP6hbxbC9+rL1z1Xu2kBz1EYBqHqAiBJaesMrZ2bf5ohVHIiOC0X/hcr1vWrClSXA7Wm2LQMJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEGnCRA9TVsSAnZWagAAyasQAIwsdGEHTOj2ARvD9ojQ\nktKTDrXHkFLm93B66vuPWA88S9CXHpufkL1G7ZrhbS+WUWTkjcaANukUOjsb\nwvYPSwgXRyoBSoTJpCnkSEPHgdFxd6AOciaaGM6xyvkaxsZOeev5Jx5efKqf\nSK1MtQxIvbmXT81KsY539EXWOiE99OnUL9eRG1lWsvKU7MlzpQv/wbUdUE9W\nhv2rBfcwidWGFxxFXzgTTKclxYf6u/+z+WvxNpnXlmIpOWDm5FoFToOieak3\nM3z69o4bMj18vMyJyzfBX+Mc/HikpjlrQiTX6RG+ok9sdRkwvphUiNNtQJkT\nLLUPfM40+RwTOYSyuxv/kwCWEcW1HcZkua/yR5V++2csfsZy+3TOPhLipfQ3\nAHQRuKd1+SaiC9pDy7T2tI+uNLIalVdOtugzyRNnxt7nyw25juVf0e6mB83U\nPF3LrxzzK2xRYEbYzi1kat5QnH1YstR4AiMfek+seqbTWB+hQ+M3U2sWpTqz\n8sDYHdX4tASEU/oOJan02UOn6jfugClf9NaEq7n5MkAzWn2DsY3gpIV+BaCU\n0ZbZd6NHXZRySCWYQPtDXHnQlr5ZvopKnXq0NEyBuVrdjwmAjqer8teSPf18\nDWju5DunICve7oQVZSj3TwjNKgmkM6WndcU838acYoRzO3bgAoo4rL0oPrcy\nkOPT\r\n=Ks77\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.611db508e.0_1630552486973_0.3907835494757961","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/typography","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d4706933f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d38ac2b50c900d66cad278964345dc738f04f30c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d4706933f.0.tgz","fileCount":22,"integrity":"sha512-Kb5dFujvHp8qKeW2wrtjvldTQTSbUKslOwvn1VWeKl3ULE5KmMD2QTdAhUoJwQufn98XA+G9amoZ+SVH89XglA==","signatures":[{"sig":"MEYCIQCj9PRoJb/HfDPANft5XBOLOgd+Jh+RTTPnvD+EB71xbAIhALrRbhGosQYcZyc9SRNdX1zDB1N3wLmv/NFHGoQ2AEo1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO+6CRA9TVsSAnZWagAAlpQP/iwVJMDiUZu/NLZ7HpnH\n4ZrQtt1Q8TWmox+o9AH0m3ZkDv8ThzgsFVhFcmPhrGmyRJjOsQcSUtUH66kr\nVh1fqMobTacTQwTpE8OVD1JqFWsUZ55a8fcuZFmn/CWqg+Dhm0Zs3hgPSTvQ\nT+v2iJmmE4StYAoKtnZjig6vkKagqtPesPsE6nXjq15eDjCbFmNsm48xVDLE\n7/WdY5SG4iPe9RKlJKFEWu++EtVZ4NxzSZhiuAB3oFuy3So7rqatuu5NfMes\nsdHBzq7wAScyqLROqtMRF4H7loWu3Zfvog1RMobVCujAiiw7nBfyty6M6okz\ngyNnbEzLYnxFj1MhTH9K1ky52CcjCeOS/Mr71jmrYyNqxCFmbKzJ/yTeOD2c\niSe87oySMgbZu8PLsHP8PzIn9QvdeE4NPtP9ED7z1UCBAI9HUGsSYzpnNdR0\nLt/kjLRVkMcmS0v5tUEwkcIcono1GF3akhczM9p5CNruT4rX3vQwmDrpus6W\nyXYhpiWCAJtUCC/biUHjmIFAOm+5DS8o/uZKvEB1eKOq21iV5qhbuSDtrYsS\nwiV1mppZ1ar3zan/t7CopeWekq+ac38DpRG5SoK5wveF0a8JE28COgJy9mlx\nVnKlDnGPywfmfcrCt9tCHp/7+P7UxAmVTT83ccKZdLWtxyt/s7ROeZps35VU\n7hM4\r\n=aTIH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d4706933f.0_1630597050755_0.9595234109416713","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/typography","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65d01f48fffe09b7c6bf5ec0c20950ea259a567a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.c16fe03ce.0.tgz","fileCount":22,"integrity":"sha512-qmAcRXbENSuzh97pSNwxM5bT5k1uppfNQDoZPHtdTHhp/hG25vB8/sR8Ob9Oz1ipp0m/HvKcrAX2L46+y1PjqA==","signatures":[{"sig":"MEQCIHQPdKwjpwzXoPsCX9MznyksJbdZZ7ARiGNOW9w6dFeCAiBYxYEnslJBdFwti0PAabyIiaGQunqeyc2kmKYZvwSBUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2BCRA9TVsSAnZWagAAENAQAKD1u4ewkvXDaeeJ00uw\nDXiwjrROp2S9qW3lzV6q8/HD6N8Jhj+C8bfo9lxmWmjtLPEiXWfHQRua1Kjt\ndI/yuTJkqaCO66Rj6RU2bzWdxCTNMqo0vj6ykN3a6ZuSpWPm9+TiPl3UCFod\nApAz/NDdeet0X8/GKoQm/eA94sNjyeN0R/Aiwtff0hcBMaktDhjm6aMnJCWY\nySNozvZuC+fZc/zn7+JrX7f3dboTfnD8HM//Y0EPmKgpBF02CPuQcdCwtpZD\nVQwufArgfiZ1ktbLcJWK7Rpa8BXGk1G45IjwSvVw+wBIulei2et7vtVqk+Nv\nHv0XdppG5XUSs+7dfkM1vXA7j9zS9zWIfgdvv6Co5XyTRbWRkCpOU7eddhJT\nIIisY4NhE2gK/4+EEe2NcaXOmhu3W+LtIRY9mY2xTniE/W4hALMYUkvDHFeN\nTXsxt20PHxVh4wfzvboO0A/vGREdpSTSWAF8Qd3P+AJ5bAQyzCGLexYmYJs+\nLhm9341r3sadwZkqq9vdZIbf4uYCM9+A71hKk7mYTBa4WBPvlTXuUg0UrkwL\n6IzGPS5Rr4b/SlSGKdylvfqTu55NnaxpZLdrZRz/jQH3JofSypSeaBNl0yqk\no7Qkd4wjZoePWuZ4S/eX63msXopCdyFEGyHK0tfjcJRP3oMMsmHke0r1IDRj\n00p8\r\n=PMtR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.c16fe03ce.0_1630604672870_0.047252062155509256","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/typography","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.9203a958a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777b13d6cb450a6e8eb9fe71c93152a40ef312f9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.9203a958a.0.tgz","fileCount":22,"integrity":"sha512-FTK7s6BPukApELCy+78itUrycPWHlglsFrxdSvhSEj6V7etOpc09U1ApXxTHOJxnaEaXJQIuEXDWtpTNcK/cLA==","signatures":[{"sig":"MEYCIQC504VnAnPHyZVKkhswDyJaHdZlufQkxlh6IjrhQ5qqTwIhALszhbmeaPMy2uWJNNF9mmxZvVWa/GE53vu/zem9GRlN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWI3CRA9TVsSAnZWagAAmv8P/0RJwuMFf7BxXjBSnoH8\nJECNM4kp80GBXRlEGExLSiFnj2Sl0W9ItM/nNmdKRXB/+6nYBfBLlb6WcNar\nk/9dlhp/vQACTxa4O1MRRP/rkNBaZW424HpnzUYEExhDTYdMFAKz0Mt3vfUh\nQpHKj4IVCHxQJvDvCgTIiGIMdwmEI7AGxds2FrSklGrOzjUpt/GT6wVgkqWu\nBIqeWIXMxJdWZDymMQOMFZcUbTUI4oeKdNBBNYuoixEWs2dcs/999un4L9lO\nMcqFie27eHaDxDKqGtIhZK8cxXepe+jt58TWumbsgIYMNq/qIMhCn169BkMg\nbiixRtZMz/JYKksr2hNkQwYh8RkZYOOH7QR1tAc+1/Ghtxlbi1O3qarPD/xn\n5UYPMMR3MYPOvEXokDv7p6rttgsWlbnHG7R9A8ekxBGgzgMvO1su4AbK9g/u\nBWeOkaRLwy85tMqHn0brNSns4ZVvt7s4uS03OrzKqCbtE14np63M6b31v6t5\nuDb17z5y1AdAY9pfx/UPZyJTtLSKwSSfivsJDn1QtZ7sCFKps5od0Se0iV+m\nb27QDfypqgvKL7vPZ0HEkg2lSSyvAGujKR4OecweJhMhSL866bnmdjlpR/Ss\nrha/7rbtqCFft7/YLs+Rl/3DtNqwK6JJ0ZPNWT/C462c5KXF/t/hUKikVjhT\n+n/z\r\n=W535\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.9203a958a.0_1630626359815_0.3577721789717092","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/typography","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d639fe11fc46dab9914523d9b2e96892c5994a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.fddd5ae93.0.tgz","fileCount":22,"integrity":"sha512-yjaqu4zJQ1HQpOKiFm+X7yI+FNGZnRXOMN8oaj2/OALcKJdG7Hej1zHLyN4MVkbgyO/Z0DqOSVtatWgJnC8G0w==","signatures":[{"sig":"MEUCIBMYlHMBesrH+iBsvEzYQJercykZM5j1gCtiTPTrqdNQAiEAl+67y1eGswq1DS1zAy/drmKdwNFz+tdgwJ5Pb/aO4y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc7ZCRA9TVsSAnZWagAA6DQP/Rm+g48Eq0kVdpghzUpR\neYcQtGj6bF0aPbTktywjxIJnYIxox2zcF0eR6NwiV4zykjM6BGAHXmMLS9yX\nObgV0jZqxzsp40uL2fcmaGlC63l5setHEPo5cJuwJ+e99u8dpIGl2ktthQOh\nRxIgHrOWH6S9vkKsi+uFHoj4iPS3SRzjp4uvKDXXWB6zGmPvJnEBLMcGqjeJ\npw2+nfulHgxwvlawW6KH6hfbz8CXtNosou8tZnz0ZNqzKYiUDU0jNLFPJUui\nRvDmYGGi0v+bWd8dZFE1Y/5uAZSTsgFaKTm4FW7uY9/1SJi0gSdGDebncnhC\na2E5qdgvCYgiRgnmFZffG+1aGNAZD0lfSPWWQgv4AuTqwyPSvKNKqMF2ZxQ2\nGzAnCV5WNmtklqb9ghzDqZSAG1ZQEqfQAKd2hR/D+m5uijVrdgNRR6xK8snu\nitfoITC6Yy+7fK0SQCaUViCEOEswrbhvbfhGGTEW4/5IDNl8BhgC0BhzNQSD\nDP2G66aOpHPM4M9+hnW7sa4v8tOVjiKNbY9nNcQFPtQIzC7ZPRzW5nN2JuXe\nqTXyDjfvFA4Uam9PeCfT931sSBHqtDPNKU6Y1eOnToWecn7YxICbuWU0ZZDL\nykKK0zawGign+sPAMdW7fWaBIZs8BSblHhdUXX27TFb0W3RsqQ9sfB7cixil\nsDQ7\r\n=nRLV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.fddd5ae93.0_1630654169485_0.03930377320020839","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/typography","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.117599a8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54284fb73cec51f8ab55cfdb908fef4510017dfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.117599a8b.0.tgz","fileCount":22,"integrity":"sha512-GrRsfZ0pUuWaIkVq4r5IA9NlaCz31lP0ES0sac1S0+gIZdhbJCxDXOuiCMW3tsPeJCVYuD23rKafJkNg2v9C2g==","signatures":[{"sig":"MEQCIEXVQu+B6WoFHbfxaTp7Wv6mecBO1tKtfjaTh1/fwH9vAiAu71891mARTqxq6nO3+uZ3H6oYSKzW5e5G+6W5SzoyGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8zCRA9TVsSAnZWagAAIRcP/A3QgkTLACHlkjG3OCUy\nvB5pttAvnW7bzzrrT53je4Yu/HRZSSDFuCo6KLVekMOvbP+k/M8/iZGFHJic\nji0yX0QtVsajjf4EovgUXa2P1t92JYSHjy8Wl0DV04EeTWyqZG8OJnbmRquD\n3PjX7Z/4nsdCG48aELQn1B2wmuBRue8eYjLT+7+ON+0qdcn+6IVj+VfIqH/Q\nes7Qfrtxw35KF4YA0fETNLp0df8Xv7O50ruM1xpQ14QJtSjC4CGD1kvP6gVP\nbg0FtlZ35VV5lM0XFEKxWSI4weSlVF9wxCStExmn5YFaTEIcmYj8e/y+yws0\ns0L4YqtUoteQQ0dcJ6PonRn1ZGyr36gNsn5mGf58xB3RFDBX7hf9yvflBH6b\ndzC8Wpy4QClVgxlHVz5A0im4esQRqqaE1Jup+kgaVXeosJFJm23+aDxHZxlC\nzhMVGRO6HdtqdwYeB91j0jRNqG1apcsMM6Z7G1qLvsDwpVg1l/dzT7IG6Ls7\nNQZnTQwrEumaxlk3zxqJAAxyuBV870/7E0sM8dS125A1ofWveFbKECfLfstI\nppNUB4AqbEbeeuu+Pz3u8ZyR6z3dBZBnOFcokJwB/K/sNs904ngJgytILfwD\nc6iSNBJnTigv99hyPDTMDOHfAMf3vnntJhvASaO9g8usFocyemD94QWwRkHb\nP0wK\r\n=JZpX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.117599a8b.0_1630654259035_0.1672898963486098","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/typography","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a3b79093ed0a8d4a36c4dd25abe41e35473934","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.e4180d07b.0.tgz","fileCount":22,"integrity":"sha512-RfACIVemxK/8CfHxiEJpkcoLQd4xGBmxrQWa+44VzfqrGZZoLAxcXcDO6r/etahaoWY+W6S+f59JjD+gmWOE+g==","signatures":[{"sig":"MEUCIQDfLS1c/G9OOThsPGe8E98aTw0UzTPn2oOERe42RpKqGgIgBxl0f0fg2/Jfo1E3h0CY5F9nOimgB5tD6ixrHBPvxKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9PCRA9TVsSAnZWagAA6WQQAIVpBSx6eo5hU3KtRd5b\nPvbRvgy8wf1w21UZ52cQKnIXT0ZN9wTxEimUyrhoIvHfWc4o70l11S3GgQ+i\n9JjnAIMvmJzAiK6rZZucjqc+avyfv1wjv6DDI5YakxVIPOuNmDdoQunwbFwv\nFpt9kO1tD0um8ka6tfrkjl/7QL0VM0YiibYvw2l5tGTszZNrbGlVgQl+du40\nWAeabEV73rHxnwq8J9yyaSYe/0ezjAMpYzckTlcPvi0GuXtUJFeg0B8KsMPi\nYNafNpHVUWf2bWs47yqPw1HY+wUDKO1HfsmlL2/55G00lGpjJVkFpdSZMlXF\nSoGDJC4I5Df75czqJtcHus3b7WU+grgttkIQfX+VuC71/NIbJ7+HghIq9rgX\nmpwH0RXZMwXPesTZtW9gE7zcLZI+G1oloqbtClROBizZs/1lHcIPhfEolDV0\n9kaNJWy/6jtU3TxBgpRC36t2CGaqBsPdGautAh5+0OV+R3ISLR7kfxfO6zOx\nwANWXMha7X2bHtWejlkAIj6byZBzWIsymjfeC0XrEhVzs+IZNX32lSUD7x+s\nFG91q8pEFVhgzL+lWBmyigHbRbCUXq9pdfc/lL8RgfMfKfWYVpEJnF+KQOsf\nZ7TAs5yNPM/xASQXJElGMxvpSmmwg43GUI5MZdY6RT12eqARnQYNF+oEdjEQ\n+OCE\r\n=/rl3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.e4180d07b.0_1630654287673_0.07015863760241725","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/typography","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.42d175efc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f8a665846b95adb3a57adbac679999017f4dd50","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.42d175efc.0.tgz","fileCount":22,"integrity":"sha512-q0TYzfzFKq8yWP3QydXFd63pP6LjlTT9n/rV8BKJgdtC62HZRGI0UrMMyCtdo0y4TJbPLEVvnm4UoI0ugCU7Ww==","signatures":[{"sig":"MEQCICQ6dq8cT2E+d7ctnFx1ik7cZmYMteEHzeHcM4FHk5dIAiBRp5SMgCeTIQ8eACjbvKKT4taYz3AS5vbfszJwpyWRew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkJiCRA9TVsSAnZWagAA2bsQAJXvx7iPcOIrf7qcczLT\nLz87vpW7cdQN0IFblAOPd0tb2KlOYznyv8M9r9bYG01uprH+HAqDRBb7eqra\nlCihZ769SD2hWA8M4nut/myZL7uctHOrdIHLBevqVxHEIxEIAHzCPM0IPVHZ\nrrqJ3cFOxnYkSTtIk/9b/XTS8tlWHIDK9Anzb7pVDPidgVWU8HqhU87EGwqH\nHpt8htujKot991UYji8wfPGgulhmtCFqzvNgZcbSdUn9WcTy4W5MafPv0d5u\neqgK50jZeuKLyPUoz71PBXif/Gl++Xx8thk/eNFz+rp2TgMW8Tre8zfx1Rca\n1uRMB2yMS5fRsDpD9r+p90K8+JESKYXbZR8AXvh6vKJT4ecdY0UWKsxgAXg2\nNe5RaVosy5eg+rU7q6ZA9jbA0XwW5Q0+pVKpwox/EJiNrU16FqYkTTCGTnqK\nUatm9rlei3meis4otILZpiiuHo2zw4NCBkiuUmQVP6T80mpMLo+VOsEQef+i\njmFtt8rksjQ3ItZ2lsHYfl+BmPudOa56z+UAYb5mrG5LdPAxn+kbDG9ZtRMJ\nNy2CnINTq8/8xi6hWnNTT3cnO0aObhhpvjrQcwD76uuQ2y70EzZfZeS+kdxa\nvXQxXVncmsnxN9/VK92unOSz8aXotaaK2mBOwaZ2o9IGODsaUKn8mzqqub1l\n9jOQ\r\n=uFc0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.42d175efc.0_1630683746428_0.4353722415111809","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/typography","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.72464476c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5bb4bc30547521d0cf1430a6c0e14a6136e98b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.72464476c.0.tgz","fileCount":22,"integrity":"sha512-fsCSfwRRBHgRJKX7PC+s19Xf7tylm0a3cpUdnK/MrINaKwF96gJWuhf2szL/dWqpYOt+BZ4jBVYLEf6zKhmE/A==","signatures":[{"sig":"MEQCICy3sLY92d3FD1icjPjJLE90BBxGkmEfWoOF5WTI/MESAiAOQ3YotQoazCb6ci0Q/4SD0rTdMo9PBFqej27B25i3Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4ZYCRA9TVsSAnZWagAAIaAP/RUZR6t10u9dfJZXiUd3\nCdBCho88e/HZ2WQx9r27JGzfhdt3OPBaCMhxm9BwUFd1CZ9q7ZJs4xRB78y0\n+OJL7RN4RyVi/jVV32A2neiP2GM/WfnZpMTFu3GDslXYFziBLZEPWT3XBlCy\nfBGAoOig1ZQiet4Ea7AX3WVbxv5EBslLu3RhYX7gRb6QbEGQX9VpX3hYmR8b\nbXHtEBEhgYxR2zG5FRea8nP8Opu0HZqRUPR3xoL/JqU9EEz7VMtO72Z3HO06\nldjevI7yEy+knxtuIdJALw3AcbjQ/mdyz+ZDtWSzmmpATCrRYKB63jffdYR0\nWNiR7iUAnPyffuwGiYVF0BDzSfcugDirRi10NXHGCQl3wET1kXXZGrt6hkS/\n0h0jK3euu7p7/UtQxsWOT7+MeI37lzITCBJ6ZWbxvjiiHl/qLlGPSd26/DmP\nZkyCcBWpfe/+SN0tkdoco0lS/nho2ZZqrHnPpmV2QvCZYHrFn1lK9RQr53Pj\nWTuJY/OSVYyy9KJWTfz7gIhu2ylwWKAUCKJqqAZXTdJIPPiNPq72YCdoGbqE\n1RZpViNlpq09CXxACgrzbBD2oLiD3Tf94mbZUfkCveyxe2+rxQLBv+5R5IUr\nKICISVOMGo89/tAw+8bcSasrkooGMZxWJBn+aiDJjogDUEx+BJ0RrxF4psLV\nRo6F\r\n=A0iB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.72464476c.0_1631028824117_0.8519415134883546","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/typography","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.37d4db866.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10896c3fbde9cdffe92725dc5a77c0bc12701d37","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.37d4db866.0.tgz","fileCount":22,"integrity":"sha512-C4VcgcsawqahS/p8WaR6k8PPff/85lccbY3XEFd8PhaMu8gwxDn1Jdek8NGMGFGEg5HKYEOTtUHArOd9b2bJeA==","signatures":[{"sig":"MEUCIElNAR2+nOjr09iXL6YejQA4+3Sw+hpk7dJvL7q+Dp38AiEAlR6ZrOdDk2aOKCIBGHtEG+wn1XpUWBv3jupJtug9PqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhsaCRA9TVsSAnZWagAACQAP/2SBv9xfKITcqaT0TD4L\nTrEx2KfUcfigu53SmjwEjXluWdcUJgY9bPBIa/6ojn6skUqRZDZWLqneiyOK\n+X0F3mPDv8i41a4kGNDMz9EuIN/D9kBCEXyV9gwSkOwvGyZC26dWLapaubPz\nurDpSsUGlPRKb3V1yl4bBT4dD8bEzVC2o1TarJtzZjOGsRKmrTXAp/ldDeMa\nnfap1oqiLAz7vtN2ATRjSHehfKvigxL+akXrL1bP+lK2aD4DfkV4K1hOhHgz\nembffygOoMcZGp2PvR/NXGMkMZWK37/MuIdO5BufHUucTx/yUkfTnBk0GN5H\ndou2zyEjcKE0CqTQbLqVj/Repd3SC9Vq6bfoXdfpxakrpRujxRE1Skyw16Qm\n2agSl3Wuu47g8lQqaqsKI7M3kwgodWCsywHkaJ7XBeK7TGlCu5SOYduTzDyr\nU/oW0RWI9NVDi1qSIkQpqLGQwBN9105CCIxvf8CoEbq+CHm1JmLuNXNYatn5\nssKG0fMEEsvJI+hQgla5a2UoShwSZGA/bkakr2DGGlSNkDH1YAFN5JaNNGpf\nl6ADHSlfyOxgCcQNC7FKEm0pfl9jqbVAG2maR5slEPB1mtj0nCSXwbXSSGkO\nHPLlENXOsQbVXeh2LgWZm71Qc576SeZFaSqvoySEOTLhL7m3MQrDEPemGC3n\nXPzw\r\n=CPDK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.37d4db866.0_1631197978406_0.005224327880601232","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/typography","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.6df682e74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"574bede792ff2c9ccfb5e3072c677f3b5b83181a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.6df682e74.0.tgz","fileCount":22,"integrity":"sha512-2u7B3516/T6RHfI/YVMzWltd4pDU+cHjgTYHgRI5Eh7PoDULWtiDOsfJIAcDRCuvJxHFz1I/GZryirGa4N2tIg==","signatures":[{"sig":"MEUCIQCVXiDtVryTGI17MdPyOTiiyZcvqDUIbjCsBllrWDJNYQIgVPIv4bs0h0P3ZYEspm/NyQLprF7knYBoglmjBArfwu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOit0CRA9TVsSAnZWagAA8JYP/jINGqLt5v8u4XRyczXz\nJQp4zr5lh1biXX8VJsQ2RL2vOjW8aWTnNGeICpA3ZHh3EOeDemJBYC6B3Y5X\n+ahXgJJXNR9c5l8vnwLLIZWBMUxINeCJCdkrMz7hyiGnr0wo8JNIghwNNI5n\nEsBsbc2Kwj0toUdx8hH2z3Gq7ii/ehXcedpZHTt+dmKf2EY6nMrmT0F+1bd3\nEWuyKi5d5aacsaLmt28Mif3VuxKlNcCe3kSpiI/3HnDopadH5jUcj/OGSgOT\nk05bmvSlFdEinsYphOAMh1QdT4CktIMfRxovIfDZjoC8gZ7TTKa0v2rHETR5\nDrSFtjXTqQkeSq5c5GYmKO0fC7Dg6KALy5IypP3wa4Fglm6nV3i2dXckdw9X\nwL0stXrev/IHdBjRwbbFX3VCBAA5qQOIoLLriYQXreFo41LTCVZRabuPXNAW\nTv0luu9elCizXUYn411qdrzAJbjJBrxdSlARWHTtafM3wdirgHgHAEfo4Nlj\nKliBkv/gyIwHaJxIgh14bxgu/ONfNKZqLz+WYpIApRWAYE7d3qaSmJU9CgYc\nHr0jzAXW3erMMdkdnc0u/qQpfLqKZ+1Av+O5RDkB7Ck4leoiBCcb8ZZpL3bs\nhrM2QZft6eKFkSX1OW1bWYXf0W5qNm0vRuPUX/LzsyzVf+E5pqP/SOR00BuN\nnwJn\r\n=Auh1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.6df682e74.0_1631202164701_0.3050430235106052","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/typography","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.b49359c35.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6d024cf90889d56604e65d1c62597fa9c02bb5a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.b49359c35.0.tgz","fileCount":22,"integrity":"sha512-/S36cW8ZdcMEyU2UQNKl/+no0EOFIqBrPYCYKdK89g87wmoPHJL2qyT4G2ln2V2ZN2/lhBlQswNndD14iY5Oyw==","signatures":[{"sig":"MEQCICzFHAub2n4x/06YYUchTU2sLH5MItj3uQvlVZAlf5TFAiAu7ffvDwXJmJQWII7FZkJZ21NNaV0npqQLJvkwQWNnsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkXICRA9TVsSAnZWagAA+t8P/AmbPBZVB43P+DSE4ZyS\nvC5zdk/JA7cpPEby8d/U7oKQbOdZW3OW6aq8DZbzfYmOdus7f7vRrXMK65LT\nWfkGbXsTWnDC4oF05bXbHpPupb7g1lCyqvrHsjXGoiIgUH66aW/fNEC1FF52\ncypLij4BCdqrfpZFgCcZvPdOeVnxLEQn7u+5QHHch6YZxhi/rDCef/gFmed8\n4rmMAyQl0B9mdcU927+f0RuHdF+AtrQhVqv0UuiPqGjguAgoRFpm3fJFghOt\nl6QR6klW7mWCPLb4g+ZjAO1DrEewwILLaXRYI6o7DpCo453HSWRO4VeatMbr\nAlf3yj2z9IeZGVTmHanW7A/T3rFNyjMflkQuJvGwFVUEUDv6qfFcVBWCATjr\nx7Ayewo28PxnOTcmo76xqJoFcBfjottGJRZark5DA1zDHrv31wgqCh3qiCom\na0tMHnGenmAgliHbJ2ocr9dZbQTpfKbqnzE0020cmLu5qDfMRsQEkduSp1rl\n2eNruoMMeNirGarsQcTzkqcYtflwXUxkf7gcexXNvBErXEFjcnxHNlyczEyq\npaBGnIjNBy6MpjI8ETJmUAbNixBonxKWm5jHYocnaTp1+I8+r0UJCmB9sCGK\nftFcC9yz1seIwuoZpOVmSzc7msoQEXYe7QHIMLBp2po3odOOkhY0jGvm5mox\nYetX\r\n=7L43\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.b49359c35.0_1631208904557_0.8511172028610012","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/typography","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ad8f800794b4076320814648e2a1c6328d9b025","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.470bd34e8.0.tgz","fileCount":22,"integrity":"sha512-r5uKnVArBOk7mVWZsq+9jYjG0BSKQcmJLOseGuykzwqAOOHc3QiDbanI/diMqXbOtkaD20Xj0RzYLOJV0ZjWww==","signatures":[{"sig":"MEQCIF+3wR+EhZwa9MHz1W8O0dmqBfy9nME3+sLBGX1duf35AiADwBFZ5jJkA1Iu4b4vh5xmOwH9ArjuNiXvtze0xKXFRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkvCCRA9TVsSAnZWagAAsdYP/12J/DRlIG6W/ZTaOqMb\nSS7Yu+ED1k2sGdtxLoX2uWpPZxIlxbtD6iga0382/u5AcS45ZTTNYr3pqMh7\nYsivtiODz+0MmZDwzSvZgt+TuFTiF3g72crMcAoQP5obZS97aHR9ydfgd0u+\niXG4eXY0zEldsd3YgjDfjUgsmKvc3Mw6QZi1m5XBmIK+0qGY2MEZsVFinpVs\nKfxoKiKaVgwM0SEn+1NjSolVv3vbjCZvZDMadCsFdNbanK77vw+sk1PKrNip\nISaAvfHTVsBZgSM6iztSyCqFnlwxc9/b/NLCDSaxWgjy3JDRFdSiZN7Sl6ED\n0Q8QCBg/DoRDawa/IuqNBn442TIkr2eePM1rOcp1rtU3bHWtZ3ped6+46Paz\nh6ZQ5v1lTwwy2+ASZOx3FZKocomRl8guh4uxG4wXdEAdQOo6QB9fTLnivjz+\njMW5CmF9Dd3s8VESZWCAYP0qT+BAi2sTK0F+/e0nm+lCuzAMZ7ej/vmAM4YV\nn0nEbb85QDFYxC4v6pktE0ou6UCC9gEqDGZjEO+f3JEi4vDYy78XvZmLMdKm\n53sNVeJ0mid7zvgQa/nPBQw4OUUA1BariB0NCgz2aK8wF5cQ5IJWJcIXxFg0\nym64vRxCN6+hBSbhsV0PGGVoGEqfWfWoc71L5iaUPnTB/1ATxuN4DuGivdmK\nRR2g\r\n=/e9R\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.470bd34e8.0_1631210434515_0.1980851333417788","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/typography","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d48a01771.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04395163e61aee098909708cc3eed8363c5543ce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d48a01771.0.tgz","fileCount":22,"integrity":"sha512-NrRJyAsLMkrkrNXuDO7C5YcfKlThm5/hqBRDj1pJ0D5I+HxtuFQFFRo3PZ/uV7jOtMO5Yk3TYLpvNT7huO4w2w==","signatures":[{"sig":"MEQCIEHjC85z0Ua1ycFkpa6ktImm4gvvSqQ2hljFtElzd6mIAiBT3V1Cx03/zLBf5gwHpSdTT7NoaDim9BgWR9uP1r1Uow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk3yCRA9TVsSAnZWagAAAlcQAKQ8VFPB/aCCTAK0Rp1d\nVuhaN8cJ0nl1qmAdisLfTd1leMc1UBy8ssaC5slQQ0S0oOjNd+uhH/JJWyq7\nR0TAeXwR5mO4kU8PG34EIwfdmaCk37PbK3Ajs6iBMEZ6hvG5CNvlH0SNFoWH\n7ZdpN4cG7gBNBGmZcPBHXml2XmjmJaoZ1UKYvj2a9hgXNtcnOZwQHhxtFuG5\n4SmLMWHbXnfEuW9VPsutG5j8D3AWdVlppXtk4WfeUPV/ERuOtQrnsZHsmtxS\nEUh7cqN2UQZYEhxiNe3Sb27dLtvvx3KPn7NDNIokFDdgVS7OuEBGeEXBAhzs\n6l8MsK3kQLYNohADarU0C8MD2prZbBFWDmmNtSQrvzKPeBCIwZzLVLrW1b6t\nMVOoFdfsGwnnximGSCsXjIyTakSAhHWiNKuoRqu0E8dG5fPkdXEHGrGqg59W\nGgFnp+iw0t9dQG2Wvti/4vteGy4RNxaronkpQ1vMrHKL/b6+CD/AgXlq68o3\nNKR9pKvUKNdYPmmoSxy1qZ7uWSB7owU9r6wYAc9l3eUKDGqgjOa4TqX2+iWv\nZBzOBdeHvktQ4yyDaq2ZwoT/bRkV6rdC7Ur5DuwnIOPTEI6dV/xbuMHMdSwm\ny6liVg0Vb3hqRVG2Z6clHfzI3A0bBsElw2+9GaFrR5VwdXTP/Udow46nMAu7\nR+MA\r\n=0YoA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d48a01771.0_1631210994325_0.14181329366345308","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/typography","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.13db34b34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c37444a784eb4d7b2867a7d18919aea0ed290375","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.13db34b34.0.tgz","fileCount":22,"integrity":"sha512-J4s/sEf37CartEhC4zXsHW8cS8D+6CrUZokRGhHjOWWIu6aMTHjuyJbmSHRM6wGShy11qts3hnKRLv45GVSyJQ==","signatures":[{"sig":"MEYCIQCmu/F2/VN52tHFAwGOZpmTMfS6U59D/6qrZGqfgNWFbQIhALDnVaI8YQsGUOcGU1f43E0vv8T4tU/eTeoVpl4Jd13U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlF0CRA9TVsSAnZWagAAw5cP/REzv9hnH+e1EGAzveIc\nYFAjM1Aj/nIsaNMM41YmyIagRtcdNx4vO5J8OA/ekeUDwl2Qc7MIou2gs5Kn\nh9SA8eTmTlicfcYHMFhBrWAYwlQJUlLOxJ7YR0eAdPOgDHfmHRix2ljcJile\nIMZE9JryySf+3FXcfQzDRG/0he6uzFTtUMSpSCQ936cvz3M/CSnBfObWyf4E\n6i7gwQR17zxRSULHadzW0zZM5hD1LkbEV1O5nNGzQ1uUbqvVwBu3ibY7tO3H\nKW8W5JxP1DI97b5CjXbedwAsc5SntBF0Or+92/PKoX+teR/VZ1iYOXGeVxyO\n11czi9vIYsDxh9p+0S93Dg7RMrjXd33cmQjxnP7VrZ/Ov1K0zzL7n1N/lput\nuypLv3JvvWPnhbW7OYTaCnA5g1j0QGRJvyU7zIC8xZ9H+s84fPfSU2er6kJX\nFSz7mwF+1tLWrmHMDo76R8nM9uj04Z+Bw4e2Cyfr2KbN735Hfi4YfHIce4IV\nmsFfRSxe102iadR0/upKdgggaxMQBOlAnwk2onZZVmcxdP8zkRyvBiPYgWrV\n/um3wsGf1PdU5DZzJ7ULmZAoebwNCVvWXd68Nkp0FkQMqlVZNKkG+rsmTlQR\nf01JLk323mQWVAdlzQuay//gV+rcjrA2rDgTQx5qZFWPKC3uQ/EHLGHOTQyu\nnrUu\r\n=xFa2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.13db34b34.0_1631211892669_0.49933625789114644","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/typography","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.864798678.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad7c4a71528cf0ffcb060b0c839b5b0c6b325281","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.864798678.0.tgz","fileCount":22,"integrity":"sha512-GpRvG/HXcWIRjrv5alAKV2Amq68ta05mDovMuNqbm6bovhHjwIH+CwK8CKFtDDsmIgaAODp2Jxt1XsSi4hj6jg==","signatures":[{"sig":"MEQCICDIEa1iTrylGLJQe8FpZ9xPJYMijf4tb1ZVouid7V64AiB9JA3qQm24M4mJ4sfuUcVy55+vk5A0Ucu0ompuZajQGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlQiCRA9TVsSAnZWagAAAD4QAIAign3LmAoit1HxatBr\nqfEltajg9D1dbfvZ8PMQvCZyI6v3julwjMiG7ZIDwsjf4GH/BlICHvKZj6CZ\nB3leiM4VcuKLvWeR5DSzObFIpwNIpO/+UWxsE86/XbgSXcFyPMFpbBdPChR0\nB3OTW/uvr18+89awPyrwLM1xQTbYNlpqQb/Px89zyZMMc4M89zTONgjh+jMs\nqIkrbue0ICWmlArvBjIBAI+CbV44Fpwzkr69mflxDmvmwPME1jOqLNdPmPRT\nu3YBZMDUSvk4nBJFrY4QLph8NWj4PkdGoYCBsxFGQp4C69CW76T2AHV7fNXO\n2Ff23v37tf7LQTBM0lTNuFgBor+nTLQITI3Nl+I3DbL66C/OE5If5yY0TZrg\nG2vw/NS1TTeNonydL2kkLjQgS4j/XtqJSZr6P3DPwrKhXUf+zYEPEHx4lev2\noI7EvzzCvhKxhHn0ik2NdX0K8gTXvqLebY788Hk+59lNbIaUyx6cMhhX07DH\nt5dGW/RpdL2qrfJvAq8PwFje3SSb5ZwCf4tsblfF7Esewnfdbta0l8Edh3mq\niCMQ4a5U7Oj0rSn1E2yaiNryjzIVkjzYWs6XFS7d964nOOqQWk3zEoLVZPCz\nAqcPVoJUmV08ks9U/VTFyXblE7ARSW34AAcH1WJ8Xu3sf45ONPkLgK7Mj993\niWzJ\r\n=60dA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.864798678.0_1631212577959_0.19167391784798005","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/typography","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20103a85a3c711f27a32dd6216dbae7d705c76de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d04bda3fb.0.tgz","fileCount":22,"integrity":"sha512-Vdw6S3wfnjVoLkMO5/k93mR/58F6fCPKgLlpeiP4uTpMJXbt/Osw69QyqGDap/fRjP6hH4/s5mOPUUnpb6rE7Q==","signatures":[{"sig":"MEUCIQCoOILtTunruMzPfneLcRn7zPu4o8rlAN+nco+dRA00dAIgZ4RfMGz2b+IzbOX1SlEidzim0joEX/1+1BPVvsertXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3ffCRA9TVsSAnZWagAAjj8P/RbZA7gnAQTdBy+b7QLP\nLVpxqRfFkhSoGdiwbZrtwaqiSoUUKCDJONe3SexEYlo6rr97a0FoxbBlRkmE\nl5UMTFH70AC3/h08Caw4/NAzPYdY936aTvLGWm2OkzSEglUfA1rVVp7V/Rli\nzgqXv6jKIXOGvxuBE2sPH8O9ciwaEILZJjcD/Qcb78YeQm3fgutnqP508Xll\nvjRhdrWs/fh6xgQg1lRt7i6u2dRQ9qwdD/GyEovrVqbbVdtXULGoQwMcIhUb\ny2QDnn70XCHGNJMA2R3ZS1b8H4qNFJzwdxlkeCe3so6fe0aC5c3lpDnZ59vK\nUYXT5x843f8N8LIsBP7La7MrZdrLb5mEVqN0r1v6TxFxtBYWUnLIdw4Gw9kV\nP6wZPVHBAT6CWstzhjZrD84R5nrxtiWSFOT/Risxvbw4Ol9QS1O0S52VJMiP\nFhHHdTC6hXG82Gb4nFeUM3CveOeOiFK94rdsiV1MaCB6tXXrigLMZULmJoVt\nCGdWMgYkVsR1ZDGkXpYufbSZX+GPKuoHWohy8soQAJoN/g16hMv3fnG7qnJm\nYpO3Mea53Ilo9lMbSQyFQjBS5A19Dr3StDPaivS92HKPkI2nDqv2H0omqVBj\nq/ZgfeH6d4xmqZi7k+vl3MUSabR8+0+0cAuCeRcCMO0O1TMbOsSgf4jCFVoB\nt1eX\r\n=XAJP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d04bda3fb.0_1631287263522_0.900214601971898","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/typography","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de117fe4c9b30e80d225c6bbcf4e564b7245e287","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.5533f73d3.0.tgz","fileCount":22,"integrity":"sha512-NgQ+3E49xkN6KfkLypKRamO/+SogkKSBZ2upRQs6ooSeoB7ET+3G9UbXzvbGRHrbyM3B7sKnkkWP+DlPFCc29Q==","signatures":[{"sig":"MEUCIQDG3WugyQA4UvOTa/BP88kgiQ6b9Jy6okXYTy/bBZh8RgIgbMg1+fmhPpZfDYIcandXomfwJfeElNQctclDCIvUZ+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9ivCRA9TVsSAnZWagAA6dwP/j9549+cjCU2DEGM+eh0\nV0ceTA7mio3cZl0RQb7x6mMMO5AHcD+ujcTSfNdbG7jw+eg3TpYI/AqnijC7\nYhXF1zAQ7oQI3eGeVfAMUSevxdA06d8krn4T3OlNPuZzeZ/mcba1oGjK3zsf\nK0H0lSf3BKQPkoCzdPGkwEOaYTlU+HOznz4Zt5ll1wLL0Qpo4sIr8AsqD2Dj\nBbjSOZZK0dEpg6hpj8vFSlY7JxTP8tB0VtSU+45KNSePG1PUZgE27J/D8Ahj\nbGFfR0txBruI+FczSmSd19ZWoKlbkgsVq3W7LBRflGdokOqjyJe39nDn1uc1\nw3EvIF9f8OZYp8SMmayR+684vjg44pSS4rR+4EZjO0ltR/FKuXsyys3EX7hF\nONcaTZYQAG4L3lgkBu1oaiUQoHsMJj8U4unnnEi4nPPP4XNkbSg/K9wBpADx\ndUxVzj8Z3edJqkzVCyUl9OzxghuHWrRIKt6xmixiVwijvWUInRX7vyrgvdMv\nbBXxIp4u2h25YHLNQOmovddoQTG+s97J8qjqFDB8wIy+wXNq4FwPZdpoa24h\nNaYhTulPrORrPdoGZ96bCwEt9a/z5kg3k6RXGcTIUfrf7KdmrbpBeCAiyJ5C\ni0P4N/bpSGfMo/xrzxk/Sr622c+CNY1Z3KapLj5nEeaKxC7a9aqQcFBEkNkR\n6Kog\r\n=wrJH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.5533f73d3.0_1631574190970_0.5897162637495477","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/typography","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.08398f880.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b87fa1dc9cfbef7902826cedfea39f14730d3d0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.08398f880.0.tgz","fileCount":22,"integrity":"sha512-AkuPvbIT50igmm/dRJsbc4lB2F9eKkdBlOFom+2jiBJKh5uepzYNdwCsf5iMjZ11dAPT8AhwwYGYNFlIyOoACA==","signatures":[{"sig":"MEYCIQC6ezQZOa2rYaw/Lwc+RG9jMwcgeqVr+8SFE0c7HgKLFAIhALQBm82nBdGbV40g7U/GGdGmI+gLuq1+QegY0FkojLVx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9/hCRA9TVsSAnZWagAAifQP+QEmnDfmqjOSplbwMdoz\nPNhj34WPqpg8WsWaNhG9F5+iBwuQo5ZuQy9x8DgKr/Cqtsx7iJzNsCWdEZp5\ntI6UhcIMpfXmuU+nIPyvgvcVQQW/7e4RrGUqfLmLK7XkouvC4tsXInHvxL9v\nOHPMiNTuSj/E6qgEvVtttXfAklT03US1Lh4p57P4Q5yqgyfFu9lDDppgET2w\nWdUs2UA4ecLoCtcGkKTRknoqrT0Ay9WVqn84Fu3Ezq7x6Em7CrVqVGZUzxR4\nx+O3Yfq5mWbq4rekMeDQ6SyOIKETgGXlDGQ1indI/KQcgcdiqZXHAc6erQY8\n3Qpk19WeTZaNNfAYlZcDpxlYPrZ+wAhKKXCUv7Mn8SVlz5tdvU+uXoBf0lhg\nepJ+obAxrvtFElvGGGaCxrJpnNsGvahKm5oCSb9Qm5xUMBOwMX6PNROIAvOW\nR/afHP8b/sa40tH+iRiqyV1P2ke+I9/sXUl3/ixf9YURzUBi5sqiv1kOey2E\nMHyLCoEMKw8tFaQulxgGAPVrkuQZMg0cWLaOIg61D+40DNDp51y0TdLFZOB3\nKRUU3yVRd/4UqSoj1on3kvzSH852SAmFbleX+PIQV413blelAHVVsX4Uo+Q5\nbfBsY+gmjnivogAaGg8qxzZc4deyhQ0RwrhlGXUQGxlz+R5/yHFN4EacGpqs\nT6wC\r\n=6Nml\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.08398f880.0_1631576033118_0.309696172059881","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/typography","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f98298713e1e93dd6cf6d6d5efbb00eb7663ce0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.818f4ee93.0.tgz","fileCount":22,"integrity":"sha512-zZ+RMgD3aQsG6qnwrLLIHjJiq+xfsDXaB/jDnm8TY5pOSeo0I/P+hAZDyuBqwjcvOmSRZ8dg5xO0Ef9IIkrC1A==","signatures":[{"sig":"MEQCICte4WD8NIt7CqM7M3qXGy3cNsGyOxmzyHZRu0VQ6baEAiBbsBCmIS/OkPI7xX+btbWZ/1/UQ5LF+OPkt2MF9kTAqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjI8CRA9TVsSAnZWagAAzb4P/AnW4ijbg/sYQQP+lz/V\nvOxmBEjclpehTxk5XmJp2BL668zRjgkP+8+zkdx4vf7mzoQBxVUSJHWlkMZm\nLk1eQcA7gWilSq1ILUfT8g6nA4J3KFLHrveWFsz5NDWV4QtqAztPTATw+Ed1\nZDqdz4rf2j7gYp3iLIGeQCTPVS9PIMTOYY+LY5k8XqMuNFM0hBmUFyAqVE4O\nxnGySuvjgrkROklAxo/znKBnIUjc6PdxYeZJX3Z0xsW2XHqsbftzD+kMweUG\n+HGAShDuJFoWiNu5qsVjWJDHV1PS21h4uu7O90hfHI6qaqBdnGeVeyIH5Ih5\nAVAZvdK0XQWB6Q6WTwGtD4F1hWGmmJKM+yVMY28FjKCtFckrjksE6aD9fXRE\nwJHWLVDVghVLrIxesN7EnzV426v7k5bZo7JfEnjxPv8uAaKOUqPj64d/D8oA\nG1Lfa/XW4icb1yjxET/CROt+kr888s5Fs6pW/Eg6wJgt68JHzqpMFW4qV4J8\nkN/zjAsEonKmBIuTP9jmi1UHQ20wAK7TxyJLN79Y4sgkScY9HQiReZwn8wrt\nXXf6pjgwizivSvK+yRX8eljHvsqU/KxZfnoRMVejqWqP+iDOOGP2eXP4C52f\n56UUNqWp3sXmXp7E8Jss4BYSi9z7z6GIJBQmmLlcowLi6+L2hjYkemZIZeAJ\nXymF\r\n=V1bZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.818f4ee93.0_1631728188340_0.7711835176609942","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/typography","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a3fc53fe48bcbec90793fef66feba559e24bdec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.8355e14dc.0.tgz","fileCount":22,"integrity":"sha512-mK1+GPmqEzhAkSk4bkw4C4sfn+ako3GJKXKEVZYrWl6aANBalcpSJuL8AXfhRW5+oCyaLtXZ+Lu4DZmScYJhtg==","signatures":[{"sig":"MEUCIQCIZIqmM09Jc7lPshbnBtryOHNEqeg884BpZx/zBkwNNgIgf++onnriR8+Oj/fTANfjmg5kmomNSLQs8o9uwpcuFNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkV0CRA9TVsSAnZWagAACLkP/3u+LsNwCoSNFunfzXp8\n2kbvkZgiBwM2khA9GbKE/Vy5E5xwOMaW0cyOQE6m4jDuuXTDHgbQN4RzY+iM\n5rrn27FKXgGhuXBaxRNIs/LdtTmQ7aMKdxBZ9JAhLetQC2cgrAQEaPu69t8P\nx+UK+RlayfMsPrQPgxWWo8J3FYVhK/dlCe73tXA+U4kUrfpUnTMv3VDLUPNE\ntjL4XnR4Sr7qtbnuoPPAxAbJyrf2oYgr2bcSK819nOR4PpakAQwCnWMiIllD\ntg4yS+1OSwqLI9EDfprjELXNgkHoJVkx66QaFQB744xybD6Hn4/Z6iStVyBy\nLZa1DIXmYeGF8WfhZ39vpjLhvC7eeF6d3WNv6vF+5JVe540YcA2JxI4GL87I\nUeVRe5cHMahgZlmDJWj+54MRTwE+HJuB4BZh2lzuA5+1vQHXfTOXGk3vMvbI\ncWdQp70syUYeE1EzxL3S4671g6lC5vtxB8K747q+qB/k15lwEUTfRpNtn9aS\nbH3ZklM8xGhpCVtWUY35g5ONo4/YqH5iQ1Osb420SmNlElaJVdnrvXHQA1Z/\nsnwTJbcWb3XrbiZcmVzcZdIawRz6XAcJylyhVOgP65h+PFPmxmrA5pbX/6eW\nYpa7GnDgt4wOSG2Ww9vuWs5Iz1SBDT719lxW+YcFQI8P4/SYmZZCSKTPVm6R\nUzb6\r\n=VZMP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.8355e14dc.0_1631733108594_0.5452567222028639","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/typography","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"050be52fcbdb189a94550ef08d49f75488c082a3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":22,"integrity":"sha512-pVtxSjqY8UsBirmjArK3M7ey0tFA14Trde9HxV3tGyC5OYV2MND5oZyYHrEAD9D2MKe0DINPd/D4TC1+FUI5LA==","signatures":[{"sig":"MEUCIQD0+PhKb1caf8IYkrkgIc45m50+nzSw8uScdUYhQ56nlgIgStgO0k0fw6Pv6Ic+MVCPS4c9abCg7e5m/q9iPtu5qjI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmyKCRA9TVsSAnZWagAA/NIP/3JZvyLCWYfmE50SnzVm\nsQAQF8zEQFIEZDOA4J6LA7uYLWsvM0uIdM0rD2Vyw90s4FqjT5YqDg5hcJ6H\nkWOc5yvzCvmV5eAdno0OrNuI+AtvzuiUN1/25OKd1E7kExidib9gbdFZnRCj\nmDGB7ELgolFgq9cgtZj8wo5EcON9tEsJJxsBFk3bVHsAjDxuVOj3mSKuIFUS\nGUocdtmZlldPNhNuE6zahJMACK54xHPQ3ZpLEvnyBk4cBTZAkoofmhq+aDRj\nkkLo6r7RsDatBrWVaiOiDp2aoth6kKnP+mxO5ISka9/MY022prA8QOxgNXZ9\njHA+eVbQYf/F6B6Eow9Qvj1XWtHGGzKTRSWgWNvftXyR/kFd1TSum7enx+c+\nctllhBvxvtFMotgad1zK20KX5DlYqMI1h9RByFtHiWCq80xwgPjpWe51UfBj\nSwnG5W83lHjwAKxSKEuxXvK0ZdJoln1j50SnfZ0T/Z2XXosLL1NOoI4vsg24\nAzhu+SVqmJ0SV30FZcE6ouO7lrFOZ53cPoJ8qczIecqJSXSl1Sg6do2It1Ds\n5wdzhLC1UlIeumgw28IiHP3BF9FkMfDy7bffQsYEOown8kHvHR2INW5DEKiL\nsLU588AdSyBgBffgoDrsIT4zlUVCIq+Aj+kNYs1ortgOmdW2awjDimlby1io\nkqcO\r\n=WfPF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.d4e16a6c4.0_1631743113859_0.78525763360764","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/typography","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53fe199d10b8366b5cbba242000e69c1965e0a33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.65125b3a6.0.tgz","fileCount":22,"integrity":"sha512-SPulUyj9p5CQO0GffzcwVdAUpObpB3ygJWl61QTeggOSdUS279GpFAzAhJxUmDeHQfIv9YR3RaPwO71Rc0bJPA==","signatures":[{"sig":"MEUCIQCo9Yk4J9ZdgrTm/yzg0xAs3G43+wkHeuyFIOoV6I4FZAIgX3JUu99Ts1XttTakf10U9iriNwxUOlMg0qYRItcGcqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7RECRA9TVsSAnZWagAA20QP/RZUQuozLu/1adrul/Sp\nMbLdYLV9Z6ZaGXIQO2NQxkobNhg7azX3CG8HDi3qtPnDdfN0H/Zrorbq7OfG\nqqmYiigaaRXjvSH2dMRc3j81pHcICvaBFEAA/ObMHlBNOX33cxU8HnycRZRx\nCyokyT21ZVLLKKGNuvhjzfL3FY0bCSno1nDaBSybd+kDBboM9TWqCrWJumy8\ndPkXoLPfp4qaFlGzn0QFiKaR4mBaw0QTMjz1swNs7dS7Q3Ej1TOrISRomrjA\n4gjMhrJNqV9gRn9Ku7NGKC2gL1nxYHoVBxX0XnjIF93VhyepRDi1P2mx5dZL\n0RH9XiyxrX6XBvS9wjVwiKLj5o5plR28exTt2131Nl/dfTXVSb8PYQDtrd1Z\ntYcwBhCFRxJEAlbVhS+LUKry3ZNvGuHLqi80h+C9Few/7nQP5BqJLj1f1OhX\nANNFq5xaLZR6AsU2jI2XKmOivT5BUlYlWeXJ3zBSn186Vy1AwS6pd07rMK77\nFlJXKcqYubDK0YNlyngvURhlUfy6grzrNq5mlWUIxgH/SEcnnppHPRVxEuMT\n1La/t1Ahurh4oz3IiwXj8Wtz9+whfLXpCBhYh2GZeENwWAnOTF55SNIENVaQ\nKdE0KZ6/Tvn86HP1lwUyzv5a2hIN+GWTiYA0SON1NGfC0yHq1Nd8BgMbhvH1\nCVFG\r\n=DyL1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.65125b3a6.0_1631827012041_0.8225288567369267","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/typography","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.80a583365.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38f316a1b2cd6ff822435c798f9b7092b723141a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.80a583365.0.tgz","fileCount":22,"integrity":"sha512-howjyatVD8gMUzl4JgwlmMB0Jpq5CzIwLzalvjMBtRp73jxJ8cKQT0Yh3HIkfdN0q2j8Pk+JhmB3eWe7UMm4/w==","signatures":[{"sig":"MEYCIQDssW4WrW2+plIIDhjB5tNfpBMdZ4boFqX4qu2gzDsXVQIhAITiK6NyPOlZ8O00Qg30i6Co0rS5/kbNZB/ZV4J3+Txq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126542},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.80a583365.0_1631910916865_0.7925109482583597","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/typography","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.83900936a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26e045aadae877e053f6dfbebc75a64d956858dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.83900936a.0.tgz","fileCount":22,"integrity":"sha512-VKkAq17hbxq+68wi4SryYSFPXfuudxHUg2kWVUA0bVAvfRYS3dDxoLBQHP1mJ1A3h5MxmtwPiTk7teexghkBTg==","signatures":[{"sig":"MEQCIBBo1pK80uXrLpIppmz+YAw0soXSQLTHX5xGvDRdsiWVAiBnu28eolgPK4WfbuQ750INlxunS7xFDVTlj/imJVOjaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126542},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.83900936a.0_1631921030622_0.024138055780814183","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/typography","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b52a98a1d07b6f1ce39e773200c6882ea5eb2757","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.860ad06a1.0.tgz","fileCount":22,"integrity":"sha512-U8rfRuvxP4Ms/kjU5wqADv9ECHvusSd6julenWZY8dmTlxGqfEIQr735Nao/HWGkTdR5+cQskjHRoPzPpja4Fg==","signatures":[{"sig":"MEUCIAbp3Sd8GPUXbLFtOnQL/wJTAGyKv6W2R69DPHbyUTftAiEAjBThqJhKui5onbRz+J8Zy7smFIJkdLOlo++lQ3mYsIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126542},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.860ad06a1.0_1631921730301_0.39083790129247387","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/typography","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30591a24d1dbf077b1736455d8e4d67c3877f7ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.3b8d4429e.0.tgz","fileCount":22,"integrity":"sha512-BkOaNHPOaNaVVhQ+ULZgfi53CZ5OaEbeurF/TmJ5i0YmGn94ul4/pmCiUFhIkVMykX7cc2nxoHcCseFv6H5dLg==","signatures":[{"sig":"MEUCIQDn+O8r7ZgDNwBeYYX7Gq5SGuhLre1QwHxVK+EfkEYsgwIgFw2kMC+oECHDsQrQ6D/jIqCFuyW/xsaGMROeS3i6ntU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126542},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.3b8d4429e.0_1632160023767_0.8055056428264091","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/typography","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd6a54a05c68fe143d0347cd9a6094ca8725e916","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.2da3606b9.0.tgz","fileCount":22,"integrity":"sha512-OzskQh5u070gbFG7WbNdk+Mg99iU7m16AHwD5V5SLiQiajNWZ7JJBCuIRSSRZ5scj2GkEep7D5przKiFFU9rGg==","signatures":[{"sig":"MEUCIQDCONxSjGi3TUUR3351iSyPpTbgtlAHroBdYxawzcBPLgIgP30o+wTR9+34QPJ9FUUJCfroW4e11na6CqwZu/PvZ3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126851},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.2da3606b9.0_1632166634338_0.7261263377311455","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/typography","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cda94b844171a44cf16826e0b4b730163b3c525","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.e8c598d1e.0.tgz","fileCount":22,"integrity":"sha512-MX0D3xL3krMzVcCDKLNzh+yReQF43Pw5jxDFUSc2GdR55HaQqoFTE8o07NcmgovFvrZiS8QBDbtAJq/nj4nBcQ==","signatures":[{"sig":"MEUCIHpTjaY7LoXIAISptE4cDK8Rl58Qz0T2ZflY+xA+zgotAiEAyRfQulAa6XrUHelBgEIp/eqpjGnOXiHmo+wk0i4NSck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126851},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.e8c598d1e.0_1632172283698_0.7557122204220257","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/typography","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f948059b59f0121e9065f710fcc8bacda12739c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.1340ee9f7.0.tgz","fileCount":22,"integrity":"sha512-tJat1ZQ/di4fhkcdJHwjE00+ouX1KF4w7lF2pHW0mcxLKiVU1dNdelCswP2UI8FucpM0Z/twQ4ZcHEmAhD0bpA==","signatures":[{"sig":"MEQCIEbFKSrPyHCUY1+W7bH2nHcSgJoHnTz3BU9V6VCECnaJAiAOqcDnu7ilqrSj4OqXaMHnjhZiHu4WkzdvC7DVTx63UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126851},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.1340ee9f7.0_1632333444189_0.9649883169190627","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/typography","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.65084baff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0cf703f56a15c6a421a4e6879302cb1a958c6f8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.65084baff.0.tgz","fileCount":22,"integrity":"sha512-4fK9m2wm61kpvQO65CX4kK3ysU51j7M9XdaSGAncFHaD8lEMe2YmJexuuGgnTIeMEUZfxpO85UFXclfjqJ9+Bw==","signatures":[{"sig":"MEYCIQD+K0Q5m4GJ5rADt7+WkhYDH3Kyg9K6Jg9zs7jFsERfGQIhAOFz4lqRRUZBOX9j3QWH6KzG8702VXkxjDTnAg/N6dC5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126851},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.65084baff.0_1632432295687_0.4737325943474884","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/typography","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd8621294e1c21d7c2c34ecd334277509194b5f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":22,"integrity":"sha512-skObZalubTkwi4+DPXVqq1JkzxTyFakqb4WPWrqQh4lN13juOXbjzF6vfo+QgaaVN+iodikZOmDOnScHsZgidA==","signatures":[{"sig":"MEYCIQDImLPI3rJoNZRIJyxWcxfdF10Cmap3XgrhVsFq/j0JxQIhAP7iKX74sBCRlrEdSp93pvT6PwLNnlBw4iKzEdxFL4YQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126851},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0-canary.c79aa0cdd.0_1632490879814_0.35314888501596187","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/typography","version":"13.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@13.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da40615bddea8c56496a89b3a6f8f71c1fccce96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-13.0.0.tgz","fileCount":21,"integrity":"sha512-UfaK4vT3LmGiiySf2RVIrf7fJZa6EJadFwo4YUMJx9bvUMRlBm1oI8Vo9fYpKdLfuSTeA+2BlgbwYVObj3laFw==","signatures":[{"sig":"MEQCIGwz2eBpBRi4qtbMF7TifMG6sMDoJSbHmRwUZpWDHE57AiAPB8nuG79DjMUT6ozsa5wL6bdbkctiPmk9eNHTWF+arg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125927},"gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_13.0.0_1632512720791_0.5809140630501426","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/typography","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.198431fcd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21394dc045c4da14fdc1b407ff94ecde287c1808","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.198431fcd.0.tgz","fileCount":22,"integrity":"sha512-dd/q5qdNbiFAh/pkTve0BBS9osxXQHZ1HK5I9YZiTa2HcyoX8b30kdKqbfVolqzyUwIT4uozLIDAgSEuegZUEQ==","signatures":[{"sig":"MEQCIFrPUM/7Fi6SASWtuytvoDE8D1sktbDB5vG6FSAIDi7CAiAHZuGsH+9PsHy+uRP1x/cOx8dn4sHRJxDWupCDqusOiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126851},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.198431fcd.0_1632512766283_0.606836985980669","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/typography","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29bd433952db9f52234cc79ea9a3d50f62f87464","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":22,"integrity":"sha512-u7oLIHTBqxfou+5rvc4okXgn1hjaFnnLggPXAdNPLudZ53QKP6iU6DFe97hOKax3LhQp01OioA5duAo2IZ87ZQ==","signatures":[{"sig":"MEUCIFQJA5HD5xyIyofxsyb6/t+dK2taTcz5nQTzY9E2f6ELAiEA/MkgVr5O9Dy/U5wuIuAgNDCQoe9fHi2hmv/aXe9W1XI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.9a02b6ef8.0_1632575432776_0.3184128810904039","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/typography","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc54ea4467d8cf919dba4ed99c0efbe3c2a28f94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.758ce31d9.0.tgz","fileCount":22,"integrity":"sha512-lRuRJtfUkTgdrhMDJ4WCoXAQl08RFagCTcooOPw40B/WLTeESiFYBgDme6vIGm8rvnnvLZNLs+LWCCU9V8KRrQ==","signatures":[{"sig":"MEQCIHtOokqQLzvzRBxZggX7SZ/vYJAisBozc/A5sm2nv12fAiAYd0uqNEqIXKENUKKaNC4XkHHxng+zm2LSThkh1I+OWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.758ce31d9.0_1632763725916_0.47292180423935437","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/typography","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5514834c39019559bab92a5914be6843f9e5f3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.86b50ef74.0.tgz","fileCount":22,"integrity":"sha512-YtLUVWDsBZ2jXXRBlUGj8PnotYUhW3unYNsn3NjhYiShXytlkKQqrZuTRbnPwSg3ESlTzLDmGewyX/wZHYEO1g==","signatures":[{"sig":"MEUCIQCnT6iD3lRNvB/uNG8RUnHSOaaH1O2QqpPclygEaX2AygIgMTil0NqflRjAyi7Hgvfkz3EhSvKqKWcndp0HLRIRSQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.86b50ef74.0_1632850949668_0.5370388355577884","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/typography","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a12739f85bc116deff1689c915ca2240fe4d8af6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.b2fe3528b.0.tgz","fileCount":22,"integrity":"sha512-Eig8JmiB4L5axLR59k+OMva2stnR/7t/788ac1XEp/j2yF4GvZoulbsi6Ut5nfc/CTxXE3MkdtvcTKGB6iB5gA==","signatures":[{"sig":"MEYCIQDiKqEGMDeORJQC8QWzI2K7s/rjLKERt7OS5KX2nI8M5QIhALftgYCZL/JC6AZj8PK2/+gOGfp7Y/XeXYStyDOhBi04","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.b2fe3528b.0_1632956183974_0.7074529527765472","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/typography","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.586e740dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21f0f077e20b32e96e0c95d2acf4b0b23512cd3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.586e740dd.0.tgz","fileCount":22,"integrity":"sha512-M/ovA2We7owqUIzwJkgZM/CRdtcrQHikeAyQ2etxjlGiRxOwVOSBfO9AxZ5zKD2H906qG6spGvQMwo9YLx4/Kw==","signatures":[{"sig":"MEYCIQD5E9ML1yESGgrF+EKOdYr/D+neJuUUlA9rFCjs/aDrfAIhAMmPv25QTh0p1Jj4KCZM2mQHx0/E0MZBuLaP3yyIsT5I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.586e740dd.0_1633019446096_0.34536035350600924","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/typography","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f23c9d2411c72e630968b82f3da3462a51b362e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.2ac92d766.0.tgz","fileCount":22,"integrity":"sha512-ARPK/uDZaVjuxP7D93lKyNai7hDo5S0mvArVBryFd1vA+ddUlpjyHQQRAIexktlK0EXtz804DTq8glBRHpXhRQ==","signatures":[{"sig":"MEUCIQDktU2PxFw9mXdhmtM8VJrRCQnNQnmJh39R3rsacp1kgQIgEj7QhaxVanQHUb4W2fD47sH45iE1AivVQYEKFmRLxGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.2ac92d766.0_1633462083019_0.2790674439433469","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/typography","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c6b12194edf7fe438f97dad33a4eba9a7fe4053","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.353ca7e9f.0.tgz","fileCount":22,"integrity":"sha512-tUBTk+wv4gou+NfloCRPbGpakQL0pvoTJmP5yCgvDdVqBeBxN+8BByPi03LNey7wQnsuZSik5mpQERuqoBp7Yw==","signatures":[{"sig":"MEUCIQD4A945csVhW+KSrqtPQnk8NnWb8hVkskxzbaca5u7HqwIgRIJqQpgdhHBQ732fQASYKmuvQE0RB4XVI0jzzeU2EIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126363},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.353ca7e9f.0_1633718786069_0.45715118144063993","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/typography","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"294a41b804d357f4b27371ee1b2a4cba1e8448e2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.c78ff0429.0.tgz","fileCount":22,"integrity":"sha512-wGehXTuV7tA7eE+C72VkIooQcEhZlO29pdP4adYFowH1EIGp3uB/gSCUBXVdBog/wkX/1Vs7QnVwDjWXs05UPA==","signatures":[{"sig":"MEUCIB0VcVk2aDNbt5oTFtGSQew4QQnEJNS4JIJufOmgY2vbAiEAopHJOIZgfAafqzV3TMpo4+3BfoSh/6JJaWwIusA9sXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.c78ff0429.0_1633972893721_0.023583462190425397","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/typography","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.261f2db59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd89dcff311b5398f22de4746a9d64bbf3d0a62e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.261f2db59.0.tgz","fileCount":22,"integrity":"sha512-WOCdcNkD5KBRAwICcRqWBRG3cDkyrwK5USTNmG0oxnwnZAN7daOpPTdLppVAhadE7faj8d67ON+V9pH7+T62FQ==","signatures":[{"sig":"MEUCIQC2pYKgX8KhWqVTNwPZb5wXGaofN4jX7SrLKCGSai0p2QIgRNuha0xAe5E2vOdZj9xy9Ai6MTpyl660tnHbQMFXod8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.261f2db59.0_1634749148633_0.3753866681302931","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/typography","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf46b96d1bf50bd564bbd400af2d15b872ffe5bb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.9803d2dc1.0.tgz","fileCount":22,"integrity":"sha512-UlgMh3BBwNmU+M0OdjaAMtEFw1EkXqZ2T/PzR0fZzGIl/c8WWVgQvn8Mbyz8q0tj1KBZ5XVXRsaG2m9MhEbDHA==","signatures":[{"sig":"MEYCIQD8+NUJIc1zHYDx6nMA4uaPKBLNEdSovMd4oYxYUVqb/wIhAKVgn6jxJqvmhpY5p/lZ27vzKqk67aWOrMHlbMehYxT7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.9803d2dc1.0_1634757682234_0.2006241500220225","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/typography","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.348665978.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"726c0f35d644a0c7e6d8768ffaf749701baf9c94","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.348665978.0.tgz","fileCount":22,"integrity":"sha512-8A7/jfZUmcbw5FbBukyehk7gf47ytDw2/4om5KzuNWfnrr6PBKeCU/Zwix2DfJ3q3wAdvwoQfuobAqmWuGHBsA==","signatures":[{"sig":"MEUCIElBUhoYE9ZY+Ga1KiGIVwUqsaph7AiaBbdwKs52+db1AiEA9NgKJDCdN1x4+oHa96vS/R7ynRcNaMaHtgnqnGYzg8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.348665978.0_1634827808423_0.30898895206716515","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/typography","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe53b6711c911a9fdab57cb0422c7e9a74aeff1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.b2b979a8a.0.tgz","fileCount":22,"integrity":"sha512-mcQd2kn6HWLKn3lbH9BLX2RyFVB5ub5nScSaFK+ZMeYR+cM9B9Z+mxlBno62m9Zgb13Dieiyn6OqI8FNXNZKlw==","signatures":[{"sig":"MEUCID91MQGcZZOYLzbq70oxHMNZkphHVtb1LzQJrUDa2rW4AiEAwOnSbsZVV+psJ8RpSI93o8lnaz31gSKyqrnyEkSZu4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.b2b979a8a.0_1635433901625_0.1479006998465937","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/typography","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"457b9c276d0168f3d50a46bb474cc587c8da184e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":22,"integrity":"sha512-sBnN+ZuMOEQ2u5eI6/OxewFqlVoeoQssZwR2lb4XUVDHrGKWUNbPvnbs1O8Ijybw4IttWVRG8TJMiLJmFRorPQ==","signatures":[{"sig":"MEYCIQDtA9CyTIUeAE96Lecr76aa7sbUfC79VIHEVlZ6bJ1zfQIhAJR/cZvloPdwhyZuhUNfSm3vmNDA+Vt+03GQAJRiDUlj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.1af7c1c4a.0_1635443538171_0.28728587060710575","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/typography","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3043585bf03dd635656dc42ded9d3d24e408cb34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.4afd353cd.0.tgz","fileCount":22,"integrity":"sha512-/ZRLsfyOuv2m56r8e+Pt4esVS3JW+gRtS3ZancAro9amUkHnzx2tjHBPTFGk/gT0iPKb1t3TEto6Hv+dxR/2Dg==","signatures":[{"sig":"MEQCICtdxkllHGvuMn5ALcTU+CT64hwE7PqoEOQsgBLnOlA7AiA9DvP0X//QuVpynJaaK2EugHAcpcjATH++BRX0xP1qDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.4afd353cd.0_1635519664551_0.2749743671070295","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/typography","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.a986df922.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"332f043153675279ab270373117f3abd4af9a6a0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.a986df922.0.tgz","fileCount":22,"integrity":"sha512-u9hDjtyhbHcm66VV5k+tKpvOmg1DogLro0udSowjde9d7khtqCOPVPWL8TJ3hk0nBlAXf35fsUj+ubjbpPj9NQ==","signatures":[{"sig":"MEYCIQDFyR7NLTkPGDgbr7yrvQhDUjXoWknCV10veL/qE2/G8QIhAPaf2eyY7r9NkbuOsWP9SRN9wh6fXaxyyzh+9x31+5Hu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.a986df922.0_1635543273724_0.8705218717149141","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/typography","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a149189796eaa70febc8a7cb4d6fe1a51f2df1a9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.c3cdff07b.0.tgz","fileCount":22,"integrity":"sha512-KRNINXZ7UU+PB/sx2loWVV8887wq6BwsB3y8hTu13vvdUDYaJe5OUTNmVs5+b7QByEMpqagOsOHaCdWwpeIzig==","signatures":[{"sig":"MEYCIQD/ED/HjEqof1foMWAf1FYlksUEX3mKJZSTCS6424aiegIhAOsignZ3T4UWa7+KfE/Ld0YY/ccRk4a59U5Omai1laun","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.c3cdff07b.0_1636484725131_0.5843661904776665","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/typography","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.468392606.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"159e5d6c229956a65207371856e915a11bd1b064","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.468392606.0.tgz","fileCount":22,"integrity":"sha512-j+KSvUli9TYMIH5Sz4yuFm42NJzd5VMm6Fp3jq9fDWYg3tqLGR9O0islUNbCjgPikD9if/Nlo1vCwdCOBT3mxQ==","signatures":[{"sig":"MEUCIQCQfxVcLcC7hnYYmS48+vtg4IdpgxJtEsXQok41Jc66zwIgXMABkZpeIxpVUyL3VbrF+/cHSs97L5frmdEFYe7DXy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.468392606.0_1636659578438_0.8642691222083101","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/typography","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.828f9803b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f6f71cd8461f1cc9102f8119f9103bdf0cd04a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.828f9803b.0.tgz","fileCount":22,"integrity":"sha512-F5KOta5xUfTuZ/dkI4m/h6bvUFZH7rlW+WXieD221cOmKIzftHTcUDIzYUJVbt4sO6Nbj/Usxex6EjYFwZ2vRQ==","signatures":[{"sig":"MEQCIAizF6HhDIW5eyXg+vhKQ3r0T8O/5W9E8942IwOrmRMHAiBvlPtB9rrB0/IsUJHU8vMHet+LhI1rH49sY95BnNVwGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.828f9803b.0_1636660221780_0.4431146644647732","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/typography","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.8795cba87.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15ea1322a22819e4b04a4fd9474d04e3eb00d844","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.8795cba87.0.tgz","fileCount":22,"integrity":"sha512-SPte+IBCHkTeOiXgGjPifGrCueG4AzvkP4nHayczokfqMkJyjjjwKMi9GTr6nvj61KdjLqY/cT2cQgvQPFNwmQ==","signatures":[{"sig":"MEYCIQDjE5aNO5DyrORbxfCl3+r/kKK0mxMO+KUwRu6INnrudQIhAI6qCWfbQ0bDckbQgB+s/cLK8pdsGu9HXSlxL2awBnVH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.8795cba87.0_1636660578283_0.7977586290421006","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/typography","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d90887b71b9c166f5ecfb2ce7b3a072176ffd9ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.cd7f8cace.0.tgz","fileCount":22,"integrity":"sha512-8e0OhBWnMcwsn+xmH0u4STY4tPVJmLWpTU9kJJz7pyIHltiRVd50W84jm28Bvxxrhyvk+mbO9L8j5NFWBJezMw==","signatures":[{"sig":"MEQCIDuGglzzh+TV/U20E/Xxqizt8+UhGjCiqqW17nmLRE9uAiAvuieeimAxK2uXdvTZ8ozaTc3wHha5PIbtJhZByiKTUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.cd7f8cace.0_1636660678096_0.5363138132693921","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/typography","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.207230eb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14f8e39c254fd12883fc63b1c7b60cda4d789b72","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.207230eb8.0.tgz","fileCount":22,"integrity":"sha512-U/kk1zVwUGvnUI6O2kwGB7M1hdHFyA+8SB43NUUeYqv0m+Fq5QW+GzmE+2kSWOHDPl4KYG61eXAkKLE8qBGlPw==","signatures":[{"sig":"MEUCIBa6C+qRxZAUU305G3fLxo1KOmDl9j7bkQv6Pm8bDbkeAiEAvIQJPVAsa1EpJj10LWT2Sf6Z0q+naAzwTQVmuQgI5xY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.207230eb8.0_1636669432214_0.36247419827995353","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/typography","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf077607a8065dfcc962c80e29fd627102543b0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.991fb99f7.0.tgz","fileCount":22,"integrity":"sha512-ZnWFHGRCKaxp+vKHB4/6V5X9bgxrL91PopUNkyd4tUsWeU3rqjzDYrgTRe0scZNSjXSpopsV3fNT4KTlx5WT9A==","signatures":[{"sig":"MEYCIQC02Ly6LpMW9CVrzrTN1j7mi+umqxB7gcf9bVWjXCBGYgIhAIquT6W+fgTT9ephlW9GKUbTFyxpf6iqZRTHgbQSHK8L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.991fb99f7.0_1636670157043_0.493737382641807","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/typography","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.15db4f164.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11825c42089a086debf9490203217cc4db028b92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.15db4f164.0.tgz","fileCount":22,"integrity":"sha512-33ad3+UOF0+iYAvEmhAIc3xtC4BP1akp5NgXF7fYll+6nhG9UqqclitVcrw9shRLGzaudnVwHXLMDQ/g0PX8Iw==","signatures":[{"sig":"MEYCIQDCZt/Cu68x1lWqkZz99Nsi1RRhqaNWFFSqG85Pdbcu0wIhAMpjTuNtjm3mEYFgbJRCXapmO1IzfdAHgzq4WaUHnbC3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.15db4f164.0_1636738159395_0.245963388710831","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/typography","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"815e4016edd1f0f3f465c4b5fe8d15fb9485e956","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":22,"integrity":"sha512-vnpTDk2sYCeQr2ljIJJuRKSu2FwoQjZ4kVWyaYj9J6BbcRnnKPQxSEoLZFVEHvAkopUnS1qSIvulSVaQa2vhgg==","signatures":[{"sig":"MEYCIQDJvLOcUV0G2qkW878+Pwkw0JN3CQbBUWPGZZqlztvDgQIhALG35dkXuHRcp71lTlcDceypZ/cVXibjQtEzqhfzL09l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.8fcad5a3c.0_1636744400292_0.893260071761562","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/typography","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd4858c12d5f22a1fbb36dd8402c7f85831cea33","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.f81fb1d23.0.tgz","fileCount":22,"integrity":"sha512-dHfSHAXi4swTACm0vxrdwAB8ezG45/1vmY3FOGY7CVHtJ1cQfcWTBjUcIvfmMwXF8gnTDnDIRsaeYT0RtDgCZg==","signatures":[{"sig":"MEUCIFgtJAgTdHgSiBha25QVKDRFsrN4IOwMzsnJa6MX9bttAiEA4yIptLq+7cHroXfQvtb9uxgE/lqdL0ic6oanLD79oZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.f81fb1d23.0_1636756787144_0.8138962342591078","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/typography","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bae7f59a28416b86aa0cf580e06a1a7015c4b35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.783f6fd5a.0.tgz","fileCount":22,"integrity":"sha512-rzKjIZyzLODzlfm3/J0p5GeesLFQ8HQSBTBINDChxE4YDHigul+R78lJ04ZpQTZ4aAOdkv0saM1SxKufDKvSCw==","signatures":[{"sig":"MEUCIFLnAtIe44xG8l0SDcnS7SipD9fVejn+XwSjMbixmvRJAiEAxv7oF3E7w+gAnlzCc/+cwIXBIHRXKJYH4sJnwnW/eYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0ZlCRA9TVsSAnZWagAAglgQAJ1gUNZDRY4T2HMhita1\ntSMkQTK2eBVwGRcamdjcagnw0z2RStSIc5ctbAyJSvOXfVgcYLCB+FTpsnZS\n6ohFKKRi6Kb7ILJ5+qXD8twH1w01mtfjxl0iJJURv2Alf7YjYN03uZv0ONPr\njveoyXd3k8a/yIcmfWaFDv0P6F7BLIW4YqZOF+T4PMdxKUFuQnKoQd7VROXy\nUibdKmsbIVfjAq9tWJSKGRPALMPF9VZNNvXXS9QNBDKXr2FVBiEjBcThp/65\nYFuJOHnLP7phIhgJHzJ91WK8HqDbtHCccUc40wGwPGdV+PEdObtKNn4w7e05\nNTMAsLQvNJDb1JTeP++Rk9jTJ5kUnFoLpFPPJYNTKTqwv5A1NlllrcIuEy8p\nfZMGE8BUe/pvY7g8cUcSVlbABKn8AI/OG/QnC0rmuOJbdD1ZSs2oJuwQi+nI\n1ZsedzsWZ4RG5XYQaHhkmaXPrK33rUuTIO8okcaylZ5iHE8PLANIH5ZNezVF\ncfKiaYxNvwbkLBRPkKPMXeBOp2+drQkG/M65Z3jFq5Y+P2+vtfYr+DynYT8w\n5Q+WPT3LX3vIXp0bvlEtGvYx/BV//lNbkIMn1nXvOGwMvjkXQIEAscSZx+xS\nrnhc7LB3Cwd1m5IrHjHIxJ8tGBz4JreSrQ+UOPwXs7XBL8ybLHVOQYNyB7/H\nU0ON\r\n=1J/2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.783f6fd5a.0_1637041764854_0.7701620789032566","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/typography","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ffa2bc9443eabf481ab695093f77e93321cd9af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.d57ec74c7.0.tgz","fileCount":22,"integrity":"sha512-BtUmpyuCIZxNj2WkqCHY+jX+bTJqg3wZB3fmzaHA21NgivRY8edBWbJdAcOI8UB1iJ8DGuF9t6dZpbbF2cp6Jw==","signatures":[{"sig":"MEUCIGJlAk6qLsYM8aVl4Fb/W167MZZpboYfjrsHM6VZN131AiEAuhpFIKSsmq5o7AThVw/f+u72l3jfcGALjax+vHWGjIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9kzCRA9TVsSAnZWagAA0a0P/AkTS+7vfEltbMpV+wmb\n3A7VvmYvsqyXo8Mhpe/0QMFdPJYerP4FJ2cc38Ymf0eYASUShbSCzrpfLkch\nPmBIcbsEJ3ByqpKVboGYohH5n1ZtnGp0J7HBibQjJxCUb3Wh+mx6/rbYYubb\nW+AAMByatShnWch6hJTuEXLuMKyUG6mE4QjcVLyOrrHmdiG8One795yQrkR7\n9DcBMnxis5ofv/siz0tUnMW0/Ec4v7yMsMnKhAZa6eQYG3g9mOfY+VyHpBHR\nOxNP1oau8MQUIOF4JhFu7UGVx2uzvtdQ/nJULsjx7PGw0BiZCrFJmbKMW3SI\nBUOpd3sJ3W/PVSuRrvQrpeV5QayXRZK+M32TVe1vXpWszYEeBMsOxNzB9mM7\ntqNq4dFDqZR0K66zqBXWFvG5dnF5r5CZ1q3UEL7QWeSDY6eK2a1Yp0p9QFFc\nk6M4OAYQxDYP1Uj/+bPOH5M0ZSgGsiSjgIMaYNGJNtxWE7ulTyKHrPWB0KZp\nYEufWwZ/Ae82EnzqbnrI00rlkNdxWWMEq4zbi4dD9IIn1VG/ClJXLQ94+sh1\np/AvNU58hSoJ/kIniFWasaios/fXM9a9NYwT8u+ehwoyG6aQ/8Eybr9YJXOo\nvU8cva6Y/sMdYQz9LHiffQEq1DMhFghf6CvXmw+RhyB9VwNBPa9KItZZddAs\nCLQm\r\n=hIcm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.d57ec74c7.0_1637079347168_0.4877810949732104","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/typography","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.554c71829.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d518157ad546c6b22e1566e1ff7e0b33f7c64043","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.554c71829.0.tgz","fileCount":22,"integrity":"sha512-FjG0XECe7+SdmxAfp+gM5aILycXODgQiy8waqEu7U637Awghhx9QR/GAxv7RRQxJ5zQOlzIg8Czk6/r/dXrXFQ==","signatures":[{"sig":"MEYCIQD/6FH5MkFcZalTxS9QXoJxA8CWrydRh8vXUBQiU5TsoAIhANbxIuzY/sDxOruoe30+c5AiPvxVq2Tjb3AX2ODSORpn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nfCRA9TVsSAnZWagAAbnwP/2b7Bt/yMhZZfqf2KzeO\ncftWIaecW+2GKOfJYAMkMiKPe0mXDKkI/6gCF4sglSO9XUIaUJkriujeoX0j\n7qaJJeOCN228DigJgxxaffQeEfErDSDEDQLh8CHN+biw64r6LHKrxc+syPHF\nSMGDGD6WwA2ksE9ssFyAwVWwJ6cNYoQPDtWP+8FSHIg+wN2FpBkC01wiSawb\nXIJ4zHPXL5/lklsJcnL9bnR+DsitkVu84m357OgkJ6IYwbEgi2WudjP0WoYe\njaIsiO6Sgauem+9tdC2KQNZqPMVI/DeW4znNY/0EIs7HlcuKxSpgWvVAAk8O\n6V58fBsd0c5INNzNj17y32NQdNmqrn0jFmxrx5aU/VCLic0/Ws71EeNuvQog\nSQFcOBWf3Nn0d8VdSTTmFq62A4VaqcPp0iVhGaWfcbVdcgKh33HNVu1c3QuC\n2orhCGsOtBaIoAQEYQkEYBsArO3abuk0qMLQTlTOxJwRhOUrCK1CgKKECT9s\nMqPAThgZR0s1UCeMxf2akC/kZLKlKYd9wZD//pO7chq9W/dnvzfImiZqDHGb\nSF9QoZ+IkD2EDZaJX00gogf6mV1hjuHF00s4uQvHUDEHM04a2P9L8T0AHBc6\nqXR2rjyVP55X8IIU3Mqapm2TcJ8oL2lV6/LJFWC0wCT1UYIFBKPSkzlu92XW\nHs4s\r\n=ESa9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.554c71829.0_1637079519755_0.686961656779584","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/typography","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0dc7af03167315e69f13af99a13adecfaf92de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.3ef470efe.0.tgz","fileCount":22,"integrity":"sha512-59kIYAG3thsUddfsufLS6AVUxRjWW4NHP0yyOCjqJKQmqrMGwnrTDL/rBEJyJ58nQnqi+W7R71U4D767PBYHrw==","signatures":[{"sig":"MEUCIBIWBZdEM27Wk72ieHYcQm0oB1ntuCSZ7712R0ZYj01lAiEA4OJkfJN6P/Rvoxl2msl/sKHqNr4N2WEsJgIcN2H+6Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9sCCRA9TVsSAnZWagAAFFwP/jG00bQqqesfS3WrZzyo\nGG4wKEDM94GRB7zDnTZntQ/Pl3PIgkiEjN6uzKpVu/8ScYSXoWR6cpGfuf4A\nDo9AlBIONGNyFYwqaxxlkrzHp8QFOuRwINUt4tjbrFkI+X0e7/O3tTdOEpsw\nHrIxPPU+KjN9RfKTVa4j4zEVtgrSV3YjIGj97OpU7f21iLChzVmmBYG5kThI\ntaGihtpOF1x0vetIVx2SJ6LVZMD0vCAXlUMnN4wjzP061tGuP0qFW3gxc+d5\nHi2bDp2N0BYgH6pKSodmk9uoAiyxHrAmpfPTOg/E8/5Pjz6SugUGajf5NnwL\nC8/2ll8CKPjvhfLlS76JFrSfD2mvz0ZCu770nSG+IOmriFBBiU4TOQagXu8w\nWdK+K4hoiBDdcTVTjPTF1wampW0r1ntIiZOplXlQAn+TC/6ztxMCa0jBpX73\naxU/eZL9pfgeWRTqhVarB4k5KmDpZyGWjNehdWaNo5/cJbU6MIlrqKuW8vBz\nGIXXTbqcVj1gQYC/l26ZJLI1kAUN7CzOeeIp5sD7sdGgPxkl8Ccz4/qZe8ez\n2Vc/HJcdsdnrImfl6oDJ7qefYLAt5lmCVi+sLOFRWdB6157ZXuYRA/efKf7I\nJeD7vyEZg6g/MA5/z6f1Lt88RaTkD55aQkEMQ07KLle2u9z7/BrGHoYgytXY\ngPZE\r\n=qG4O\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.3ef470efe.0_1637079810551_0.20201356329579911","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/typography","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"obrien.test@gmail.com"},{"name":"anonymous","email":"lynnjepsen@google.com"},{"name":"anonymous","email":"acdvorak@gmail.com"},{"name":"anonymous","email":"kenneth.franqueiro@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"bonniez@google.com"},{"name":"anonymous","email":"mattgoo@gmail.com"},{"name":"anonymous","email":"williamernest@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aeeee2989d3393ffd04c1678c487779ef7c750a4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.61a28b2b5.0.tgz","fileCount":22,"integrity":"sha512-iR68jUqk41FhGvSAx1p5JqwO5BmqU3XjVRMQ6lJVAr2yF5myVFPGKhHWBayehrSUFQ5kkvFXPIAmuCKhh4HNwg==","signatures":[{"sig":"MEUCIQDtbHDaURPBDnJyH9U0WyDXBbVj3kA3EI24Q0sHPFluQgIgG8FcONHQgnl6NY1wjO5ww2hXcSndt4WW+TMzRdRj4rQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVDgCRA9TVsSAnZWagAAPsEP/03oiGqEJ/FCYuZDqoK1\ndUm3WIJ6JhmBBR7HN2kryXxqqtQLbMgWx22Kj554DAJjIxxoHi7dsw02UMhb\nUFHei2+FZ0psmepUqliCgP+852bMPymPCz3b7mcqzX1kWfZkmldavL+e4hdb\nVzIQNOWnqK35drW7NuWx5tWwG3EKaKRBf43dHUFMiWq7hGSDoWZK4R0sW89I\nPCg2YzPXpFvLKhYaruovHJl7FvG3NwpWniJvxrpw1FJ8sHfIYGfGVlqbX3H4\nKyNhd5XNIppBexfxcDH4udwjQCedlFO82eMNsh+TAVPLZBTJRCrcvxaad/l5\n/eEAT7OJRy++DlhoEPE6bDqX+xfleiPJnui52+MA6CRBGeZ+aQkF2R8oYIZ0\naKmpzfTPNHYv6WMKzFw85LtjUiR/VS2QtEwAXzZ2uw5VHJbDwtTicyccGPSo\ntWTHsWFYrP2IHwoe1Y+Pok2WfRBUAXzmJd+HK3Da8Ckvs/JOUuSi1XC/MhhS\nF2lSxYpyQ2ILeDEuyJRO2XhpsDLP0oaFpbv+RiPBuO8rlmtWk2z0bIGghwhq\nAwOitph9BxJDMBRSXrdtjm08pbYn1rsgHdeHBLe4J604/UhVZ6Bk8QA3GA+w\nOD6m8oxIutRq1PrRAkiZydA13mrkrMYSi2gJuOAybthpLtPTPa07t2UG7MvI\nM6En\r\n=gtIJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.61a28b2b5.0_1637175520253_0.9547121771235361","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/typography","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc0658ac0631be4051478bc7b0eff5400f7156c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.fae6c652d.0.tgz","fileCount":22,"integrity":"sha512-ig4Qa14yoigqa/IkWduDHODIixT1Dne28WCP+ZhNES7R4sJzzo8BuQVMQydv9TsH4j9WYsgQLu2vscau1OigUQ==","signatures":[{"sig":"MEQCIBprcPWu7Cziox740J5Fg8sb27LuShGAlXAO5r6C1N7UAiAyb2N6bpi6AbAgav8eLn4XKc7xF86SzrhTPZl6/iCgRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln43CRA9TVsSAnZWagAAhfAP/inGK4kRIFuKzMpCCUjs\nVwt/9MJ7897AIXtcCpQTRCSazJQ9gMRe1vYNijqtUPXaFjPlUjzQqgM+WcdL\nLAIgKRkxVydtThACnjW/YSvX4WsAl2wbHTVeBwdUH1iMO8xBDbKa66FKDzI3\nYTTCFTNuxo1KYTNoFxEgYsxo8TRD9XRsFKqawl7CaQCjWjbArL4YKcrP8YS6\nk0ZvVVR43I9LOG/rmdU+8RF/kyG8KIASHUwkiaIDoA80Zxo0vSzNQEDSPyTg\nYgIfVqdA9JevcYYEeBzEtzqlHc4GGpfP8FAfqFW5WBiVcRyi/k4O5siY4XPq\nmzDLmZkNihZZjbv95lQpA9wzW6w9ebcRXVmdDLuO1ZyVkrNGfKEQzEOy4l0a\nK1HYsAQsk/UddmW8TMwAeiNIyjAUOEKP3ax9+VUPPvOC7++c1UdPd3aqvzCb\n9PnpDuyFnQKNDnL5D5QpZcjtowsjVmyFjtcoP2TZQzY63/3zWepLJ363QQOW\nPKcioSqvsmQAkrR0WEFZfANfWbFSd4D9In/fFP1crc5Hs0Df/BVojgxGNIBD\nuJSN8LHYnU9cMastgzVe8hlcNnYPwGdKgxj58SAKViFpWLwh2dDMtHqgc1Ow\nCw855OPZUkQ2BahUCfgmvVFHRiAe2UDL4oaa70O/KvPRJ/Z41S2SABFU5UG4\n7YoZ\r\n=bVya\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.fae6c652d.0_1637252663662_0.014818622655402347","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/typography","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5be16c58cd78a3809791bb989e5a386dc6914ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.978a3b5bb.0.tgz","fileCount":22,"integrity":"sha512-T7LwtzBu1JLZmx3sMEmxXivswgQ8G55CWGWJCLGIyBzZh3dXRNKAI9uERMCO3PbfMzVqWqQKhyEANXpwa8td3g==","signatures":[{"sig":"MEYCIQC0jHgtIvyXe61vRMm+k4tux06cxAEL1pdLtJQctHhTjAIhAOMiAgP/hNWLflM3OVWF0Y52a24qjFBfYa+Nv0EUhgaK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/08CRA9TVsSAnZWagAAvlMQAIDO+ASu/rlQDhFXDLjk\nG4KLPfalKbD6Ux47oi4qUoJFxjaix7XIj9fClSk9OkZe/WsYpvjcPq48KeDi\nFO2mAw2bSXiM2X8AuxyyU0NqSOAe82awnQv7oTlvYABuW1TZvIawoj03BLtg\nR65+BKKOGWuHI+pk97ZRwKF4GBXH7gjhXJVylLyIFA2l9Ftj3oKPUFG3V9zq\n6t7tet0vLredKKYc/YqFSacayvSC+Wf7EeZmu5unPGjoOGC22J0URqbd7D+b\n4ArOEnJSHSauoU6L8777qtYC0x0nsGhxDU3O1MAYJjzIdTeMWUe47Qs8UVym\nSAQA8jKmLjaB7t5oGkNu2cAlqAPeAJdK83Bhwl+PJwnzOIqk4Ufowrmb7VFn\nwVUcFz2VNxQ8e6FWL5M1iNzJ8t+8pQbxOUrm0GkvlR6Q1sjaXH1AMJ7jLxP3\nF+REndhSTx6DG9jf8H5MDr/sS7r+FBqnYcTwNml80Hr7yPbdu7Y7xJ9bokJA\nI2iYOdnc09h94e7qqn9MsGrLuNMrJjHTLM+6PArdHRBe0oRgQzW6Bmv3fTDc\ndqS5qpDFuCcIT/xafVoiz7chwIkuvXEXggATdPDs2v4YmUAhArMY+it8Dgfq\nX2PvQA4PEfr1U1i7gecWpTkqwPwALIcCuehIJvbJ8DCXvwOARCKa8hXuylP/\ndW61\r\n=ndSn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.978a3b5bb.0_1637350716049_0.18003627102962838","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/typography","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62e2354a39e8e83d20d8df8239c5f429abeae321","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.e6f43cf44.0.tgz","fileCount":22,"integrity":"sha512-KkwItjRzYMQYwUaqmIdJrEapX9R7ix49JDJ/lfsN8v/KRguQSLBglNSw6/la1PM9zdH1fX8ikUKxl78g+ihDRg==","signatures":[{"sig":"MEUCIAwiSzs5CQ+5BcaYL4kiuIoGXbY4p/5ErxOrd1rqDCu6AiEAgZ6Ao9g2rna6z8pKNhhqD834wYAeuhOtteHml4knLik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9SpCRA9TVsSAnZWagAAqh0P/2R0oyQP8FwKPsEKeraJ\nCVdRHMGRlLTAZljqFMm9fIwFyW2NwGKCXAjeBl6EC9YiRLruN4MuspiRtUVL\nKLC0aoWndQ+pO/6Xajq0UdBso0LUV+/haIBjlk/lxyzjHBYtV/4zlAFxVLI4\n8gTcAiEspp+4a+bU8PFFlV1f6ZsN7LvJAbBGduI0wUDdhp9p6odQ8c40oDe5\niwqJGBYd1ffZ7zvpBr8cWdcEwa3/9JNeWMnNmwI15yC/tr+aj2LS3GgCDO4R\nuHPO4fCPJDLXhAH056VpmxKbo8cbqnoadc99EGIAeW8yW+fcL5LCMMusdFY9\nPNpk5NKEalei+07I8mdhjCrmHE3AVxyXsRb6yZSIqc3XWqEXvcWqiMYY6EM1\nF6mg32+tpyHuzNQltGSyVy4PdN5gq3WCjGArh+TVP/6nVnb8K41RjcqxtVB3\nxyyq8ooDBVskIPsNTiq8DoKzVKA4g/gEtLDvzYYZZ7eKGx8/PFNnvXodbVTO\n/qy+LrLxtdtIEXBx4M76lgTDXdGaygv9FQHr2MUxsepL4KCGRrRhZdcYNmoJ\nfHvN1z+8l504Huu0p/8qQLFxGCTNscxzOczQfSue8vMkbWknQIjwjfysBKNa\nh74wtqO3wyvGHl9WUjvMw+LSXhLuOTbbqtBJgGbhCdJIpejPatVORsElzUsE\nrK8F\r\n=WJAn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.e6f43cf44.0_1637602473517_0.7040816486608554","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/typography","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3dc00b6ed11c076ad2ae9ef3d2b035c039d406e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.39cf14bc3.0.tgz","fileCount":22,"integrity":"sha512-I9UiAAIU+Q0fVhCXfjxfxrmI2l0ca2XxbIlpzOQ+8asNQha6xEyrdTkLULpeCzaqfmPDZ2u7SG+SNf5KPB/3jQ==","signatures":[{"sig":"MEYCIQDZU7o+2onlb/rdStA3MwRWt6jmyMKqSrpvFk9ssnzXgAIhAOhSBDBTtp2SGRHOutiRwXR+DQUzFgCo1FmtIgIbB5HQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCHYCRA9TVsSAnZWagAAOIMP/jbDRhDwDGY27e8ULWDg\nXysvaOEx7PX5BTqcX+t73ZfXSvwdvMl5Gqa/qnkfG17026VN4bPpju32s1Kt\nPUOUvTJl1Hcgf8tOT2uRi7eK7g0zO7NluUTGB4emzqxxWcZjnAgUAGHQkRLi\n0pTRYWxy7o0GiJ21H82JlGUZikoudVy781hkSv/Nu7+QtGc9f3fTqaNKR2ov\nMSWXesIt9lQKL6FeBdzPymDpgZRtl+isF6huSjXwb6IZrSpvlL1PEqHe1Vwf\nvEjsUc35QZI3/8TR7pheyXuCu8/7VlGIM/0qGXnWzv4PWj/9MNInPTLmN02l\nEWGa5fiZcyKLvd0OZqsEA9R+REbiKIyAMM1rYzY6m9rY69eiFO8EuWxLN99a\nSjIwzi35duiEeFMjiricScwZ5MUtWuWPM4zl7nfS4/LPQ85ELazsuct8YHNZ\nYsu+Ij5Y8tapbRUBkpqu9fRiRHZIDgWubabgj1gJ4wT5uQPfuqhQxPhtlvDM\n8hcEFveELSYiU+u119ty4JnHL9Qu6gZA8OlW6PeecmKEGrFZdhIw+ACTfk22\nJKLR936ATL9bsFIh3SHQqZaFUeETP+sJWLozxoUuBNPUDxoAO1xZqAU7+JTU\n/O0opKd5fh9atMMUSpao5guXS7tpfRAGft91lSFtioeYS3TYzyfz32N1pmeV\nevQD\r\n=OYu2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.39cf14bc3.0_1637622232786_0.6998889392629806","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/typography","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.93134d453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a79b46d3600354f7181b11086fe72422b01d30b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.93134d453.0.tgz","fileCount":22,"integrity":"sha512-rMtewXEUZ/nsOTLmR6xP5D+bmvBp5yCEGQ/YuRZ1EqJXt2b8PewpNYAMzatMAShUXah+CtrE1NGU2f47DACgtg==","signatures":[{"sig":"MEUCIQCMtkfkMq42Hs2XxbvtBdki2b8JkBvD+w2uN8Ve5daFygIgUBA3Dvlamh2NDSA1+N8/vvTf9DVoQxSR4ngd2GdkjhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQrtCRA9TVsSAnZWagAADYMP/0QSiBH0xGEl90ufzQsb\n8P/9VtZhFKPFnspyVH8i7R3MF3CRl2nbClqCO0i9Kt/EExokYvG7tKeNVHGp\nKtt/zwusLLzGRbS+SeprGB5qFhLYNFEDN1Fyb4/iteHSFAptW7WZgPGZPlQ7\nTi1bUcsWMxwCNbd+5f/FsZ8mvP8LUgpU+NWMjukGJZhCJ5E1olBYj+VG/oQ5\nM5QBHMezVphLEaHXt/84Mk1SoOaPE8r3Vks8TrUfHMIXAmZu+70mgwFARRh6\nwT1sGf2dVTUDYgQ98JzpTCN2KIviC3CRxRpU/Tv8Q/l2IztDmFJTn9gZtYLH\nvQ1r/0O1W96X4x0VNJ8RHUuLC6lEJ3BbEeyYSGHYtyhqSDGj42nM/SquUAZ+\nVc7UmaX22w8qFQb28/DbuivtPkzCNuDwji7Dao/+k6eO8lNXM3YHG4rI+0QQ\n5E3mXcx5ucyPxS3ldMP+hUEzwpsUX9gzLzy3L3mj6kE9tzwA8m15H3sPaSX1\nHX/VuHkwdfDuAD2rMIAZ/jq0+hu2R4OOUmMza9VYzrwB23V9M9meiY6fiu1V\nqJdjvGCmbQNzdkKkdYS6eVRDzqWyng4LJpw6SrZAz8gpLGrunYQrWsJj7+ui\n6ivAnT+5JN7qafdP4VKw0kuIMCzA8hbDIMSvTrsjY5CmeWNFSYZXMZF/RsA1\nNonU\r\n=a8vQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.93134d453.0_1637681901201_0.11481860047415449","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/typography","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b092e4dc91ade0905cd9a4e6153e0f72c1879d53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.bbd11268f.0.tgz","fileCount":22,"integrity":"sha512-sT0cGyqsA+992RUlul1K62X9Qqx5sj03GbMRsCBao74IfPGM285y99mMogmGt9zp8O1amVRM7EYgYOrfD4+NZA==","signatures":[{"sig":"MEYCIQCUcc5C2zk2uDjH/AE1TXAenn4/PCtdg2Js99SE8z12gwIhAOmOhhqZ7NBdk31jM7CwYGnV9JYhEFkI0RzmQSuXWM+Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWvKCRA9TVsSAnZWagAAQngP/3wYYE3I3quOBIF+/dMN\ne7im2HC4b5pH819w4CP2kF9NyNWoNaRBMuYBsMfWia1eEC0MykVS1hiRhXJV\na/Rm/4QNiDEu08J9muRc2TnUR9NevMGfs6kVRAgleGgl2hQgg6Nj8+zmmaCo\nxoD1iZoovBZJsjFR0mplGznROMwIbNurHnEg6QS/5VZG9kUsNzBaG6ZBPSfc\nov9T0xnDYDwRm//ZrWUGS/IKpau8PZwr94VNWSwOqQj84izKqAulL2Qrf4ex\nZk0/sGQmmTYdXGuXIEnBM62AaR6h1j7hZJW7xsjirWTgLN6jE1Hsolcrw0OT\nBsARDB8Omyi+g4y5DG4G/tvSB6e/cl+kTNakvxb/FKWAw77gSQtDJsXQk4KF\ndwzxWJwypz3g4Zqj6mJNkZfYEpb7IsVud6DzyOjePDe1AvfF81dIHwqQz08N\n1cidPknt2MbyNEjXSd3+6Vcago3V7dcRTMqN+EliVR3V0QER2SFywjxnnKJv\nziuekt40UGlA9qK6pkCIUwuuw6TswB8onCTUktqLzsBm3aDcmKZAU93bViyw\nbAeh4LUypHozhRabI1w/LBBGf8tDYIBdMJTKn7u8Jth/QAG3/FrlbpVmU7yi\nc8EFPZpPZGKHSlyuCQ2vCU1NJh3zM4fDqGNermjKfNo0uzQ9FVRAw2j7rHOl\ns8sW\r\n=CSXo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.bbd11268f.0_1637706698209_0.4185385279708633","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/typography","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8b9dbf2eb7dd14a7a6040399c80dba96f605ae0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":22,"integrity":"sha512-1zsYfCHI+PjCnsdml7vgUyTzVKtG74SlAab8iWJmk2h0colimNfrpA41rO1Es+Qb6T64uEeWAxwOWIFgZVgdQg==","signatures":[{"sig":"MEYCIQDwUpsIjXOQcXqiwLqUfK5NeqPmAt2gxWM+ymP0dUkM0QIhAKDQGPP2KZHAy7dPEwJB5ANDVykZMQRK0TPB+1JxCICS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlwRCRA9TVsSAnZWagAAUwYQAKCDddG6BD1QI/PbFyDe\ndwGiW4cZnwkxF3axHPtrvKBn9vrMN88gXSnhQ5MclAIAlYcDlP2ZT2fJWeWo\nLDpzI9sFCpZZvwVzvINA2qa+bWBh8rzObdgkafVRNaJsqwPRAUEZQQBERdSB\nTNOfI/hO31yiKdXuBoVXt+sQQ7ftlNqAKqegtGxf7VgGyn8QHE3zRvu0fXha\nu24yZHlYUpVE12IsNiakaEOz/Viciw28ZlwWqkCxlm9LDu/EeDL0rzSeZ/de\njFt4NKTQhWe14pZrnBURdb7tNCJDF3ZG/jcXINbNs7txN+e1qSiTvACXhc5u\nwzIZCsyZBNDhg7XETtU3W1U6wYkPDTuXiUupjxpSc0ylatMEMTJu++uXOtgk\n6Jl/NdLJNjG0z5ktG3VsM8oVJIu85zyZ8xnKrSz/ig+zJwkybrpKbn2THUcg\nuncg1vVqV0gGOWEBCpgsz8RJ0V3ADsvumL+ELmWEayi1s5U8hr44TYSTav21\nhBVgoALB0rVYzjoagITZZFKT+oHn3bLxgSMH0ynmInp22273vM97zPISpAjo\nlhS/Ami6o6/gLigwFZOfHakDxP5IwEE7UYpIUs4fbgPU4LFd1tpcqh2OtBif\ntRo77rbWFN8QhVIy7jfg3wupbpqAKvwft0sqeSrBB4UIZufGIPhd8HOnUaJT\n6br1\r\n=geEy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.3db9c4d3d.0_1637768208848_0.7250262247808168","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/typography","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d6cc489ad02790f9161bbfb7d9223df8938a8ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.78305b6d5.0.tgz","fileCount":22,"integrity":"sha512-QgmyYlg32P0lVZTHcU7od5r9JzCxWcOR0i54mnmusysPojmAf0GmAfzb5WSFqORSRO5P0X1DkN4G9PltnGMFOA==","signatures":[{"sig":"MEYCIQDGwLXCtlCHeZpEN/Kqi9Nnvqz5z0beNn1r7oVhZTxp8AIhAJtw8g4mGKYODo77es+v5YR3OH5y0oQxwV+wyBgARkUY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpdrCRA9TVsSAnZWagAAA4QP/2Kv/Kybe5VX+QuqqWjw\nZ/i5Xiba5WGvQYXh4y0jVtYNidaH0XQ3/hLxfp8TwqLuzmyfKRxt1Sj+7puU\n6G89BVPWFBCsujE7pKYm0eL9bptUCafjEaN6fJzg/6bI0z4ak7iuhJeS961H\n86bdIDYelqK12fDQSeG/BlJG9RI1heyy+X9orvu4WYq0RiAgWtLO3khLlvm7\n8Nwis/+gwsr/8M8R1A7lIpcfayqROiyQ9r/kjdC0VKevCeyVNTMxZHLDnGe7\nxlcmczyr+EExsyhirOj67oF+8gG/dxar8ylCfkpatZleklNZlY0czG2CQkmC\nUGcQOTojX3BRGueeIhqdfn3aMyNF03YkPQjeV79I8ZoyfzaDC1z0hb61U433\n2vf/Izk4q3WK53vflpL7vpS67hEPVzMkmB6gg/Zm8PNe1Bj/g8FoKi0aOFSC\nNB9SIgjEEY8Vk8Qa800u+76JkntxShgBxLOTrtxT9VClDAHvjsMe6EWLJUvm\ncrM2P7RiaLvOX5ySa7w94X6WMW1T+UkeEr7DVrjYu5/6rHt3Lc+5lFyqkbCp\ny53eRZ8ah0PuXbSPSEtY+ExRGC0ZL7C8+X83CGKPVsgfpf7yWSNlfCTuxCiv\nJeU1NtLwVfDSU4wl7hgwzN1lx1lx/cXiD3lu4FdjatqasO22TWcKJp47W+x1\nFxmQ\r\n=TXK1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.78305b6d5.0_1637783403524_0.1479581454115717","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/typography","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f6433f96c03fcc036564647f965a41246d62dd5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.43d08ba77.0.tgz","fileCount":22,"integrity":"sha512-rlswkAjNALZNMLu+rRvdXTFZK48XSHvTSSXlrbnuexjjbFb4kJzCUVSYMdG57y2mDx0P2dV79sjRsYV7LPrcBg==","signatures":[{"sig":"MEUCIHWQ2BxeTbIbOAd4OSq1hRxEqPwu0Jm+LFZfN3GrNNL+AiEA2yiGW8rDw3Uf4tMXoLWHcze5NfEtWCZr6q1tJ4xnyBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqvgCRA9TVsSAnZWagAA2KoP/0hSAHnpa7Ez+ojS6sk2\nEHukyW+QyUAkkUODp3a9GPGIHCKTmHHkacIvyA/0G657oWjlPS/dWp2YlrLC\nqu5maLX3/oVuFMfOjc65ltX79CdckJQ9ronVIrGNpXhlILLzAECvG8EHWq/q\nZflRyqz6MPQ8qVn7ToXU+SLNITGPmyN0Ivu7Ta3vCKT1NP1kH6smWLXShBOJ\njIFJeByJzKqdxQzhZIYCZ9Wb0L/CdqdHZmkrt/MHziunavkI5AukrSkc8di2\nMIVga0KP+LLnP8R27mHvYjE9PJqxzCjoAmqCG8mUia3h9z2KOfkdNi6sfSKV\nqfeRvVkBcUKCKP3ZDd7zeknhiG5VAwB3jp9iiz6odytWg12Bf7TABJta1q6q\n4Ys6HQMreitl+Pd8uEpMl4CInvTVTeYFX4t7FxFNfssukGPiZfeMEdCF9D1l\nWWkjGZZ3Dfzlwjg2M3MGv/OQndFVeggLcoTr4Wl8uHpUGSTzIj1CmiNujVKH\nK0p52T0KgTdTykTtv9+2Rvjajj6uQWWMZBZOU8MXtLvpp7BO/u4wCCZuSS94\nP09h15Xvn68+9S1HVJZlFauEgP5kOSXyz2sZhb13QZWyYRu75tqnd7KqppLB\nEj74L9ySEQEbmmHimicrBndnEqoQsHrWfxwBf6/2QwPLIJPDb+L54CvL9Aj3\n68A1\r\n=EfFg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.43d08ba77.0_1638312928193_0.825889127710631","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/typography","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.17a072535.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5638a7c7c2f06f50c3acf2a48fa58a638f81696","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.17a072535.0.tgz","fileCount":22,"integrity":"sha512-JE8DLjBje/cKlbGIuPu/SsaE6ApnPFy0F7YHcesuEy139RTCV0ifM0V7YCNxyv5wiNTHV6TPjoo4xfOmXrnVGw==","signatures":[{"sig":"MEUCIQDtHACUibyv5YtdmbTPRXfUy5E58GXHOvwfkRSOkKFFFAIgbv66ugNPFsloqRwEbGNux5paSqFZVyzoDWxpSTvrsR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQq4CRA9TVsSAnZWagAAmzsP/jVsdb3qYclEJx7ksIwm\n+4OfSYbVT0MKuJxx2aSFk30k5whsYWl1Qdko4wJKWZKcMvY77czt+7PqQ2dM\ncLB7vJHBGcbDridkTCIoCOsyyknEekz9jJx3wJoFR0W0liTQqyJmgsQIP6yl\n4Tjd0J49mlZHF27GJlvpEaCdL0eDYU8b3i9dEZ62riOZdJbVtl2ApFvlUZiJ\n4T/s1MIjpM0389UcCbO2Brg3qAhEYgBPRSe1np9bH/gf49IDFbO3xT5BITSx\nJq+4pGKRN9KYAI7yolP16/um9kDTT1AvDe8JPaZz7difykVoCG3uTKlZvIQZ\nOIAbleu77qy3LjEVe31vjrSBhtYeukwyrO2hRxKf9TgM8lk+FlvQLgNv5JKa\nCLxiq5I5AwB8Hcx3ZuqwQ6/+Ck38dAiC01znKcD+GQNql9BrFxuv5/zv/6sz\nPbr2g9iW/bdlnyyAQHpbiahVOerMxRmi9iEvgN6laePTWcHncr7OpNldBaYs\nJivNsLvSgOn9cMC/Ada6kKuqo3jSgzDR6buk4sm0p3CXDrgafGBZvX1do2uQ\na6DAq19zLnBDmE20cytFgpxZq/FwtoG750BAPocRGXanxTXVFKCYUgrdJi6F\nNSoQIHeEY/dN+eWpJmUune1wQiup4Lqpg3r6gx6HGDAkOTHl5cc4Z6UhMDYO\n/WZH\r\n=4KEc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.17a072535.0_1638468279961_0.6712725170616805","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/typography","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.5d809696c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fd490eaa16bb63d299ee97a3fd67ab7df93d36a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.5d809696c.0.tgz","fileCount":22,"integrity":"sha512-sy3CUK1Gl2rvlCoVrgKIvVLFQpdf+8wqE2mYrlwdlDnvqlKHOqwcSLoblf/Krrhz0ApYi9jT6LR1x5zHO7WPSA==","signatures":[{"sig":"MEYCIQDRWTAqTNb/DF7tnB2ABDvbJNDHpNkLiNwY1lbnWFdVgAIhAO15ixVfl6Vg+hNBHCpVJf7844GNf1OUJGoB/3WrB9bn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO7OCRA9TVsSAnZWagAAY5gP/istLHicgcPnZVuKpf2B\nFXHHPXhqz0XJC52TRVWsQ7IRhO8evsdsB7oiPdpgrbOrl2Skel5XLDmM3I7C\n9qIhO75UKzclQNIoVCf62lYloWlfsqjDtJNAzzyjYrvSuuNzGtQG//zhWV+1\nJt8d4LboCpFGFIrD32eO0/XFLMHDDOARnwbhEGv4fDx5qhyt8r2cLck7xzXY\nVlhoVb9xfc04cd+tsA9IXMiWllo0roE33XzlB/l0i/S23kkn13VK+G23pnkm\nL7dJwR1CH0miHkngBvEVgbdP8pI2fhqXQFGahFWMQFTtvJXrTUBNkWo2EuUB\nBvX0NFRniE8dFkNiZPy/5QCdyrIjrzJexNjdb4YAfyNkIQzpHUSlsg33dtod\n6NsAZ7HsrwQy+XRzr4+URl0/BFGSIaAqFD1YN4GCbeYYhWyJkphNjdERX5AL\nXUX+HjQICEF3IqmwcCmHWmMqqPkhbnElsg7kuSRk36ErkPbiRFJCMKRU3NId\nr0HGGAGHYHDfPZpAnIV0Yn4lEohASQPcUN4SWVVq6Ah34g1g6HQNWRLCvJas\no0rGcq1UhcLU0a3EXNFobZ/8hQmChrol0ANtjiwqe01inQIz0LAggNtsm/oQ\n9AJoQcdtnwc7NpZgiYIES4/Sv5hZbfhWp7veafYzPYjf8XmnpWczPa7qQprL\nrF+e\r\n=L5k/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.5d809696c.0_1638985422093_0.9604980467692414","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/typography","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e083d3bbb0fba2c1259f4b42465be697ada27ab","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.b6510c8c1.0.tgz","fileCount":22,"integrity":"sha512-5asPDz+kqowJp+oCJkZb/PWyB6RTjkstlT4uh/S5hxqGK6cSswssaXFLk8qvb9GzqTQfYbA3S3H2YIS3L9mVqw==","signatures":[{"sig":"MEUCIBm2AUm03Sls4IsEpF36p+OcDUdofw+pEMiy9z9aPveMAiEApbUWpBl4QRhE3KG2xYebnJBc/YDcH/WDnkqywevQzbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPP9CRA9TVsSAnZWagAAm64P/07Yrbz55ryYIyIo/I9w\nHAHfF/yzE5Tm99BxCwvOALbqsr2yD6a9onNQgbKXoU2BVSaF2a+dtEj11RSi\n0V0K2AzsRMlk8Wa3DDDwI7MG14ijVdyUDWlfH8yaliWWEyHFxGLe/bDgTWTX\ny+VhGF0j30Klidm5P2cih5wGhd3zNXnU+hS2A74qZrUaCePbqWzscUx8MVvj\nKJPtafkZOnCi8mnMkDwP/BS3XHxPFZR4ogkYuR7DEtu8j9KKf/D0pBNYTpFN\nqMDlcUKQk0pHDBdK9uhF24lfaycF0Us9Or6Mw4oqBQWNCLwVo9++VIcm+ncR\nDDwtPpNgjmRtew1ql9yqzkrZVIXzyJQUznZ7n5D8R6OHF3TyHu2jCa5SF0hB\n3J1eZIwROCthBcS9M7Yo5blm+yFwiJoAoUC+hh8sCQRNvp0Da+zVJOy8s4eW\nWH0L3SBNOvKTHo7zJYlC4KRo0J/OFSIJ3hPwd0ICwBRjBPcud+UnEpqpmQig\n3VRJkYmUpqtDxWLyNDVW2aLWRssyduufdUcj/9NH820YST5tGJ1js/ftgsqR\nZqEH93D9ST3pVW1Yq1OgbjhCyu7Sab1ZRorqaPdtjpnsnruatAcG6nbP9tdr\nQMsr8k8bomYuPIeP+htCeIiSbOudrGa9uuUp2pSKtpWeAMCeaM2GhaNEsKaK\nOsCK\r\n=5wmQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.b6510c8c1.0_1638986749095_0.8998295045148963","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/typography","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.f460e23da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f82b35a944e7ab917471f7e7ecbd7e42c084d65","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.f460e23da.0.tgz","fileCount":22,"integrity":"sha512-nuoeB2YgdHwtzVeUa4O/riujw1uEsjUuaquHHnGsR/jHSUKbYifyQDbkkUPoaij59QrCKB0AUj39l16VJbaRwA==","signatures":[{"sig":"MEUCIE/0SYTEDZO2mcniS+b5cCHRvQGtVQxd1RU0fcgYS4TtAiEAmPBLnzwwDkw1hNhYkK3jwT1tlbGPAXg40KGIFZ/IubI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3E7CRA9TVsSAnZWagAAJzsP/3BDnnJR4zHV63nczXzq\nuhqnXuySpOW9yMplHeVOG0gAMRXox//FZj56Ks10hRXZT8rdKU95y7nVw2cb\nf3+G8Uc5eubYlpa9f9n96TCx64CKkt66wrDbbUshEx6ivGocV8khAGiYShsw\nOQzCZOFqOgp39h7d1esiR5FMsrFNXB+9hxsRW9ZzsK+FbDqPwC8Nd49aEIeU\n8RCblnCqVkH0EEc14mavE5w2Ty/P3yrLr4WPeX3NvdYm5kmgl9OzkC/n1M1H\nEZr7R1UNX7fjlyjxyrvQO9cdRz5ECL/2c65BW+rFbwFQaeAERQ8at4T4yEIT\nEQEAMWg+waa6BQJAOewHvbLXrcDaV9iDomJCKrrVCt78tzfK1XJuFKYwG0dv\n7hxRn6NkdOH6AitSeFZeFK9j05ieGjUJ1snMhU6kuTszVkQXS3z8WKMzpP6K\nL97VTETZoA7ynOuWU6uw1uXvMtkeYMpLiic7nZJvdKGRzazir55arEI7bjTJ\nE28naPBqtvvDwqOININjzozf95i40uvza4srOyMl5GgrOVhLfrE3tHWIPASi\n1hbxzjx3+EQwb7S/b5CspIjbGKsZj72KGCyL1LGGGWoA8iHQcU+svTYRSKTY\nCePBkYpRovjm5s0Ekh2RUZ9LckQAgAMJaPWJ2Ekn2lZ8uq3v8YGpnPaf3ria\n+Wje\r\n=DRKs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.f460e23da.0_1639149882870_0.32098843207801786","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/typography","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acd4ebbdb0a154e46bc44cbbe4340466709c956e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.7d8ea4624.0.tgz","fileCount":22,"integrity":"sha512-iab54MYDwBpcsJEjHZwQjE9GTnP4mjb+qs/Ue2z77uDPJ1oJNp7Rlzf26zI/bQi089bK41deOcZrUiH/jtUz2w==","signatures":[{"sig":"MEUCIQCF5QTJRaZ4V08SW/XGisqi/SAv8p70Qk7CRiM5Vb3XggIgEt1vrSXLmIwTAJHN7K5z5PA8/+RNv9cZEnWaJgmxFAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6pnCRA9TVsSAnZWagAApukP/RuQ629R2dRCNNGYpHS2\nw6TCUxVNwZrBh+alS6T01oFfmeeirM9voZA7Bi9qizqPJUBLoxXmMUbjVil0\nsfQ0YRcfFMEZX0s9iwmEtjQqazJMNutimd+aot1gA0GlAbks2ELlwhSdAlkE\nYu2eTVVp+AwVQz6KcKhInkwVDtgM7NuyiFMRtTUYEbgn+fEDLb68Zruh90fL\nWqzYSsiZxG/WP8ubn1+Ny9nNlv3+vNVQcGR3Rv+KWSO96bnUldSLcYOYrVEW\n02ahyPrU2Bk2q24vp+muPL7ny8PAF6j4KTpKQLoE3sWXa2Ym/5P3rr+6np7K\niBnmGB911X3LrNBS9izSdwnEaxcjGhM8xDZY4s5YrAd/wSKj8c+PHqVJV+Fu\n1QtZLu9zWRnNwqL2Imhg/S/D6IlrQ7l1I82edVw0/XiZ8wwtfgk+4XmwKZ7H\nYTjeOdbbJsisNwbRRjsKA8E2eDzTZDdVoHPCrSUUmQaDv+EQN/8nXSO0WB3b\nhUvcYkZ92fMuLyoe9FCsDOKUEyZOHj/FM1BeSBxQ9f4NEobBJOqqfc3x/U5w\nxTS8mSGuW1FjoCt0A41suyQraPPSvzO3FkKH9sP9wzjJlT5sXzmUiSQxn/Ls\nK4NKVDitN6dcsIGDXVVCbLzNv8CVB1O4OtSHI/olX2EhzpDK/db4qSguLfWk\nGpPO\r\n=wN4Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.7d8ea4624.0_1639164519003_0.7084509480323098","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/typography","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc6c5588bec5086cc6a3546ab9169a777a826496","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":22,"integrity":"sha512-8FAAZobR0D/Q7Gij+1HYORBW+JO6YaOJsrmuy8IKSPUvAf6Uk/tFkDB6m0fmtnLOM52lV32Z+f33XG39b7CvQw==","signatures":[{"sig":"MEUCICbAXrC2kNoAUAx+NQnYEH61AUWOQUgBJbfw1KvfgyVjAiEAnFGSZqcZh56HO+ApMX1OG6ttReYMpemilLa0NEBqVpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFu/CRA9TVsSAnZWagAAR3QP/jFZq/RJQKjUQTKtK8Oo\n4lo7iBmPZU9o97Ria3NrvUpxaNZuNZ+QAvMmHfPB4MVECMjjok0ixQ4nr2A4\nwOvrvun8FPjN4gYKaDiH/uQleaFpV9V/mbuJ8aCqCXuUDlIC4qz9gjtWIQhs\noOxbREmM5lZBIg51U7lrP+roSr4doOdyR7OoqSfyuwDJfFFRKbUidL2OvDfG\n5vi04CDZSiAxHFF9dtzYco6Bz/btpaKrzDMqTtRKAHjMOBqP1q2x3iN0rkXJ\nc0xSmfjMKWj9itH9uF5lwqkZO6M2+jyXfFEChnmrullevJ84PB4FMpi4JRGH\nCzGs17L1r3ylXGSSAqw5LeAv/8jzmygNAgvZ/r1B0BUNvjl7r0KP0d6QSq0i\nUBqjcGPjk2aw1w0MA6g3DCzgtNif0zKAosIFQ15hnJ/nAycOdswMPuD7dPQx\nwct2+A7kmT8O96VZUvqqImdzAs4jiWRKoCRBniMO3Sczte3i/VEDffMZdpOq\nFQbTPzXaTxHVnD+SGL2BqKP4dX7gOgI7Go9BiytIfzMj9g9Us33uAJ7R+BEb\nIX0vdYK33+drZSfYEUjNgxWSOhlwsiqBLaQf9XPAoIIpCE/ghcf3gB+VRz5L\n8zq5eyS/40iEMeSf7O7dR1mae6lk1ylf0nfP2+tezpKtXi2oIOpBeF6cRGHo\nAxsu\r\n=1oE1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.8fffcb5dd.0_1639472063449_0.5047019674742055","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/typography","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b23e01c7d4e13d75dc4a1a9fca213a19e2310f5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.21e1cb9be.0.tgz","fileCount":22,"integrity":"sha512-TcWbzxHh1VDeklbQS+wX33qR6d5TAF2EaC/KQzEplkYCSRdkRI4fKLkOwfPIO3e/FXxZAB2qUV33aHtj3Vp9oA==","signatures":[{"sig":"MEQCIH/hp6UQUMWwz1NSDKwSeXA5gg07cfXzlrlDTX7P6bTOAiBz+5sXvfe7dGOdhZILM1hXE1QxRwK/XMbsnP0JW1qjMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPLjCRA9TVsSAnZWagAAY6YP/3WYAKnHUy8G212Oukrs\nKCa/kg4AXBjprJGCPkrQBT88FZp0H2v8u8hxAeC6wDqBq9AWWLzdv0fXvi+S\nSdbFlLGBEQebV2LUIowV8YRegCTmEbXbUos53WADTo/yXL1aY3C7kJY281bF\nNOOXvhHCXMg9gjUcQGMYT0SLCI93b6ypdY0wXDoBUpBM2pf/Ndc98hAs2ruD\nkI8bqhVpUuDbX5i408dNa9gWZupt/a+H5LwRcflOYR7ScpYI6yrXnCbyUPnz\nzmV+C+7wPE5oBKKktrYHgTE+yr5xJRA2JJIPMdf3agSsrjmOfmsB80KYZzcB\nil1Eq+8lKDj+nNTHk5YNQ5BXqleD2kkVCk2CJaIJBzxJR7NRAShLNnQEQw3g\nOuaQ+gaMDSye09/o/Hpu1x7z5GGJYCs8MdfFBaYH7QUOeY0rW8zZe3uUJt68\nVAUhdhe+Jz7LMkq4+nGuOJdNyCEFUcv/am9J+aoB2EN/sYU608bbIJfHqK4x\nHDpZ/Rauvr6fYqNQH2kfKsfmUm3HLZ7nYARnKoSCCzXsofN269IeWgAS+Xij\nNtUZBv2feWUP4+IqrylBD4cQuwkpmeZq+YEgvW0zNpRwNp4UX5TOojZg06ie\nuOTfscAv69rPvzqexnocgfST1i52RG+fucxF9b5SebZM9GSTUzrUnPWHo16B\nUVGe\r\n=4fW3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.21e1cb9be.0_1639510755156_0.5726861279348241","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/typography","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8acb951e241f7978e1c7fbfb8cbbf9dcec430159","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.ba78e8724.0.tgz","fileCount":22,"integrity":"sha512-3Quv9inX4e943ZB1GOHBtDzDCvUjMTa2zfT7Dwa4uWpipXn7ctEEqRszFU/YQBZZTkWcgW0GyyQ0RR1bEJT3Jg==","signatures":[{"sig":"MEQCIAYDQuG9HjUfrMsK+Cr3o3IlB3z65a6YQh5G53HinjIZAiAKCTNxU5tF+CEJXfPFXVJBs3vcnf7xq5tT/YQLw3+ylQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumhECRA9TVsSAnZWagAAUZkQAI92RY/VABMfvXsaUbQ4\nxDZAnrB82KFJtYxuEkIqza3C4oIQt5LpE9s6ylEbz/8yud40VBVG+MkRdhoj\nAL1xREQFrNeJ4nJ1y3pi11gKtQ7IHbTDjaBMFM0qnvoT5kQOh5/gpJQiRWqa\nvGnmC9NY8qGX92ZdGFiSI/0Wtrv8q35c1BoqzMPi6m43OjZqjbNCbf9/2tdf\n4pr55148qJ5b8e2nbCQVxWV0bTgzVou1nnsbOiInYqpJWRsrNeuja9T16Sei\nZNykl1z6mGXu0wzgsPhXU1vBjAhp4lOZmGwkNa1mfx1y3LShDhIDv9wxqJQm\n7xkXLKY9Ksx30hbltM00yEbsTJYNzTirETvnvfKwmlhHYXU+If6SiwiczoVq\nBuozL5b8J74h23McsqeGm4IIpgCqmTnanX/yIuECb1q/Z/kummdRFiZw1Mk1\neZuF3lWObtv5tE/bzKbExvmL45dp0hWfImD6jElSns+6BdP78WDz+z3+qk1S\nvgAADk4Pexrs2hxciovhbNWUJ/pYOiaxAUES0jFg95mSkGjZyexTutfvwi9+\nCFuMwmIM64MVFA970OFvBmkaxLOH69dlVxwpIy10CsBK9msyQuUUF6hR3Ynr\n72tGV9tfg/zxpODGIKl15Laqnjsa7HsPWwkVNI7FpEbyXWnSOEu6f1QdijKZ\nLI25\r\n=LFMg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.ba78e8724.0_1639606340684_0.5851180339028099","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/typography","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"662e3f0562ff8f208f1bc9eefe2fcc5cf4ecd62a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.e3e073c00.0.tgz","fileCount":22,"integrity":"sha512-wUbk5M3Px5rUJ0uSDKP1byajfpucZASwCquFMELwjKoTeRe7mSXSpFg0uOpF1njQZug9yRRIUqOLEhpF54wRYA==","signatures":[{"sig":"MEUCIQCtAZLAi7x1jllLdQm81/murd+EPcG81Nt0neFk1ShFNwIgahUaVepQQZxn1ilYs2zvxayvcGZvRM524yYNySM8sEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPDzCRA9TVsSAnZWagAAN24P+QCdre4k952crJ3jG59G\nY3A/rcDmMk0nKx/5wfvbOFCIiy98seR5oujRh3akU1UbKaiflcQ0ri9rRyLm\nGNuz4h9Os+xddhIdvEiDcM8/+8XI5l19yLcScNVsjK2/uhLanqaYePWnARBD\nzHGllh7Re0W+H0ggPHPb5UNWaDEBAgdd8UxJQLlVMEf5gCEsk/Vw9HfQC4WH\nY8b4SxxYk0Y13KeIxAM2yZowrzQqh8ii6uItdZD/POzxzXOcZBvpbBs3HSwW\npMTsA7/75l2+XEb/noLwNN1y3tTSe2z+PxlCP3Xoi5sdHsVhGhYQnToI/xMC\nQ0v9woDF7p8f5Xl5b+SCR60ytZertmrCrIglsGnXSQVr4+FHzHOTPfE06YfG\n1q0LM3w2Xsz+bK3+lGzQOtC8/KMShNJJDnrfjhIPCOo2eGj3tX4N8iROJswy\nPM7duWPIR9E7DZNcAhSFE9fIRXiD4BzzbfXJax5Sfyl1fPUkhozIrmulijX8\nPpVa/8DAXB6UpgtaKZd0ap3RAyRQFa3Oj3KX8rR8kID2+B78idu/LJRMsLEK\nMv+QcwHu/mF/A5bHUwjxWh1Dy8Q/uKajBno9rAFgOD9hWuhLSs3OpLTtB8Vw\nQ95HnZGLDKzEcj3Nyn/OfS8o4nHsc9QvjIcHi/D/o6mWNC65tCmv63HMwDkx\nkZol\r\n=fF+w\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.e3e073c00.0_1640034547266_0.4521311998085742","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/typography","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03570fc1225173d563e202ba41e0a9319710de7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.3366a71d7.0.tgz","fileCount":22,"integrity":"sha512-EKqFM1sEFdZmfNQXNDDH5/g4GVBVXP02Z9i7+sLe7iF/AyuxLrtzq+WPDln4xqSyI7dFL5odi0qGm89wFkg3Fw==","signatures":[{"sig":"MEUCIDy4e5W95BGtowKrU6osrR1KHS1406pYSaT03WqGiFAtAiEAs83uhfhm/MGdWHR0o2MS394lQL+FToPS4s8UKVgmYAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxq2CRA9TVsSAnZWagAAH2YP/2jL1MRxNWKSBn5iYds0\n1SToLPfL84Z6QuG3YDee46zekrD/UqLngDD4Q5ZmHBNKWfSgxUEXGhfqGDL9\np8N085iuNSF5/W1f1iHnlqziUOkDPO1JCqCkerUTMbmaakOu4/oPjmN4XkYO\nS4MoNL3FObxFfz83zvyEgCgBS6qWSgBx7e+ZkG/nJllRPxZn7ZbykdRuXacL\nIur3+37HxH3Hpu4osJ5uukp9F38JmmoO02e8fvWe/0p8G7jhlhs+4RpKtDGn\ncKFJfNc4my+eP3PHkH1R2V75fAKzcTbUqJaswewJQkNoOr/JzTC26Rl6hpOH\n/OrMAogc7mydS9/Kh8ilKhfw+wgNR7CuLzJFEbIDWTgX3XIge3P9goYru2VG\nCsmb/llRbO91Si/ME7V3zijU7ViiSyv8JKv2vYvKGeNW0Xur1jK46KYBGGaf\nosDdpeQOETv7M1rfnTJxdI6jdNAj8c7/c0f9WvPWqzTMUYNke6fF8nM8WmYw\nsTIwmk7Pm1r+ukjqBGkQJD0xY9MvAnOLtgLMDXWR2WSiWU2PBx25jNTesM6m\nK+/4OEkOUsI2Rg7y7NazM5TPcJf82VjAWAN8OxnnaWjlWyB9cVg+hHA3XjvL\nI6iDE2FgtGP+96RFfXC17FHX6vkfDzcmLP0r5a28oQZYLh15lQXGIozeOuEv\nR/zE\r\n=UIuP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.3366a71d7.0_1640176310620_0.07444916928466361","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/typography","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e7a8489d9a79ebef04d61fa3079eb3e70f16a00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.c047f7c19.0.tgz","fileCount":22,"integrity":"sha512-7kBcW2v/ICcxCwXffz15TjLwZ48wGDhSIGaOCF0ABoJyHg7iOquHSqRvu0cB6z72E+ESFCiZABrTHPZ5ZyzYDQ==","signatures":[{"sig":"MEUCIDMZpMCnK8OZ6QVJBbKUYjb5mWdL5VnT7Kx2+yjFOFGEAiEAjC/Ro3MtiN5snisWbg8YyIwYQNPSjXcdf9zQY5ASKkY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1csVCRA9TVsSAnZWagAAxugP/1EYdSRaHmJlehz1GXQd\nff7J6V1LGH0AaPNtisZZlEXrnRdAPOG/A9wwxs/rFc5SKUSd+1RnibfHSb73\n/ocwQnS+v9P1GZzGAFGbh8S0mawmaWdt9Y9o5tfaKJNdWzqvZGy9TnDYDHFj\n7GKHVD/O0fRNQXoq4bM2q6hK5+D8vrejXxTygNO/0DEKxdmVFDGyCF+4t1pt\nCYkx6b1KMvg4Gmw20g0Qxkv/C1fcyCqA1zvkoaSBjcAxSbxHGnrteuFIL5yA\nalp8pdyR1W8ggL5jxh9mepr9SggpMeDB1nvo1+cdXCFd3O2Va7WcmWbIdASF\nvkXEk1x7ln9t4k99xZqtWrNGtliVOT0tK+hXAlCk9lP+KJkRL6T4LhD4TyjT\nn+XiizC4n4WdiAVIaSurRcxuxkUDbmi7GU8qvGlEbHxfwpt50GewWBOwJ0MX\nJTHy3qpfSANnGLAXknBA/PHNjn7h74crtV/zPKKLYGT7kJMBaKZ2xVCJP0ZC\ns7Xc95w9Lq0Iz/bsVhv41fLdFbxui68Fp+3AjvoSEKrdrAGhyhS+BLW/V95g\n/EuCBRzjFX6/slRv3Oo2VWKVNhwHUbICWYQaIcMFAjU6Nn71Q8LRnn6vzulU\nr+jZiH7wL3wxnr90OSuFtw8T9ohseUrzceJXpFg/MK2dEVB/EWRHhsVI1Sp0\nMc+Z\r\n=cC/u\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.c047f7c19.0_1641401109166_0.28756361276930575","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/typography","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0df01f3a6b291d1869d83226fddfcc08c9fcbd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.05db65ec0.0.tgz","fileCount":22,"integrity":"sha512-srSKrUQZRB5D7miDuJtgxuD+d53DLA2zolGOU15S7O8VyeZvYJ1p3EnwGHcJ1MLa0kSa9DICy8p+b7aEFE8FHQ==","signatures":[{"sig":"MEUCIQCOKH+3dlch3LZB49xsVhgpkZ52Yfa/Y2pHEUIPfmPEywIgAuP4542uPt/kgyuQNTjgaIlEFPEusJCJKmy4+TVHMYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yM+CRA9TVsSAnZWagAARysP/19iYYkUVibcg44fNHs3\n4Lkjb5t2In4t6AEOZzwMa+ftARkwUqKN2lLXhCTpgn+DC5gase4l4MC89DKV\nBnM1Ujqzv/Vte1Hd4GfhWg9ZZnVhwCBlm363fwTTB5pPgUbtkSg3DlEym3DA\nwNebpw9v/a4TBoC6BE9ovBoXQnkMU7GYwrPC8+bMe3JEN2hOf7WSBMU0k4h0\nU+0GP3yGBVOr3LfuhQUUd2bE/r6FiIokq7ecFPVGfsas/WhhvfUb3ES181HB\nxkBFPQMVag0I9M0xVXtNW7zp6WCspRBCCRsPOe73Nzn4nqUOMFS3Iu5PYmx7\nypk1hVWqo24dmvwbxt8C4MnlzDjRGV6paNnjvjthmqfiAQSiBb3rRkSiRARI\nLd/GBl26GRK4L4sezJMhYfMr10HTgS9rVb5+rOBDPVUZcsV8KfCsmhrfMPVb\nqS4xF7z6tKJYCFg/jyZ+XCSVPlc1MEpyP6rQi/+NiFg3Z4X2cKgcsHBPjYZq\nrOnqx4muDtHGdTlMmtXwnB+jjrzH0yhNMJ5lEmVOcM+++SWp5wmjT0Z8eZKo\n+odZilFqR4eXGJTB9sTSYBx++/LwtHG1oXn1aPxQVOMRMIOIBhuK6lf+T5Ad\n6E+x3lgtPrFraXIRooVUFJLuU6ytpPKOQoMFqWkUZH/2xDoM58mjBj5exGk3\nB8by\r\n=gIQP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.05db65ec0.0_1641489214322_0.03235750506896018","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/typography","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6444b201097ad031bf213eafe51ef53f6ab1c96","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":22,"integrity":"sha512-qwzdxS9+lGrOn4vp5BdGX92zyQAgXLJDCugfHBvMZA4GskViQ/DdHL7417fJC7I/F5pOWPqqvXZGe8/TU/yzbA==","signatures":[{"sig":"MEYCIQDsNqTnx1VEs/6aIKc/TuPkxfQ2P7+X7AIJHSCaY6CskQIhAKlB6prX8b2cQ2W9QcnACBVgCmhRJM26PQARcadYyLiP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GOVCRA9TVsSAnZWagAAFE4QAJ7XITGZdog8kiybwMpX\nDj9xkySOn0VJlX1THHyKWXsj3fT4T3cNTq4HfxcN4zKGwCqeRD773rsRUKxc\nsiMV2fsUtzAZlwMROO4ywVILI7WuDXiMH4RJ2pPzeAZa3HgW4D5qwO0P6M4J\nGSiOkZumdAUZW46lmM0itgWjQba+ODKK+TQxNgjvKmbXNk3zpThMln3x9lbt\nGaH4bKsKc73+oLYZcJg/toRoyUW/zCjmO2bv4T1MqBnN2S6NtNVf7NTGLLdJ\neq5hRcgsUx6oT0BdmQ8Eg9hzBP5qhIz2cjvA8rbkxW5GAZ7p7xDvM+kVKqhQ\neUodAXWu4COhT4oEkVOMXCtMB6PSwJzMwZNKXNy/qjX5nUCz8CQOzOrPR2sh\na29E+d1e65hOexkV9hva4veHANGkmJMYLibivrH7Id/X1tF06dh08l0awZdj\nIwXJ2cw7TDxS0IBFF0LpziN7f4/6pcT9FqUYE2WAR6bduPkSZsXGTcYCFNZJ\nti0F2Ts6ShMtwrYZHxoztlVLuHa2SVJiNBXDoRvYf8R0lM2eDJN0sAob7oG1\nmfoRUbBPinW34qgtquf8UjanvVJvGKsNJcptr7dkUrXyRrkmTQYucR5fhwn/\nxTMiDou5cdZQPlbou59Jm03lrVkORg7dzFoMkPDbJyM8SAhAzoPTGrAYcoyG\n2Vjb\r\n=fXw0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.6ca8b8f85.0_1641571221287_0.5825709642769186","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/typography","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d0870073ce1b6f53efa2576dc149abadcc55670","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.173ee7a7a.0.tgz","fileCount":22,"integrity":"sha512-VH0HAYGseOcOe6vb3vpcBaK0pTZ/MCYF/nbT7ntkAkfDfEm1whZmVvzSShCza2M8SrGKApzT7tnUDR/QhcxdMw==","signatures":[{"sig":"MEUCIQC98lPUTrQFjFflFyRYD0kHj0TT2dEeLqUb9af1X/dhGwIgZc4jEkd/8uhDjbruONrR8XBgJ0W5DLwHsl61CSjnq8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GSNCRA9TVsSAnZWagAAppwQAJ1PLcCEzWpWklHA2L1/\nphs2dl6LPWaw/YWtjAl/GhXwMM+4+GIh6MH05HFFAYnrz1vC9plnjuJfB/jk\nloTD+TJy/dEKhyN1nAS7/bEutg0LmZX5z+UfIcU9+505wbvOG3bP4ce4MIlC\n60+AIXcli6emD5o4usZlUZTEro464Y52gj7oq+j7HJXm6rOyMp0qckepX4nQ\nsWsRI3P9UEUwRf5WU1ACPumWDWHZZL0Nq1BtIsQaZMkIcwkDlq+Eqj07OWAP\nj2CDolDwMxnof6RGvo3et6sg3WO7iEaNPyAWt5BLsahYvRDeyJKDphnd/KRp\nNhYs+P14nyG7xNbSEzKMuGfgRk3WnPLTjGuwRaoUe0lAPzCcG9w06YtiEpxZ\npz1WNcVy49ucFCHCpjVMPKyvlDSPmSLm3Pp3JMNP1DvM7IelhF7+IVbbynC6\nN2XtOFQsd6lrI5MpSzFNcI6F3Z/V+OwoGcjo9NS90X89RbFVt3haKZK9Ih4l\n4M5UO9Al87k3cFVF14Uo/Zp0J+ZOIx78/hnnZkfL2TSyKzso66ajdeEHm6ws\nHsvVfA0kINgsqBIFMLJciVzQAUc6nbbNWzK2bqEgKuPF1evNow9Rl0YNtX5P\nMBEPXstuvvO1jrMjMIIydtO4XT9UYUygim9R+i8CQgEW7c3dXSDOu26Qmj6u\nlzJK\r\n=EK1m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.173ee7a7a.0_1641833613748_0.6352363935668675","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/typography","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f4a486d5084f154c99f799af7c8e32e07d3f7da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.b704e4dfc.0.tgz","fileCount":22,"integrity":"sha512-F3X7XmbKt5qlN+02VLMoTE+KSogWjA/v8xH7uTgVZD1DkZVLqCCiVkyrAjWtNXet2ilPyKqsUwqhaIp7Nek56g==","signatures":[{"sig":"MEYCIQDqk8f3YMQ/v9IqpdFatE7d1k2KUZ1z7QyoESVh8ABqDQIhAI9nUwoeep2yWLcLvQWgY0XwPeTrPagL4ZXaWC8YzNo/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Hu1CRA9TVsSAnZWagAAvMsP/jho1A58E6nfGimrZeeL\nC1JSbkzvos/sqjenqJ+2ZDq1mI8Je5zIVGIO7uXCXNtpIqof/uCkEuIvOkXS\n4U2OOjggNta6iiUtZiEg3bplRxvPWkOPO8AmTgdEbD7Tu9qGh7PAE1WkM8ON\n1k38esLoxB/o3ZvzMFWyLibaQZQRbPAad8eks1mNTtG876WQtIu+s+lPmIh2\nCPIAAjiEt2Qi4Cqu8ujD0V5e1pZoH2U+Na1mtUvsc5NYBCWWZtqazyjZKUQF\nl2tblej2sS8PzxKMV2Y9bZafnAELJKmC3Iwxm+hG9/BkkNnFHR9mYb8MPeJD\no3n6y4GUPGkKC/+q51RGgk5ciZPPtZ5sfoM/tb0vKMt5Z7b18zagjB/0hwmw\nK0wcu8s0hBwU8W/lE1GRlFpRJfqW54xHvraGXs5FphgpzHWzzHRaJkWrzEMg\nSGijv0U2YYkJCf8JxfEAqpiLqYE4T9EHpIhPMBMOagRj+jU81OBLPyqckIg9\nrTpYcbeMpqzp9BYifuylvOQpqfsm0fvYzV2y61SWvuJtdMBauVr0+vr5vyvE\nOXDcZK1SforGExgxx7yL+X1PBvyFsU7Hz5OfTy3srqvNfhr7E7seenAY4MNL\nwM1aMJOwlhEn0ijVCQe8la3dJLTJrHMf/SluaiQhtTrXnnu0b8ydrAdUDgbE\nTQ+m\r\n=lXFY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.b704e4dfc.0_1641839541387_0.7078481747415102","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/typography","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe43d80d57b99900e9391f2eb26bf4f55845733d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.c14e977ee.0.tgz","fileCount":22,"integrity":"sha512-io00BFjHn2Sy2tHFeNfCm4is5+XVMy7LupohtAQ+CtZvaKjL/JqcANmaAWZtipRDOq+LBq03Ig02LTyWHyUzJQ==","signatures":[{"sig":"MEYCIQDLVP3ibpjlX5/T/ataP3xPYGgbkdhLfULrmS2dc+kjmgIhALK0Re8r67/isyyYTdXxCmu2XVHxCyqaRh1ONfK4Dz+8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3abqCRA9TVsSAnZWagAA88IQAKR5BXg33gzzoY0sc/ud\n/2RyVeUBR/Sleb9Wx7B0Kg+MxfSv2nGN6haU0oLWUTkiUhZhp16GWBoTRytD\ne3EPUnLNLWU/7rmnAXLpf7yToxL1hP5/+KyL6oZqFU1v/vyuzFGfiNRfHB7C\nLTzLNyRErs7DWdGN+TI5BzoAFs3/YT0p+KI8Zdcm957OagSDXAMQD5vjSbxu\n95DnBIZ3LhdjFsbR0zK4rNFJ9YqVbsGi12SJqGGSldwsTjVlvRAB9OoBKbAF\n+Q5sHBAiTvM5QLn7JuiCSwjvVhbj5ffbjiUXnV8wSuWzVnRasR2w5/8i0qUM\nCfdOtePRwO2PvP5uVWDPAgdIzax8jaYkOFCAjghazpZIvIGsMVSc07F57W/w\nvJ2SuW1EoozUc62Xe8OnyH2i+QFyEeE3PQLuKJooEwAx+r28hqnhLoO3DTVc\nqwDxxeuDisgaBgpPmyhI3PD/c4djAn3hQ+k1QEkH928i2fAF+5gmYKBzVtHf\nClHuSlxL4V2qQvHuBqBv6vOrz4lshlbE83ddVv13i7nu3eKA0hA6D1ImQspK\nmhXB4kKipu8Ycb6/Q3FtIKuNjc4Rsyci5Qnp8SgH8KKtD23d5FAoqZ4uZSDE\npPx2pbPjzpMWpxkIy1ESncxvjOKJADwh6TuEWo9fpv+Q8U5o8VHwJmbq4s6B\n7dbP\r\n=zFMl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.c14e977ee.0_1641916138144_0.9804300797177163","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/typography","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"521f897be9e48f4d51254ecf2cc718866aceb1bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.b094eaa4e.0.tgz","fileCount":22,"integrity":"sha512-s1edI1WY+XRNGdGgxvWIJJgF2OYPVGtUxO3e7uAAkSo1hny3POxretXxtipuUQt+p9sBy2vJje1dMm9saig+9Q==","signatures":[{"sig":"MEYCIQCJX8JSDWUfsL4gm3YccVWUdMPpdhjSTeAUgR0THTZSzgIhAPPIvzl7gCk9ZuiFpKPU5WPBvvxQRET/ciUWF34O2fon","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cPoCRA9TVsSAnZWagAAqeYP/iJGiFgypEqs/1UNxOHV\ngLEGw+kDavfissqAZPDEXnsWu9Zw7DJdcvxZ8ukSo/0xt/fkB8aIa48GS2wz\nbPQIKBIVmoQMAbbGs9Rli4hwG5neD6VyfeaCr+riByiTi/S63dsUymQ5HHY/\n9O62YbtZAgymB+5azzlhVb35l0TGSesfFh+7//iS2afNifP0K4MFcUkQDW3I\nMCQf2kLSkBW3ixPrnhqBwtIoTCHEIYaHy9qss9mVaPx5plCNNEKAuM+oDgc6\nuS7DGNPWC05mdUC12VDA3y/ch2pFYT+mQhpJWyrIyMTxAKiBeZLhwWn1+a9O\ncA9hTNWb4P24mKCEBDCOfGOr5y7hsRThTwBtOfHHt8Sp3FBmI9QV+/fHW0PL\na//frfmQ21PT6+dIr73ZaqtkUP8/JoIc71PqG3wAAbJvomxWzzk/+mrI/vnt\nc3qKGTQMShoa8xtNyyzXyGVRXUsQFbdHquNRLDqB2grk9EdvjjcUQu021QAg\nNYAOvuRQWrnbcmuTbK8pM92MPMf2df9m/BAL9uGYOY7ozGZfTAYFJs1YFH+h\n1tysY2zAzWtLvLYJRzZ1Ur591gTjxk5UBF28wsdHaBuPTvxkzqa47A2rU0t1\n0WdMwkWWhgzwscrZLiYBuWoxLCI+1KQ+e1P/C1/9Hn6FVAE0l12SB5bgVmZb\n2JFt\r\n=yj9T\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.b094eaa4e.0_1642185704251_0.568345984622125","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/typography","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.390220e42.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0484b0cade21d72b6a6289698683f4347985f0b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.390220e42.0.tgz","fileCount":22,"integrity":"sha512-PQ1jNTaK1KaVWEP/Ow3HmyalKWlN2tmK6RwHOSFUOlyvqQhSHwRxG5KCfVJrIgC+HLivFtu/iDiA9oi/80DRFA==","signatures":[{"sig":"MEYCIQCHXmP/aunMZdB8GjRpv53llFJocE+RxCXDxXmVg8CNagIhAIlcTPtq4lwZyysfqk4sL20dP5YSY3i0AYEAPZVm81Ls","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z0nCRA9TVsSAnZWagAAJdEP/RmHpRdER0CegQ0CNmdT\nO1970UfhOx6yj2p/UxgsMSdUqpwxF1vbK0d/uhG72pGlDUBIn615iX94aYu3\nxtwE+MtnaCE6Zy4sdxopJY8AB54GAqQ2fYUdZtrMrTKJY17cms9AKaEsW8rP\nLkX2skq86FMR7gMoDFfDT7Y0IccHQTxxTrrx9+BQcmU8HNFyO31fz0QRYurN\n9HzuBM+XsytlpiRw/kG0/RyFOMm4Aze/ahbXRGlWf9cSNQD1UW7M8/+FRVI0\nWmoXvrJSUmRK3xKH0byAeLdy3mJX4YK2lTDANbZsQ1f8/goPn+wfzkNKAhsR\n88I6GDRQO1xLbjqKHtp7PNgya4Vzys97CowDVd9B6dUDI6VPEzGVz+0cXq2A\nONmwMmQfOo8ooNGd7VoaTjNK8nKPc8rwTtObA18Itst00txXO55pfoCA/9Md\ndPGmRhj0OjodnGJDh7iAtlQXJWmqRltqYz5i64CDXRzKK9wu3X71Rui5z74e\navgPvV6LZRKSw5WH6TPf3/u7shTYnB3BjhJgGIG0TBzjGq9oCdAfIPp4FnWT\nOIgK3iJRDg0fQHe8/sDBv3/JW6WyBSmQoqzv3ya6gIMudjjwJIqiiPEj5ZFu\nXHkau9IF9HfcRHgx9z0GRkxnFuSTAN2eJjMpbHQKmZ0O2xbkzCxnz976x5ua\nC6cG\r\n=meBg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.390220e42.0_1642437927321_0.05519609185226848","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/typography","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"107e1f97c436a5e133500a688b75609073b4f7d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.4b5391f8b.0.tgz","fileCount":22,"integrity":"sha512-ZNIPpUJZZlRV8VStULXnC4xp41SLuNdemfDcZETQ9rrhWIHS67fP+ZWpj9G6AJgrClgm6m6gZ3E2LnJygXAsww==","signatures":[{"sig":"MEUCIHxmTFmnQsd7MIUruNep54PXapPtLtieRiCP0siI5J8+AiEAl0e+p131cOAZALDPy+fc2pQfSvtRcZ99pKOC+nGx8Yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KQqCRA9TVsSAnZWagAAcZAQAJyQR7ny2AwbTXs0fig8\nYSVQJUacOyzx/JULbU+/57eGMpSSq3zWJOnozfOudvMgNHd/PuMeoMuILn7S\nqA/YuoXpJ8dtnniYYWqCy2zeYPHtzg0ut1rGUD4gUYwdpXOpHfTLJhAy2IHy\n7rNTZp3kB+O1o2xbA8KmGb5V7rbV4BoCNLcsEv0Pe2/Z04s66YXvYyZWW2hg\nHZv+UmmFFep5AY6Be/+prb/T03eR7/P+4iq8dsLU8qCoK6gY9z05K1trtELj\ngLVO5tg71Vhc0pAt+ti6DZ7DrbMHYWu7+KNdpkzO4+HIZTVA4PgJgCgX7Mf8\nbUmMWr/Q9Wfp7MA5oONJsh6QBfyH3CYjTWIYuODlP54hgvAkZRjn6pZRUNU8\nScweAOlf+9ik2woxnufYsNezpspw+n0HJVUe0Aju/5uLgelVhbhvtd9dh0Kg\njbyDJmqfoonj5afHYYqU+a6XR9W2CF6/xFUGsLPJogmw6l8udpg93hXyKe8W\nKsRhWdSjQuaOAX39EcGpBGoxy7qPw3ZrIf2phbqbsHsnFhmG462N9ptL2XRr\niTMzaeOawLLx2kDH/szbU3ODlp+sJs59969MyMouvpyUx1syqwTM7XFt1Ewj\n6P9LZm5qhu50cr2jdsxC/oEbff4l7lhnrHqLzy7GSgwYfdy+h9kPA7/ibsAY\nzejT\r\n=1m6F\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.4b5391f8b.0_1642636330170_0.12063555500132139","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/typography","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"346745a9bb1058b2a82693ef0a748f874024461a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.cef6bc623.0.tgz","fileCount":22,"integrity":"sha512-xNH1Mbdb/Tz8kyzi2hLky+5JBKppyUaNUHRfVq0e+ZJgVxET6F817rPR4tEq4WqsEoRQ0p6pzzuh92y9yK+l/A==","signatures":[{"sig":"MEQCIDchM8uAs9C5HNW774ZOn7XRmA8+FQdCgbvGqDU4KEfKAiBkvldfQx3XYtY6ywR0EM5PhjCL7k0kihKXtg8nVJeawA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KnxCRA9TVsSAnZWagAAis8P/iMk6PDVSEGacQsqCF6i\n9Op0bC32k+CbNjhRIQolhBGvHjGvD1kKb52gKWuU3PjgPq4tl4OIuN/2HxYP\niklTSSvbO0V/Ec6WpjT4G6HZZVerIS3Sc457MSaPhfRaT5pHYfp/0qpG0BUx\nR0bOMB2oH+vkL+Kbc+DMewklOEvredAEzV98LUGF6bXPgZW6vKl/TrbGdw1x\n2ym9r+ZWZ1ArSGMcgFxkwS9ccdC7J+d/T0W9CyYKKyr7wfTk5jJyPNbUEq5e\nK+3kLlf6/PaVZI7nveFNCsr1uT1Q2hMYHsD2uBd2bYeQp/HCJ7zypBEzfeWn\n8tSE0y+tsQSPskuuzCclxZB6JtsreLEdR0OEwN6EE+RLq1mTgx0Vy3r3OQVG\nlfpUtEI6XC3Y/zx5j2Y6bevhwpuffKHyEYzVeXZweuthcc9e/Ddc7s41L8GO\nS3OyBRaXbBYSzNQ4Fe+GH9zmFhi0QIuj4oMhOWZQOzp89OQnzX0Sdf17i8bf\njOY5VQJ75yurli3FMgtrB6xWrKSdXZl7IwEWma7XwelzOtVD0pAqLCvU+Dmk\n6/T9+wRkh2e4HMVWfG8aKKOc/HGQPP1thTtqfvcU1iNR85mHnFbCbMWZyZrm\nL5n4KOFQQjq8ZTbBkVm5MjEJcOHoCWuTrKG6URvlEL2BrSVbYAS455cds4GR\nYtgA\r\n=NP4T\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.cef6bc623.0_1642637809162_0.5324763304202487","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/typography","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.0379179c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e37c582f23d6fdfb5bef8cf7e19d1374b45119c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.0379179c4.0.tgz","fileCount":22,"integrity":"sha512-MA3FJUfxmM68au1kXSTpVtp7KWOflRQNnvkA2R9/vtOLDdpS4Til85HJhwMdlADgCad5i+82lwKO2FCjTEFB4Q==","signatures":[{"sig":"MEQCIANPX1JSGnyVuqXZS99J4yOswDaK8Z/g51C8HQPt5dP7AiBw8VGPzpVDLZN0elWQywq+HZv6XalzgfVUsWPTfSBy9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a+6CRA9TVsSAnZWagAAHpsP+QCHUVZ+biBGItzf2yV/\nrNS2usDVbent2jU9zLOM/QjWRc6YkINzJHr1fc0Ud2WC2rTlq6daEYVeYtuJ\nVJUz+Mo4GLiAou9qEqD8kCP/QBC0Yyo8s3Ny+mL8p6TC2554Xg/2SqdRlIqy\nqdhdpkvYMgZw9r14dxzcdnCIC8j7W7ByGzTs39jcsE90WNzXz8y9Bmk3Nq4Z\nk6xXYGwkxdksq4Tuy9XnJ55ZGsMZXaAFkhzoVKQaMELsdUR4dx3KquCjE+oI\nGIprQm6b1POeM/dGQ/GYJRz10tFRcHpmfZU60nbfUA6LL6PR6B0zg8wJpawk\nGI13MXH9dxmrG0v9FSCWBpJnyE3AaLoErXaqKrtzr6wZBqDl14hzMi2f8nCI\nNR7qkzqp19uSbmRaF1z2TxtkMWoySrmD3N0fSzNqldjVNllvnSknYgzo2L7V\nR8B1PW2RhTGJZpmg+4HKLk7JccvP6+zndHsyi4CAPe3t/IcFMy1hFxai1CNb\nKHE+aOFLnckAScF9Gr7Z77vNkvhIsuXe7zPGTp9xb60O3I6e8EJr4PIV5iGp\n17wQCVkNy3DuaUUaukV1OrlXAzRlVWAEM6f57XksRxXcKlm+2h1EJnXJNi/b\nlK/Ut+o45ai+x5zMeMriSjDMw0w0q2ZR3AsH29lbEQ5Jf9duv6Ab0zUDwFN5\nN52w\r\n=wEnU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.0379179c4.0_1642704826592_0.06836691004830708","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/typography","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b10fae90207693e403fd56a6494e30a0bef2eef8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.e62f3dabf.0.tgz","fileCount":22,"integrity":"sha512-UJeetH5I6VqVsFQqDkAVFiHJz4mJG9CcytlP5by+x7UhiifubWvTIFW37fLiANuXU2fYOIBeYhefwAhMkRb4Hw==","signatures":[{"sig":"MEUCIHTWxL90m0kcKjH8CqQEMVjSTaxz2VYAXpn+koOlvb9cAiEAt3rXsPZR7HNcBrDISkNJ69WHVdYhcdiRv5bAqk44Ql0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zuVCRA9TVsSAnZWagAA2K8P/RcER9lbhtj/81GUuC/R\nZY8IcHloPuLCPS799oqgRptUWihTn0buEGT0HxAuh/cqXC8RnrH00BmOHLg7\nmAVmnsyJzWOxKfE6clFxVAnmnSRglUyEbdhh1W/CafQRgQBQO+emix/le+IC\nwyPvI/RcwUvvFv6bINHfxX83GB1numubtb4ZggN9BnCbbI5G4tC0kjjL4vDW\nKykb8aeUe4Aj+iVugoB2cvJZtqVUu2TlK1vQ8EIGb0tb+DuaWKYgCWZXBi6w\njpy50gI1OZn7LjpF4Uw4soBosER+Q9WPTIt3dV+ToqGdNrHFrcFXM57Q9E5l\niNqvkufOpboUcufaRa8HTQe66yjXZGaFNK7ANTmO7a7xYSTkXOewFTcXSbF/\nFzc3ZXzucbkLN7v/gZ8RJcPyL1t4gy7oJb/Yzp09Gz54YsVYrv9oow1jZziI\neB1u3mNw4ESgo2ui6iyNOaazZdNWR7hyU7n2qRPOXBX6w6X2zfL2dERpziRl\nlgw/1kVfg/XHhPF36j4AwX57Orp+HamWbXG02UqW8AduMH2H+3lTMwlLi2Da\nsnBygallrhSdOebJZ1c6ZrGVyYSGKObFUfG/CAAFp7BhzqXJ2lH9/6ZibNf4\nV5h1TKtGMTUWiWYVPBsYwgQePEM4JCdmtJ9n0kq6IqA91A+NoULiUfr9stSB\nIfmO\r\n=FTR1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.e62f3dabf.0_1642806165283_0.7787680576648419","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/typography","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ac2f789f6bb6556b6a63578f4ac665b5299ba4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.3e20c1de8.0.tgz","fileCount":22,"integrity":"sha512-JUwopimshxm2saViObNahWAIB4I5FM2vV3BBU5AKeGuCobzwUD1idZd4bhe7fZMirSjkdhac7p+yLLAQeAcEgA==","signatures":[{"sig":"MEUCIFDfytghNUM7dKvrpQAdj1fHtn5jhOiyKhbMHiu+8/x6AiEAvWMXUqTudPwJZVunWgIUkZl9UY6DTdE2qKqXKiOobJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Be4CRA9TVsSAnZWagAAMHUP/1LOP6iORhJeseKcGpbi\nTZdvqQEUjpccvvFh7KKDC7y+IoBh1T6AefOHnOwNSItGIMUFekBjuoWFn1JT\ntqEirJ1qlFdrNcnuCzwd+i/SW6GdnA7YoF+pXy3+ALKvX8jc+q8DUVWWiGGo\nWoNy/0F8+N3d/JDdaSaWRsFhWSNksWSnH/b8PMUZkSIqfdGv6bjGR3jhKwHc\nqqnYm/Mt/Qzvt2YbBL2kKjaH83Gg0Fc2dDUfeiLMYLMu8jS93T2RwwjVJ1lx\n9HTq+yA3ikQAMFiUHRP96QKO7JJT6IL1AvSLEwsNMQxie76a/THYdmc6nOOz\nGKyLHAMCDu6xFHgiOXgreOMT9QBGcIkIeZ9o0hr8MI8nylqRe5vo/kMZq+F6\nPcyb/cSEX1t7FU2HjMEg94bchgsz1Vo4CeHCHOanJqXTDp9MRnhW9QnBSvfO\nh4f+lkGc75JoVLK8FQAwpfZOxaUslyxhxphySshGbQRuDG2h6TuPwo4xcf38\nJ+/yo6DUU4pzisdaoYR0LCclhg17kUUt/KoiYL5XGFEzAA4S6UnZM0pLdTIu\nB+Jvy6jt5+b6C1tQlYyYQesoNoi34fgrnzDqqsu8/bubEBew5iFhwABxLfMP\n/oBEmP//334nvWe1kxMXw5Ue8djutEmFtlgGAzsyJ420CRtTGXqMJ1PHngAZ\nIG2R\r\n=XkBj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.3e20c1de8.0_1643124664735_0.7944397114451889","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/typography","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c14bed575fee8a245b7e13b7dc69198b9c8d60ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.9f9d928b2.0.tgz","fileCount":22,"integrity":"sha512-mOqZ1kMu0I0hUd53TKiLUdDVb71SOlaG5tkaRd1j9cAu6TGqYZd2hxkrV8HpLOiwkEotnoD4Qk0di4EJtUVBOQ==","signatures":[{"sig":"MEUCIC+k4hVR3ztX7VJCQP2TFbDYbG2EXUg0zbg9EoPX67/rAiEAuGqEJVGVsHIt7VTXzy910TFTORR8NxWClzEpBQOC65c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uCRCRA9TVsSAnZWagAAtAEQAIZZswDnQw2vlggcVfN4\nzo0DFPAf2E/HsQGuVGZc7NoJ/WuixG2bWyYUgfT0mOzs2axd6Qk155u7Oomb\noUSpAtnTnym8o0D1D6vxUPXdct+oSyUu/gIK8sdphwOhvQ/If7gGO627tBHw\npzaUy926Xqwt3BvwNN9xZVy8QFJHFGBbfNOcSjIQdhwYMCkH5L8EsDfyN/z3\n/FFogdDdNP6I0xcTorYVMOUs6BmCwbdOeXmwdNazC0akkT3/phaCNk0to1bY\nHLqkTKfanVn+u6qFEKmcQGmXDXzIWazzWqkT4iG7AyNRViR/2a/q1ImAmA4T\n5kXxnn4Yd7gD7mgEiujQpSyfr5NVvEE4DWaWfp8Fe4FP7OHldHi8h81DoZJh\nACQiAoi/DQCNkeMC0zH08Ez0LuV0a43Mw2YVRhIasCVy48pD1d7hjr1eYCUw\nDdWv+qtzxPW3aTUPm3ZElwXL0YyMgEAiZ5JAigNmuNgvBrNduaxjgRYIz2J1\nTOydOrDQYYkgqq4kXDsuyr3QRDd1P31P74cccwouE1j9lfqDO8kG8TuXLwvK\nTYvtHFcGUcUwlPCY7qhPq8Rm2F/xiqWvupgDln/kI42CoKNxODsls42DJtHZ\nw0kQQyBQAkiScJFPl88+AqUykzajUA9OWN2Bo5hxFQLtzbPHZP0ovva8cC7M\ntJ/Q\r\n=EzPB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.9f9d928b2.0_1643307153292_0.6947515156602211","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/typography","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6a3f3a0be4f21d9f8941d55423a3cc69193adaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.a2bcb065c.0.tgz","fileCount":22,"integrity":"sha512-erWw3O8JFaIdksyDNqC4otEuOzpMYWJ4oF9zl4ZOaQKlFqRT+2ttR5qILKmIMkl64el14Ypa95ATEpM7GG5aoA==","signatures":[{"sig":"MEYCIQDoeYkCKOA3xkDtQa6dtJSCek0bP7/u4bYemy5xb7/VUwIhAM2ElSAdH/9N95PshlHLibEaPfJmHrbeKE0wd5EvJR98","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EW9CRA9TVsSAnZWagAAEJYQAJwfpbHRGaqFlZJdjffJ\nb0ZxlRspn/LjsRaSgFoFSq1jN9skYCTiN9WcxG1noqOPsRlW9cr/HpA/zYJ+\nAlS1TJ1aL7U5hqQ91MFAx7Q1LM/YiUSHhy7w3VdK0nCWxHlxdYQotiXj6F42\n6MiQzcQJOVrJTWBsSAB3AYtsVrL462DQQLBgzI6nROABZ+ym5UU480fiQOuc\nstx+yash8Hhyy45EJXOjjRpoB8oWRPSKALfJTrpCZwoYnTKcPUNpFhugswiu\nIGL1vC1n8prx7SL81jNkQDRbnnvRehFrHywvh4wAT4yKJnKbQr2DqEtr81pd\n3Lu+FZ04kr2W86BuzSGsaN9+VhVINcKZowUEA/8qXU0ex7l7jRtC5DhlhZuK\n5Mg45ZvJwdXKqqnw9/3IDWYANfyQFY9pvGNYmKAuxFbm396o7jO/RGiCTZfp\n5hd31bHo9zqG6v7jnn2kcXXvqY34yl3br78s+Q3m5peYCRJs+7+8WS6KTa4W\nXukKUNnnbnScgU1x4WT5D9/7u3o00b2k9KanMwo4Er4Dy0tgKrskKps4QfNh\nO1gajwBqS7Qr9jKugBO38dKGwTZ7tkvU2btC4i4cj5Hplh372t9ffr+LO8q4\np8YQC9XvxH4tLMl8U2G/5Me7J+abZ0FCLVkx96OtCRsNzRgTufmd8hmjfkxo\nh4L2\r\n=Rswh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.a2bcb065c.0_1643398589761_0.6892581794798083","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/typography","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d5b5c6af8feeca1087dd10d1e957ea9e5df7fec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":22,"integrity":"sha512-lUx3ZXfF7S0sbjqzzze/2ZrajUIv2EuXwJBAPdEIBsQxPZ7FwzGKrYu502B0t6SSzuGqLAL+Lh8hmMpRn9H8LA==","signatures":[{"sig":"MEUCIDA4htQFOmu+/OBaw2tIBXqWVwm8i624XI2K9eXqlJjYAiEAjQJWBTZfyEfUSovENN5knPdekIBmfs852a38/qiWeck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EbCCRA9TVsSAnZWagAAD8IP/1EaZrPQB20lv25bVgs6\nZ7S0cSdo8u6UUhrjCwKRe1D0Wa1P04WRgNrj/c+E0Ga3LUB/baLr3rJQ1QMV\nufGjwqvcRzXcVSvCcRPjDRiatJSXM/IvNRN8rpo6sRA1lx+Rscheic8bTy8Y\n1p0BiKOHtBvH+jpzlPnOjrC9JacFXI/M1hFtlKEHqAJBmnDBmOkg7jBNCCKr\n29kNSEfPFti3JWP90kmOWIYKf0g1FfGMdfwa9tLCKxyXMRWwaZHTs58bvgOl\noYCWW4xXVEoOfnCBsgVgCMWRlM9RuBYK3J+CHzyNDxOW9ycXOdD7U+Tb0ti6\nDdkTSleD6n79CNEdtHj10u5CF6c+G25mEntP7N6jby2kaEFnWiCRQnJlhRBj\nkHyckliIruc1PWpBYj/m8tfyAXw3XFbRnty6gksCZKxJOrALrcCODQ8vpkXY\n2gRfDUYd9rWMMB4UTZjxUzQYEoLzLII4x+4O5CKDtOVQBmTsVOQMbYvlrrs3\nHUgLPJNsDHD9D+wrMQSLLspLPY+hPzdKVNOwtGocjddcoXov/RWkNHINtPx+\n/kITLR/r5e1DM2Ptss9EsVJLPZ4BacelKuYiLEJf89pUGPTQwazsJbWMjjW6\nsrXBGZMMRcOQirs6e5GNwVFAT5w56n0uabXEdfcvloXrGkdyV6LeRcTSvreh\na7zu\r\n=QG4O\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.4e66fb2e1.0_1643398850071_0.47150394234173554","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/typography","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10123d326759c507d147b14ee0b7464bf943797a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.9736ddce9.0.tgz","fileCount":22,"integrity":"sha512-qMpHFDTSwFE5z/OZKk7JIQCdgL1jGHqGuwP/IomvBQjx/yt3u5BPvcfnGZZteyJPLzxOlY5/+8qQ2O5djHcpTQ==","signatures":[{"sig":"MEUCIQC5KcqXzZX+w4YJ9AINt8VSI1Lac7u9vKqcK8OdcW0yNwIgVhhQ5AQ1AVQoXxBL7/70yry7WXhSDn7auBKq6y7EEYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q2dCRA9TVsSAnZWagAAbmQP+wSrLpH4agWoD+W1YT2D\n3oabjziPlWkU0j//C51IfL+UOSXrlt477tDcw4l4LDXSLLIeDoeuSqq1MY0g\nY9d9iQGlqFFnv4SaiqK4IpcQVqBtgDH8Y77olsAbJQdJaEgoA2HRqzrSeUiQ\nEuNo6jFB+xkniLvxCYxfEPROTIjt4dTF4u5Uhn1nnDvK/JrlXTvGuR6hX+xj\nC/uldjarjHjt89WwRxjzxBeIzROlHPKVOmBk3NdMJxmmUpNejPnQEYlgoDJ8\n/R8QWB7dCIi3pMVPnQuwfp03HNwYTG9kt/qmZ2b0KxaxiU8zMkRgJMNdcBgt\nXEbzAYi7doHQRl2tht0SBsOsJH3rxGvr0xAAsuLanQZwjPONl75FUX19IxNq\nBa2M0lCXSlaEeCHz8nOwE/sdJOFdVQt/oanApULk8LRVRMjncvYTl37cLWhO\nm2COZwJhoHznwuSzfPUve8XLzlqFO2AKcGztwb0D+VxkJb0Ph51n8AoGOTBk\nmpex7ucpyO5rYYhCpz0QKWmUdEU0XSRHCxnUyE+fgi/oolqCKL+hV47yok6h\n7MZ7ncwH5gmgYtGu0IwRwyjno6yuhILHEDvSlsXqmIqsUzUK1S0jBVji4R3G\nImny7y2mBGAxdSLi9/y/If/hWUzIBP567FttlFEhPQafuW2fDlUy5h3H4D1B\nrLAc\r\n=EA6W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.9736ddce9.0_1643449757300_0.6586900938257407","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/typography","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5dd26c53215e76bbe6099ee7df804dfd37a0ba35","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":22,"integrity":"sha512-F/9nYjU7shFIljA0iTTdISrU/oBu06BbzkVEsNDycob35E9l051h0iRUfvoYGxzY6JC/+dgGPHePFUkhgswyrA==","signatures":[{"sig":"MEUCIQC6NH6N64OVD5ljVkSRX0HJ54oCmHEvIN/EArpuTEux1wIgcqGR9EcNPo38DgYlfU5MizNG1iFqabPNZypLjIXkPls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W7NCRA9TVsSAnZWagAADZQP/3iDx/XwFmBAyjY2RYgh\nO83eEz72drpn3OdR2Jx0w9agk7wLxMKGH5NWbe88PlUTBVnfqwVHy5iNx7y4\ndYbxxpqzNezBwKNfVnsPsbb8lyMii+CRkrt2WSArFfGxngp8hgFrZSVLXLEF\nVO0SIhkrhXGIvGqheZb0CYD44Xa9GTypSWKmI+y4Q+kIstAnjE+dmr2UxhFI\nZe+CGPUt80kBcydhX+Ut0cw15zeyhybuDRiHArXoI77pZA2Cdwj//C8QnqOl\nIgQE4rFhypCSURVEV3ci1bNL9Vjg8Ad6moJLxNVKZUG6V1I7Bdsot2Kq8ngc\nkiSYTCG2WHsmpT0YPNIX7FVM449o0dWtMQcTg04KKCbJdasOYA/Lz1rvcgyj\nlNayTC2Q42DknKdovwKwZiVFXfNw4loMJR8ksI9C4qHe2KpDKNJ0cVohBxMe\nJB+gIzA+VuhGoS7pf0bBmJ1PrZjTjRfzbXkzg60d0OnQa83mm+FY7zwIW8uG\njELAbAcnFTnPi16FbOAhnvn2xvUBm7DSDxnWnM94KjbTfxhz7f2YYHsB47Fi\niqURfSiE5KSKDWU4M9skywQ2kjabdbu+vNppz/FfPsr6W8X/kg04+a+isgma\nwL+kigkgzgPVWetFR9lo0WUjWpT5X01QwzMVWwzSBKAKeszNDfqwFgXmC9yU\nD4bz\r\n=EIYA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.cc4ed13cc.0_1643998925547_0.187755270336736","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/typography","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b3ef226672f20a100a284a35f256dba2856137","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.dcba26fe1.0.tgz","fileCount":22,"integrity":"sha512-MWJTGhdEgLmeLbdFa1iIKCXXrZRghAB4Or1ZtxI6NP4aBFvxY/s6p1U40Xd+zR/FwtZjqLKRG1KEpY/QLNi2TQ==","signatures":[{"sig":"MEQCIFt7vyb80Z9w779OdEufbENtrho6D23/XRjHFcO6/yenAiA1wN+QKMH157D0fqPCRhcfqIlVzJv/aNRgzyGXAE82xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aESCRA9TVsSAnZWagAAskEQAKCYEPsVKLwza+0GgzG5\nr6szUOc7zlMKh2vDWtYDN9i10M7l0ehX1lfGfgCp7N4OFxoLVa3KXqsDblBc\nQ7V7LpdC0AQ0oSb9fZVKFoB+bjFZm5JT7MJ6wDAvuwa3wWgAK41d7hfqaqLh\nqIUnF0E0LF5RpQfiKUO+FoDAPV/VkAe7ktNV775widWii9EG6pnPt1skV8si\noDuVOISP22pi9Gk/WAjgNYbFlLcno6Xeh5d4wdZBq+gdmgj9UDVRiCveos1K\n9IBeEkeYCv9ncE6xe5yG72xL4zfoZVyufbNSucRn2cECQ2s99QtiZNF2nKzk\nxkhA7UGpXXNvIuJw/FqMfJVIDuUSX+VpMlCKNCf+6iE2Z3Vi/i1o5tJkRl25\n1DMq1oWk3pfST+cQ8Ijovajs8agDygBOdCzXR+GEGekD9Utx8FHeyXyu4SIM\nZkY8oN52AQAAdnI8mRMoOee3vDDbK2A8DM4lvaH1283kB7Tcu+Zh2pTlF8+Z\nURMbFbRdYmXoTJigyzOYv2k3j+BHlxyHQVDfCNVUJ8Swwxf78JTeSQxE+OPT\nNCB4mG9Ht+Q4LYim6S3mBf8M2+Gh/nJz6RHWfK1S5F7PWy5uWmQeag4yXYnI\nSyMfGkqk5UztKGGtrXVSUKMqXbDBP8ctpqrr3NYt4CL3CFhWmQdVOtH4QOZZ\nXJmY\r\n=vlQh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.dcba26fe1.0_1644011793881_0.21918540817591592","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/typography","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a44e31762dd58a4893a103d3eebb2b6def34a87","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.ec54d9046.0.tgz","fileCount":22,"integrity":"sha512-v805zh2N6EOsWfF2U4ql6u5ak8lrx95cE8tohVZNJ4/MlW3liezHSyVnvAb3hq9QwdKuX4aGrJnqgOBZEbNcaw==","signatures":[{"sig":"MEUCIBOKvyikcIFsK7dfqmcTybp0S+S78v2lxXbgt2zQvwFzAiEAriWW00ewLRuqebRNkfAWzKfiEpswG++3eg4PcJC9gLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT63CRA9TVsSAnZWagAA+hUQAKEADM296DK2YITStK1j\nFnbk4cKD/T3ud8Omln5IUeKiD3wVQ4ZnFEBHO9fZFem5JuOz4nAydXagyQ2o\nvYBUq/ktup/sWIhgft/w/zXMkPuf4eEYQz8LOhDRwb4AhdvO0kkO9REtveIP\n/U70agY8/q5AE/41ZneLa40oY+btTkOv5JzPO8yESVxuHlzEaTGobarP05rF\njHFppnPytWiDdJEgUYPNG28Jza9QtICUTqbDe8Gz5k8CiE1iBYSypsthMMQE\nPjwfhBfDrnzFAlnSLWwm+y9lt1f2q4F8FFSTdH9mZNw57UhtNxuwWHoz9U0U\nYOHsCA7ak33kWU/L9odOIjaTDCKFmpujSmX/YewfuMq59vq+mp49FAVpb+GN\nTyLNcnPqDuoaOGntoxIG2oxilJU0IiNPNlKp2GAKnQq5u8lPY6DS/f+sXk7l\nUcfEVrmosEJGD+aFJ8DJkSSOdqfTCP8VKpghXUCB1oTVTrsH/3BO4aXBeJQx\noVIuE24EAnVYKz0VBxXbwewUSTlvl5ivQX+91ipnVB9/jHTt6TFQiMt4wg2L\nm30yDwBqfwX2tWwNZYOFPetJmVyWL4CLGHr+7FEvSvc7RndVQn9T24vI5sMu\n+gU2SgNL+L1OXV4muPTXFWsafAO/jXZxFMBASNmJ3YM4bytmYUPlCw8oqSm0\nfOD9\r\n=zY+O\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.ec54d9046.0_1644248759229_0.42982061583764164","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/typography","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39e7365660b33300750c10bf522ef3dff06784ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.ea9b5b463.0.tgz","fileCount":22,"integrity":"sha512-zCriVW2FIubXujZQlghW7oYdP+qZYnjbv6H7ljaSZUpzsCBShjDfnFJgjAe80rLQ4YzMAvfz0DNgWH3rdUXxJw==","signatures":[{"sig":"MEUCIQDWEUqefV7Ib2QTkrl08zEtRv0lKwvOPg9QG2j4D/CDmQIgZT9LUlrG4MYWwS2Ekyq3Io67IBlgGZhjFxfRP8/phZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/99CRA9TVsSAnZWagAA3AMP/2Z2gUnkbngPDQqktUjz\n/g3XfSpg75+tAx1rYMQyvQQ/uP8X/8QJLyYgZg1nga5EtVSYr+gur/3da0zR\nmkNMpOK/LScJjE7tjX48vG7mK91vwb+AL7r4x1zDmYGsrbo2/re3lniweHQw\nGV9Av49QCa5ERvKojvTuInelspzHJstH8X7nUD7y+31SPC0WyB+wyO3RWWiG\nQfLrAmU+tPYBYxpWsPLMI/Td+kikg6MAktX0YlUKjPGh72iwL6rgVOhXbaen\nVtYrzXt8W1ceJTMkgIw5kV9ULWyCp0SoWM5qYjWZoytqcVoNg4sqa6B1VWkT\nX8JSeolI83BDUc5Y+CsFPIjbznjPyiHZgoJ/WA7AlvgP7EBBmr6AcS0c6Fsr\nBYzHpYdoRi2TIMjy6v4rvK/RlfWZg1xlOrn8G0M6TAEEsoQXs04mTEc3bpdT\nB2fhLVMRV3tUYMrACLdyoki1e0l5Vhfl9iWm2akKlKql6c709duZpnPU3gDS\nEEy0rB/tqgywaDWIIZeMl56DMe8FKqeSIFYzMrMAenDj1xPyFY3aExYrHRS8\nz6EiwueKfEc3FV6NRJS6939Z/uaErcbseQ5cxmsTEBxevtCeIRGdl1L5UKkg\nkT4948VbKvotjYEpXRTpB0Wr/zTVKtXMC42M6zri/RW6ILwhwxXD7XThsiyd\nhIsg\r\n=089h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.ea9b5b463.0_1644429180869_0.9358249804906313","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/typography","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8586ba25fe76fa176018b75c03b974789d36a75f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.96ea061c1.0.tgz","fileCount":22,"integrity":"sha512-c6CKt5ggRI3UFyT79d2UjQkGOrHckXFljQZKP/0KFw7ApbuXSr6sDlTecUrRNZ5a1ITaNK0DdQxs7TVFnFmAGA==","signatures":[{"sig":"MEUCIQCaFTCWoqG/ODusO/OGEHOCMZEOTTj3r6dpHPIb3sANCgIgfTyEJo79IEiGu3jhh1Sn2Xmmh8ijG5mNKdW166reVkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA7eCRA9TVsSAnZWagAA/KEP/i0UKkKryVGV3OGKZSsl\nXjytuZjZJlOz0Hdf518bHwW1pDYfPKZZ4jp5vv/1x+cdJBFLwjTDklipTf/b\nLk5B+iUvU4D4lL6wCE/Pa29X1URvbLvDp2FV2SnIh2p+VE8kzp1AFzAAHqLd\nHvF6NvDB5+21rSpKDR22NmqPy2JXDueOkW6GRvwk8e6TJlKo7qNEJP/hYUuD\nw27RIrp/BVxUAW7PPsMupFblr3jsiKb1ZsDVFN4vn9eLntTjXYoFVjeFlfv5\n7xnxVw9hRhpBRibJmN8pjUf98LBhyPwBEfJgfPYhLXXQX6mH0F/joDO0bOuK\nqMaz5bHjH40rnXGzH9Ha4Pktc4Bw+/GZ0gq621PNq4OilJGb8F0AmEtI7JDr\npC4LeHPPxbJOEYErHeOaNMfa+oXgz/uLUJAfLqounJM9A9TK/lX/P2f65brF\nA8rGnYvntZzKQkwtq+LtMfyVUb/oU0WM6oxt3bqmuKSQkfzrdZf0aejfKrXf\nYoC5mCWYNRZsNAwpB4NhYYo6EE8IKkn1orso+5vGEQcjNs8ERsSBhw+eayp2\nfUZoNKqoliUYSw1e7BqBTCQ37Armq8IDmVru13F4zSaV1wHdqFzVqowCGKYj\nuhMuBKn/tkQNZceyNLfQEsCaqUXTBdLGovIxZomRCQ3Mdv/sFvgt9wdoRmXl\ndcLw\r\n=Vthj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.96ea061c1.0_1644433118207_0.14611026448278985","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/typography","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.e00181e59.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"072a5d897eab5bdadcdfd48c10d2c5659ff59593","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.e00181e59.0.tgz","fileCount":22,"integrity":"sha512-ewBFhjAhbSaU97UlXvSaLkVHVUyGFaQGBrDl1LhdkOQhL43lm8oUadOagRyV4MIGKCACO0E31iCXEV1OkOTP9g==","signatures":[{"sig":"MEUCIQDLlh4FILGoYD7rjhjnxQLsgzt14sjcwr8DiB5UmJfaDQIgO3c81ooaseCKs4RCq+yBNyr4ppAkdRAlf+nBFuCgZXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXAlCRA9TVsSAnZWagAAGPYP/3UYSo0Pk0bRD8MzLl7j\n0DLnsoLXCm0tOuapL3ah2vZxkxsbS4anFgyqDfREp+qSq6jmqrxVbBIdlkIh\nRty562qPLxM3fDj7GfMfcvzPyZxLk2M/wBpp4tdPNEkJaJsz1Bdx8ssBeDzt\nPE0h8mUWZB1zLkybqi5GGskkAdQT1XHeDEpKw0NtnNx219Nmg4CDXQR5ACpn\n4iflx75NWcDiCX2Fy2DZRsVVnA/fyGcmEbqTpSasxXwKkI79rtr+UZVMI0Dp\n+45NYUoRdZfrV+rSQdm0brkbkiSFdZ5f0HcheIXI0/C+vB9vs+9uMzFIYwH9\nsEkRr6gdyk+aiY1TvutdDsNgbpwjS5NhaCiQumENaM1Z17ZWnaVKwUQHeYGl\nABw4R3pMPge/OBgeUQGzOK8y3p0yyjK0B50/EHk0HXkU11SQDzIXnLoOAbS4\nsp9HiQzVkSO4oXCiKt/7oJyKfr/6V3JtWl/N7lGY5iHqVCh/IYzJm6IUirZL\nQS0AOmQHGV361+oQ2XTIwXDyBUal/6attgZWFOKES8BLdWKnWi199Syyw/yu\nZiF+K85+muj96SO+4GOENngumSi6N/HEObUHWC6R9rczflRlNSN2fDcVlDGA\n/EaL+yqG213G7tzI0+MiOkuSLJ6biS0AkUxs9z5qQLfa0rGI0t0E7zpVCBE2\nGGB3\r\n=nI9j\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.e00181e59.0_1644523557809_0.20759374094834393","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/typography","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.037285f9b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19088fa4f78851d5a6ac9de6c09ef6adc339a6ef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.037285f9b.0.tgz","fileCount":22,"integrity":"sha512-mOTQM/Ll+B64u6BBMhPvzMS734HCLuxMI4F9AJI4KkQMklEy/I2bwPXsx4Ug5B3HxsPRcXPnbqsTjbiTjd5K2Q==","signatures":[{"sig":"MEQCIAhvw5Sxc0ZJHqn7+7dDBgO71b8kNMmgRlLGBR9lNhGbAiBEby3ETGi5PqLBZXpbsss53k8Q4oxIHOr6MTk73m70eA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqrhCRA9TVsSAnZWagAARLoP/1wdIVRnM+y6hSOf/sqU\nErj2gGkhq2ahHR1QoM0d+U0YaAoJOtFwSN1Q28XSuweCDgjxVVj/3uQodiPA\nMsW+xzNOy7Wc7EAFIdtJE8sla1Ngvc/byYmgV3VxKeXx4AjxKwp75PvQkSTF\nklAZZUPwYUPm/iu8Lnw4PzjKVwiC8gfVvYXir0A8w3H68BQZoR6eqI0GPklr\nt+iYGrZtRbu5ZyIMrEJjdRaw+gtfoKBuQTefFo3OztIFvb45hIV3IKDdqFcC\nx0Y+NbI9wD/oQ/VDR5sgd21yqR2T7NKLz8X402CIvsoyVVAOs/PZYpjOk9lL\nbSEfgtEjJ+CkSf+eItxKVtdN9Z8npasXitdcQTHiM1tW/70GsBCXF4xVskUk\nLC2kjcOzPiPKcdsz07c/lMb8gTyamL9LQ4x+6Rjh6rD5te11NIO9+Lpyrwh6\nFqztkaFKdJbvMlD/KA+dOvj6NpHTSeaH3aORo7UmwTsEH9+hDVQMVVZ0K5qf\nSZldSPDSW9+tNh7d4Fd5wumnZnh9iJTBlt3fLcF4teqN5M/fw00ao1fLTR1W\nD9vfb0d4SaY7vbbGDxtJRKJOAO2sSdoSCf6RcNkTCc7HM5XH5wXzgx4A8VTj\nOXsmGOQoh+1KrPdCPxTwlnWEVavSgEWiJIt20t2IkiHwUN4LKxVbQtkx9KCU\nsxO0\r\n=5Za/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.037285f9b.0_1644604129796_0.8623541221495188","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/typography","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b548863f67849517845f62dc46561dbd5be9a7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.1aaa68dda.0.tgz","fileCount":22,"integrity":"sha512-mfHMk3O7KPMmnlqY+omCfhaaL8z0iPUeOTJl96LCeIr2EJRFaLyyibMOQiz24VexTyPfXLeSflaGhLwKJEOl5A==","signatures":[{"sig":"MEUCICvbNfzmb0UAWqKdHXIKX5VEfXVE9QzbnVEw6MT6IA8SAiEAzrK63uI1z6S3H7smE8ucgq9czoNZGmi2qSQCugJXkys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVUHCRA9TVsSAnZWagAA/SwP/0BGABRlw9slYMh0dTZP\n920Npi9XMTqzLhuIw/rjyn1u/G9TCXPqW+j5CPIpEDDjYEBVmf+WZqor15rt\n1ErdzFh0WPkkjuuuFB0hWopKLtVHSnQj3+P4CfOjyqsy1Oy7IxO4YXRLTV7o\nHDE9eH67c/WJmYCNLsVnrPOJAnwe4LFPNE8w9eL6P3wy2xrNLeVQ/MHS9gZW\nBEDQ/qPfOvyXrj3v8AFLLYD0FkTDLnCNSsDuJVRr8dWNWlyJbjG1af+Gsr+C\n355r6RZBz6I9X5Hh79WO3RRYW2twTLLqiA/8/eWpmg6gM6tPhmPD7/JTimG5\njhEV4Nnvono6FQ3TDanwqlu+7eywW4O1U5358u0qBkPW35ZozMLwt1nuSmtD\nJEINNwv+qDo643PJqVjp3qGJC7j4T97f9Qf4EVvASw8oVHcEwN3uJFCE79Iq\nZ2MKStwalq/VhIskSnof5RQWWZ4LNPJq94PuSFb0QOPUMkxLioZvkHVbebG9\n0eztCnKRBsEQs5pl1ktQDvsm6RkYU+QTTrxRgkq19U3jSDZDakAFPH139Kig\n3/EhJiz6JIakjVzJHHVBmxxxHsq/iSLChJHVSeVK6i0knhOfc3qwVHHnP/a0\nE3F0mF77zBSh568x8yT3D1Zg4xkVCqumdwEERWQ34+IUIkNlTtLw83rLn67o\nNNPx\r\n=E9Rf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.1aaa68dda.0_1645040903490_0.26698204324681973","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/typography","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de7052dbf5409e3987f67412e02c3a8f7297cdf2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.ab4aba1af.0.tgz","fileCount":22,"integrity":"sha512-4kY5UkkLgk7ItftCtFx3D2KhmSDETQYI/x7ApbMhYn6gtaPrlz0DtvnAeUB21FXyrKevybf7F70pOXIbgac0qA==","signatures":[{"sig":"MEUCIC9a2vlk1/HujkerAAYvnZQ+tukFaAfJUsTygmFq09ICAiEA6OqMfPkM/sNtzZvGgTElgIjHwj5zOXU0vYRKKxoLMoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpDWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqyfw//fjLp9r2sWzOOCsWMaJSTFgTzveccET/+XFIXa1Yic+9APXzi\r\n/Z609qDYnA4VTsAhbzqKeHKHxK3KXxzHa7qLHYnhJJDD8M1NmG+bp3w98H4m\r\n4J07LT5JQEwqU7UHqAsW8HAeehBBmgZxguqshybE3lZ7cKUmaiowwvn7EkJ9\r\n+kS8/5uSICHjZ5JiFE0ASIuW8eUFi5UhOnJ2GOkytMRjGJZ8UirBcTWSNMOE\r\naMpVA2yZavN+Nx+lWlrTyCjJL3w9UPJPu52oem/W1qBLLZgMMQZ9OjEr6ySh\r\nbaGrGTmi8x2Y+J5pSneQa8iMLAYjifRnSMjsY3sVRvM56eN01BaPIIMHgqZm\r\n5bOMcJrH/267FrGoik+tinjZe4z/OBk/13XYG4G52I5ole37DHghbUJxnlHU\r\nagOx9VoQGaT+/pu7ehJStcwt9mnIzsYK3zUXpXLMkFJjownKX/+IcEvqwNZt\r\nzoWshmkNOdFmG24BXfJKNGL48lby8Ktwt0X3PMyrQ6npq753HTx59hQTtcFk\r\n9KBUtc5OKMHGtBYq/tIFeMv3uEo6zzS3vVXvsKdCilfAoTBeekRTynQKRyGp\r\ndeWPlFY8JJ3RU+PrvFrt7DE2th6F0QiItWKZDGu2KYkaHDVhqODQLMA5gzrK\r\nGP2BFDNPpedX6EI2bKGBR+zEfg6ZyoAMCI8=\r\n=Apsx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.ab4aba1af.0_1645121750061_0.7629018865576518","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/typography","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd0fdfc078b7e02e8a070ca269c5e2157cc4f9e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.e58552c6e.0.tgz","fileCount":22,"integrity":"sha512-yZsqT/tQPgpXzmxTPPwF8SoWXtjpX1mOEqDjqQ0pNVnCT5Hx9UOokaB3Ncah3KWfXJJ7BN4i+65swmMC5R7w4A==","signatures":[{"sig":"MEUCIQCYhjd3djkNx8Oj3daWIUx4DhOiwloFf4k03sgEtdN/qwIgew0ScQdnGK2ROXWZlnF6etZM1p9NGkQIW77D//P6uJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD994ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKLxAAmuNxr4pZwZgvqdjBg8jcJHnZj2nSy14vXAoV2GAcJRC9zdeX\r\niqG/489Zfengh6i5Vha3xUmxPxFcuBd/AMUhj+WVJ9fSQ8/6aFhHYF/c5qTD\r\n+jG/CBqN6a9MKwp2QmUJKeNl3nqWRa7IIDtPnq0rfQqb5jyJYiuUOgId4nTx\r\nI2BbBMKXvY9SOO8RL1xyyyy9akh3Y2XCVVxL0iypbgA9JoVH6spsCFuzneGG\r\nX6eX2nHMg7TBBhIX2kJ1KwNJOdMmlAJUL1oHMADCWGe6Ox2AZ/SuoEvISFE1\r\nAhpsmll8WKtM7mZPs7Vmx2RwCiVzVZLQSrujPIP7iWkombx7mRI72UBY8zvL\r\npq4vkU2ojQ9EX0P+IoOQkJ/ORES1Pf2Ok/5+4mXoirajYnN2hqnAWeNmRD9N\r\nct4f9DbH7qWdDQgiNkGxknUkY80baPKS/NUtM9JFFUlUl68Hp8CDil9EZXZ6\r\n5tbCMHLoHsxG9d12l8tLNm8twXxgByffEFEOEOVPt+zhvaXQUpETqF2BDRbV\r\ngJzvmw5oUKqEuO5F+JsoJZpMThGM/AYtagyzwx5PkPKP4Ya7l8ZhegbEH9eB\r\nzFFbD4BuYwgS2MSCdgYtTPO52HlbFNN1cgkFsQFVidHVxyyeq2mUcTbn92eJ\r\nNSVbgOuAxyFhUkaF3YlIXFjuoI4bU79Uop8=\r\n=YJy6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.e58552c6e.0_1645207416146_0.28684579802070465","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/typography","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.868793776.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c473d3696c4d1ed6e435f6b8d65a66d1834e932f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.868793776.0.tgz","fileCount":22,"integrity":"sha512-NHrOwCFUGEiQ8RWCYTsLzHFfafZHBhulIkNbCHXsXCFYZIa4/O38LSPjUcbRfpXiZrso/OWNoZ8NlLlTPOGH/g==","signatures":[{"sig":"MEQCIHKf4tLtffqvWWvSFwQmubF6zNKC9XLiNZIeLusfm3qkAiBNrxhIrXDFD+C3ym1sH9Nztt3PP+1/FU3A3Onx0VIPpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTrWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu8w/5AdrcJg1Fpvjr87nct/U0LB4+BQnxWSyFBlmm7L56BmM7mr7M\r\n8hh3lnXgTF9i1ls/PlPOzNG/HKlEmV9FCbAeF04NdqN39gJ1IhUUSekMPwO5\r\nhwDutJe0NWhxS5xBsoz/2CslPlMHuM5dZk/4lgxxeE3bgsb4kSFOOhnICzMn\r\nM5qkenb3Se1lN0iT+4eBrCgd92d4+VG5g8AUyDFBOt1Jp77Pk2Hfe6JxZAiV\r\nTbccTp7ha2dlh8N284ybwwyZwzhspfqSx8jIK7lYFMOo+WQFcpZRvTEQxkhd\r\nVtHd+4MUbtGvO6XoXtbR5riThNjZkSXAz6yjwyNZmmrmfQ7PvcllxyllvqP3\r\n4R0JAL2Dejd6UiPrWTRjMUlt9M7GVvGE8zF1egia4zAfU9/2zr3c53fCrdHr\r\nrN3AGDPGqiKheqzPLBKOWu2J6XIhQfZouQ/kmF7p3PWJXTQmiEtHsXSC5sdZ\r\nURbvA/5S+2Osr2EKVPtZfEcOra/DhRSzTdt504+BGiKp/iqmaJenOCAqQghR\r\nqoZm1IEzdu1PRHD3qVz8MXKDywXAE0sIEx2499SGiueTwMWyLQ6rWrdYVFtj\r\n6lFqbV+adotBcErMlzgGdrXrFg0dXk51CQn5Ujaq9LHfGMrAb4Cqw9JXpW+e\r\nK1h/p5RLLAmUHPhDvsNu5ut0+M8WgjPgNCw=\r\n=L9xf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.868793776.0_1645558486288_0.9636545639930874","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/typography","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15feb0a8c43d05b6ac79fa9d7cc4b088421d34a2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.fdc37a445.0.tgz","fileCount":22,"integrity":"sha512-tJ9kt7f6nL6LAyWJNewILJ4sfGv1/IxKsuvlnzC5IQ4ryLzARDUfssoHAHHGLhOSqaiVVLbrLrV+kFNTfJKc0Q==","signatures":[{"sig":"MEUCIQDhSmW1594nP+1I1hgUi5D2MdNqoTOmH7veHHrPoJ+y3QIgHWOORld46KzdfzZq7ycEIOc8UUulbjT9OXrREUdmAjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRhVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2mA/+IDmlsJwXXLGtvw96sdv2kkG3INafYQDemqZGIrPOL2fm1Gml\r\nTHtqxd8ebIN2EcNC5tw5DyyPNz1jLuwujzIYmEnGe4cyhEccI3G2suMReWk/\r\nC54yjRs3XMn8pR4hTqoyNAFC4xARgzVi/bXGucY72WSdmEs3LIMZEbvuZvFT\r\nvvB9rQvD2DSMHP5EMIKvEQRdIDaitFN9Bao+jHcNFnv0ZKxNscKff+1caZtS\r\nGjHq7E2hoz7ofNQhdpfihXGzzHMgKrAi/UTawMkkncKFNBvjGYAtKM7HsSeJ\r\n50Lwmtep8doYyby3OkgyPXye7XDcDGapAzZhtemXah/HPqBRH7AoyKmHinxJ\r\nNQTJN8NqKrNF7EM7i7GgZgFlTGFdgrTdY0iAF7ZRZVJ5WDMPpyPiNmGZS0YN\r\nTzzibUyqz/TAfqNWh0rqLRZDmdo3Ji5dJW2MV1m5DTN8wUjYmWUKNNtvkfg7\r\nX0HSCPlZT9wcILW6B/ir35egV8mNHQd28d//8DTkwpXPjx04TbybH/+GPEeU\r\nxocjFuBAPkNj4ZaVpQpRe6j9CoVEPChorqhZr82GCvIHLzaipgdY5px9j9L8\r\nD85x1oDpmCD5lyXnUMc3ldfRL79KrqqODS/6E1S9XEheTJdcl3fRMbOIPh1/\r\nc8UsT91MkBXdUoiV2yzYngAZpPXwdyBTM7s=\r\n=cHaU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.fdc37a445.0_1646073941559_0.752517526511814","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/typography","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c57969b310264c602b220f2220d555c869c173f0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.43c7d87dc.0.tgz","fileCount":22,"integrity":"sha512-kV2viaSZwBtPfGs56+JODk3pqY5yZPCRLH7uCMj9oozWfvAZnQiWyLKyF4RoYi/LdS3ZHj6GgAe6Wr61JZ1iZA==","signatures":[{"sig":"MEQCIHwy5lk0Kx9v+n3FAbBnck9YCTlnGSAIWES0MPeMfZOEAiAy3LPovy3wkV0/TZ3KiN+eEQ0ILrd3kjGGjKu8hEmv7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjyZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO6A/8CC1lETWZluqqykT7mUTcT6fSyIHlqW6UGcn39vWN9wkXYdMQ\r\nxENl1fSFoHlq+OyJz536tNTpKe2zdtps6iD8DDuRKCcYMAvgxURox4CtKhxb\r\nxJhVZC+mc0q03PcJuthPmeeiD16BNvhXhXq4m0NmS4poXAV6coi7Vm+HbjRd\r\nOEhjAkIeD0MfIY5G5DisIvD8eUROGTjtVtXFVtjm9a/qbv/yWPNvBAgAi3La\r\nydUHrsZZhXA+z0y2/DomPtHKx1um1CthbhXQdiXKikgK4FhyoOtHPJCqcnNp\r\n/QgVIzZM2Pm0w5VMcuFjV8zpwl4k0wSVPz+CnCgteDsQ2WO3cxDnfQv0iRRd\r\npQi0WEc0E8/HKSjMVahmXKW4kTa4JX12l3z4/ULRMWJgPUcob4bcF+veujAn\r\nYGLYBAEKU/6RUK/VDr/1htLGiz8DEncI3kc93cb5Rt8stjg6d2mAqxjsP5SU\r\nJR71CQMCjHVH4h6/u4s71omnppM9MbvEY3JlcmoqZNvMwngea7qBbB846rRo\r\nH8uXO/KBzOLTcUPSfGytF6TSRmHTCKljFr4NO0UqR2qLDXMcsr+HBTOq8Dzf\r\nmR1qKoG7Dga4a7YiHEyISPqEoE4Zmk5F9Wh7DTgl8oQ2CQU1+cZuAPZFmd4l\r\n4np6IXSiBp/WMr2jF7mvDRl6B+E77Doug34=\r\n=WTo6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.43c7d87dc.0_1646148761102_0.9485676562063237","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/typography","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.23043acd0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91656154a42e420245e3fcc7fc84586c1a0c1533","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.23043acd0.0.tgz","fileCount":22,"integrity":"sha512-jQVq2M7dOXla6q0q2ph3NdQMeBstnYE1Ck0c79xjPqS0jSHWQcj6yxxpvrLNuG7Nq4wfex++Ps51zaVpdb94pA==","signatures":[{"sig":"MEQCHwD80Z7YCyoXJzxEywORqF0nSUQfn+aX7qVjpNHTHKoCIQC4CQzqKTl0deUXKFILalUB8WSvDl0YkReRSid5lsY06w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9MUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokkw/9EmIppZSIZLZbFk83L1ugXRu8k3J/1wHBL9j0mBpjCCLhQcgy\r\n7zKL5IAD0XBM4hslKZ1Pfy5gYa1v1wSoFNmekEScAqM42LKQjVubbes7kgGw\r\nucTkBzUYZsfOlWNHXZRyPf6BKf2w5VpEvnYzWXm0/IQEU9uTJmq0x8SVIKzP\r\nGSFY7Tj5MNKZ7qyfaR/On/SusNc8LAWLjBi9DU+2VQQpOkFu4tmbnRB1f7Ua\r\njN6fEa22P4MVImBv94llZ81LIvKPTLqrRaHvR1BjVfelmpWVzbr0gHAB2Z6t\r\nFwPddEo6hI166uJX2ZhR+/EnWSjcbxh+jMM+DSstF1+D2/RtI7OVMQJfvxRx\r\nkNR290IxNAeVez3rDIDd1CUX7VFj86f0OqQFQQwDDzRRisxly75foto3UPdT\r\nYEPwE6LonUR8huHtlgk3NUKYZn3RHhSrVJMofxmXGYybxALKtyzorYZdXQ8/\r\nLMJgZ+81DUdKKETPrEdgMoo8A8uPW5QpJMKQAaOgju9utFyCM+Hyjaj9HSpK\r\n5Rdqe1HG6XMWziw/0UPCAuuIJ2e3YOB8KK1Xb3x7sWNaG9/S13eD8M1GR57F\r\n2Mo+TApulrmth5og7bIWWeggrBI9gE3MH42vBlAKeP/8JwUbMV9Gru/7QH1P\r\n8OqqKo4P2eJu52yWKB7GrYcU87LrIfunbYY=\r\n=9dlS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.23043acd0.0_1646252819800_0.08108630076573742","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/typography","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76e232778163dc27482879c4c510399fde93157d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.6505e61c5.0.tgz","fileCount":22,"integrity":"sha512-u34rS+7PcZjqOk4R8WCUOqWVDvtz7OILJF9FKL2rCd6hT97RpwmPzY0LG/TSJ+HfT8gt/KkMFi85L32AcoZiUg==","signatures":[{"sig":"MEQCIDR3CUS8UvsmeCSHXyqe+qW/7aAAizpoJnCmF/pPRYQ+AiBuk/eU5of24jGJgEB+uOA8Q8RkKJCP8+qJPMA9uNyJIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR45ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG8xAAi2A1Io707v7ocm0RtsS8Pnh37kgaTFHgWqBxWcuyAPvCA3uq\r\neXE3yqMi2sIwx8rNiwse/oFtnstpQTp50kplyyvWKOrQSlO0tUJ1gr476pkP\r\nvWiU9VEHRMjB+Bt5nE9I5/gHLexYbdhCW+WSSLWqyKrK60cU48cY0hbgZaH0\r\n9X1w+011T21noxeLMSIgruROl0Z/r28KQt3pZAQdpgpxjqX6yiSkaCirQ4lS\r\nW+R5cHRlScChek52aOeW/lunzj83W5AID0hsQxzrJ8N+WlRbvMZNbfKOFAe1\r\nOh6A13EaovqtiTKEcwYNZsFBzwWfL/JkArglD2TYP+cpPhzoZxfhVAX5LlwR\r\nrPJa+7QXErUATW9ejTTLSgHGAF4MZARjiyFvmyE47TEeU7hlGwl4edsCXiVJ\r\nXfeszZv0Gz6g/wdWK6VaDOPxR8uM6Qm00qRj8PhKLbuuLGWgfsvn4gkUNXCG\r\n8MthrAVufKKNIxFnVy3t4yauI85EzTrQW1Bszsz78Jfo+lcdacmmhmlKzRL0\r\ntOeCIGfjdSQerpVeAdmnfLbxrIzeOWaUHe3ryV4Nx2zChH7DOsoOkRx5MUqE\r\nQOl0AXWzpzs1wgsYy3pB3XOroYRyV87ERowVyHU9TxuTb3X/osxp28lV+1JV\r\n8f9bZOQkOjOZzZ6mAKvVReQJ4ryUO9k2lsk=\r\n=WZs0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.6505e61c5.0_1646337592869_0.2854606981376553","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/typography","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.16c166154.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe3fc0fe73f076f62c0569b572683329dff9a46e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.16c166154.0.tgz","fileCount":22,"integrity":"sha512-FlcF5TZDC9LeoK9yKOQQu1QISdePfRAu/LVdrxq7iiuT8AbVGdZW//s/yBzdzxmEoekVawhpqaiQrzs21duBIw==","signatures":[{"sig":"MEUCICIAFwm28KMsbBXmeijrj33bTq80AbVYH9NgVM8ON0s+AiEAyeTPHcTaz+mIo3HkpeIyov48QYL44OLQbrN1RajHA7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+UQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxUg//a07jGNXg4s+/t+pNMKtaYgUlTEsoEvCo8j+UuDMLZ95en5Rc\r\n3EPNYEZIOYWQPzG9pANzX8NwyDUamiMN9HCVHn+ADO3PPyiQ3fiRsOMQt05F\r\nOnvY6lY8gxZZFaFwkSurMO/MQ2EhaOSar532rgMywsN3d67NODtbLyQCiyPp\r\ndxqPg8V6rQ2QxTYD0lGCWmzTrpx7aRmxOwd6SXHEqOrlgOrQzPNy+7WXSJ4h\r\nlW884MqJauwnreK4TMazQhOt6cvsz5r/RH38Fi4JZe+uwOFOUUDMB1l+lzcF\r\nzABn38WWDYN//pYhuMcW0rEhunJB44yFs5qIXFa8InBAuZ37teR3n+FUfq3G\r\n9qk+V/qfU8th97B1eoU8gIZOYa0jOF/78wb8ZMQ4cvUxmPMMOC/TECyYwd2/\r\ntNxXOSHw2pJL8+Js8ekXS7YvQE4pL52ePbs+59rvtOwAUXmMra+VTF++5UAk\r\nFW5kTObUtdlg36lybOvZkYQ7wWREkjpW9q3a2iCapCkQYNxsHG8kUeDudbg9\r\nHaRE6ea7JtwAYjxxW200h8SvZ5AAvNOZmO41M82uXSN8zsfyTmJFcp5+0CLD\r\nytdMKhR/0tmkJC9wMOrl4/5AVOykt6jaNTpHDS4TbW8btAXXb9EnHfYByaPI\r\n7ZJktz3cIGczWBddnpIzvaeC2hN62P9mGyc=\r\n=kG1s\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.16c166154.0_1646781712482_0.07778948838773259","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/typography","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0415cfd8e03d098d11236b4f5e4bbf0b91b724eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.bdf1d3771.0.tgz","fileCount":22,"integrity":"sha512-Ja1cDMTut9icX9Ou2hmnWzQHl1/U5/rSOJRN3sm+9R3CxdkRFfbI2Z2eTjmx67tjgLF6VzscO4iRFH2C+aWVJg==","signatures":[{"sig":"MEQCIDiijm9IAj6eG8uLSt9D8JiyxazN0CY8xyXeprwGhCbdAiAl+JseDqlZZnJmpU6lHWrCUnSJX15dXFNLLbBF/r2Qfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1DsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLjg//Ry8f9RsqYg6u45t71N36ZuAjkecsCea3OE3WY6rmD2JuwJVU\r\nS+0zDsev6tKm349XbDFKgQ0pm47AGOaPqH+R+ncYRv5LSjjIiXHvMR9gSFS6\r\nUmHYlF5J33m68TL18L862d5fxXM+SUWscHgZJwcjGJIzZDDwaLRPO3h64kR+\r\nIIJ3qZc5xGBQgVYP5521GagRdS6hV91PDzL+22FP57G3zDqYmJFf4TtzPLDG\r\noXoPJQQ0n8wDI+Ie/pa7qp6uSp9FijpKqo9bfVq7pp5YROiP4tR7RJDCW2PD\r\nJDas9zJNh9kREhwxCOeED002v0r0y+ai/aMSe2TB10xAyEaND3WgqkZZ9sq/\r\ndwDJr1ePujgx3T17Vi7aYDfJ460xUeygAQUSjkscL7kb653XAaFhMZSqhGbp\r\nJqLS4jN/KvRo4SD7ELqTI+R3nqedKwGI2NNp01rY/aX4kjElBu+ff1N6B/jN\r\nRt1y5j7dramg5JJPRDiAIAw9Pc0V/vmooD2mb1uGJ54PhzA5Xiiz9A/zHouo\r\n0mrpRx8H1JPjpgF53zVsJ+vpMWFlzsI/EhGNrVhQdAKcTXzm+/Ng1WEGB7UY\r\nrra6oFgLfd0QPpM73CmhVlg9pBKvsOvPnM45Neg5SyMlfAnfW4jAb9gIbRkw\r\n+bds1S8yGCDhCf54zq9l3ZsxD0Qkbdxtz6Q=\r\n=yR+k\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.bdf1d3771.0_1647268075822_0.6873844836884255","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/typography","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.cf4292778.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f11535ef2a091b7d06a58203f3e63d9c81e031b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.cf4292778.0.tgz","fileCount":22,"integrity":"sha512-EfsnaNpn75NC+Sn2oYRlZ33adRc5ztSy9vHKOlYI27WGSVC0fQNuDCjtsdjcT8BXwvTe4Oi9wYG8nDpUQzDHyg==","signatures":[{"sig":"MEQCIGE4Kb9YwYxfm5A4hYIiTi/v57uAf9Rw7QYTIK3ylpVmAiBVtL0cpRb/sfSieSUOTHQ7gWKsag75xB8Hak4EG/P0mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouRA//dfV+b1HhhXUTXrZq/BEXKV9/aBaejp71NVm817BCLNEhxT57\r\nUItroVFu0ji4iAcbLozQnGCDWZzZRxD9CVwEExJdoVFuFzLD7v4LcVU+R3NL\r\n7sqQxW5p+n/6kzWQRdFcM49FWFm8bJhp3vMZRDQx+o0OPmsvTinRjhIJnoLo\r\nigoDTQgVim49BxKBxlt8GefekUQgkOvaTvc4rAn50IWtSfyTmwOgdE/jZpXo\r\nP9tuxsUd6bicLeQSTJj7I4kzcsSI3HkYtHhLbnFjAz3kQ48lFHzCidAnAVlD\r\nAH1x6MRFsg/8iMLzbtTB+5TTbDPV/NscttXrCVl8de1ntXvm6iT/5+6Oh4Wc\r\nWkfo3TFJw9J8M3N03H7VJnWd5sp+apiZ6QslbdHTKM4NFCVFhwFbqbpRkEJD\r\nXR3LfsZdSsnRisJuj2Zj11RX8iw1UNpLOH3h5Lo9dOmxrUFMzJZYvH5pyC2L\r\ngEY/z5nAJO9cMg4eFP7siPznidjvKvDol5cDEEpzz8kb9epBZsRx8BgwJGVN\r\nanQc9SdS+4ULEWJgrT8ZptiWSS5AI3VPMwAkF0VAAkUGcBBa3Qo7Eii/c6/p\r\ncCN7Ri9HvyMDq190owBcUmalFupLjNGtTZ6WOy/gkxY2yDOZwemIxpAcLedf\r\n7cmWRUTySCNIiUx4jWeMx6tynB7gqSKoKbU=\r\n=6+R6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.cf4292778.0_1647304148074_0.7239742044958606","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/typography","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe3d9a46806553ed4d6c3c81de32ea159299d13","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":22,"integrity":"sha512-O7FxmiA0oKdyKO8ckf9qPq6H2tUs4rQbG8joFlmS0fQNDukDRAGLRBxyF/7z2M/z/skSwOFwWM//tVPXN28RfA==","signatures":[{"sig":"MEYCIQCmxhMMcQiPEZM6RoRdLG5jWQ3Yz1Rfnm1ElJWShRWE2wIhAJ4RsMWiJ3ahJWhi5k92dHFz7XPwx7M3Pivvk5ZIQ9C/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk1hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp44Q//VjwWyDPOf63a63prKw0/LlHpJmnsEkm7qyQYLz+i4406Zid9\r\nUzMtCDXkK/5sH9J5uW+oHW9A7AUMw4IViKUaLVAuroCwiWARLeEaM+XuDNmm\r\n/YzwTJddizRxOSSxHlbCnN8Ilg7ezBr5JnNo8sqLoBxDhZIZc+byXq7nECAk\r\nHgxgo0GVrOEJXfMb871YTcVXb3+S/U4+LF3kCM4t4g6UKyLeBSnXRzFehzJf\r\nsv8znzDLaNfaFjU4EYIyziwXuL27Xir5aqqnymrXHbK3/zzm4YZPPZ6TafNh\r\npNKAUYzoMcdRjGmvOIISgSpElBM/FoLNzRsVCAjXr33g5q42Xx0sa1TGDs4r\r\npCs5KRGgLxcrjLFDgoPZocuaQb/ntiTZ5BnIEHwXg/AAv0XQ3Zjx9mzuQDHK\r\njOqaIuBXG32qu+6lCilQaKPUU7qbygavUTeRZ8was4FRr1xVntXExNpkZgj2\r\ntawBhKQ30HFCgwmqSCP9SKezDfj8VVk/y+TENlq4InGeOTxPmU4uI6aT3XG6\r\nNsSrggrathxc/tz1fYouMim+EK+MDgrnBS1iB+DpX79cssN5Lh7/z/lgzWKq\r\nF4zKGI29iV3RCOADk/1MYDNm+QuYlMQ0+lU4BrUiI5pRMvI4swykD+4Os8HX\r\njxAse/ZJM8YzAGJDr7YynCcgMIG6+ZpgD3I=\r\n=uQx7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.bbd43e0e0.0_1647463777130_0.28399289347549317","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/typography","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18d5f1ff4cdaf3b51858d4bc9164fbbf355253b4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.1b6afad86.0.tgz","fileCount":22,"integrity":"sha512-yRoqvIkbEg2hG0pfEGQkvMo3UAaDFK2Lm7gXwqy0NwsaRwhF+u4pNhmlFuwNHJN1IHDs95SlmGgHUr7fkeeqgg==","signatures":[{"sig":"MEYCIQCwVmo9J/lCmYDJ3+XMn/K4v6ALSu1O5wbus86lXns5ugIhALcc8YvYw/kU2oAk/0kBBuBUbDJHv4rWCsPHmWfnJoSt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokJg//bb3S3Ve0rlZqXBbjKJ0t0ZNs5EOd4eTX/TSQ00uvBqiZGQI5\r\nsipbysSWOgxrPr+VK5tydwSrQtuyP1R+rMr4PPtPzmgoVyMWPzPYIr6oQMfO\r\nKChfHzwFL/PVwt0xyGe7Y+Tx1o/TyiAjx7z3qByl6UIXXfZe1hk7xaIPbdLB\r\nQDl1Ahb5OXAJgK8x30BF3D0VBnIxTA6mVI/4OwGW/BXXEKSe6Th0jyCNLSAf\r\nAUg00X63O4L9LcZondJN9Sw22ENY5O1rmc+hjvFEvYEacnw8aY3uIc8cQNve\r\nMd6t6YEUUZunHiXLp6N/+ez2zfIAMQqk53umCqz+9Sm76fKpABAHP6DutlJn\r\ntiYXIbkyzlgf03k9+AwYbl725l3cpELFkRZPHjdXUvFhOosbpCW6+E82JW4c\r\n0UkQN47DXNqQE+TQIcm7XtpFRGEoy3hYNu0UBSXvq5s5E5NIK6XvUoTMmO/i\r\nui8zaY2iCDhmPrdeQmW+E6c69ivzmioMWu5R+UZnnCMCeB0iNU/9AFd03ODb\r\nm8CoHrfY4V0r4T28dBSNdYdnN1NMTP9BpJmoOvfLdiDGLd0L92UwVyock96L\r\noSxL62QdP248etQ45jHt1+CCXDndCXcibYbBV1opPhuqi9s51ce/X1vF9fGO\r\nE3eKVjDh8lgzjVdRT8Fo4r7j13ItIcvLfp0=\r\n=n/RN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.1b6afad86.0_1647464588381_0.8113584468728241","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/typography","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3852120a3d7b27e132f6680ee8377f941945b32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":22,"integrity":"sha512-By9ptQRH5shpSAWlqJMBHNqMJyBtBLbkPh0AlYDeDluR5Gj1wE0931QOEMAYl0AqXCxXjJZTZZCMgi+mWs5s8Q==","signatures":[{"sig":"MEUCIQCKhGwaomEtQsoRl4STCEkvGYv442A/fNUNqsmXBcjp1QIgdPA3299NXl5njTU1+lPlkyYXuYFF0ZpsQ5BhXXh5gms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlPkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHYA/9FU4ohokOclgDYcSPdtq0HwDmsKD1PuX0zEoLF3r0zpcmFDBa\r\n2Yg80dfyexlOHZeiY+6vfy0DT2e2f3B80xw+054TBcxAnlaa7HgMtBDsQwBN\r\nmpg6Hw1nuYxRW+BWBrgiDZ15bJo2Uz2dgshQkjRhQWRmJypUfV2ouZupj8rb\r\nDHarAsbnjvg5jGjVmH3/Nyj+tWbIFgX9qm3BpvlOLTq8bKyxf+qNWV3hByba\r\npPWlvJye+LFHDuxnt7VkAttq5X2W2OlkwlFu9pWAss7aMaqiQxUWPH00ZWAA\r\nQde886C6xHUvZ5p1f/JoWiU6p3W0rPfpEheR/gBNLEAipcUiEJR/+m+ilG2m\r\nUGCRvGF0HgC6ue2/UNUV6Vej4wpsCIwLvpC3EKiC8wlfaJ9SZ2ySN/I/1PpA\r\nXbwMF2cDntsMYotSB875Ud0nwonH1CQGrAKnOssbvJ0iVONGtVZs7sDNJXhh\r\nTKehGA/uOm546A0b3FYg5VCSvqxf62CpY2eOk6pIVqr1o0hdTALV+91jbb7k\r\nk6WL0MnpoHmMcVPtsmTJLI5r329LmOKU2HdUP5LhzwmOqTKKXzO15oZiXdEP\r\nd3ZL6/8PJJQwwBCXB6/rvy+H5uMI9DVO7y1fgNRZsMAplUUNZe3hANAtZmIz\r\nPjbdPBJkle8iseEoNwEwXdqf65JeoIZd1R0=\r\n=0RDU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.bdf9d4af9.0_1647465444615_0.9919230444517151","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/typography","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.32b391398.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"397bac81c87c631a830d280f9a7cd7ab012f2d16","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.32b391398.0.tgz","fileCount":22,"integrity":"sha512-N/ugaHznOiB+FIQVOk1i0Pfu+g4RuMND+kwXp6l5QAIST7MDNSc26PYIReWvXWmY8GIZeWXcCGrfCFKmd4R/mg==","signatures":[{"sig":"MEQCIHuJRiEIPsEXprvbXZPuL8bmvMSplWKDCG5P5zbS53EVAiBCRSmba7FSgtIz0KZDaRjhLZ+UUtwihTdbLVwQog/+vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3bSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDmQ//fsRQ5qxfi2oe44DY+/ZNILkmdpMgszExGXZSxxsS6oYaGF0a\r\nS31H4JtsnSauacn+mANCXwn9sC6YpFDfztzpEdZ391/RA2GEH6qxyc/pN27E\r\nD6+LSmZ8MS7Q4fFQKMXLmZUD8XE0ifv/O+aBrtHBs3JaOLnInkV3EtoYynWV\r\nZX1i2+fMswwG2Y77x+Jl693i2C41GcwrwKEgu2d33QHg15xbHZO3vxKE9tJy\r\nSWyjnVC462MslRwZ85A7eASq/V/QtN/jZLBgHavdBo5cwBJg6kIEF+FlnjPP\r\nFe8erXJLKT/FOVcpNrQSks/+vHjug99aSZ+hb6ZeNCVQOw2FMjUh/pyfqEVn\r\nBrTWfyX0Br9qe6LxAahl2sBNj5J5NqUr9fg0oyj7BMly7rLhnBzvEohzI6qH\r\nBspCsLTA52t3j/GDIwEyIXsC3rSrckI3yK+/BWMgZ2HDWuhWAvwH4uST2jIh\r\nzBDq7qri8LPCPWq+XSWHbzWgheRQnPOsFjJDWxlLM4MqeQXteKm7tH4CNHwD\r\n52Ywr0ofTSPMBDEvg/jbbKVGXa5HUhvXzwtd5c0cJYYInfBNScZrbFe5XzEG\r\num054UJ7TDUk7MH842cWbjoENrO5GzXMg1/vEjUjOtZhV57+mVkd88+JFgvA\r\nJKhpvfaf+XqzMMULEYyJcwAPA8sRg3WwAT0=\r\n=TKEB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.32b391398.0_1647539922186_0.4643393555809483","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/typography","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"135b73212ef5354c6f603a1a351e0dec0199f158","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":22,"integrity":"sha512-XieCEgmSZjRC9dGx9Ipw/FbKUgQDGhQ3WiSAhSawpyEH5NxbsmhoAbcjK8/2t6T1VVxyiKcVZV7Sx9z7Va9u1g==","signatures":[{"sig":"MEQCIAv2tEZ2ilo7Q73G/2KT7O9Jby79hfgr2Umlh5GFMHkmAiB4vpIe+tn2dgDLFx3HR+fSg3nmzYXhUoregzU5Jo4DYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLWWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgTA/+PcImkHmvShsMzZ/u9dc8jUskFzggh4kipV0QBlFvOWTi2JvM\r\nJ6WZa+IS1mAV69Tf8fiCYaMPtT4xXcEAfnX80q7ZdW6gr4/mNEcAM0k8dPYv\r\nOmavxu7R8gS9xCUblvIMtsgwJIJKUnON8sF+2kaEwtnQ2/grY8kHQ9xvP4sE\r\nN55NYyp/va4nPvWnrjWFbOwqud+9mglZhPUBgpGqgr35F2VeTD4FPe4NxA0A\r\nsCiVSAh59iAydOybxRcYWvUJjdNeoQZTvnobE7+aLbHmlVIgIeWsjEoaElgK\r\nF8occI3ie8jE/8NsbIU4BzH8IiSb/xLmv7OlFsGl3lEQoI1jgicR0SZxLT2i\r\neEXqSqiJ1jUQvrBONqpahG+tLjlaXfXMLop+im9mue04sa0/hhwvUmNlqnNK\r\nrJni64VBjUwMyacNhm2sWzeQZrDh1uW//bduGphSzXcvduIIG1syU+4pLWIZ\r\naw5YXCRNVN1fnSDC6pDK/PY6uyK7Z0IO4CHiiZHJZ6pEjisBLezbn5M4eCzO\r\nJmuVdw32s98Sa5HYAoI3jzq1mlumk3mXfmKZAzR2+QUMdJIsBxUIQRNIbLv0\r\ncBgGb2wdoqS5jLuG18wOte2fAajDfbzFFjKb+5HxRDV7X5TdZoFNKitOSGQv\r\n9SSn+nsHRB7ALhlCY1UAOCxtRfZjyIxoP70=\r\n=b7KZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.ae8a6a3a3.0_1647621525881_0.027379014999277418","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/typography","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4667a51a0bdfe6f4aab7178b361ff8c2c05614e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.cbd9358a6.0.tgz","fileCount":22,"integrity":"sha512-quF1TIJGZs/APCa+eZ7CwK3pnaQWzCv8NlfQHNN1DNfe0cPl046kGMYElaUXXRggeBQg7c7ltLmCQ2GIObCNzg==","signatures":[{"sig":"MEUCIF8ZffaOVKfz9l6hDFZ7yvs9lHOej/WWjXbCFj9o2NZPAiEA1/M7b/Z3hihh7VqGuOl5tK+FEv5SaF2BHc+Tz1lC2Z4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQz0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3yg//UVRjRk4tBInIV6FYhEvGYx5Fv+XO4jYmqesNKGV4qB5mawTd\r\ntXE1SVktwEK/u6YSlZQkfGDnrORPlIqbWuixD84mSVUzmZniUw5/Z2i+LtLT\r\n6hzRtrmniZWDftIPIsRL8OVM29zGrJnnXuohoPpONWWXna+tnJs/aYyulWjT\r\n46LXOHKhKufSl8tKseG3j8Hjctlbb4TjHgLrnOR+oAAOGbWSOIiktmX3c5qC\r\nyChfgsuC5ZcVyv1dzwKH22fObg5GSyHOqv2vZ7aBld4+j7upDM3cRnNKJN78\r\nvCsdSp2gpUsNuQP/ZAMeqpa24SqPBHSEf9i2+01KxHM+A1NbkBiAjjr06VVm\r\nymGpAC55ahbqo14swGXTw0fRIY5+GBZsclwif23Z7d72w7BxcDP/2AQZngY+\r\nmiWSkzq4lvh8toOxi/22NZXhH3LTHPrF9TuxRtoJDnm2+Nqv1dEA19DNYXte\r\n5FpXwxZpzTwi4ySgqCWdlUS4wP8KCWG9zy01WCwQ68X8vfnB5TsMXvP3nmig\r\n6l1/g+PlmfuLRFxGTNinNYnYTXWpWaPmW/oSnUeBrSSbwv/4Evi0MP5zkf0d\r\nAXKYlKb7ch8K1Vx8WDjS1P3c7bW4ZMIErkejcvoka1M+MfQgmryB+40ySgRm\r\nByjvLdu+HG/R+WO624M9DXLKUa5U0M6zNDw=\r\n=j6Af\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.cbd9358a6.0_1647643891777_0.21744310596995997","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/typography","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a57b044e8d02a8bcd3567f5335dc9603c22a00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.dcfe49c98.0.tgz","fileCount":22,"integrity":"sha512-1X924jRoxO2iZDNtyhLJac2WcdN5Jn3gzRk2obyQoJKaWPNwV2McMkAVZRbvaGQZ/KkwFvIYC5tsEIK7S014PQ==","signatures":[{"sig":"MEYCIQCB1cfupUndZZN/xebWvo5yMo+Aw8dLCrefCjT0U3209wIhAKPCP+wS1VMMfu48iKsn6aikSKuEOz7rlH+eY6Y9Pb3y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMdYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqARg/9E7TWFZuihU7doPYwoTKV5/LqlEXRSqV/wba77lF2J6GdHqhJ\r\nweo+55oOKRQWglEmicU+Uo30EctfGPVh0IdFL53fthbuJOQvjgX1rTFR04xF\r\niR7rjunoDa1ElbWtMhFY8Y9a4zFG2ZoVldqPeysRKR2wbunuWN/+89a13meG\r\njTBD96YsEaqp3Ao48DLfxh37tfQPPPevPskj9iz3gT7ekJw0BcvPE8INxshL\r\nLoD4657mY0Lpt5t9WSuGVwAOFJcL1Tv7z6GAOEMhSaVuIhqiPe1XuMG8dGhn\r\nmlJxBaNz7MRzxfo1Q+YzeuCXgYG0cWe+jMRPhGxX80nQGbUyRRfWXJGhaiHR\r\nBjeqT983E8+KIYeN3dSSIdtSJ4x+VV+bNtzO5WAyQncWQ7n9kp8/4IGN2IJR\r\nsoUk2MmXH1EyMlG2a7qDYAPkhCAIUBk3OUmQbwab4+VtSxDQv2VHZQewp4Eu\r\n8Qcetx8N7OiAsfX80TlUTLzyuVhw0VC6IRq0o9rvCZsjDfnWzX4BJf0jd1uu\r\nKjtnqdZlv4dyACGBIdZcxptE9kd10I8qGmPJS25I0FKVisI6JQrinRMiKI0w\r\n5iutXsacvU5mEWZv9/zaf2ubqLPkciOJD6PH4Anm+b0hoCTUQAj9C6ufr1uu\r\n1ULbCg2VKCuJKn5GX8DaQdXq0FFnI6RUZUg=\r\n=fzXr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.dcfe49c98.0_1647888215788_0.748594629962843","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/typography","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"983d8027a92e9dba9424032a99a654346b36503e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.f31a833fa.0.tgz","fileCount":22,"integrity":"sha512-ObllMKAYhdI+r4imrGT2h/DQCOFx+qPfqD2d1z6e7Tu4hsJAQ0feficlKpO6zzOoRG11qE5sNd1HB71HB7elNA==","signatures":[{"sig":"MEYCIQCfl07e8x4PziLDFRpNedRrlxvkEvOGZglIZftqCYKuawIhAPUe1M0RwDM2kyjr4P6asedUAmgsoTC9uB2Qg+HONkF/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm7GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF6w/9HNbxjRyAoxvXJnBwbvr9bW7YZE9IVQwgdsELp1LgcHyJiK5P\r\nB6DhhTKjxueSlDuHAvpEqEsKoa+VsuRZwiqs2jz4SxjvFMuEJlgRFBcqze94\r\nLT72E8u+PwCi0EceFbjjiV8IvQA5UlosvuGwOsSWJfobEM3y3V95BqyR9sxS\r\nCgaBcLyPSPqoNel9VS8gi4lEYlqsQnVqcptL4hm4eGTguW8JeTt0/JJfqoxZ\r\nuIWjm/3E1qnlRtoKQIhXrA+t/1mUykcBzGutKYLcN4Nlg/7V/FIXLyKnWdHl\r\nL0xv5U4deN8f3gbi7kwR5A5UzBR7vKhA10rgNz4h9jn1ypSBQQp3WFvjZ4Kt\r\nZ8hAUqyq3Xh5100RSntruE6GCwozcUaPn8wrJ7wVkwZizS3+yWfkuxW0IuJ0\r\ncA106adC6LNFmbxKw8i718XD83VQj9kCv3ntTyriPgXD64J4JfZuhfUdgil2\r\ncxzWDmgKRwwB0JRC7jXZkOVmf4ByxSUdCMkQwUgx04rZTzMyz762+y37Fpal\r\n14STE9/hH4jQXAxV3Rc0A5WyrTeDbzNj8qWlfqkyq7TUtzd8moZRp6ihnAs0\r\nojdlT/lQUTFTtk+zhhGCFTK14Acf16gVtVWpNqoH0QUCjRPtAHz94Ej4PAUP\r\nGGn0SDG/IdjHtl0Ibifdo9fBxtDB2qq43JA=\r\n=czzL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.f31a833fa.0_1647996614535_0.3884011928751596","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/typography","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cc78a4840fc3f23f4a1ac40e530e87eac532718","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.4b92e210a.0.tgz","fileCount":22,"integrity":"sha512-ZGLfBiaSBxpw+YmYyVOa711Ofzt92mVSCnw0SJVXSKB1Ua0tgwzKZXy0GDnzQUnPfdiQFdAFD794XyLxJR9FWQ==","signatures":[{"sig":"MEUCIQDmDn/geSkubg7fqGg8UPj6NpeBgGC4YI764XSsGpuMPwIgNDNS5EhLnPWrdrQ5KsYZOnWPd8bM3G/0vV7vk574/6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNH+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq18A/+NwmKMT00ip+zyZKgga0yxWuUkUCnCENPe7Q2SLKIzZCA6Oxp\r\nu65tZexEvKRM4herEA9vjl97Hewxhl/jy3xFJZj5ljBsjop1thjkcFx5OhtY\r\nvaQ6lZ9QzkE9yaGI4YFK1wfPDd6/nfCGbKVkJw29Sra/mNAi/49faCTVTaGE\r\n3CNpGA7FX9inzJwTcaxD47xt7eP/XutZxkn9FNjQZsW16xyOelRO5J/zD3Wy\r\ndhXmmFTST5Z9eiaIoDZB1SZraM6iV64rPh6duzuElH4B6BDQxW42ky4/Zszw\r\n82A0iu7kt62iRIbzPMAbSFqMSIUwQbVKgiCiUYBfqPdwUFazhqIJk9k6BWkS\r\nSriu6rUlE2CfR9D7ow6noxZIKUId5SIosJkz9L2KK9nnxk17J9ozk8/jBAH9\r\nJl6+UZ4CeEYENeBT0RHjib4QCVTPcYMfJv7GpjWCEfDPH7kqmaSD2HqE18C3\r\nWJDf5SBOnwrul05idcB1/Zf4U0a8jXtvfDUsSslzSNUlWs4N2Y/qR7QnqWZY\r\nRXvtwbaCHbI1183UrBAGL7WqO53lzLURD9hC19SZTJxchHLVv60rdwUet1rf\r\nDF8L3qgnyxHTn1WwFXOtrZ/Wtswtan9LsHFZMAj8oLDPS7Vo3lxuNaO0YFu/\r\nXBPO0WT8Nuz0l1zdazLj7vHtgM0oRRqmkT0=\r\n=497B\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.4b92e210a.0_1648153086037_0.7224934063467721","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/typography","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.a657abb61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c5429af330d2c8f97bfd6bccb734eae13ac874f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.a657abb61.0.tgz","fileCount":22,"integrity":"sha512-aDPkOd10a2nDUqsTgaVQIgOQpUqzO0ZFb/TCf9SLnxxBei0IDopj03gqf8XdUPbyGoVPT2FsItrcIwJ26x/Y1A==","signatures":[{"sig":"MEUCIQCVmamNVXq+OucpNrYbQqYfmsSRrKca8JA6LMhFeGleVQIgeHUxauCTZFAlaO0tfbzFfI/lUwW1GguMmLorLpEtPYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNcBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOnQ/9HNhYlhjA+efUlSgIbfZ59KjpOShx2ltJeqnFTWvuhJQCjDXO\r\nLyWBIw+G6bNQ85V8yt3edoyKbycwsVCQj5cGyLgXRUhUXilwy/vaBIW+1lN0\r\ntZxN47lNqUoQukUTxbqDbYA258G/3DBeAVKH1oXgwVNaI10R8FTj04KrDd/d\r\nh3Nj7VcgCBGYsKsU/nq8dx32n0odSK0c1lLOxZGnZgt0mnT44tIEN/GSSSnl\r\nAGAe5qVV3koYzQ2jbOdXwCatE10aWE3YKlwEcvIuWb3eWSZrfFvcPPRJrZAg\r\nP0mZCiw100L1OHuxLIIH9jEoiI7rQdbV4VaJKTIsnCf3W9eHcHeISN2poT5h\r\nMOJdLASQFXshu2S/NJa+ShtLVvIzZN03Yoa0S6HbXzSyZl/aBYnPpoRilxQO\r\ntDJ5iE94X+pic5MjQhqz3xy3+eiYhJlKAi+7XjsvRq7MEIWrhu2aLpVuwykM\r\n7zi33cbc2QoeG8rJDfmxUB4B6aAne3zxPJ7vKgR6FgSn6BqsOHp/EAi29I02\r\n/5wCse+DuuatOoEtnMaVzHjsdzlG9td2JxFCKacyw+0SJceyL+Dp5B+OYHY5\r\nQoImf0+IYDTRdUpS0mWo5J3HIADdjiqVmqLmDFlA0rLqFtnRzcLW5F44zSnJ\r\nFKKTyczZAjsOPEyB4kKg1g/vMyP15DxIghQ=\r\n=RSD2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.a657abb61.0_1648154369077_0.9908960995339977","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/typography","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.443f63f50.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ef81a6c5e9d86e8e9c18d1c18ae237af1946613","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.443f63f50.0.tgz","fileCount":22,"integrity":"sha512-mZZlLLN37CC2ifHHuzFbgykQA3CSAOQ1xBQtNp/QEuBauFa4d+5yvh4U4QZaKsCraRhdQYvFt1TSxXAMoUBWNg==","signatures":[{"sig":"MEUCICJ4HsF2NGQL40S9+69fl4kGt70K+wrZnMpCjY9LxdwnAiEA+4KjmKA+HjEB0Kdz06W8pyAi623EtAYypfTRb/ITqgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkpnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooOA//UNWvBBc4yPADXgF+2ToxeThtymmV6HIcpH5gJ9b/0dnqV6ei\r\nCUZdOjw44P1XRKVpDDy2sd5BehoxVR+PqxfmXHwkDyMi3fLq8OU6rUXG1H9v\r\nN0xIMRop/JwrHCYo6VjRJkkwNUNunrscy76rVoYQG0rnNKOzh1SfXlkvnLIT\r\nTpZLkTaCCBCPTD7QSVadpQ1hEBPhk4mFBDm2oeTNUSFh1BtEWLyyvm3WZr2K\r\nM3BQMhkK4J/Zo2prnC7VEkTEv40q9SRBWqQ55yi6EnWCyA4fQIRIq4j09D/V\r\nQZZ+ow+l7PPk+seHmuCtbodgL8ab4+D8Bc7HBSUIWKzGIR+FEZxOLaQeVFLO\r\nxFFCjsAQECvl7a/dNELgdnFkur7swFNoPHUlgAhGR9vf11GTl5J/7DcJYP2x\r\n+jjvBcOv9DwfWSSmR5fcHAOVr1CmRHJnSCqxDC/TdFdb/CJwITZzWLSd/f3L\r\nb17Mc/9Apkqhy6pIK9AYrzYckdNezO/s7E9lyqGxinh5Lbz9579jCjPL5AgX\r\nwxS107cqWcyae5KYhVTYQLDdhelw7Zub//3unLoWav92Ncu7Ams4a8vbMQ9z\r\nVa1UMFiL5fznLiVxLQd+iTbWgFsg1h+tJ1bF25N0MAorRDG25p4bQGTxwesJ\r\n4+swsDnvVXZyxkA6zUf83WDVCcTffped2/s=\r\n=/aKj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.443f63f50.0_1648249447532_0.3990033680096172","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/typography","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.eb382f318.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d953379444bb71ba947bf202f17063954afa699","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.eb382f318.0.tgz","fileCount":22,"integrity":"sha512-nj57Vkn3obHW8kHSLyEi9fqFmdPZueqZw8uhXy0ejqmk5oIQPUMW30qEOZ9Uks6GujV9zYU1tY7J3WqAvmtj2w==","signatures":[{"sig":"MEYCIQDJCSkfy6VpE8rsgjrK/N11xCzpb09hbvIVlmly9usUIgIhAPRUHGK/EPx16avfDynM+Qh7oajLhJjd00iekMpSBniR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0MjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhlw//Qy2qBD3fdSx8rkTLh6p7TGwQwhx1bo3ZTdtH6Z3caDyqTmG9\r\nrcwozMVjtOKyTY6i9sBxRzNxOpPf6b2RHkHVGi+aOfdIE1uzbOX/FNXuHzqp\r\nLhYC/luTs0BV5adGTfS4dR7gyZMvrt/Oa12N7DCi1OxMQ4J18T8ufqt/auy4\r\nHomxEr/iW4U6BzvNNgy/QfIn4wLVZBccVV9tSUacFfAjLzNSPO41n+486suA\r\nGRkc6Hf880FOxal5rSe6ZEa74GfxpMi0ySg3hKkNgmy/LkQaTenIn/NIEp6V\r\nUM0p1NgB+2WRp/4CWpqygpO+uYSp7kiUxYcQ21TYiT9Nc4omPtsM5FqFqk98\r\nve0BRbyXFYf0ScZ42nQUiMdBTqLplW5GoHxUpI+/4lm7c9ExtxglnXZuMHtj\r\n4SgDc52bLx2IFy2NiyA3HvLcNPGfxFlUY7H3LyepoFF00fPZE+0OPzbvky9G\r\nXZ6LHcWE/5KclJXEJFsgweq0OdxgT4Ko2Tnctzz3x1sCoq2JcjM8Gpj1dMEV\r\nonjiEHHc/KuHPEfhFLf7bQNI54Vh3eeaC3xkjfYsf3kDCK0Go2kGSTdFRXkL\r\n6x6w31WR/195AW/hq0l5bS2HU2k+RtYPtMVJGWn47/SfphafqyaLUBouz5HH\r\n1UGk2Q7AQ6anPIwEJqYCygJ51/hhP7bUkiU=\r\n=BM5c\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.eb382f318.0_1648575267748_0.5067869351609067","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/typography","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.344d52823.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"917c4d8cc529b99265aeeacaa54210bd16a08b22","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.344d52823.0.tgz","fileCount":22,"integrity":"sha512-owvbtznfStuLoAruiSQiSdqA7vkLdQo3aGZnzqyGWedgv7KnEQXbJv3gerIrulTuApvfKIYZv2gJli9vprK8kQ==","signatures":[{"sig":"MEYCIQD1T0mtMY7EEolAVqZ5Q2LpwgZDxkLpGhavfysfXlTrJgIhAJj0yIHas0hZr5iSyzCUF8pTcN1E/0hkg+daTxevEN3O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1MnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkPQ//V9pb/CQmcszsw5GUsEdiSUp9rzHovoVZbJM5Ot+b1WVThsZV\r\nf/dX47OkHYWEquSMznxlH5/5xO6a7FOXEeW1+R4XihaCNhUj8FbkUkuUgRNm\r\nrfh4QJErMVDiQ8qMS8H2o42Y/tqAeyi1BLy1+acBJ/HRtZiaLYpcP3r5hNH+\r\nJepzae+DQSsyYxwPhwMs5VY7Fu0zX13yQAPEMreMeIEHfb/c1hI3fPciPHRR\r\nV9to/dLsohhvUtyuoiFvtRbYNvE3gZYw4QrBfdOPBMtml2dZglNGpVLBafR/\r\n9kUlxvbDLqf9mRm7ktaWxyPYKelSVU7oax9e/4GqYJhStbP5SBreRxFhxxF1\r\nuy3qMeX9Xj0gYQfT+pC2769eLxcaFHRKRKXNfdjootvwqalVU09GwGyOwyTh\r\nhIC8O46OYWOvex1w3zsrj/wp8m05N3hsHqagLCLLZTN/eRq9HsSfwLpZdh8p\r\nqvXyE4RtY5vutiDkzf8yBVYVVP8kmzrmcz59nRGnsIP9Ft25EG74OOVku5ST\r\nXDQ2UH13/nB6xKpJdkg01k1xq9/MNVdEAiRyP9am6zy9WCUtcV+iv6fjmSD5\r\nenigW4mm5YwlNimkBp7V/g/7cBTjzcuLZKVTrLLlttCAPA1hckJ7TUbbKYOd\r\nBHEBfbzNUEyg966prLSAbEIDTudj/AOf3rY=\r\n=xDo7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.344d52823.0_1648579367126_0.7497013132908821","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/typography","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d746e3e96771e5594b692bd19050b3d8f6f735","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.4e372fb49.0.tgz","fileCount":22,"integrity":"sha512-qVqaGnplM1Ovm3CSb+kv5zbdfE82jPinIYsuoHYldvOqzGK/+idbSojmlAR/XGgClc3vu/S4qgyD8menRZEKkw==","signatures":[{"sig":"MEUCIQCJeu75TzvKeNRZZoSobnde6oMMOkXjWGTqv+qzRpzK2wIgHonAA8q0tc+vT0Gghq+TWWik4K1tyhQfiNtdoRaKZwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0paACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX9g//Vj3iapdQ4fm6gvO8YED7GQ3eVqhF/gnKVf1dok9/BedubyU1\r\nErc+5vukA62juNj36LZwg2vh67U3LlYmD7A3HHVuyFcs/Vd4pWTyGJyrV28I\r\nFsFN2u6d9rSiderfy/THg2+FZ3cFou88OtKWjZGDdyLYsaIxwh5w8S5AuuCN\r\nkX+5/jC0oKSap7Yra5juA8JcGwUuFgX9l99h5vLgIZF+RjjpjrDNXcZx7sXJ\r\nElaVVD9l7GGzPtr3oENpR8RS7sIj6bReYXa/EqMOGUA0vioUGoQPGT8P7Ipf\r\nWE0CMmuULzHz8hgEJRvjbEyAu2jhovBCbmZz1DiOpotkWwKqaDOLO91TcHfj\r\nRRvqCw4IPOowvdJf6WrYP+a9Zk2WjCxb0SkiwclacfHfWWPlGBIdxiDNZcuK\r\nXe/jJTTsxnpIOKjOQE0qrxMqozLRzyCq1yT9FyL6BYn8nKySkY1QO9vFVukm\r\nPLOfVpsElLt6EUCAzZCVB4FcJo0dTuXFE9rs5UXipHneu6pxMMrq3i+7wMPN\r\nGjy/27L8sXv/waR3hqA33lJ9gCaVsc05Zyc6zIeVV5JSBtDHzw9M/2DriPed\r\nVOcSxCpmi7/NVT5ybWCsvRSU+Xb9Ve97yzrcpGQ07HalhbzuTFiJVtfUsHyN\r\nasCiKmgs7f3QORj/nlYHZFVNZGRo5OnLXGk=\r\n=j74N\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.4e372fb49.0_1649363545921_0.9010089774358871","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/typography","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f26062429aafb81397212ae37464c8dab60aae2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.3e30054fb.0.tgz","fileCount":22,"integrity":"sha512-ROxd157hvI/VG4vqkTO0afKfzFRonhtV3HsMYs7L8PGzJ7/Q0O6ghE7ohGQVVv2nrmCbWW7z29jULgxZgGqVAQ==","signatures":[{"sig":"MEUCIFdU+ZeKpbQU2N4K7cdsmToCqhngdLtvxuZdtcdIP2zRAiEAkoJVuwccAroM2LBTXUI4C/JfcPjS5uEcoqZjvzwtJps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0sXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrg3g//SJ3Ae5wItNBQIvSwxfpY2bzXjN4C532bwmCZXXoMenvi24LE\r\nxYOwHAZ2g668Xnx7kbpVkSomSWikagA/6aT1ENzSM5lZnfP2OWmc9BeY7ji0\r\nvWYkPvEK9u40/G1EklWH50OfDLbdduWB1149n/gyJAK3oDO1W+i309+drW3A\r\nJbmrpXVuDzwC6fEyptk025QHIUzDIQ12EiQpG39svoO7uQFKH6LKGRYwol9T\r\n9TZ9EmeOKf8cR2t6cXehwuBSJVxNzEUdeEq1zb/CEhrN2KnESfmGqlNZd2CX\r\nVXKSPbwfmRbKXSvR7dQRPqECazyuUBc6nhWmTafJzSwXwt9PTvUIwht2APDU\r\nXqfWhzp+5+yLPYNm5JknSgnfBIxZvVvUWnH7mWohFoN2ob/6PjbglGvSwlvW\r\nKGcnPoo1oSTG4Qqz8PoT7wQMnSm48zcSmNXp3yGBL5Wpw4+d53ZdVQIFVtRP\r\n21pepUDPEYeMw4MCvFnXnD35Kpj7icggLGfpFd92yvUOLzBieCnH+MO3VIYL\r\n52tD5E//OFqeeHnn8X1UmmVtuKCOueKnrC6sPpahxfW3BwvlgNHS68k8tN1v\r\n8HaoByYQNdp7RvgHXOew/imB4gSAsQLAQmzAnd5KBpqg2sJMKF6uZaOR+jXs\r\n+rGD9nO9Jv7wbfa6ynSGc4DyxUs8S9/YrK8=\r\n=UbWu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.3e30054fb.0_1649888023035_0.5313201086495143","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/typography","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ec6f1ab01d44e16c80eb3a847eb2c0853963b26","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.8c4da223a.0.tgz","fileCount":22,"integrity":"sha512-Yo8qS3D3Ua31VPMTfwHnQ4Ie2QCokcknjRJk/UGSFps0aAygEPzLFZps2wRMtH4iQv5aJiOL8J4IeSbCmHdc4A==","signatures":[{"sig":"MEUCIH0GyTi5gldgW+I8b6XaqoXazZPUMBt3FVYMoGQJuiAIAiEAwYQ/GDoIxly9RLCqnIOi5zB817EzezeX9hUH6yx7BAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtP+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Xg/9H9SD2AraYaAwrw3lGQqrjSahkR555A9QT/fbkK6zCjBD0+z+\r\nddtADKiLB0IafeAwRRjJ5WtK8Qc8IUc+ocxezDpOXAMoGwSbLH7DVdfx6nqx\r\nLubK7huNAeZQ4M3YSwXS+PuQ1rn8/mKQfatyVt3SWIX0P/Ixio0htyDVUv6h\r\n5ReSQMVogOhyavLjxXStM8PV37pN080zTUEHOsvuic4leZWLudJIuMtEqBg6\r\nAOyKYj8oMOM/BfhFDEzHh0xdv2EbTYVasmowuWcciy592JLzynYmRKyBQ0Tt\r\nra5IVTL9lwr9vXR8yHJJCT1ibdYZrdzBkknoFNTkES2nkmrA4VJb8ilRJ5Vj\r\nKegGbs9NLqTj6mJysd5BQo+HNlazNCESLfnqszUm+UwUy2dxq/w9Z4e7Ggs5\r\n+XHULT+k0e9hzFl7RdZRob1jwFuOqMqXmwVyqdT2AtrzNrstg1xPuI5fOfEh\r\nfR9fslQ4IsTom2EaZCHEZZPSnATOreA5vC9aoycC5xOx3Gd55cweVuoh7PDO\r\nno3q+8c2QiDJB8h0DvmRrH+Ao7zfQX0ohwBqfhXSJto4AwNPqw60shNXtKpl\r\nt7IhT39mtc3J7XPGBi36LPWta8NIUO/GvbgHmgl4T1nql68yH300Q4uAZVUu\r\n79/o1OGg6KNcj72Jmaw9D/WG6NjrBe4fk48=\r\n=FAvH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.8c4da223a.0_1650381822231_0.8451714724184098","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/typography","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b2a9c89abfcb646417c2d2ea28314f518b6573d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.7de8965cc.0.tgz","fileCount":22,"integrity":"sha512-b9WoDUAbNaV+PiZkzdRc2NuaqEKszEtc9YgywU5gw2DTiu/m9DSYbYpEZVq6Oy/6mk/V//mnCQ9BNyqpiEdMtA==","signatures":[{"sig":"MEUCIQD6xPbkLYnUKCLf7onjgypNpwcx0xtjd2yQ21Qh7hKhEAIgEovWcXpj9hTRjc3f67vUXpg3GUgYkV1z8VCxpVORvww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxofACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY0g/7B31JV+TJS+8oCim+WTsx/I+7nFvH26nUNUFnyRUiE5gDwybY\r\nsEa/Ivr0gbOaM6PBd7n7h6vHRIt6PcadZxaX92vO8u2pqnaIFWoVr92yYjhE\r\nHkOZNNfXRhSObfj8lPgdIpxxGlX6R0lB0j1VZpMTF6HKaW80dC/tRvPvmy83\r\nF2m0TumBz4WPLYnJnbw3w9kM+7/90pzUgciL7kRUiJFouNXz5VMrP3dbAEgq\r\nYopB5Z24p2Bs2h6QvBBupLsKM8u4bkm30be5bx71LXBykiqCn+kZ6xSvVUcd\r\nse99jVufSDmYNWhkZ/431XQkRtbL+Lqo6kEE+42dnLUK11cdcztpR6kSEk0A\r\nZWfeQSNKdPnbjzFBnEU4MDs0pMEihmKhH21BQn8uyXZPx9YXGxLkgr66MbTT\r\nbz4DjgvUduTgKNynRsvBb7akZ2l+k0NG9LjHdd+7ZCIWAtceOzkokRepnHnS\r\nG5zjsiDH04BwujtuuBZucfA6jxT9j72PdkX9ssLXBVJ4FP7dGumhWDeGVBa+\r\nX+UpBgJ3x11JXdO5w241epe1vDXD+jed9umhUzZj7NMpVI6kXYe/oJ7GN4pp\r\ncRNkCmp5r5a34nEUfyu/pO92WCEnoKINMX4UbL63iGC9xltC8BW+7xEBMgpr\r\nZ+4h+9Wk0V0Jayp3PPA/TrVgKikuxQU/0pM=\r\n=QZ+c\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.7de8965cc.0_1650399775172_0.7788339420381925","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/typography","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.641ed0851.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35bdfeb662f5eab9c0b55c08e5dbd44f2d00c00c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.641ed0851.0.tgz","fileCount":22,"integrity":"sha512-mRwmXdu4B5S6Qi9tXi6epdJZJRnJlpJiKHb3uveAFSUKjr6DKMjOZVyOquCNcZNOQXcNnkj2tNi+YDzwwpUoyQ==","signatures":[{"sig":"MEYCIQD+PZ+8ZE7s2BDWYqDTfJOlg+O8oEYWxM6hTqqZjupeoQIhALVWQc9gtyOaeY5O16k/J0NfDzYLs3mchNNFD2rpotGs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtaA//S4IUYN+1LxN5T2ZSeAQm4t/M9wrxCuU84AesH3c4BZI/23Jh\r\ngvLajtSqE2HtW2bc6n8RSCOeHRM7TJ5ZqC/wXUsfo+TU91j8+rcQYYnZjFOh\r\nzLSdNj1fjQRhuSAuYek1vA7lBjkTbK1BhMv16IeW/Gs6q9JbmwUOaxP0ESdi\r\nsFOz6qWlmequTFS/BIq6UouUv5ez1Wd6HC53Jgl0x0D7YTUKPXi5oQbiJLd+\r\nx7qDIGwqqg9LvGfGbYVr6EpYqX9iJDVGmc8oj6olVRhkkYMnJOPdR1EYGU36\r\nMYuGQjW2TCMmI8VRb4Bo2V9huW/xamIw+PQmgJk4yOVTFZTN+qyMbjJjRVgW\r\noT1ZeFdrulZzXHsOQbUQHN2HP1GvMOmDqulyK9aL7d/QiWGsFFkXRv9XmspY\r\nycvsZb2wQKnhMtVdBJkhbKSeoBwV9+gSdZ9x+iqDFEn0aBBYhDFGhKdADvnO\r\nc1YtuVtQYqC40Bfz6tfEhBG+MCYxsRQc41WR3v4oqgQd6ZRvKWqRGheXwOWY\r\n8KBKANeUZLsDrcL1zg3gOU8vYGZCW/tl7+E9wI+oXgNfVFmfuLSK8ZdhOzWW\r\nVEe1j6HJHxAmOLQS6EKxig3Qa/f+Orgpn5Ieevb/QCEnTYv1eEJrBPM75YCr\r\nacag9j7fnkbTUEuOUusWU2UIRAe/XI2pehw=\r\n=dxLF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.641ed0851.0_1650470707954_0.6909492417005956","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/typography","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.e88f83024.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee1e4e7b5e6fde8ab0c7f8dd08a336fcb4b20a51","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.e88f83024.0.tgz","fileCount":22,"integrity":"sha512-Tvuz2GWolIwPWq8vJT5c4umm8G/RPSq2Q0mswnPuPvvRAuR5Yalk1iQde1JiAoNn3ChdCgv0gUQ85yLKa2looA==","signatures":[{"sig":"MEYCIQDiShwd/f2y/sIZnu1vip4doM28dt3AdqOP1rp/+tmivwIhAK/HGI4TW/FN7VS/qjYW7eqeJ8b6BNn+H6zAclG6Wfbp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEcfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6oxAAmOcwWyp7IZYsRyfuUuZTkAgTnevo1aFhcIx98pyMin+PAiV+\r\neUTh5vkCVt2zhr+eh3LQwmQ+ZpiML+q2cfiE5/NXyVPYylBsIESJbajqhDbE\r\nGZd9IRF0nwyjC7oxQO/LnTv8L+wlmQ+U9Of3vMLBCMGy4z4JPxAXeciPz8BR\r\nM9jUSpxUqqz8gt9s2sTjtR8+3+rEY9yI6b2zo02gMReKiieQ9EhXYXDVgp0N\r\nJ9gdQv3FfOyyn0o4DrBsp26XpbIXQppkP1p3Bz/ZiYXU/plWWSp8BrkBlotB\r\nOztDKlnnMrMnI5GS4fjtdjnRt53ydisXr0BIFHmChrQbqC4DJQt/gGQaNGAC\r\nJowQH+k/ROo0rBuXdMVDL5LsWPRi/ugiMOueq5+H2Pcwg8z/9Z1CkcdbvmFy\r\nNPaztRDVmHOAH2Dv5mwYK7fXG4hJl5hZLRrn+AJs5HUhOINoz7iB1hn6lW3C\r\nrL8wkzmtPKi4Fa7VZO+VuOB0MQd9ssfkerLrrKypg2ungtZuIDFhlhSH4g3c\r\ns3xN8v6Lnkw7EA+8cqQ7zA9HR5xjB+9KKezOd1sVL5sG+9ENAx6gTpK/Sg0l\r\nOTSXiWNpjcpF3LBeUhA4ka3r96OZFsn2MmBuZvd9t9fTPqpPbIfHupVBZHHF\r\nlHzEN+08piYejs+ufd/6/HmYHL1Bud7OhzI=\r\n=5wxm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.e88f83024.0_1650476830908_0.4482714487320427","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/typography","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.7321d6254.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c018621df2b6358fc13fa21d3cc294abe4b630","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.7321d6254.0.tgz","fileCount":22,"integrity":"sha512-aJxrdVkM3D1UzFKv148/iZ6qWdURlCEUnAuw+b1u3eEosgm4Mp4TYZTHKZu3MGF9wxbxWMfjavaLaD60xf9+Zg==","signatures":[{"sig":"MEUCIHoi5PoYMqEmpGk8Nuo51lyCjZbZkb9U0bTbghdIpYs+AiEA9PRunLfT9xVv4BG9FudwM0r1U1qeeY6O1I/BD8dmxkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGjDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmocwg//eDG6uSvfN2G2StHvbZ9/7crT973d3DBiWOrvOCnheh2lkcIA\r\nUGfnGEJeHoSBIaHWFMgFK3Z9S2wWuFbBy6cimjHkp9S5Dgz4Wbdwf4r1PYD8\r\nZN0khzMgVYHO4ZkcSHHFqKEcqJ4CS0bxs1vQcxKMvPWjS7iI5RmNWYynsAF6\r\neup8dTqivPwV1MQblJRnlI9FmOQn9rsLY4at1agIOQP2Os5ja5EpNpRIIEwR\r\nsZKV/w5Bl43R42iFROEsR1sTfGIR1DWPcMbr//V32m3Xf6uuMcctEpgnLEFV\r\nCP82LY1ZpmHs7xUQ+zb8T3JuUUtIfwZ0yZty3hezxdZ0fK+tWZxSwFAN5/h7\r\n18NLi5rP4S6FQ/CXwTG4UWmSV0juv+4wN91362vkkQfrAQH+qi8pDNV8HLiI\r\nHiprloGyP9o9IHYRMAxb3PO1FjNjinolF74jD6+jJrHY/93LgOnfK6CYwN1s\r\nv0HOqAh5nwssLnHCQMSw9NDH9XwTXbhcUIomVsuoCSDMKy4Kqp6my/JjpbZQ\r\nXzhmNQihJ62x55FmmPMj/N77+hnXiI8A0v6VuA6evy7nxsmrWwUIYfErOGy4\r\ng59cJpyKNSpLDC8MMuDbIRXklXcdvcd9dDsv+RR5j4yfGppkoW2mjY2YUtVf\r\nPMsoAjdI+mzx65OqJFM0MGqO33kIMwZ6t1Y=\r\n=QNyU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.7321d6254.0_1650485443593_0.3120001044214089","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/typography","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.3ab956515.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff7a83495c6bb2f55515aa8dc6bd75df8167532d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.3ab956515.0.tgz","fileCount":22,"integrity":"sha512-T6Ey7wWbJXAuov6YSh7a5JRABjS/df6XncukdQeniQ6/f2Cf/XdjzlMAWs1DxTtB73qtIGN8F3ENIoHDhOJdRQ==","signatures":[{"sig":"MEUCIEMziqYN0DkdWGAQLcSP46eYW8uZ+MwA7ufEJsVvGPTRAiEA3jo9ldsuqRNyj6fzVv7TmxNpzPy7mxI3l83+lNByX6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrfCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6jA/+PrDIkcXcRDmjvAFK4OTpDPgw1JIkVgUvo/tGsMk/3AGQxyBS\r\naJyYoMXA+Diq/TNlo6HmaU9JzkygIT0p5KHdTjW0hPs1MT4K+C1kpp/+lwNT\r\ngVdpAMXqbAQfFMBTG5EbOdYa94clacFfFMwIkCj/MO/df/xWuzwZvP48alIY\r\nkZtoAVN+jJeP+7Pq5wEBaLdYE/63GkgxSFD9+HCkSDFyPObjIruBYyZOgaOs\r\nQkq08F3PmjNK59kPB6BKgYwgL7m/oJAB0yBnHQJlCeltB1I7jWyawRexv9NN\r\ncVteANCZwGO53fEIMFIPN1Bd/xlSbbkAURzkZQgaDmmX2v4JZFIRs2GEzEWr\r\nEc5SFgeMwvIMnYwwrcBRW0XinmbIHd3ITVrpFW3jHobebkBC/ClfagYvAKdd\r\nkfwHYa2p1wDGbss4AUp1BAmaSAJ6YKiN1wbNODOCuia89IhUcC06EZu7RTji\r\nk7FUJ31snzwbXbamNKcFnS+9J5yoc6Sg3g9TsK6k5w7UpKO15nRIMHpIUPtz\r\ngKuKJlIIe2/4+rAG8YTn5BIqtQJrsf2sbGX3Ac3FMgC70tT38nDWdaF0n+Nm\r\nxRoOORA5zWs9ZClvDwHt1W33SBQidaMPTAVV/eRB1zdCCm3qzqK0HJgSEI/J\r\nPEpQsb3AShYKIzXJ5axNkhAuaTiD/TgJTSA=\r\n=8vqN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.3ab956515.0_1650898881999_0.25123324912788214","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/typography","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"735414b1ce38864a2023a81c3e2cb98e1232ca3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0-canary.53b3cad2f.0.tgz","fileCount":22,"integrity":"sha512-9J0k2fq7uyHsRzRqJDJLGmg3YzRpfRPtFDVeUH/xBcYoqpZE7wYw5Mb7s/l8eP626EtR7HhXhSPjvRTLA6NIJg==","signatures":[{"sig":"MEQCIFDNmDC4QADjAIbly4hXx6EqQ2tCSj+ld9NRLIoaYM0eAiA7dm55zrg0uF44o41kp+5Liz49vBHJvzndqZ1gfh36ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTq/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdKw/+LyjTbJO+bz0kBVcwdTVgB12EAy0Hb/KcRenba0jTq30XOrql\r\n5q/9ufrdd/nYnRue97yE3rAWbwpkldY2TKMRsfwD8J0dvqsS0NBraWtI0fma\r\nozpKV3nXH5A35QCHw23JLNyZXT+euf5Wn+1l3K/OGqHc+NGrhiGtRE65numr\r\nnay7JvBOMkFS8H/r0yjVqMqVUhTZKTQlg+phwrwz70UXo2ipFjDKxya+s85S\r\nEdvRkH3UQdfdz42zpW/gpRs23sJ6fPEZNHNJk4yipfJtDXEgHlq/Ac6fjWfq\r\nVc5TwiOkAVdQYnHokgqcQ3/av8aQ0V6vXNsFQ0hhOOygOrUqyN3Tb7KMVhdQ\r\nzIbtM97Gt4OJpPttxGjChtVul1w7NPgMjabTAnuox5tLRwwo5aJHD5XYy9aq\r\niC72yqQ22YNbfJSqXYx2MDbFxU5IJkXrML6Su3RpRa5KJl+wlSkw4S/qSsG0\r\nPMqjelPalWvmPlJqt0ttsu3pFgjxZ6u13gQlIT0GISHyckvHaCNirVMm6DBU\r\nrHMYjocK46ql3qxvjdGOaI6E8bylaafs5MXB8MUcelM3++5t3pEaOloYvPy7\r\nEBztqZK2KFlcNxxZ7n6DOmUp/Q1P217837eciJje1KTdQpdERv+owG4Ier0G\r\nrAWCyC1EHRNZ6L5QS2DmmlmJx9rm9sahIcA=\r\n=51s0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0-canary.53b3cad2f.0_1651063487052_0.4748574789424189","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/typography","version":"14.0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@14.0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a13ffc47eaeaa09852f84b7e1206a69b5c9dbc89","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-14.0.0.tgz","fileCount":21,"integrity":"sha512-/QtHBYiTR+TPMryM/CT386B2WlAQf/Ae32V324Z7P40gHLKY/YBXx7FDutAWZFeOerq/two4Nd2aAHBcMM2wMw==","signatures":[{"sig":"MEYCIQD4R8t0Pj897gFGcuzaw84w7cx0MSZ+RYcZIZGYNlDlUwIhALtTLTVikK7aeOaJBAbCdqlDkztiuT0yKBG1Hjm/9Gvt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasb4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs3A/+PCJvlff3Z4I26FBI1KOKD9yVoKwnIFj6oFK61FWFAs6Q+GJ2\r\nZ8o7FKwC1SF7j6gmxyvWxgazCj/XotqJTwzfuWtsiTRESQV22C8rrvBQJ1yI\r\nRpWUr2wLAgd3hWv0yRG1Ddn4pEbnoDu5JE8TS7yAhbSKsnMskrDx87cA1YtE\r\nFl0RBoHyJ7rCRseuOU3gYW2HoQ1vD7O90i0oqmc28cY/DrVcnoPqViW2nA8l\r\nlkumBMolurFtLTqCdK61dY0m3nHjEJpb28NkTrNU2ix8dQg+70Op/Hoe3Iem\r\ndRptGUPH1KD7i3PPIwPjHdSDWF9VI3sPvBZvlGD3+zY+aVIpXLSv5fhkKIij\r\nxFOUM/u8X7mH8Pp2cohllDDb4tg2MN2I4aIEqtQOOxV9jasNL6kTL0ApCmE6\r\n4xRzojQ10Fei+v0WZvtGk3R12vvZzYDEZqNVbIBSD0azdKEu4iLgRCP6eHqW\r\nqHVpI9VqWR/1zu6sVVA8MhgnEnEJ5HTI5cSkdaQ2mtya7bud0gZd/CVvKWE/\r\nxyqQaZ9QAR7lU7ViAVE+Bns0dd38IHv1U1Aa77GbtiKNi2zf3zdBYlr/8N5y\r\nl8FC95GK10wQCU7us3239FEX592l+zK1SUY+mcrtgUNmkZgicilm+cc8nWg2\r\ntZ9mbmTbb0gkbhVzjscFM/2F0TUvUXq/K14=\r\n=seQV\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/typography_14.0.0_1651164920402_0.8627857389500067","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/typography","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.432c815e5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb957e5f66182230a8da3321eee879fccde09c14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.432c815e5.0.tgz","fileCount":22,"integrity":"sha512-4zkctyA7/Ras9kraNe+gc4AjvxucNSc+D9ljuZD4db8JvJN32nN9pFf54E3w2vp7e9h+rjQLCyOq3wLP1aVSNw==","signatures":[{"sig":"MEUCIDKxuyWJtplg9rTx9LD9rrzQeQ1qB8kJNkire+OQo9FkAiEAjj47mZS2sPzuHFvVR0rWB5xeLmItQkj9MQzCf8tcvnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasc7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXhg/8D7B/MHzsXQ+NuxKUDSUdTwsVkd9ZWOXbluqv29ueO9FOyTpv\r\nwOxlOL6BTdQtjnFYWgI3Lw/JR6VPxuNP/RwRX0XXeOfHtLfzf33s26AZbuzO\r\n/EwmAieGmNvFRqSflY4uFA4N+z5gCTNxt/sUdII8yRzqj4/N+s2+yNp9oEJL\r\nk2ASgvr5EFgOZL//Emew0PsX/bzXmkM4eL2v/o2ymEY4WI5CesijdA6Bdlv6\r\nZ8hr8T+N6wev3fxJyxLjCgHgplsagCcZFLSxWn2JJaUKAMC3zsaLlT1i1rZJ\r\nzSbRQi5NEwGG60Osy3CBrLf4xTA3uG3sSDo4ria2ln0beWRrdMiigZnaqFj1\r\nsDc6d+BsHO++gafTCKVps+jh0n9CC1TEcq6TIQVEDZjKIAocVnYXUpL0x5Cq\r\nPZ/JipRf++MmWMFhoXT7hu4DND/wZpXrIjfm7auky9aKYWMjO7ZOdEePrkj/\r\ni9ywirb6xAbB6gmpp21nOJPoEbPF7glizsuRwo8UfZ5vgNI2HYInfPKsOi6D\r\nR3zLF+UWdVeN2UdsJui6YLpjGW15HZc26qks12mygGlKHXzESa8IGXIYs/gg\r\nG2baEMw5p4VSbmPq5+/AMLlo8UR2hTyljKbgnj1YKCrAltRAv1B6nudeEAKY\r\n9/uxe5JIlT0DestM79pGWxXpY9kFZJy5bfY=\r\n=hsKP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.432c815e5.0_1651164987709_0.8635902908783057","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/typography","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec49e07f7481f19209a75df0c26e7e7e17662f97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a0f01f669.0.tgz","fileCount":22,"integrity":"sha512-63YqrvCXpia/dvgIC8mSAO+IPQck6Tq/vhec2HWso/MiAj9DXeSdLzi4XyW3OuSgGhiVszFy0qaUQJcfzqJ+cA==","signatures":[{"sig":"MEYCIQDfMjlK0ELem9ZcDBpPjfDwVSn0pl6HgNarF6zHi2rgXwIhANyhRWNy0G7uwqUCYGr3jriR9yfHP3uPmwAXnBTmq5gx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYGRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOcQ//bPJBckghvXmh31rDM7XBFOGea/bv69Ba1laWC1VvmSmZgp6p\r\n9FMlrH9oBRRMpW9iKH7W2bEvs8UIbRPqoLyYr4n+S985BVs1msVNzFMnR6OW\r\nE8RnwnnWMAYbaKZHk9s8BXOirLRwsFM0S7AwP9WsCyEC46KgAe5TCdCn2Wrp\r\n11unlZ+I18lKCYO8UnEZDLWbxc8mYI7LjcuUr1/oH7+JPYqYTJPpicTG5kKO\r\nhKISo2bdZj4lCr65N6a8Vub/NHo+21XE6qJ6SFJV9A0UitjXj9RDM76bGeed\r\nqELRuDZbU0PG2mSp7vEe/PpF0dB56r7AUq6+uQWu87RfcpctKbBO7Nm2fe/C\r\n7Q7lDKTFXh3rJZGVCyaW3TfXLLs74vcKf2tHSo8qF2uLAu4iLXewB5c7RnZN\r\nBshVDmbEm7X/rZS+7y9SuKkRcZeoHGSgbXCsA3bcmexVieatlv3eVkduJ1LJ\r\ny8acAb0KUKAsm8B2g7m9BpM/xNrwpTK1+Nd6Y/6TdKU4cbvkm5K1Tyw2RaDO\r\n2DzUDKgUGaSEn9bVPsux4krqShQJ926ghb8Q5NHZJWwDGZmCeNO9D0YUiBTe\r\nwR5PGvV63tkZaPRVW0MLD42dNQ3jVwR/pDronfldEYtcloO0AC7YtkBtPiw8\r\nOKXSDx+vpbR5JBTFi5YRJlezMaS1SQVhobE=\r\n=KkbC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a0f01f669.0_1651868049483_0.09750164882120083","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/typography","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3624c7f743cbb8682a0091ae2447388bcf7444fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.276cb39a4.0.tgz","fileCount":22,"integrity":"sha512-axZQr3e7mkUr0OtvyHGOlaykekw7pLk10fS5GEhJQEEZ605pCxY/OCbHKLfGjZrjPsbTXkbHKRk+Vnknvl1dIQ==","signatures":[{"sig":"MEUCIQD8hwZRtrh2AKbYxNMbuKXbP8ABFPYx1IjbBYq6DENaTAIganZTzl9DttGUYa6yXlo7xpdxXN6VJSJX09yoIMWMcS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZOVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre3g/+MJ23xwrass1cpxDYIrXZoskkfWE8MwHx1ExJhesloSVzje6M\r\n2o2tDiqDNnlgXES4kDjKx5ruBSIUdSjXe03VGMZkSiIj99En5skgna+h9wtI\r\ncpokaDp69oze7UoX9fT/PbgmfFef/AuJGOSjw8paGtbWY2Zi2Hphq+blw7JO\r\nPo/qXhMVOEQCsalLkcBlzc+Sp7i+JhsmJ8CSrsYpn+7TYb3sI1vOBehf7FyI\r\ny8RTxTFjkIsIIKH1uO6AFfwkDBruZkUY0R3hEeKFcBpSegk+Y52iQZlIQEKf\r\nmfR7POYwsi8exG6Q86pEXm2Qaiw+ZrGc2QoN8/wCPfkH6FXtL68X1FzXeKqr\r\nHIDmk+63ybHsT6EUAd9Te4bwKI5hUICdYnIbVWhcGoNVZmKXHv4yH9S3OW4o\r\nTCpJdZTPcNGBCT+b3u8Y1/hGQL+OdOSeWDKDQETLkORac/FBRZZg5+5Ss7n3\r\nKnw+rHcyVYq5zogC/fzhs4i9iO4+398NjJOMbeGCHokhPizQpC5z8lbXCpr1\r\nMC+g3Y8vCQH7/DgRMNZI4rwAK/cGbdbJ6UBKLxrn7021+VERy7049mdfHUVZ\r\nyXl6IP+KdWSMOSRusH4AewPCq1uGQvenvzftJIbl/ByZTGrFoXIJq0KFYYHM\r\ngYh7E3dc0IVR/3tc3vP4BalBiS782ouPBc4=\r\n=XFu+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.276cb39a4.0_1651872661308_0.8566285779259746","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/typography","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7b1f5c8e2183279219da21a9b9a6a448958a0f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4fe98ed70.0.tgz","fileCount":22,"integrity":"sha512-2owmsGWocM7BZ4zEgbbMuNSgleESSwZXRlPUvGf5f6s3DLZmGGRYFvf9xcb5QMpdUwgQgJIUjYtrnVpN4cF2kA==","signatures":[{"sig":"MEUCIQCYHnSM2EqUD5LdJ+4N17JjbnyfhWQjsgfySdBBNnARoAIgCt44zJSjYTlk/5226nsPoDPA/1xj8Hc8IRGHPSc3nlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZlVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYlw/9GvlhU9pzbfAaPwmzbjmN2oVfLVidAFZyt4RA62C/8ftSB+wc\r\nLGGYGQaWZBMUWmgSVxqAoFmFHpDqOC98O/MYMp88dOfTwUb8h0OGeZBUXDzF\r\n+Dz/3PSBEtebw6h0se3cJU0JDLqG5gVwrXBUuFURCXk6154HBYkXETufM2W+\r\nJERid2ZGvmdZvep+cP43Ty/FMPL9em0f3PtC8kFl0u78CGpwlRoR7bzAG/52\r\ntquHbTswjheLDm80xrDup2pwtfO9M84EpX2qWHOcoQW5k+DoLJE2RWsTzutr\r\n02QpIpol4dhuqLO4gUifRMcHxYmLlzZeYTJASO5y6n6gS2s1dq1IWlgqQSPd\r\nAK7XT1Y8LE22bLNeJO3xiXEUnaGp0mISjyFEJen6LdvaMczYb5StNinq/bX+\r\nFzvxdj7TyPdR/s2fx37SWXHLqvZhjipL6UUnCHPknlfIPVHgUuiz4ITq570z\r\nA0m5XMp0JjszcqR5pRkoAtZyY8c+0KS33Wx9hEpF61FaDIe0AgAGYj2yV5fA\r\nanR6OolOh0oylTR0HUaBJqLMqsDtWdNfvdwbC0OOdL7DlU1nZANzWHFoNhx6\r\n2pyrDRVja8x/xr3wkXdSZKdfpjlMFEeFdSkPdbjQvULhl1Ir2xxQ0Saat4U3\r\n7JOr1wFyaV6MBL8kuoiGUoepKo1xlPSEKd4=\r\n=be2Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4fe98ed70.0_1651874133409_0.8792942214068902","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/typography","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6f4ff5671c396b68cb7d15e896679f80270cf4c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.58b130a3d.0.tgz","fileCount":22,"integrity":"sha512-Kx9ez3aWwEyeLVVmmOpsAqN1fyYpYF2/2udRWHaldyhC60mKzw9RyZBkiy8Man99bijReyWRfacN+kktfJ4hlQ==","signatures":[{"sig":"MEUCIQDTAYenZo7USoZBJCKkK0pIO0Zqm8vN87op5RALNHVp6AIgRydCF5jj4j7TIk2QUjEKulInwGt5xFMMmqVDhl5eAw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKyBAAlj4SPJ/2KahYEJ2NEGOF6mgSHLdiJlTPvEPoo96io1zyPJAV\r\n+Ky2ozF9RCJUy9MYhFzAhMP6+F3P56ZBrJ+kAKa3a33lg1SNORrOXiVZvXMg\r\nt0YNm7C7a9pd8r16ZquwfeRYnmyox7udOezV9SSm+gIPEX36a2Qgdk2MLOnd\r\naX4UlDpQ+mflBIy6hrE8K6pEznyyC06KsqyEBsaI29PhoUwHQurcbqFOQKZS\r\nRFx+Nt8MFgTUR1D7zQSTFJ3g0soBrfldKe0RbXE7ErePgKyXRucfy+lbDu4Q\r\nYdymL3pWyM26RwjeM9KyO6UFu5dEeCdJ56SPG/2F+2bkY9B4MS3KvzK5LwyT\r\nrhlBD88hWf+VSAKD4bovhZdR68JQFVNQvIfO7OuZh4foizgiQnF7ju7OazUf\r\npWW4/11VTONAh1thutxQW6wB3BHqhmyfYdFhv4SyBUwj+ssf6eurXjNMmvc8\r\niZhXbHQ+Mz58eiaQ7AFP4M15+KIv1BdMemuKeNdY1jsCVRxTH3K2QLg+1Smw\r\ns1GsEW0jDSj62zS6DvoUf6Wdahig8NbhEXAXk7cEhrF+WPVpqhxtS1vO3tRb\r\nYGUwXbjSkJH2dZnVEJGuMGRC7EoMgs2ZNAw2dt6H3Hc3/fVkO1YmHsLdju7e\r\niQhFw6OQ8RcOQiegHse/LXfRmRpfX1+gpFM=\r\n=+t3E\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.58b130a3d.0_1651874272329_0.15776001489151104","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/typography","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c23e3e077027c278831596fba010ade55fbc953a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ae278a2fe.0.tgz","fileCount":22,"integrity":"sha512-6SSKf9dTfCmWq09XlynuR9ZaZxy4eplWP0OkHwc4tNNzkMVqxDkJchRIjD+9XC6YYfOUmtMny0ldssgefOV7Uw==","signatures":[{"sig":"MEQCICIv/W+aMILYYYcKc9fFd1FAlZeYR79J9smG9vgGRwIdAiBEzkPFhWpDYFdQl9Ld5obld1yVFuydK5UBmfPp1HR1xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTITACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZlA//QyypmZ989CORKggkrJdHR2lvVyyJ80KOrVSnYRR7xpQqfsVJ\r\nGWIG3fUGh9USH1iWZNJtsYo9BhAfEpwZHFPGYmobWCC2b63Iwj8RM7bjEy7J\r\nrG1LiRa1nqwlxQjZnUdS/43bInSESiXO2LSsTa1GfX98atOn4EMrM60sZpw6\r\nBAwZKzixiHZlNqPtxowtComEimimc4ThoUFbSW05rdEItyooqlY3wFCmPtPV\r\na+L6vQ1VyLtiWdWqUERO/G89Xvyi30CuKB6AeknK/5e6aHq/y8qLS1jaGcew\r\n3v3iJnvIOMg7xxMtHyUztvYkTK1lDbm5uSec5bv/ew/eqO8XNlykVh8hqvCC\r\nYThDKZYs0TFi5dwmzJ4GfGE5KWDXAngd+bdbsYq18AcW21g/YTAaw6PHUpDY\r\nLvWkm22nTuYNYrnDxEA8hB+nb1pllqG6aTG3xefiQFhaiVqahOCPTcyyxevk\r\nqn17FfoMaOVi/wDIPYumORim1UeexP7bpQP8/1y43QerMv9RXXRpVFldjN9l\r\nmLsI5oF1ktLytLbuXkJhw0J+YWnNbZVy7TrqNPpsXPRaFjJ6VUdGRf/38BwB\r\njNyg82RwQiQxzyHF7iZz/XDeXjwH9/puTKDW1K86b6gGwBctzJbSK9U8/hTj\r\nnI/mceOmypsAKkvJegve0RgYLUZUn/mdEug=\r\n=xJrO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ae278a2fe.0_1652109842917_0.09462220323772108","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/typography","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12b22331aa39397a426260010f04be4b7c121c3c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":22,"integrity":"sha512-CIanLIBGORM6p7Ly5Z0PUaRAubVpVm4cHI68vKePmrXmIDEgJZ1Rnk2Up8XjyterLmlh3+eGhie4Qpv2vmohIA==","signatures":[{"sig":"MEQCIGWKdYh/zZHAXfkPAHibMx/BnGdOSZZypAcWK6Q+s8K9AiARGuG4tffKguRJ3De2K+kfTTOhIsQzrdlRqVAiVCIFwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyH2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPkA//XLi8AYvhPHChW/tEp4ms5Dsbd5ZDCMvfOUmiR58GYw8VRH84\r\nEbZ6F9tCtTXMRVSgyLckcS9xhXs9dqUlZz0/T+0LTbYtZ2k2/nEELrUHXZnN\r\nGXeKJ1ZZcv87Y8A3KZi8nTXnRiU/dxTYR2S7QmISoM2Ig+hdqdDIyF+h2PkS\r\njDUIyY6t9hctSHISw0ugC5iZca2hXhzskvosv2oCf2F4qA3RU/ScQxI1rorp\r\n+2Nhfv2J5oWLV/pyyoQZaMEjeueJR1qK/kHDMlGC7RmfdyCyaeWBV1wsjhN3\r\ntSU98qQdYUkQCZPFXzjXk8p1zU6TSCRo220mPWiaRkkJYKT0scXvCJcI3UJT\r\n6kL6spluim7HdtFgtEMHTn/NhwtLTUl0gp3wsXvxuJ21hn8ik5YvgVX/aiqN\r\nRrpCGh4r29703rbcMHa/y6LsoYemEe36l6ZlXW+fyOIH2hMeV3FdbgoDRWao\r\nicewxm6W+1yro1l4MaRdVp8n+n3YuAHEagybDlYo96KbqyHUsW1KvqNAq0DJ\r\nXcDawzldEhd0LAHRTwpCq2+M5VGKguvjZRAURXODLHqIqs5Ecpz5Hsvta+Oq\r\n57uWGmCo2XCxBSyFqLF8kH8oWkNJJ+dQlJZeSgG5BjZcJHje+20nkD2JMHOi\r\nNJQ8t+n5XQ/QOtXKLamDqan8UE/M6MRezL8=\r\n=OMvi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bebf5bfdf.0_1652236790511_0.4740028171132489","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/typography","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"806fe76777152e2481dde29a1bcbf6648bd19a00","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e6072cd6a.0.tgz","fileCount":22,"integrity":"sha512-tAzv3UlLMQfdLMuR34CZf2dwJCwjhODoNuDmJqMQbWwbDJ6zyswUiL5tMC7kqlTZMG0R25L7tfZzJruX+ey1Iw==","signatures":[{"sig":"MEYCIQCMoQ3h/qnP++xtOwLIqwodiQGlRbc4eemA3cmQw6ko5QIhALzk72Rn5KtNNwzUfy+H08GMteoAqMpZ5rggEnuEudKR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2CQ/8Cw05fY3sX08He9xMn/xeSl1jtVKTYY1NT9WHhA5EeNehTd62\r\ntgO99+bIZmiDNAQoJXySUm9Poz3zMPijgjaFDesV9FsIR5EBvLdGYqEkXLF3\r\neaoIqgo55SDxkTrZ04ICevQrJUzroNE8BMsj/T8z0Vj07B0gNu9gwQRoGw+1\r\nFITLqQcMdORSrT4FSH4sDUhUEbdSbuLC0OyQcn3mr7H3qRMopn8zqnKnlqDV\r\niO8F1T0fcS0oc9+V3NOHt9AJy0Q85MCnOauS7f0QepfvvZ/bqVhVCA6ZdIV1\r\nA/Kx6THbyKiDq9x2kbMQL5lhXFvZX01TLJpkCd9W9MYeCnkintiFVkfzmeYw\r\nzABChwwXwxems53fcNHQ1E/uMeAHYE1EVU5T600zA3wTcffixqln5pZXUCI5\r\nHwLtGUWzLbJP0CbACWVlMcRdnJQrItLFwLaARwpj/LWCXj/6nRXeY5N4pPTG\r\nUNo/5Noo7wQfuzbpDsHwY48CrdGw06VinZqts+w0MH8T4iR8uJUyicnf755L\r\nAnCVKKKvOfUEXv4/bQny2FfvmEGa9w6C7dNJAVbZ35T1obml0Ax8dYkSW/K9\r\nbjuKfujUpFD+DeQl8KIkcx4oTVKsN5Liw1GTuOHQYrMKL52tVdLvz93aqxto\r\nTCKXXrjTWNUtj6LqE1Q2QmUsDzxIOb3AVlo=\r\n=ZvlI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e6072cd6a.0_1652300278228_0.7541651779264844","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/typography","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dea10df2978f6789a414879d28d5e41142aa47ad","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5b40eb988.0.tgz","fileCount":22,"integrity":"sha512-yNVZMVEx3lX1OyHiDfTz4AjzqEsKrJyex6WBdwv/Q6uf7RllM8BHDzsyALCcUl65YVd0b3n7qpRCtj9xejT2GQ==","signatures":[{"sig":"MEUCIQD1uxB5AT4lzNRgQuORSgu5DAKg9wQZsgHKTtkz2gE/pgIgU8iTgh32W16MU2mWH/3E31MONIgFK/+hVnj7emIh9Hc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHReACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNTg//acPr5ymaW95H/bW5B0lcRwsWCp88gCPymXwl6kVPuE6weRiD\r\neC6QYqarYps/fJBUnd/X9la5z6AvWNS0aydtuC+t51y5xFx728pQ5Lqb1zFX\r\nQVyT0vHtvkAE6fn/cPZZB55BU9NkBT8sFWVOE04WwX6tNSAF4mz3B6V6bjW+\r\nNZNGCC2jcJtM4B5zHKIeO/oD2jBrpSXCb5NqZtoxQVHoszuZGSG9dt2YAMSF\r\n5vDfQKWdgXOIpCMgitC21qslmMXGyBnbPg4AhS0L/pBuQPVLNouzIyhX3CQl\r\nqq/ggIUe1JYDaxLfWHQ0VE9cqWI92nwxi+javHNeN/LLvgyn7k0Bo4wcMKE8\r\n8EGRLHBZjreSQ5c0cBXcFXOhCBJg6ZXYUSN16RiOVFt+CyrIMh6CJtVVpyo9\r\nVQ949rGnyT9uiylz3ezUGohQ93LDXbv2koDZjl1Iz06HUhU1MB2IUIqQI05J\r\naar12r8R1RVlZ3/lAuOpBKwb9GYWU6OuKRAvTpxIXUiMZwhYbyafsSI3KPhV\r\nP1Rwo4WCpZJ70ge7jk5kXDFIYVUkZ1F8ykxtvum04bN7K6DF8aAKscrToONC\r\nLuzd5NUMN0qqS9pr17Eyv6RRbSGZ2LtNjkWrIXFQsJfXNBakOBHLeKVF6+gR\r\nm66Koo86+TehE/VQ+0CqeI4Iym5NZUHy0M0=\r\n=2WvL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5b40eb988.0_1652323422265_0.98483521951347","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/typography","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c29d3c6670872d396f376e3ad054ca16de5545","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6a61d62f6.0.tgz","fileCount":22,"integrity":"sha512-GW+bbPg/4zEoOft4TWQmH7kfvArhTungCYnLEpfUrTGV1wYtT/AUoNURtCUTtBStgXvHKKR+oRDZXWMlGiEkkg==","signatures":[{"sig":"MEUCIQCqqu3073Zbz13BYtsZc3JXnHwBCJrO34hc4RHToN+2KQIgF63jimT6mk0x4jsHfr/fikpPtFbreq/pzCMT5awFM9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW1tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorrQ//fw0Tw5aDsChhLp6N+N6dFwSprg7s0F+b4p2Yne1SVD3hhVY7\r\ntUC35IUEvDa/9MIMssHlbDc9dIdwCoGbekaipjjYwaUooss6XadWCw36S9a1\r\nq5X8yjeUit2hoA6K02V41DCPAVSSOn20kPGpvxKbjRLR1yOwiI8J2zesqPPY\r\nB15Q4L6mcmMzAqQ7AjoSfUX+DncfgTJS6DlAhFK9nbleX5KeWuJwJmXrPwCe\r\nqOiMzbBF9J07oBhL2xDaavVew26kxGZyiVASHQxbi4cno8YceivbqDu+0WJC\r\nwdTYU2NQEGeUD/1gjf/KI8RiHHbvBipDId8KFAU4P19CKlucgBEdxzPL9daD\r\nLYJLuYl+RKQa5zeM0RXomv01ieToKuOpbeu7UX5gR6Rtc56OU5tUsHpKhsnx\r\nLoUw0TuIorQsq0g8r/q6zOqVIxUQRQqAq9vsXuaiQEiGm9a91T5axTDOGGdH\r\nTOMTG22+fua7/o/LNggKZuLR9fEwFC6npWOsdczD7A0Ws58/DpEGThdd3cGN\r\nqFRQ/NiabrB0pQfeMKyq5iqji+eNcizpzkcHj99IV/PDVknjhurjqfTgou3b\r\ni+Tr3XtxnysE4D2A0SJDyBylTd1MdWoBrNXatzaUpYSjA7wV3DucFNUOa4HD\r\nDyxMplmg6jXPCgnxRs799LNKsiiRlh7zR0Q=\r\n=aAdh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6a61d62f6.0_1652387181220_0.9105817953990798","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/typography","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.05930a453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5825dd9ffba1759f447a372f1904e2c1e73c7cb6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.05930a453.0.tgz","fileCount":22,"integrity":"sha512-oTofjhuXdj31lE2xq6+R+lk+xEYvGrUUIZfAVXmWk93sZCCuAmuVYJ9TyL8GRR+3c548V9w73My060UTBo0Y8g==","signatures":[{"sig":"MEYCIQDzpgAXJcmF5bk4jD1SaqCGLp2w6whzCbwt0sTKnqjkXQIhAPmE8AXhrWasYbNNkB4Z3Z2+gncASYz4cv8Yp4Sw9f+T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqejACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxuw/+P4OZFGT+JM7TpJk+KqqUQhCtgsBCg8g1Q2yq6EgLhAYgJH1q\r\ntPsboxQyberDeyy41fbMYgY2H5kD/Y8PvG6I7HQJBIeQRsEVfmdwmwYlb1X3\r\n4E0BxI2rvKmCoaMwOtDg/a3GR9AbrpMgU+ai5HLdJ71UTzFI3e76gzJJ4v/b\r\n7gzFoM0Vw9MioA/0ktq890AZ+/2Eo1JmU47QwAXfoGjXk/hfIrB7+qVKZRzU\r\n65YvG/Nypeafdyc56BGxFNFlRhKEVFrmQmmpo/mSQahIuI85twVl/2FlGgnj\r\nzDafT6kna+ZxgE3Rz4wtRACUSLbnidpHTiljneCncOfoa3d/mJhsSNmm2odA\r\nyfwFM7+J1Tl5Dt8ARKaIpIWZJt/QuXLFj1/OmKkYS2qn84uOlCLB5r6no5T1\r\nvzvsT0KNzarrpxMb8KGTN+vebjQ/1bu2U2HLzt5q8gEeuF3viKljlC9NIOCJ\r\nrWSGmPTCSD348Q53otv5tWxuzdnfLbnWCzCeULTlCJbA/2T1ly1H1ckLxuE2\r\nzUE11Op3f41KbfUekfxFpkafbPd+5ul6UpmUYWwF2llHIqVkIRdgcZcWZ1LU\r\ndzLKBhQrtGEsDIuw4RCiupWEbHf+m5xkqgdBjPIgXWFVts2vURc9hOEhF60X\r\nZWfy7KoADzA/l03CHjqOZ8TrD59TyJ5pZgA=\r\n=BC1h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.05930a453.0_1652467618778_0.5170079963987924","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/typography","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e6ba01f954486e336536a1001ddd8e6fb0ffdfc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":22,"integrity":"sha512-VXm10Z2Nk6FF2XoXZLdFIJizFkIZp/k0hQ0tFdxNtxPhWwsxOjsufutVLRqhCOft7KR3flUDAF8casvZhfkPdg==","signatures":[{"sig":"MEYCIQCKTa69U18lSrrV97vNQrp5IIwPJMsJ7LxG/HrvR1r4CAIhAL0DPpv2atfrJ4r49gYuVmIbEM5DEjVGdC3h8zjeCXdf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWyBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmplbw/+LR4x0h78zA1v0TrsMU9rXDwain7l3Hn60VJ97/aOVu7L1Alu\r\nM0J8LaE10Oxuv1dA4WS+jrH9N3tp9FM83/0WT3QBeWcxrwES0srUaymGz6oR\r\nxUkqFvfdRoXeSQ9WzF0YEuGvBpIexdMotuhTi9wcB5ZATkapTERzchGaSS4x\r\n4hve4Jy3GU8cOYpH8MKmwBdox6uRi5/IhmMhvsZ3mVNs5ytkQJMDQUeh5DqD\r\n8aGaBFE7oDaIb4GO0W8T9zkudPbX20wBmQsIJdsA82lyvzwkPISN6Uv6m71y\r\nAR4SIP4MVO6qwTE2adKC9jLh/JucVP4WXGHPnY7khz4GvkQf/KC32mv2zi63\r\nBr9p0Zrz9feZdsjO32t2dQvGF8DyBRvLCNf78O1D5wfWiJfLb3+h8jb79LTN\r\nGistmUClRFxnGrOnZExcLS6ApDm+Wf+zUyT2WGbagbM+G8MSoOn0+4Z0QH6N\r\nFXGzsRzrE4q0Uc9VPzWTl74I8S7kqX1BPkRP55hjvpNMjCWm7YafZ81smis4\r\nP1Ut+KYWE78DSj4gj8uhk7g6xgfctst4iHlT50fTaXjb3UIgYEaXTQSvBdfW\r\nMo5NFo+8WHjfQbouEXDL88s+AMWj1Aib9kYV79In3x0XQnN00MzJYRXN8VWj\r\nRz8ff4c7Ye/nR2rAm802zEJrZVbZEWiok+I=\r\n=yil+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c0a11ef0d.0_1652911233716_0.46337111311893997","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/typography","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"992599e5de077105d38300be8d4d5d3187e9dcf7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2f9b268c0.0.tgz","fileCount":22,"integrity":"sha512-+6r67yfJv+bjZKOEOid3OSbwGlwCErLytcUcCms8z8IsTdqUki88TT2MWmhZI/PUkXXUYaFRsxntbScJHOjo9Q==","signatures":[{"sig":"MEYCIQCqGseA8mLRpCtVjyoe9q3A8wCNUHOzF/SgNeAP0n6+oQIhAMyKjxyVRm8fPOS/U0KXJOIwrkEnNKUtW+2x/drkK95G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+y6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+cRAAizI2UbjPf65aZzg3bWVvXKiNhIncXnQb2iuEMkGhMQ9KKeSD\r\nWoqOIAqeBJHVP5AhAlXHu4ZASKioItPWOabR3qhEwRHqwOj9Ud5QZYivd0Pk\r\nIWZGKcP3LFCLAqrobq+XdjoKiSgQwFyNSGZvMIrqbgaS1cXEuQvRXhit+Apc\r\nTcCO5BszBzxZSAJormGQ6kDD4gpCfD/TR5bJgNVyBAi/n+AnUAjMA8dyJxAl\r\nTAu71GDVCu8+LekrkIH+8gQvB2cMShd7YuaMSbsy7sMZPU9EIhbFTvlRvaok\r\nfOSNfCU3eKi0oTgcUK9dLk0y0JIiLDynCrir3oC6WLdHF3kLOlVRqkTSBzf+\r\n5R1LFLuaRa3+NEFBHYGzJxJd+lPbEtzm44DduBH13if+hYtHX6VHDQtYjC30\r\nqgaA/8P4BkY0jeGq6CAsQEvelY0ZtCYQMPkl77pBdh23y5GLsbx/XijWsoQr\r\nKsGWiTrt1c+c5PVIkKcuSNsDw4FO1d1VJM5Zcmf2Bylf2MlkWaMHzVKt4TKn\r\nYpwE8/yYMP8YCotQKixsUODTfzz4lPnLEMPjavHInrjSIv/jInESEvwYUZkv\r\nZa15Jyi68fhb1ISba2WrJBr3lmzCvABl+X2dMF3iaR9I0/g9cBoM9Bj6odgs\r\nNipqInXeCdtLaY2qMcsHpl2wspegKJk5rTo=\r\n=9i6a\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2f9b268c0.0_1653075129840_0.6377715733757936","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/typography","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7741345b8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c653972e8c08b0f783d94467ff290eea8c537604","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7741345b8.0.tgz","fileCount":22,"integrity":"sha512-9Cl5hGkGQ8GYJOlWaDEBfEC3hsL1yKXqw2yznkkRxiEP9zvZLNSVdp50JZL6OOCXI3TvK9Y4Hxf/P25C1v2V5g==","signatures":[{"sig":"MEUCIQDfmG22eEBYO8d+pGMKVAPEnu7gAuTniPOuPukSwxtkUAIgRPT1lq+TO2fmrUzqdmfYwFZheBgOzRZUg/XX7Llv4gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/PJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZAQ//eTq3pRp6hV6J96DM2CW+41cDXnSv4MMrqvlg+xXwgzDO7+cr\r\nPFxL88+tUb0sVwqOAwL3/061ftfPgUlfasiNd2mXxwo4do9rFaH03fl/FNad\r\nVLmhgj0VAtJwAm3sERJ2hKY8wHS6QE8S4wyRQawKOkusP5HdC0TSZsD2bEiz\r\nVwjdcFh/VrctcNivunPfydV22ViaKcnBlAquL/Aq8TXwpXxpcpt3dcF4E/XN\r\nF/wrfc/zJUKxRAFgo2MMSTXbNv607ME5k/W+7KQtswdE10ySl5yWqCFlqinz\r\nWwL9agnbZ1+KdmrBZ+eKcP9TPgcje1OpXKwLGD0FZSD3JqfYvVD6voQxMkaq\r\njnXThBZpHEQbB2TI79xlxbeK3kBmSmS3y4XPBn5ftQBSI5xOgZpPTIWLF2jS\r\nOpnSxbcKMRIOlQrLtMQWOKHIQ8TVdBAC7RHM3C0qm8amkq0288mvrZbq/pvs\r\nnkQgo49dWUZJ5pzhb8o8vFICyPECZj928cxrC6KoUnEHyWvPrIZMzhFCLL3t\r\nltQyjGqvlOZ40cXar+4egLq4v1JxMr/GnTc2lkVHYxFHhz3BaDV6zUn3qDHw\r\nfFt4c0cSa1PgfRuPYPegDyiTrVOw8DLViA8IfzDJtd1kTccOw6f8pqNXAnlE\r\ndAjEFRujkMhGx1uCVhLBP700hm+U9Z7SGUE=\r\n=fosE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7741345b8.0_1653076936954_0.2657340978598759","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/typography","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f807e793f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21fcd13c2d1c96a71485f0ab18844a7f06bdab8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f807e793f.0.tgz","fileCount":22,"integrity":"sha512-I5b/MwSWWHsoRJ3BkAzXOavEdJFgmpwvl4NB/9Tjou6EhHCI5aYKC7tJa21BvWh7EiY/14frpk1XN4MTmYegyA==","signatures":[{"sig":"MEUCIQCdps438IHcraB9EIo0Eb2+YhIqm0dfHGi72iNmMn7V5QIgDZ2ceCpHZ0I4COrTk0bPGsYi/MP8vBSarnSgt3Ci82o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBRbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPbBAAmZCSAtZ7mtM5k2O1qR/pAeXvzvb7HBXepmQw1CcdUHuD/Ei1\r\nWY5dNjuZaDhPfUc4a7N9VB38/yazLHTFl5y6niG5rb+YpSTJ00ul+QR5CnTl\r\nwnTZaqdHtettcRnPfAjbPdBpZvJ3oezh8TDc1lTOUYc9KJbnppmivtqFI2po\r\nlJDMmUlCbrIa/CN9AZzy2R5ikWwc/S+AaPvdnlxd+KmRkAdU7y2TUkauBEog\r\npY0cgRBDh6f+Dd9p/p1blPur0Zlmv8xCMhueFU+/59k1hZZRFrC5qNdgjmof\r\n8BPmJfMGnxWUx35INM6L2XeAZ6oylQeEA/NN4bL1EEEOi48DkmbiU9AJVXIN\r\nSDoHA6iuH3S0pKvw33ZgsBGG4ecBHE4fojewQyXvpEYs0c+VkqWjEypTbF53\r\nVy5Wux/m6MRuPP0EC6Z7yLDwSde1rNg8977EzgMFz5zIMy1QdI0+ZRsuf6YA\r\nAWaXkmNmgQ14QJu2eBMv0NQYYqfioIzQ8oVbzLSLod6EClUgcro098KiXIvS\r\nZKEtj9P3OaSFY2PgNKLe0h0DEb00iOoH85gbVDIKY5RlakPwscC0ym/JJv02\r\n5L35ihpL1if3rTJzNujYC+xf+F1ep3TFVBvUNvgA3/BtTZDeYspRFFQc7BJb\r\nc52KjeOUIogxAhy5MkNmD1/6Xs95D8AkrgY=\r\n=FaeU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f807e793f.0_1653085275392_0.30323592303048263","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/typography","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acc3857a7d97e3a67266e24d48937815778a2896","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":22,"integrity":"sha512-4NjjmnzH6Agws24jW0ZArw3EdMtJTMLwonfXdIcsOrMIEwVXk/saozviyKwTAXcy2Td0wfN97Hx+sl5ZRHw6YA==","signatures":[{"sig":"MEUCIQCpG8dRBtYIgaomoCGLqRoVKpZPOV+2+DF1HvmDlRpvjAIgR/jydwI+9+V/DdnCFoCbkvqprkJgV2KWDYcrOGN1mo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6DBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqdig//Xc3I0ipfs1rA5HSWmjstf1UzbY5FSV1+41PR9BknnRXKHVwZ\r\niy+lcoJhrAJlwiMIOxDthNXK6p9U5LG0jfAVz9wIbhQfyTJbUggO1Mr3isid\r\n7eCIWv+v0mImqxosBrTkTC5QKdrFAHgUmfZORqoj3QIQf2Q2G94emhLuUjHK\r\nMo5M5bZ6B8H/pjUiGXX3Ngv3oos6Cdn2UhNF1Qq5JyQ+wcAdy5VOC23BMuC8\r\noMwf8cwpcEsBl5LmHq9+3sL8AkqU2wM1+JIz7gCzMzwofJ07wFmRu6kj0DwS\r\n+98r4mYvyfCCN4jGl79zYNQj9rdb/vHF17Sely6vtf1HP5ZtLb2HLiGSo1d1\r\nUiKvhHgc0nwOVZVDUgIYUX2l1A0LcUo2GIXbMtgVNmLxhQUCCZAAY9jmKZNh\r\nFNpx7dIROl56WYAmC8xT4W/bIOcMuUP3r/erpKCjY1KuLFkf7bWXFp64vOcQ\r\nn2GPrwuskU/DZ4hmmGn1dZvW1qgdZf7uZW2TeTu2YYURuzxx/ES0083jq0e5\r\nsBytGF44/aBgNF3R1aU4rsrLW1Qx/CjHPsOc2iLvdC28wNMxgbwfigVQmO93\r\nalfNUIL6BPRr//36KqrEKsFVrcttZRafunOYh9s4//PDCKWbC47cd3JAHi4J\r\nIBzM3QPv38Gvh/rvIw9f6PWGdDJax7SYjOI=\r\n=2o2M\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9f53d4a8a.0_1653317825717_0.6506004464849788","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/typography","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f299d898cd33acdbd46426af0a9e24e4abfd7545","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.77cf00e37.0.tgz","fileCount":22,"integrity":"sha512-X5HGpayJzvAOLQmN3cWjO8bT8bo8gSakQkPsXcvo1Mt+xeJm0hbupzLQNz3OHx4r80kJlAEdye6St7k8iTnbVQ==","signatures":[{"sig":"MEYCIQD/qqkaJ4tT2iSfWQUTO5d4oV9OuTfGLAvX9SHScqG2DAIhALOhBgwEXb1HqbcvrCPAHlTe0m74OTvbqbHJvq99sKlq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillK9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD7hAAmnKdVmMf5dPdlf7JGN9Jjq9BnoLmRcdpAxNIdAmct19aVTSV\r\nhIySjpi2B30+2X/7RIrDytf3QK4+rhTERaLwZvq0coBApohzQtoZfTAuoR0m\r\nqCKxm2MRCTU4th6rlLPj/eJ9FGN4H7eVzhKSnBA0d6txmATrBQRH/U9mLau1\r\nzS+eNkRYLn9k81+iro09Gh3TSeLLR/roZs+99v6aizVI4oKZ0t3f0wnDwD2d\r\nnSVVGY+8vu2og846vQS0gMx7zagCkhX8eq5n/snt+oGPShDwtXBinJqTIEZS\r\nrx/eak6sawv/JF+6NOJlDEzkM8fyBB9FNtAss+uD49UKov1y83zh66tv0oJQ\r\ntjbFM1CLYV4hOD5DUQdRS1RRZslUwB4yzEIb+CxNhl8JbudV5efy3aqi1clc\r\nUyo5szDK8c/X3n7zCqK8FaMOgs5pdpa7WgPtCStlbtJhi+wDjQ7Ki5RWd6BH\r\nWF5FP5Byegif2Y1qvmU7t25c9ZTsH6gNqkSzxsOEHhKliTS2nep1e7VB9NRg\r\nfcw6Dhxkp4knuEpp+HRDKR8sNRMwLhwnRtnBz/UVFUOYVr+JtkAkikzd1WaB\r\nCEFQyni4O47enatM6TxuWSEh1MBp1aykZ3MWNsJ2NVNUukkAXlHVei85tN/D\r\nz6svt+jTMvBKINDjmXgd0aHNZIp80pbUD0Y=\r\n=ATAv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.77cf00e37.0_1654018749532_0.8006592265555061","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/typography","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"430de560090adb20d3c8e70ff4f5521d8a8db868","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3c7b844c2.0.tgz","fileCount":22,"integrity":"sha512-NnRM6G3oPbX6+My1EqFFPTQLylgph0PB4kkXfLKqBnxVh24wZkWkr5uE5c2EwCcsI+JktIqomyEOfcsXLCJ2jA==","signatures":[{"sig":"MEQCICApKxUONKQW3jCOSTinuRw7cGA/6u+3n/IHOMQh1fsFAiAX2n9MsF785cJqgnpCxMY4NnheMJ85soMBs4UR1RyHbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin88oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpRw/+N8cSIWcPdRNPbGSryHofpjG8+Y/Byi3LhWj480ryBoqiCVIg\r\n9DjnbRQUZ5aLCp10ODwPdmps8jGrSwwyiu1TsnPDF15azvh26iFuYxXjZEiK\r\nEcrvXZ/2Uocey39ArUlDCPkN0XtbtT1wah/Wm2tMv4u2DVrWB2T2bQxYnXWy\r\nQ/xLrLW3cNSm42jF2aq60LwTqqM8F7DYdvoWZr3tceuPR+ipwxtsTUBbhtww\r\nimhUUPjXF1cKIeDWPuEndi5A5FEruRCxT09fgnAUJ5lsF2vbz8YhJ/OCRM7W\r\nGbo4624/lsEpDhxeGghillb+BTpvAcX5X9jXGNCi88bvboCLOSI6IvcGgOs9\r\nRRFgrRx2X8rheFJFhkmGQS+X92mDtGubaqIPgTZQckpwNQyK/BwSna1dR/cf\r\napYfMSFHuVAHDx8AJHklil8hxCYUW4ZvY1Al4cygV7S8bktxILk88ELyuiBj\r\nLArBtyXmFM0QYtmX4twjDIY8+ZBXBPHhPAwqBv0vXDxBF0Ri0R8ocoulqpI+\r\nMWFHwsn3qI7nyNQ641S9kgR4KPtMtZeXU0nnOo0B20g3tl2dgVDTc/CYgUlA\r\nCXXex0xazrzyCUzPKdM4gkAo5FNqKtpMSInwYMtpojfCSdOt3wo32UKdr7QP\r\n9siy9jJs3yRfCsVnk/2vyONdjReVo/yHEjo=\r\n=g/Id\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3c7b844c2.0_1654640424155_0.7318994625312527","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/typography","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.df47894db.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cac83f30492090c754777d8a530258a58791e8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.df47894db.0.tgz","fileCount":22,"integrity":"sha512-U1KtMnpDl+7O+nvYA/4rW9df48mLUBchHPI+kXYNILOm8qLqaGYZFKbUFsatKZ2xWvZmGWHfDeUyK+sFP2tJOA==","signatures":[{"sig":"MEUCIQCQmRC14TDbYF6UHIo9MybtD6qRmkrqG9Y3QQb0c0bSAgIgKcbWGcVhPlrYXhAHXUcyzW/Ak20eu5pOSNQDGAEQYYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip271ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopyRAAhkE2hVf9CMshNo+Ynj9wM5M/ZpjTkr/Ky3ieSp3aV/RnSprA\r\nZ71YdU0Ol8i+Yjv13vOrAtjqnFl++T+i6b8/7a1GlzR3GCX4lALMvRwFM5Am\r\n//0IBf3OkH5E+j02cSsYsXZt03cRBm7tOWKko+y5n8dX8pct4Q99383kj1+r\r\nqp9NXaYauu1xL43DZZBpVKwmIJ1/p0nmS/yxbeOleXQEWaru31BdnQFes8f6\r\nzxkXTMk+MHRSmgL0BcFRHdQhokDd638OCgN5n33MJlK9gSyGCJVVIhUKZiPF\r\nYsrfmG4i9iuP56qPxGHSuwfdV7yRcQGcCVLq0noFX7NVu+d+II3lRaJPXHyL\r\nRGLhAs+qt4Wx+NNBdJU3qBzhtZsrtChYrKAdG5lPBMw3NhOKVBKb3rt3gbN8\r\nzv1fEcE5OPUkf2KWZrp55c81a3/0z+ZDUnfRmt4Kh/YvUJZebC/39eawzPXJ\r\npyZ+ayW4yXrkEgJW+AVhqId+OKPzAqxLamS4G3LroqLoKaE8KITv3mjNyd9F\r\nGsrOc0B337MJrZAMONuatRvWeMqLt+ohLv0lr4lmIrH+yo9iGPFMJwPiCoP4\r\nKeIYky2XR95nZo+GfSEOqWcjvAJR61sJqs7ZSzjMoD8e8ITs/aFPtyYGLFXc\r\nNgpPafxSy6Ep2oD9q83opErhSXzqTtpQKOM=\r\n=U/N7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.df47894db.0_1655140085756_0.9484813798891834","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/typography","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43d419da5e62c090ef2fdc5be45b4c58688070dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b18a873dc.0.tgz","fileCount":22,"integrity":"sha512-0LkGckcyMAT6wKILo5d1oeMBnR4W9w3CRT4Lophd5ZHGf44+opOjlREl+mB/TbNCKM72+hJb4q4tkTtWyInqqA==","signatures":[{"sig":"MEUCIA2Xvtp5oOqDsBLe2SazrKiwEWweTXaOcBfRcGA7+VmEAiEA/5EcHNemvIH9VDy/z0t6SnNsg++BDlSWKa4JVyRjzoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCrCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgaA/+IpDQLsu7JXOimVjha4bVv91X2JHcaEu/VLyP2lvEm469XASZ\r\nweaB2X+9Gdead/GV0sw7Fsnp4OpS0srdKOdgOGr4sLCEF+qeG9rnUKSgWJ4+\r\n0X0Gygasgn34F6gRN8Dv9JQRXq1oVqqDdcfa3Co9S6e4CdtMX1Tyq6wG3n9T\r\n97cC+xoTI+DfGaVPnYFfVuOC8RIp0oX30pfxVpGZ46zqjtiMrN51Y8VM55Zf\r\nw46AD1dvC70WXGeUVi7ca7u9BAR0q1sbg+mjprrR+mETO0KN1xjl+A/8KQY3\r\nrfcGQvLsnJ+tdYPKcQWXYO0J2M96P0Syiv8rOyseu2mcmG3taFZRm93ZExyx\r\nCG7Ooythxuh4MdPRJtdQqeFt2N+IjbUl0JQRFZK1MFPOOIapxyeRVVtRWWRM\r\nb6rBwQ8Y8VJlxRvTQHKVwew9K2r/adwL//MnDOTPUlqwYXFalIV5ZcOUmZni\r\nwcRTnsvJShPyomWZ4jK+LCNj5MaXmNffqbkZPN2/XfOpDPVi2fVnaYq7sORO\r\nYdi3kxTT8l+u8b9iehVFiXe5uXqaATLf0uE9pmu6lvfLY3zBoku128+Ny8mC\r\nxOdtlLeZiRERmjJl+k5Qy30AdcNCx00Etox6QuW+EHbFQfj7YYbecUdqe1NJ\r\nVJlzezRR8d8COKkbdP3QurVVUeiQft7sEWQ=\r\n=KXLy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b18a873dc.0_1655188162454_0.7600763696820885","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/typography","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2123c62fc88f6805cf9e3215edf93818f58a04ae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ba9c29637.0.tgz","fileCount":22,"integrity":"sha512-JrXRGOkugAYAiVSLLDEPf6bBA0W36KNlJwF7vzTD3Chi5FkghhKJaqnnTl0R88M0SZgp4n9p6KiR4tCXwzCe6g==","signatures":[{"sig":"MEUCIGsu5iiaJbOEsdVnAlRrE/LmwunNGqnM8prZv51HjByzAiEAh9+zhVn0SOkDjW44vQSgpRCskfiev0ITLfJNPY0ubTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNn9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru2w/+KqguGDPV3JcCz65jkEsOWGupJZiqEEif2nKpxFpl2FbuwHzM\r\n8mvpHo9QR2m3l9m93t7ye8JdtjIBgK7IHR1L6vqnvzWGkBd4wbc6vXDI8cJY\r\nPJ7XJ3XyftAyjwycO9MAh6AF1I+/ysr/dStRY+vjw6YYg5x1BuGTlPy/ek7p\r\nPjReBXqy3Aohd8r6yYg+8oHSLg5YlD/KHyJg+BisB1jfFmRPzOzSLjpRnrxx\r\nGS9m2r/k+Jevn+XfW/YJU+0OBWgnA0F2pHnj480k0O5VHSwVfp8FJY+yco+x\r\nV403LPEBhuvjXIKUGzMMTX9JEgNZFH/I+L+xraf2oXn5trlZGHItNjY180bU\r\n+k/8jlO0eGl8viU9zbB7DLdOwhaESGF0OVFoICEFaznZ13duvfIejHM2+vEV\r\nIqQthu8i+tyONegcqL26mi2eu3dNi0RAonDvqUpcDUZMGrEaeuRxGeHvR1d7\r\nn7KbWUI7zcZ+leb+VyvUdKESnABhTpHvgIILLVTsb04P1cM0i+Hp4pUd7ZwZ\r\niMxeyMs4yU/pJPwDD4MXmv9HDtvXKFDlt3vHl2pqeIbpenjFn6Y9w3kJLtye\r\nvxYxim3OxsI/iB/xE2SWYWoeHKihVZSJrTqCX+ejzbeRvA4IZ87EURfHZskn\r\nnWrnWgDPs/LA4aK3vXlvaCfV3/1eVxjIHUI=\r\n=yCPw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ba9c29637.0_1655233021526_0.03280461021693992","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/typography","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cba29e3ea4962307f2cb4cd4690e21c0ee0ba06a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9bfd12f01.0.tgz","fileCount":22,"integrity":"sha512-z8jYoqcxRdDCgYc3k7WWNGAy9XvPTo+s+UZMnHpLSTj1BEQQRAHeZ2+TMm/EzibnI2TP13j4pp0JioLg0WUTrQ==","signatures":[{"sig":"MEUCIFF3HwOIiVJ0gQgcRmPTkdGuUe2hbHKTw3SWEEg+yzQcAiEA8VdezEMPTFbHXjbhm0jjF4dxM1/Nf12e47KrdR5lZbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2veACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorKA//RCL3ZhntcRuRfHJzS8AbXSARTsx7k/OsIDWuMOUxcpYMq6nH\r\nMoRttVZ3Jc9w7PBwf0LTQTCre/TfEaLUGOjX8XUxkf5Yeg19ay3RoZy07zAV\r\nIWoK+ytzI6ykyyr4E/Z3zD0AwfQ9oYYwFG4ooLKxgfXTGS7P3V8BOFteCyj+\r\nKXjSEgC4HW+qP4IAp++CgvPhedfoA6bruf5kNoUXKWxYK4uJVFwWM2I+r3ff\r\n6vYBjDs72jEzI39xKO9gDogals5zBovbB2+H2+q8+/vg3H3l0oQ9JLplXqw3\r\nq3WZm5E/HtOFaE7HMG5OH2jNB2TWXX+BQ3tgL0RuWVx84GG/tgf3cAPyKLE8\r\nOe4elJV5J6Q6q+9gDd2y2LK6+0z+dmHWaZUbxZmecYdxoSRZgQRx96xVjY3c\r\nEKZPQSC6O6h5cuii+pk9tJEK2mckVqLidj+vSoFekZPlmbaISgY0LIXB6brk\r\nH7tZ9wUwrFCKeIv9uud5/m6ZSu+uPQaSWoGn0xm6UEZr1TdV14UNsOdDD4AO\r\neCdmpVI7k1DnTNhM1QxJXtNWhYqdb1sFVO6H9xAzZNKLcxDJ6dVVFfwoWzAo\r\nFPuJP5oj8mmR515Cts6lzjxFMIhJU306LFIc81g/3XVvN+mHWcLdouISg4na\r\nmvC1B59kwrhKYHqk3NPHFZmMYFuBw6DHn2k=\r\n=BvpN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9bfd12f01.0_1655925726038_0.2987441323628688","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/typography","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.764de225d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05db1129ff4c52648f8962d9fcbab1d86daf435e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.764de225d.0.tgz","fileCount":22,"integrity":"sha512-jqfYQXiR7FCTf/w3pytlKgv3YF1VsOQQXtbQWST5HLK3cWH5TPJnp1oHNqve6hqZ/XU9ElNT5QxrH7BgOuX4eQ==","signatures":[{"sig":"MEUCIQD03byR/gdEo5J5G2x+XI6gFfq++S6G78bxad9wZT+pQQIgcrcQ0rW2Us++FWAf1JngfopKQvJb92zWCFU+LxXhOB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH1AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKLg/9GUXPZ2J1U6zUe0+rikDcwmvZ8S9zxmCXcnFszRmzqQVYItCJ\r\nZhfhxAy269rX2b30LxmQIeHV+ZdDdsrD+OM2/0FqAaNOFCC+fIY93ITqdZRN\r\nv4dWqq7mhhwozleYd4/q1/LADNhGJ0+4t4a1MEejxGac865FEJu5qut8hZpZ\r\nYJb2t1hID2XgBqQSs9f1ZTVX2ItTZY+28WwUdRkXgCRMr6nj88o0yoPVbjV+\r\n1lRaPIN/6RnL3h0PwjJtpAOSv/cSpq4UKrxWD7eAS6NxSnKy59YZSrkYjy3J\r\n0t50EXqIUx3dMiRdhOEPe0xC7fnJUq7fA7fZhnbCyH6WMlbZfsusOjyc2Np6\r\nr3oeypYgW5vdwcH92K9e/4IHPwv1MVdnb9sdwkAoFWVP4hj8vdoVRtPd8xoI\r\nEjsaxwIhukxaLlrKEitW92x5kZxJ07cSBfAWniurHQ2ZCqN9clOXYVat7r1Y\r\nZDbVomNIAEV698jDJ0nH/pueMAJocqfTxM12ylSms8CUJ9HDq+1rFYqK1Frb\r\nM8XokMfCwL+Ri/vEOhhsRhXVtMzgl7mArEdV4tV5Ukbw6S2zAtSGtc8tNWD8\r\n579NA01tNvSPuhvI+tK5EYkYa52/nQHfa3g7gqF7sGZl+x6IzQeVJzZ7M/w/\r\naU/HsZZwqzGkldKjF+Bwf7d2PoBX9+7+fyo=\r\n=ZD74\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.764de225d.0_1656520000681_0.70448235586052","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/typography","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.31e517cea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cce5c6e7e5b0482e5d47b106ba50cf63a8e58b9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.31e517cea.0.tgz","fileCount":22,"integrity":"sha512-FZRNkPhJtEMrDWdBtfgrub/pUtOoVfbayWuN3c8RwEt/P7VSm+2xfahFnCojGPKU/te8CazfhSZfqEK/2OJEQQ==","signatures":[{"sig":"MEUCIFiZEimSJM8Vcbq4J/jpI22AthTtkfc2ZlMYgVeh9EWxAiEA9qOe/Z/Q1oeOLpvP21EqCb+PvVskCKLOO4WigV4yhDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzyxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqhag/9E+LvLVBtA5XcTArpOyfs9VnKGwZSggNOd5ZSmOcdrv3sxJdx\r\nIXYUSwTNUVCXkRDg0102u8LPlXH25Y5Tsi3P/czPrt3w3s0Py3nDGV7/VyR5\r\nwZF97dZmsX2aXXiWm2gVjEq9zwWtPPmvo0dBOZBweTvvJaTGr1WjnODYPkhP\r\nfRcj/TZzFeNZqAIwpOcM08zisxB+S2gN0jRENkVPo5Y57OKEiNwVWllHcN+l\r\nnlTMjvVwrEyHIsaonPNipzNq00+IqFwuZdrl9uDRRmkhsGax93o52/gs81/a\r\nXfafErKfk6/IsEHFHxCVbMCYTcl91SKZ7LOcBzd+rzdvX8/cXA+jJi+gW8B5\r\n76Oehl0N43ysexXQoqJLNkmtQH65+ID9eMW6f6DMvmjMd6FTkO40Gj/q0Kx5\r\nlMXELfBm3WXkiq2RBQvgJeuJnAnTkO+0YHphiLEzu+zGWMO/ohg4bpZSx7UU\r\n8XTFcbtjiWMqhD6JHpc2nd29QIJogLZRJRVeHnkEQlsIIVgmqXVH0455VUQO\r\nkGL/zZc0OLzM8TYFGcYJ31HS9lUahm/5PfxIRe6zEu1j2RGseFMfe3z2bkTb\r\nYDAuAWH/aVTAa62xyPQnja3UK61k1mWHE3HsOauvEb9biZ1uIinAvnLp1Yof\r\nh2zAlA16cjk+9SmyKJyzjqN2MgZH3oEh2pk=\r\n=pByD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.31e517cea.0_1656700081671_0.9157785091321649","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/typography","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784ae0488b55f41c330e0c44798ba8b89070cacc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":22,"integrity":"sha512-60fq/g1W0tdxeWvNwv/2EGYP+kLvoNMfcAgrLOlcuB4gUpMkDQk3ZWWpLXRot6ouBah9IwKA69JK1WKtF1XDJg==","signatures":[{"sig":"MEYCIQCPERntHBJdW7dy4J3lr5EbTXHatc1oM0r3SqkcI0ikNgIhAKuTsM3AXufSgRtnlO63geT4+8+P4y+YS72Zz/DTynO4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3stACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ4w/8CiCAvrnIkpGFmvEJd14Rgm3dI38xsyiqibUgWEH7mYWmYP0c\r\nbUGe6wVQQ7b0GYDce8miUIRIqgXyIp6OcfYFiVFB6I6kxFE33zEAhu+D1PZz\r\nPRplTGEH5g15GK4ifZvcDwDnnFp8rFKJGST5wVLRRr8UHLsO39bhsLmH9Mf0\r\nnjF2iBOJZwK7GhVofxdZkMRztIsVIdsSpmnuAeiCcgSscL1SrWBap7zFF8Ur\r\nIrP4egKyMzVGnOybjhJJXr1TrG6c7hgeQNB7YVbVxtMT84tnEoKGdW7kD3mR\r\nqRWVincCgWZE7FmYKb9OB+x2P5MYoGqma7QKFk4HLC2BUlopytXLbuvbuKHB\r\nS/7fQhycQDQwY1G/iV/KUTjNdv/7/dJRaPJQZpHm8XPm/TZc73mlh56krDhk\r\nYtYUWGB/oZIzOZSLBny5qecWijDUQiV4JtneiodprosaAqtNYcHegHOkKt1N\r\nkIWbkDEmLuwF/AozAZAd79mSXfeOy2yeOL970Sb/6lJ966A4RmMa8iExUSB+\r\nCSysE9XTICaaZpxyhLbXCol5zMvAd0IlaXw+gfRLOQAzyD0EoYMfFD0QYob5\r\nzDxH07RYc9fh8APvtzfNkXbU4/WNTGOfrdrpx6hlb6PJAqdC36YQufhwz5n5\r\nNkXp14+zGj7QXfHhJWcM5fYaLu+O0dIDlxo=\r\n=/LHD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9ea4e8e9c.0_1656716077176_0.1839039578520738","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/typography","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61065103fcd164b28e5a283f511e8fe7332a0698","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cd5bafabb.0.tgz","fileCount":22,"integrity":"sha512-ZfjThbHTIH8+CZaQ/rL4uI6nhnSQG+WuEy3xEXmTFcGzPGCXlPCHeYK4XWWG9FDZnmAfrh0YNEmxIlNBlA4x3g==","signatures":[{"sig":"MEUCIDm90RWMQHIRiLnqJd8/7Mcva29STwf9YODqHHLFpNh5AiEAzdukU4wJfP0nuWnT1CRAij15hSmornpaqghsENiZtIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcw5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovwA//S+sX4QJMpjU3jBJIla552qldtuX8s9CAQAFsBsV//1aN7Wss\r\nhdjO4KOnmfRTqtn2/2eWMgl1m/feCwCAvkFoNyTXgdCHbO4RC3yInFfNV0y2\r\ntUMi3W9zNMn8IO/REwzg4EIw7kab4MjGlIVt2BDXEtO0CiryX8+dGoAWNI9f\r\naBAMAspuRtjCIp9dyXFtffzJ5nAt/DgnxolzK63n+0HKREAKz8f1oyEUz60/\r\nbmypl7Q12t4c5s/nLmvf/DHvl8NNz/Q0OdXyRVf8wV70XEX+P85XyzT9/vVq\r\njEzKkebIC2DvDUxioDtIptPUSQlxEcVm3oDPZTzqQMEWXzR6KFWP0ZwfPDmK\r\nYboPSXLTSfAu9MXMBsNj+Rr12ibQTd1PgQe3aDFkAP+IaHqi+vW0rmvjjO2s\r\n85UBrtXPeArDJLtl5LYOPG8tgHLNuMe4SN9Fz/ylZMYApsEh2vTBB/3JO4Y9\r\nNXTA15wuzM+cyzecwW/MWbBcZZkVQ1nc9DtOyVRPd1/kZlZhLPb7Bhvbd9KW\r\nKq6PWMkfQYqVTiIQ1BBmvx6AHP5zD1qTqOD5DB+XsZXBs+6aYzU5/OJqL/Q7\r\nrUWhMaIfT94dbSgBWGdKdLQNBcAw7C8GYa7I3RGhud7IqRqHjRL8WdVgRZDj\r\nrLNrop6LTDBOVXQFvNlz+In6bl+aFruy1A8=\r\n=sHYT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cd5bafabb.0_1657130041496_0.4860386986052381","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/typography","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b85ebccfcbef091245369ee9cbbbb7e620bd3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a02fe49d3.0.tgz","fileCount":22,"integrity":"sha512-YiZY9IZlxJS3dmTX0F4kz8PJMIBU5a1tR8V3BZFlnJSdmUhcQOIs/61FPMYlO5sBxOTPmYt6SOpgDhFhLvuO/Q==","signatures":[{"sig":"MEUCIDvu2byyqy1mGno6iINzXKW8iMqCEfOKmXHa8v0xE82OAiEA26YXg4THsgDMo7EzXh4p7sYOD5mGGxhIqhrn6D66FY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdmCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKqg/+NuXehT93Gs7suQNWIRjPFF/hDahVTtRL3yitGlyD9KClBp90\r\nUnm5rFg8KE7t1AgOO8FdgZnh67FndxpYZvDtjSInlxaUWyoRzDCANZo+vqyJ\r\nEMdtuITab+pTO1+Lk807qh1iLK0suaCd2xWdvc0nYo7N4AGvQ00KxgdUXTja\r\neoFp2qyz+WZRctoEuXoRnl8ItWbphL66Sfaf3eEi7V6K/itxj1P7y64S4UWa\r\nHyzdQQcc2weZVMHW0JkacvJm8rfJcjGoPYb0lY2lIHmHPRdbnGpVwfzn1hAj\r\n1pwlwHwwT9MZIETUDSTtK4RUD5TTINUFhuQfRbWV6QSR3mZL6aoBI8HCiahY\r\nJWqFiTkFGuM6U52LIZNM89cRFXhy7g5YsHrbfE6q12uBOrT27lvYbxQweCtC\r\nnJDQR4xXJbwYDgDOkWtvYDTU9X+7YhPX106fxD5O5bG6JiOznDJ/44AQtY6U\r\nlHTbJe+i5Sd1szX7o8KUvL1haoJ653M1WQzpxLWTj5cRLPajDq5tOteDZPkp\r\n7xEoN4VQtChlfdUWvyq8L7hepQtlBbKyKbqrfu3w6luDaiSLAH2AVLX4xvLS\r\ngy+NCq84AxCXR/yQC6psITdPTd2J4JiMjSVNBJxlGzk9cyGtUyRyPiMxXc0u\r\nbBX9ETqNPUHhTyZpyn/YQ1FKhTrY/XAuVu8=\r\n=mArM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a02fe49d3.0_1657133441907_0.13147707536262487","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/typography","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5340471c4f09d3ca1657292eb3c805f3fce35a7f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.826a3d8be.0.tgz","fileCount":22,"integrity":"sha512-5+O41+3wykQd/euj0GKWhCg+c8hZJGXXRACQGJKBhn5c/LLesS6bKkpjoONKijxWmNt6UEzQO+x+932jsu9BCg==","signatures":[{"sig":"MEUCIDZp288D6oJHNqdnIVcbVx8awNk7Xpw3vrya0qPH4aIHAiEArcYOKYKq6R7RDxSEBD8LJMcXjsYUOgbZ4B361sM7KR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeLgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0ug/9GrGO5IDHfMHyOTywpwk+7eM+gQWBIQZ1cMtJZEqVdmal9rSI\r\nrtBQ5JjuEVqhw62Eg/2/Y17YZFJxKcTQ/fBCkAijDWWbU1+5n+IRAQkekI/Z\r\nRBHE+jtSb0beu8MpIMp1QJi0oDi7Mu3/s3PMmvny8IdVe7spXO54oTy0hAXs\r\n5s/NLv9+N/FiZKyGWCSmsdXYGfoP4ZG7GOIld8BfILApkYF+agK4TXuHUgSx\r\nDJhw0LjJaiQGidmfJha1ZXQsRULglmPb8kcOZnqniQnISgNK+EXADGDCoU1G\r\nSqwOVAnQM8/v6rMj1lntp4wd1/0v4sWZJh9y3gE7JUcjMsZ/G8FfHHas8T80\r\nM8z/ISZh5aAIEbS91yFZROgLXZLIVfGv5P1lWYQTk8HVz7+IYx4vrgSEITig\r\nEyQ4P9HlCP8RfexRTyAGXmbCilv6VXAbkjM8KoROmk3x6Q+8ZwQxT9f3z5Kv\r\neEwhiOXx3ynbO+9j2X0Z3JrOAm6kBXaKX5btYDGMSMZzmm88SpJNGZjZIWKM\r\nh7rehYht3eljQ9CG46dyhOLkpWXgjx4E6/pjvOsT3IDf7tWF0PA301odNni7\r\njj854VcP4BXPb9h9fztQ4YDCTmEQecp2/XXHWl6hV2Iz0Ch62ac+N6+ylG5r\r\nb3fYvUfvGrA0fZpyDjhr88c4FNrRnFa/P1w=\r\n=3j1r\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.826a3d8be.0_1657135840319_0.8241485788835021","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/typography","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72aa632602010951cff25fc82218f5e28e6d8c2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ef276aa93.0.tgz","fileCount":22,"integrity":"sha512-zFLE9bBMBvM0pr077BPYRIFDjJ0rni0175F72se4npsrztzTKlQW+QHQUwLRt5ItCGvrPc6vF6DhlM50KAxZoA==","signatures":[{"sig":"MEUCIGDXWFRI6L7QgwiZfH1JGH83s/gR298CP8wplP71uROwAiEAixDfeZPfUgocs8k6oMMbWZ32YYxEdnp7YrXs+/kg77Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxGXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomFw/+KUqtf5h8oyd666bwKijSbTDUnUpk2uViYLg/4WglirJlxlRX\r\nvR1/pjDHG8usIJwU5JUvAkXzO6fV+w7UQgB+xi6XRKajQhZR7valklm1bXDN\r\nNVzdJJZ6MVrCuU0Hou457y8mT+1tOVk5B12MNSVs+txHoDcRnt2CzT0fZvjq\r\ntMsYLaZBssF2XlLJda/lgL3gRnNJ35iO3I6mo5wOaMaychT1WFBqa0gLKtuH\r\nFsBckKA+U4lqB6LgIFNm/bFHvjMgJK+eKe4CmtU574aTW3iTwWSxqI4aPlBt\r\ndW9UM63SLQgMBwbaG3x4c0U1f2v0uEps/SlGaqjtOEJso6y6ouPp9Z8/FLvZ\r\nd7m86347CZzsU7/2Ke+3Uza0iHi6zgkfpNJ9kUtSB5CoXXwWqH/N041bHzA7\r\nyR7u070uHhR8txFBNxKAYWS3Mj3knMtv5Aa0JmZsSdG7aatEqQVUKGmNzcJ3\r\nYQdZ1uqrqOd2QQtDty+C8QZUhTFtYcTMY2UuTipFwnbQ8EF2eIatbasAMNNc\r\nICh11hV10yx9BKltf8mtfq+YFfyimmyLfGeuo80vEh0mYqu9z1+OAaG2ueFT\r\nzeeohXBH1hkVO72M0jXmjEnJlpkfgu4OYmm9NUWYnCxuBI/zK/pbJR6KNFTS\r\n48mit2ypumxn3kdY6Z/OZf5NdiYFv8RWuJ8=\r\n=vd07\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ef276aa93.0_1657213335243_0.784474974119477","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/typography","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c26001007aa60174115ad783a74712b48f35ce0c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.59cf61d6b.0.tgz","fileCount":22,"integrity":"sha512-gy9F2m4nPxqZUeFrVWpJnF3VwJAaou7lma2ofR4Ff1TSJlhsbnDF3/9P3S7ruRxAfhriiQwL2uo7rv79sYppSA==","signatures":[{"sig":"MEQCID28SV6se30vMaeubEB0fSz2CnoRg2BXlcygl0/CrzgLAiBmd5Dh8wADLFgmTJ1cwcgEveN7vFxe7h7ooTQUv1kl7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxhWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrplA/+JdmkFFI07jJIPecouHoOiQ0CLqefmW1zQk+FZjogNykLkbge\r\nTDT+TWqd78KtuqoMsWJENMWDxZu1DD2ScMCMNZC7hJPZUa9tYjJvfPZao+0E\r\ndeifmNCa6J9rXqos5Z+lJDWqUYRDeo0Ns6nsGFORXTDhOcPFb1fBffXG9XkY\r\nJLuR6aXgKJLKLHzNjHEkz2LSJi39MMN3/6CcgtnpLJJ7IjZ7mHLqX6NdBSKi\r\nJ4ZDtQf09Ohbnw37D/RI+wIsGcw1+RoEYh3sVH9fY01qxpaf1MM1v4CwT4aS\r\nE4mHCpBMpyoWgAAFwkNXMYpoYV6CkKxBaWmCHRxWGQEPuYiLEl9AemKFvBw2\r\nQEpRttLiNPzavxCgiAmepwKfli0yqP6Ufq2btXUMMjhqr0XrpCuDrBQ2XNqI\r\noRDTfDBYtAUxiOhE+UJjYrYmwIoLi3JLVxD4jX/CJ6upVPB8xcUSY0lJKwFz\r\nOczlMQ3RDoYQ+vZakwWbc/BQKhs+GDuVmGSDMrtVG/OTLW4SpNZvUI8xgbQm\r\nAeiGJnh0X7/sT68HJ2UIgenfEXaeSabnuHppk9Rj9Hl0TXsCVWo0p0iWZYuZ\r\nfPj2dQqi20VFcpTcfhrn9TwxER1/LEBt+TqTITcWjecW4i05Bw6Dpox78Xpl\r\njqUL/eJYe3Z2YSQ8zYXXFmyL54CWhyXDXU8=\r\n=uvEU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.59cf61d6b.0_1657215062693_0.11164610192975077","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/typography","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8647092f7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4cfeec6c9fbc8fd7f299b10715960ada544252e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8647092f7.0.tgz","fileCount":22,"integrity":"sha512-P9ipeYjDseVrDIBKeOC12xN+cMcxnHnPqsyBzbgfoNBTv86bsOIRioCCnokJCWN40+jo8lCEtKhcsvoHbD+jLg==","signatures":[{"sig":"MEYCIQDtDOfTcqqMYW6q7bWhM+OaMAZFy2r3Ebce7XDRVXYFkgIhAOC2osICjWx0f54VS6c8x1qhQ/2P3Y6tKuhx1Ok7EqzW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0Q5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoS+A//cRZ4zGVt/KCqJ3jdq8aSxjKAHrfbZBKg2AOcyicBhAN2fsCh\r\nqtE8F0xqzwrwtd5pI+zGzCL56cyXWbNZcKzOY1p7B107gKXUMk6qS2jsaU2C\r\n9+60qEyWQjEsnkjz7p5Vu+LWkuxbBYlYtvXPjsaKeRnSlzFSghW75Y6wiDEb\r\nUFTTKdQaYkoriRtUcTZbh3ukBGrtobhysXBDE/CNAHkCwIJ9dppP3Igr8rbZ\r\nl/F4Q9Z8SKH+8s/8ru7iDDO2/84llffjrhlDIzMd0EawyiLlzys2odVQB23n\r\nGGoWKEX+PBXXiMHhdyVhs3awa7rTW2Af/0Hi6mzeEiUmW1Qh1vc1VcpCPja3\r\nu5ExLYfl0ATcdABoKXL2KjfKLTGg8txpuzm8F8gCnxcd9NA42iAWwM/08+lh\r\n4R37VQYGVLANkwCCkVtSQQRQt+aU8DiUv7sR1AMkaIk0F53JRwOs5ciGW4D+\r\nNXSNfqqJUjeJfCIuEksa2DbEL/f7CwMpa79fKuMPjwTrq2WcDt+28jsMDEIv\r\naR+winX/PyYE1vgPCxPjzmAU8Nn/5mXuDWfEvo4UFhfE0Mog76OQwhsWN3ck\r\nql/qjHm7xJ8YX8chuFh3jFr3yBsR5TwxAJ3tDZm0bTUBnIXtSR9eL3iTp2cp\r\n0Qq2HxIrAucZ0pCtdLLX/yCBZxIAq0eAEwc=\r\n=gQs7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8647092f7.0_1657226297230_0.6083394866885548","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/typography","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adf9c2c6c1fed572893cfa85c14aaf268f2df957","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.02ecd4d85.0.tgz","fileCount":22,"integrity":"sha512-MMMuwkTENQUhka0jtPos8b//9ANDRR97wfYSDW+RtQBiMxFitosHYVeac9qHrJPm1UV78OOrmhQAFGNsdLC3Vw==","signatures":[{"sig":"MEUCIQD8R8fkuAuTESXGyXJrj0XHDEjr5pTCeT6szFKcQiAJCgIgZNOxbhXA2hCJI3t6IL9V2M+8iASJPCfUbSuW+Z2SCCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFIZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowtBAAghIk3WnG8b+1f8t7oMRDTDon5C9WeuD49ikgLzY6v6VgwGCJ\r\n/SfFlSs+k8IES1NN623clsXCZbazwOlwDP9buR6O90FcRnonr6h3blDBUFAc\r\n988qX+rQh8iIEmFz78HJViRpZ/ZzKk32Ru4YggIOLBUqaVJzxiUUfhuwApyi\r\n1F/5sFaUehA5S3ntAAT4wd0keyVWDFZtHQ+Thq3Eb+CWX/F1eDmyCoo3cMGo\r\nH3qljuUEs0/oPA0Sqr5vCGrDfCtemw7CFtpnK5VoHRfXoW07u7BLWe1H1A4n\r\nFMlUN2mHjr6uOqSv7TIEAQ8DwKgjNK75I+GLxVrLUKYZk4r3NvFadUBzLrQK\r\nX2vAOYmGHO/DAWJ5wHgzxuFg+QmafgQ6Txx9RtaWWvdoIL0RQ6ZHaD9wy7VA\r\nqAcBQG8rLkm8Q/3mw7QeKYKkT+mXRAI+g0LCb6XNi8Rec9tR+tuYkCo+8f2w\r\nnLEoUSaM5+MlxDfkkQJWSnd81Okx0iWNMNlpRiVSy1qIbN8cxNfDHkRaIyO8\r\nVHi9v4gM48FpavTAwLSyzp9xoHuaigtP+kqLrm6bzwdb99HV8KxK1STvdyiC\r\n2mygP1CVa+i6ZIvr3vCB3EPIqAhL51+CYIsJHb86gmN6Jnj0bVv6LeDSyLYB\r\npDhhbGqJwhUQzsRi+1k/3ozgqYBakj7mRAk=\r\n=DrRZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.02ecd4d85.0_1657557529601_0.6630025618535529","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/typography","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e755f22d56f8a3a6e9c733d55eccea63d958ccc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.63d3a146e.0.tgz","fileCount":22,"integrity":"sha512-/4jOZHJiMfsI6sSMwUYDphYObBtfGetR0QfjvcGYYVFR4ViTpmjIO1Ws34DNj4ABuxYw4sljf+1qCP+XVmgBnQ==","signatures":[{"sig":"MEUCIQCX6dRXVI6omkKhx1goMvJsYQQElUFmblXvbsOi3Xu0rwIgAgo1FUvDP3JZFMlYejYaoQ2t8rNo9waC9RNAloPdwr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVzHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxbg/9EItakfhRFXmze8/UeHzvEEsWoxugnNbLyNVxq/Ah2oi+cupE\r\nvbsJZdFiLuM/eQaVb3y4m5QPqW3lu9sEF+mGLXYrt8oJbMYtoV22gRgfdJNN\r\nSPAOjGAkqLttSqESEPtaJ0UJLwyS/Yu3HBg6ktvZbcXvuW/MoQV/82QJst/G\r\nG6fXmSl3T0qMOkLkDV954+oL2S+x2WcfC8ncnGJBd1OWuGycswMSv8pgaHSv\r\nifsk1urEE59/Nb2D2VhSWkDJCovf/pMjYJqewP0WYLgehM0NeOm3nQ5nXpnu\r\n9UHSAPRWJ6A0HIxVij0ZlSYtiiXMLG0gOA32o2yf50BXZ/BXWRV62A1poWvo\r\nic3jl3GbE5afCh7NmSuKCrOqqGiO00akUBVKzutKY4azTT+AGEZdZuYlDBzk\r\nsuRtx1pCbDjG2DmqQ+7GOaFLzZLZufeA6I1EgDk1lB9K4dDCSoVVMDgMkkac\r\nsEA7YBce2v50HU5ztIZ4SVziYvdSyEJLfwhVwL56prCNXk67gP+QY8vs+61X\r\nsOcSvR18tZ+yB03iPAhjbIJuEA+/KV7aFsgOlS/0BKzdSffGNRDJx62VGsbo\r\n7tTrFD3rDZZ5vmyhGgX12s+IxseZ1XrKoSWYyBgDXOK2RaC2MZTx5C8lnbcI\r\nTJ7VrOv75/EARb7bkQu3Mvi5CKKdVXUuEmM=\r\n=szrV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.63d3a146e.0_1657625799465_0.7526203006421734","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/typography","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.88db01990.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0f72a9ae873e7c7feca7880d698d77a40219ae0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.88db01990.0.tgz","fileCount":22,"integrity":"sha512-ICvm1BSwdwVYsdDabZcNU2McyBXfL3s4cyICKJnnv+WQHvUNtKpVSwMkrXkHHXBi/5EVttYTBeOTrSFN3o+jNw==","signatures":[{"sig":"MEUCIHnsKJ8n65CXSqe9iDhtE/Ao2Jlz1NshWUTqyeG/XbUBAiEAzoKgFuOW+Tk2Ul9Cc42FyycGC1HeyclNphpwYMBuACE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV17ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprvw/7B5bNeIxpzNR5nnnwrgeb8zV/Uilt6YPWd7EejpzzlpGcsUlm\r\ngwuo9+eOQFPYYnZn8GCVUhC8GDwVIchUMETPd//05LXNxmqm6AtLRMlMmAt9\r\nVSCUsfPWl7DKgSQodHSPGPgOv6hcrPgBN1tKAU5NBmAfFOOOElt82KC5G97I\r\n+Wy2sHDjdE1BZ+2CHWNBZFm0GI4kSnf3WP5kzXtHuZ4nBYectjYoMggnxGlh\r\nMdTr/LGktB0ghJH2bh1axUaJeloqWsj1fy8rJJwHebEdnHmIqynZNGQiGFHn\r\nUG+/ay+qkeD53+H9pOrK6iwQSZ+7nBTpu3xtLbtvXCiI0A7pZYS6GkWWtHsh\r\nGoMg+oV/0mR32yousVI8ELTf0ggvV+5+Vg9Bq3DP2w/WaNUoTe9q6V9W/sKc\r\ncIk9ebsobsI6MqD3UrypWAMy4VNT9KX0kUycnIGIqaUN6iP2fLBxXXVlR0yR\r\nJkD2t7NZj4ToFxOwQYCFLcK1keMw7tbYUXgwsCuudi/Bl01QJckYLucgzlnX\r\nAsmhiNA9WXk2a9JGj8QCj8dx38fsws+mPoiX6eAyl6hxrjNA+NHsoD0y4BK1\r\niyp8iJFt8gY18tUo+PRe0aLtR0gcP8gROyiw0+AJaesItBg6DBUok1tk/rr8\r\nSEhgwVldCDs2gZED6dOtycQJls2/eKvToLw=\r\n=fWzn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.88db01990.0_1657625979531_0.7436623286963475","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/typography","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6c841b714de70cff2a9a74a0618164478d55c43","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6432d8fd7.0.tgz","fileCount":22,"integrity":"sha512-Fbn/at65CUsQZFh7cHis0Gin01gzPobv8dvhGbpSYsQwvURUcAPbyDsr9ytU3i3dfK48vu5c47puaZKzwDa2BQ==","signatures":[{"sig":"MEUCIQCEaN7MqaRS1CcHZ6SMtOj7aaHHMzfXXn2v5bbvqjtMOAIgXNB8vbDqjiWrc1Pfvu6SZdRIyqPmzPTsuOLxqACv1Xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8WfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH3g/9GEwKTupxi5zha6gBVW1u5jtsQvaGHjTxTVweq3oXlRxBiMm/\r\nEfMm4Vn0m0W2el3p65VlSioFEmHeWoUIlcNe3lbdT2yspdtGlkGOKZ+Fr6Hl\r\nWpqG6GXLFrAlhIgi43FNy7TpPNNdFJ/ll+tqGALpL83rE9iRI7Q48JHkShQN\r\nH5JtMdlbUyEPG5acHJnzFNKyCvNidGJaQkRNicbOH/S+aqCLKZtVkLdYx2i+\r\nVz3CZHuPUFj5vx34CkUbeBM3zxJmhck12888L8842qNnf5fYMbJgTv4W/J+W\r\njvjl3mHMSKHI+k43juYZuc35Gj5vhHIKjUfMRGhRTZHhfDymuzCA/T/9W3Cw\r\nnA33delOwjiMJiRdaU3YTpX6a1Y7I21oAE4QnEe66v5B3mF2gQ+BpEzxBVYY\r\nzjjaeJhJtPK6FvCCs3v5sR4qSjY9iBwLSEVceA5Yc0GgTItVs46WV35F1pXA\r\n3/y8xfMVfKVxz7c7S4SHIFrjyC0478LUEfjzgOPFbHUmGHXnMasdyBPLCwvo\r\nJ9d7V+7cDJUG6uUsKPG+2Cj2FvzzLaHsb7txoIfl3CvepNj7MWD1NayTFUzJ\r\n5UEz5Pg12xuX0ujN0jLAkUOdJ2oS56v6uoUbWx9IudM/054ZohfC4FOJAw84\r\no7a0P7NbeQefbTkOAaU44hQMegIoxfJMRjI=\r\n=hrUt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6432d8fd7.0_1657783710853_0.9113951099797515","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/typography","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b5ac7c39d6e42824a27a7c24ccf45d57d6ed697","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.085f9b25c.0.tgz","fileCount":22,"integrity":"sha512-DCxB5+fSc4xo9QPyA5G2OeaC6MmWc4Ur6VBHOSqyZ4m5UROXIB1T8lBE8dlOA0fBml/82j9OBWIL89E3KFm83w==","signatures":[{"sig":"MEYCIQCpTVQcEs/6JCh7FrKIzSb6VznGLRcnhNxfCDDK4hmqDgIhAMcSRxJcYFnLqSyGQSvOfR4ipHb62YiH2DS1cfGFsT+R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EWbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBeA/+MXLKQ6qETgkqOAWKfcDnpA27l5azKjHvqXiLdEhBjIm6qlOp\r\n4W7Z8wxLQFjc2v8JSizDdiTSlN+S92cyJ26W4D4LHk4EfVhhSxdLQa7zBSIO\r\n2BMuwNQsRToRaAcWIzR9WZAHrZhUEGCNeN9VL4pyKrIdBG8zqqlmk2Py2jNO\r\nHTMtbGcu7C9UD0AIpLj+KwuyWPelJ189q7UrbCsv+8GoSjOe7jnZAombkgDa\r\nV3hLyIJHxTzn1zKBvQSdWR+wyMIMnFPwnX1VqNYFYY7irLB0QQkZAMkEd+ZJ\r\nq1Us8VyT5vGoMWRin6uQgpMDm/QNLgPmb4DU6j2Z4tmkJW1bX0nlfhcnLQyf\r\n0swZHBoaNij8meEu1WttqhPM/zCVE66QMbOQzktnviA1gn4TPZc7AY2d33hb\r\nRQ0Bo26rrOh6iKfj3tzWMpW4Ih90z4ksmieg0CW6IRwcY8XWZ0CLTf6Wndw2\r\nNnPorCVvHG8FOuLUvyaebniMS80xtdeeLGdWiRIYD6XF3orzhK7YTbWH9lWi\r\nUy1w8KSeyK1lwMFH3byOblCbktK51vfpbeB3pYlp0crjCZSHfOzYCTY3ris0\r\nlNGgHEHSG1tTAErme6wTrRlGjT2UFoi+7MBxHztpyMUfW1oEA5v9rAeBJVOl\r\n4e2vUJyOH3AJqTOcFunO6BaBV2Z+lpu9Xig=\r\n=GW7r\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.085f9b25c.0_1657816475565_0.7882639452865359","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/typography","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74f58b8ad062ad26b964b1dea195bb2ff9d30320","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.39f9424b3.0.tgz","fileCount":22,"integrity":"sha512-fR4/UjUnIaBj7hdftLA5DsJegJ7qPEgQ8aQerFDkfHgpNfFf8gRcGCXCdIiccfiEiNhBxM3Zj/BQmyGCaHsLtw==","signatures":[{"sig":"MEUCIQDi3rEk8/IBVKsb7IVh6X5NjCWkHf6dNtCir6cp1VcC9wIgIGDl4RwRHh+UsQlO/M7u1LQQb8Lq+hCqhCVKWa7HD9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Ey0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBDA//akOlApuSrU2qDXTI/3tLukZUviKyct6IDYnoaXOXLGxrt8CT\r\nN54kZc+RDQWzKhRes0vwxHxKL8OhDMdc3DpJ0ub2A3iT6Ms874Kkp/5XOCLJ\r\nB57KwWI1CaHdK9NbIloAwpAnNF7eqr/vMnk1M4Hy2S2Hb536A1keCA/iJxwP\r\nBzsB7fDn8W+B+o/38IHV9f60Pa2mtHk/MgCa7Pdh4quxzdBSUUxM2qdCoQLt\r\nXXubD79DnwwMuCNCtnkj6B6guNc5/EHbLUnExKktG+MUCxATuKZwnj2726ET\r\n90FzsJrD90Hj33lm8L4Xxkh/gfNkc5Vkt6Z7IXN83I+eWIcmZKJqfeeh+pvq\r\nFAxl69uYsSOd3HXRtbiPH8EJSbRcmHKAl2bhehsGiWjtLxvzOfKZkg+bvp4x\r\nZo7vcBl77LGLEPAqJuKbQkCGKMlB8KaAKViQZ3sDqFBj8rdwUXxQYRtr2S9y\r\nHgq/vvJ43bc89LDGRhjmXa3o3lishz9nigqNeCQ5J/rGUdYXMo9sToKjjtSW\r\nG+zUT7MaUiglNoAiKHpT8ww5dpBAZRZZ96SEzo6WFtsfNJw5UWcuHxTF1Tak\r\n5AQfqcnSnfuZ770AQ5jX+HwCn96NKPDPvZSmRzkk4YY/H91BbMsRc1o40Web\r\noe8s7ummUNOvGAtXWnomnrDNXxVUjct5yM4=\r\n=FAvh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.39f9424b3.0_1657818292472_0.6714378387492264","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/typography","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"802c02a6a592090f3c2e657b90e586c6acfaa3fb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ae9fce587.0.tgz","fileCount":22,"integrity":"sha512-wWjzbpe63QcF9T7Eu4k6p10B1uhLH6gduB0W2IySY96hHJZH0AFPfQCACaE28u/URT01JolYzSGHDM0BxnlgSQ==","signatures":[{"sig":"MEYCIQCjhISBIggDTrAbxUCuLFiBzIe81QVF+YnHDeduJq+b8QIhALng0TNdGhw0aa3iYS+Z/uaxi5W/NlIwd62UwVyDe/Rr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Ft0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN1hAAi8VrZkCmyQTEWGqXSmrhMvP4z4guV3vYmfXhB8adClFmZySn\r\nNJ4u0dgPNHQ5mg/t70YWWOBB7ncrGp1i8iXpghiZUEeFPzYxIM1h3nWVuz6o\r\n5cvRB4zJ9K4e2m2JvbEkqeUpwIvFt7FP0Z7i8Psz/jP6m/Y60/ofguik2ANj\r\nDcu8v6B1nvfQCNM6kpFFnmM0WAcqgeTeE2ekITguRfQ3r7rAVgsR5hywYPLc\r\nQGO2JrOuq0V3vMLcmXty5y/1d1GVknCzDRaek2heTyW393qjKqGhOhxFh0Fx\r\ncwQ5uXzT5Y3g5mNPghOknIwid4OAcodrP9QngUBuzuXJGDr7q6kZqsYApwK8\r\nd51EFJAxa5VHAREVXPttsZavuQQlLDfV9fmHpmJOeaFRdLDqNEGXGiVOg+6G\r\nke8Kc+9daqmEHAPINkzQ4Q/yXBxp/m0swrNeXdilrwZIf0o3qOXxeTTOPD4V\r\n/zzUmx8ZEJjRZcaQqbdRlqOONf9sJpCFYjcXpkDk50HozTNDUV147PvHqQ2c\r\nDQEG83zJtlGmHDsFUI4tHJrv+al0Gq+yednoaJd6bgsALy5gnYTjulcUywbe\r\nOeLUqjRIg62LW4o5OUDJFydn498mJpnnGSz3T0Ev/zxtCzX2yWJhh9rL5Tvl\r\nj1UXJooOJ2VMsJbX8vOq/NztUsiRWvfXsRo=\r\n=iGKH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ae9fce587.0_1657822068497_0.46412545218813905","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/typography","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22c08f22959abfdf595d5b46b66bf82eaf78b5e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1ebddc343.0.tgz","fileCount":22,"integrity":"sha512-FquDCQJleEHearPk9ApGFs1+/VI9OX5mbhbXHy9gL6UqY5pzClBvH6kAcPpt9+yCb1o8z27PO1nqY3qBPTSCmw==","signatures":[{"sig":"MEYCIQCGs45lktjUklWDCki77BFEtd4aCqj1qUtOWdsBI9ljTQIhAJZbej3HoVnzHv4i3FezjUMsY3bbFE4x+UREBdWiEdoh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sn8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwYBAAgXgfmDCjmRRa+iTRU0/Tx/84lldG/mo3oX5E+RAK5p+DLVL3\r\nH4n2Z6JCGMZaZR3YshHcwUcmd9tzauhrR+2ZMSoyRLsARlqx87e5lqN5PlrT\r\nLM9HSGlk27if4EHTiTvliZ8gO+zYoV5lITpcvNS117Mpfe+Qvlcz+p+Qp5NN\r\nbvp9MrIfU+02F9rmy6RY+5Z5z9s0Aq1zxEbaJNkKPm4WJUyvIs7gvweLmULx\r\nbNKOqBJTgO13i7P4oaUqi6d/mCKcOWZARHsFLDDoPvc6eHBWJsPR625yW29Y\r\n/QxxxpNe7CkKBW8rl6k43bHbo3xx2ZSP8lo95HSCcaIB+5cVbqXh1G0UU22x\r\n9HNIDFZjiI3tZMlJ6F1txdmfTqXndvAcwlZOYpeu+XBHvOSehiMNtOY2UrCb\r\nqtptUk9+toTQS5stBV6i/92yV+Y0dhxNublCnPvRk9SX+MzHYxASZGU7scMI\r\n4TAmGUJWYF+xoRXIltCUD3FznVn12UegUf2WhlBaXs4mEK9LglVlm1vYdzcG\r\nWqb6Wq0wRdN918E2NjC6wYRoaPHJJsPEkzZsttDf7oLvGzuh8tn0RRU8jRte\r\n1xFj4gcF3SQPd39c/SpPofiwKGIe2EDkAfFx+XttWDaVh4n9AIc6Cd9KskM4\r\nmhrvLvVfg5IS+7Ak+k8suYsgo4bjq+KxHwo=\r\n=XuIu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1ebddc343.0_1657874940193_0.4599587134664984","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/typography","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c5018840c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90ec3ff24793e01af6baa104922677f0d72e0dd7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c5018840c.0.tgz","fileCount":22,"integrity":"sha512-CuhwBLQs0ALI/VdZYKh+p9zlUrpCPhG7kU1fTROEfA+xB43IQwfnChngXzEF7yKgRon2ZYoBLj2NPgElL2wW+g==","signatures":[{"sig":"MEUCIQCnkj28xYmN0l/+eWHSd6Fs8Ptcm6Gubalps5TUtyRMCwIgYQdwyO5QYi3ZZv83kP3PRwW2KEpBcsBLi4hONjvLu5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SsZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq91BAAjyaHwh+1vFzt7BD2k4OUZDnl/dLkl5lyZesLqcbPk/UIkSFU\r\nrJZ7zG7mgDzyDbLkPb1wKcXZ7BVburjUP8KZY1NdGVuRkrqh4EybpEnUxG+p\r\nL4+xRC4tM23knkzZv2BBPJpaTSFd7ecBp8kZL6514G5ia4frB+0c+w6W0KsC\r\nsc52/apmL7B+yPyuO9jBxYDlxmgEKJ7dKHvTkprf85tirQYDUmpzHt0xtpt/\r\nbysAHUy2hlKYjoMpsrd9FPb4TmgBeZj+Aav0daGGiQJds4ZC55j2zN7mrfgI\r\njElHDaXbzp+aTjb5WwtpmwcdwdLrrrtxDY+N3e2V/YngF3SAkX8k+rC9kYRa\r\n9OBs9czdRDWR2LiI+nwGe3zxxh3LZuUVIe7UizDt7C2N80uaopgAFGdxyxDC\r\n6SlnWefOdl+hGTGPr31NG+g/0H8Xv84le+B76sr8SCBhlLvYQDroFHwL6m0c\r\n1WWfHPOP5vm3PIXH+qhMMJA3JzVvy/EcrEjFOL9q2TjsnV37ZnRy/TFfNGQA\r\nLM/h6R9lNJyiukVlTe9iieOpHd8uXh94BEapnj7W8MLK1MqWrXiZaAs6x0kG\r\nqm5lo11hO/WJ80Ol0fN9Pp58GvVttT6lW6gRAcW5IamISC3Bt6cajIUPOtEH\r\nV0zZqKho41SxJ6f3L0mrCyyvJBa+Y4p1ci4=\r\n=QgOS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c5018840c.0_1658137369266_0.6909450160638191","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/typography","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.551b40d18.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f32a7f085be353b70df2cf354d8dfd930c562e79","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.551b40d18.0.tgz","fileCount":22,"integrity":"sha512-Fk2ad27O1jADsl9gMT2tHXBNS0DXFGNC5qaaDdZmz6M+MBoqOc0xzX872lIgvce9yPraqhtJLXzwuyr/+UgQWA==","signatures":[{"sig":"MEUCIQDs1DWpl9On+zsPyYhtmyHhNU/RtrY55CkcKEjZ5ECRdgIgH7BrNW5oAggQiGaNdFFRkuD+ao8Sg25Tqmx990cs83E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S9FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnAQ/+Pyu/rYYw1tnJCcWmTqDiHIrMYOtIfQF/z45QJL1m0ZmTCSDC\r\nt1SZ17w7KdLMmrUM3xhcm8h4E9Nk3SnJLECoV1Hcq6AC6YaWmJFCAdPL1IpV\r\nE9b/M/gWcU+AeivKXqlUmfDjKJJptLK6JsNBK7nh18DETpjPUkgkjdpr6+ch\r\nyVr2dfsZPh4MpQ8hMVzmf6iQzrWGX/f00k+q2R05QfM3uNBOVxS4ktoASvD4\r\nAPlINYJ+xguSccmL/EJKt1dpYGxgWettBZatB/XXDFCscdQpjrGZkiEXJU74\r\nqA6rAGYOy8JbVA9ZCj5L6+nCotksF2Z987ZRHJ3UuKPFIRBbElGH7dzIuU39\r\n7cFK7/55sGDa6zxueZehPKaos/UE6XMp0SZYUrsMG0Nr85E63H+hjpPkNO02\r\nh6XC+/2/HHfmpwSpB1kDj8mEsfr9J7/hzJs8Cxln1hIaYaVBg2dkOtOEcu0D\r\nH8tLrx/Jivg7iQJ8mHXFSxS7ofHX3PxdmcSETciDwR1kfYd+/yhM9dd1+TPD\r\nwXI08ii3fsJruKba6h9x/z93Eo88q8SfNPak2jlkKss6ZHN7wn1Fxh0/rdJW\r\n4V8a5kwA88mC2B4CD2Y68+M2NEkZMGfgZhgkVNxfs4pbbHd3AS79kacCMk2D\r\nfT3mlzuFqY9g8P4cDtha8veTFJKqdwJsBTI=\r\n=uZmD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.551b40d18.0_1658138437127_0.043223885548569374","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/typography","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a79f880e3f056b8200bbb2e48c367b9029d8110","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cf9f12371.0.tgz","fileCount":22,"integrity":"sha512-FN2yjoZG4Mw0Ei9h8mWCAS2qYlnu8cded5GXgoBhVrYZjLTw9eUYlsh5Jl9iHkcG05raURCSseWWf6f8ClQB/w==","signatures":[{"sig":"MEUCICeJBpdSWWYf6aECTyGQxofdV2NkMHlYUgnAq2ofOYWMAiEAyHd2ysA744fF6qRoojmH4cngsjCa6Exl1AaLdX2l6P4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TA3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Xw//bwf5iY4FGYbLfAWfaOoRAFqxXRXsiWVNn/PoeQEOqo+qySwB\r\n+WlMtPKA3EO9P5I9VIXU58qnsT2LS96pIZcvJhhFkqVtjPGwmiQlF8qqpulR\r\nWArJ4jThkBEQKs/bRBfmkqPwQXTWy47pyccHqJenZs/Tz9Oyf6KYOkcESYNV\r\nHwLnQ8GUlw0lVfQSL4e1QKFRB40x/G7vGolKR+wAo0aFx2vxy8zueYgCk1+x\r\noxaitxzPEF5LdRBAH8i3PmCa2TOcaoXq+fHWMig/f1iIxLYngSY2JVZnCQP2\r\nH+N5CNOELqCY3jwO975m+8yxU0JD4sIGmoALdTSWFS4WEE5WoOfMpZs5u7aI\r\nJRDROMBW+gIjulKPd5kejo9hIBl1LZVAu1q5H8CLyZD1lW87xybCd6cvAgyJ\r\nJW4KVwWBsN/dbc1CziYgHtJ8Zvq25oEHsKOpF+wAiPxHzp+H688ojXMXOcfm\r\nJH0GdsYY0Hi1ZPsIE6uZiS6SeQ+HwO0pyPowmkW+7tzp+eTpLpg5UjoiTYWM\r\nmk4HY6XkxkPNfQXo7QMLTWDe1/V9I3VTHlHKvPX1AR4ZX+ntWIsTYV4/XF3b\r\nUneDG0L+Iuxu2YWOzrNM0WIUdS5m+OoX4XxM2pY3kei3MJyA0F3UX/BuuV7u\r\nvYNVWyyLiGX86Odpl8WVmSWu2rZfbHdPr4o=\r\n=SFBm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cf9f12371.0_1658138678829_0.6288628148615909","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/typography","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78e9e07d520284c9ac7eb81569812f3c6277028e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2797ff8b6.0.tgz","fileCount":22,"integrity":"sha512-qUnRQaa0wUM2/Cw7CA9TFx4F7YfI91eph34bXYenDVcW/v5LSVfjySTOFRBaZt7Y4MAZkOINQCBLoOYynGVlZw==","signatures":[{"sig":"MEQCIANobyNignBr2i1FAkKgDav0cmREBln88q+JqTfF2Xw4AiAe1xdnlAlDI+pi77gzi/EyXZB+6imsYL1ZApsrLfRrHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fmRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoodQ//Xc6QuGrBesFs+9wqqXpglEjBIeNU8KfjFhv+H/WuKYjH/tRn\r\nH6yWvS7h8xx/avi93KGawHs+KpBzgNGPcjEn7RLShTEkKmLEecLLoPCeASG/\r\nNMmpiDIXanufhvBaHVoh2XGESgUexQpwqLt1MxWNtOauiPytOpWbj1SZ7e1a\r\nyDRUue3lEF79UG4HUI/L9qT7DhUF98LGyU/m2eUrXIMFnrRZy1ujiJrKbi+I\r\nNkiiz89XuB9UvA36wLa8xVFz+/h7eouZVmfwhH14nsYcZtGXS9NCoe0MW1xh\r\n3O6qfFbJuha51uEGCY8QWzqCyCM2nKX5XZssquGA2V6G8vRTYc7jjGSrvPm9\r\n3v1duPBKOs/ZXxqgz0oGXUiFVlc72nlnZzDW5dxcDBvtKyD+9yjrjGRpDFZ5\r\nnign7mN/ociZXIrVhkTDmzQHC1JuLrK3ZR2c9ngisRJ99MY78pWy4YSTHuR8\r\nsaMCiBITWfcQ6sbINv4FM3/DDmngRx7F92r4GI1y2blIc0s+m6KyJedbR4dX\r\nHQXSj5ra+aO8mPfjU8bsyMse6aMCpYvOslZeNOJZMR8nrYCg7yT2w8wbDqvH\r\ngKOAlpzH+8o7bE0v+9Gj2TBrvk8DxHGwlrjCG5hmo/+EjlB7lJNomEw0XZab\r\nXANkEafr4eIWT2LswplIzuW0ZpNX/sAYeq4=\r\n=vcS9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2797ff8b6.0_1658190225630_0.8964658016254627","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/typography","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.110fafa17.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7503bd0900692ac9012a7adf4b7f3f92a9fef941","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.110fafa17.0.tgz","fileCount":22,"integrity":"sha512-CqZPl1KI8+cyp20E4E4nJtdGplz7inbM44y5fN1+YQS4mGNpRcjtg+UEJ7f+2hvArLG+S+XfWgEafODrLakR5A==","signatures":[{"sig":"MEYCIQDVQlL//zoL+XldXNdlnS8m+dtEczDTNIoHg7C/6SHEbQIhAIfCFvtkblzM/T/8PXf0/FmWsgHHgYm45jTEh4HLgdJp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17LMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrswRAAlqNlUKRsNT8cbr5yDV8Gc3Vilks+6DjuElC7DiOpW8HBdD5U\r\nZ/jBg2h1+ieODncaJGgM6C6jJmOz6oAESeM2wlpZDoeDqLl1WIppogfNpJYL\r\ndfKr7mW3d3HqrLI7Y2Mbtcc1Z3GCdXKEe+SFdUYGtZz6Njbf/kH/0Qni6NS2\r\ndTM1kUOnMqjMkMSK1vjZ7uqipqM1yBMeeYhb1O1yaQQih4Ad+/ahT6BQnx7g\r\n16ceU7woCvMOurQEwSJ6BJP5tfdTN5LH9KX0V8j/mdhf5H5K4c0JfjimeixG\r\nTvMVvCLHiOtF5yKMQf40qylMa2ZndEv8sv2GEdvkH3Fy/DV13H80U8e3/Nq7\r\nwh/0xNr5SmVTop+6E23+hrR4a3xAwkKhS6jfvHUnsUygW97NxAbFJEojb+eV\r\n2UanXFyba8qvbe5jTY0HQ1rAE3msHC1XLoEYYe+ZOaYetRbOByvmSnibErfX\r\n/yCyJZmi5s2CvOmvJrM6LJF36do2EAQuzC8UX4t+sXbsheIPjEgEj5x763vH\r\nB0fEEspyO1oTA1fJykhaWqi+5nNC3CUn+BA3BbPmWEfxhR4r2/b2WJBKJhQ0\r\nOWqtxiUVIIkGx4FZWSEuImV7UMbL0bvzu/mzVj86WiV3uVUUu2yFYAbi2u0t\r\nsgD0d+7AHEMV2tlPRDbrhUiaT14cjCGvwq8=\r\n=PL62\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.110fafa17.0_1658303179878_0.027538926510761952","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/typography","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80476162c0f64eadbaf9308f2dea9ba0a41ab3bd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.386ef1d2f.0.tgz","fileCount":22,"integrity":"sha512-Asp03kH82Daf26fOqz5fvt6e7ntgTDcT6hPDJHdq/CdL1HNIsh5yAUG8VojX84hxO0040aXZdnL3nQxDqmZOCA==","signatures":[{"sig":"MEQCIH/fY9DFMmjayJid9avtovsG6ORjl1OkbWC2E35TytqyAiAudeVDpX9IbztsJWuhndgYuRy9GS7VguDEeX3hidJ3cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EcuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYyA//SGN/DI4pgXflrNdq1ufC5y1hyZDW19FCRA/0r64HEsuclSBI\r\n+aP1GN99mTXoKddAJ7XtsPsrdsNUzbEeTmmNrsr/wsoi1FeisenkZvSEezuj\r\nQTL+GmMk2gsDlzv5OKx33K9D3YYNkugntqDAYyL6tlFvlW5Juii2MqilLyLy\r\no1H0S6hdPnIzTMw1rpp8Ymp6AsqHsytyquOcH84NfyYGDOFpCPjKrxDHrAHC\r\nWTOmq1FDP0T1V34e1HWixW2qFNnnERdYL0C5a6k/cDnbotxaMOWeqUsn/yZg\r\nt3+QPhPhsD44IHXG/+dWufwaV0bAt/Jcot5FA/oU5rWbYkjtxX14UkrN3yVx\r\nuSlwA/ecF5qRqoxZNV5rlelQ3QZl+icDXRN+6QAsFkeI3jTAimEG3wlFEiHt\r\nCH85uQWuk7IdWGZvEAhxK5a86hYBqU3DGin9W9zYFugnPlJHeyTEsDUZkUlx\r\nmZbkGtroiPpUX130V1H8nGDaflYkfoZDmEuwpUbzXn925C+KFxZ5azVoNHMo\r\n0qn/r7H0lCJJQNu6ISZLPGm4VufYvZqJXHXDFZ9lmTH4c3o2SnxVMWA7GafK\r\nB2Xg4c/0XDHM5gFBDnMgIAnSM3Ak1H6FObgPVmV3QOWkLqqSPHR+OCgB8x3G\r\npbIkn0fmgcPckjW2WSXLsTZP9tcqpC2T9Mg=\r\n=PfqV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.386ef1d2f.0_1658341166450_0.8152668096041467","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/typography","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c3924efef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09a2d87f6a4d3068d31d4e3b71dc590b58364f92","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c3924efef.0.tgz","fileCount":22,"integrity":"sha512-rQ1M0feoqbV+1dT1rBJzljF8XWrICnh2Jx5CsronB8Syty5MfVy82hNoN+C0haeZU/j/0ykhBMszuDjUHjXCqA==","signatures":[{"sig":"MEYCIQDmSDTmw/Jm2rtObZRA5y1BjYtmeCgxbuWr5cUFmr4AbQIhAKhM9rHYQbhfGyoIwAN0qXWKv3zRMy1xRjlWxxwmDj/0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2ElqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpteg//c0azvYftj4ogbTd6ahFOqv2X90K1M/wtVotHNNkEFTIhZc2M\r\npJeOxBU6xCspiGi2/AWbdIdnoN0NCOV/VSzbPC8LFMF4tq9M3Qyyer1yg4Rt\r\nj5EIZtVz2UqqlNbJyFhw7Jg0tHOc+CLwsVPbounf7FDfs6c0KzYnvVj4MwRw\r\ngRY7g4yrJNnq8Q+4F3U3tEY1hIODdJOb1mpGs2DMKFchH7Mtg3nWjf78sY0m\r\nnWXRb0ivGJprisTKF2aNBrNx65czpRsZ2bW4cdFkr8FL/DAbEfhgKs1K+pBm\r\nexlEXCLnykxb9jPTWJl0A411BhymnwVOUW0A+WLvqefcgY6BOXHBcZQ8T3gW\r\nGp0/yIzbzzDNcByCa8N21NBhjO7yMO0nn3B5sPSYOT3bOfXfW6cAd4sAutSg\r\n6On9yaPe2a7/L4ZGUJJDvOY0VZuM7UIDdsqpTHfLY14Z8WMcejfGbi1bbowD\r\n23sFZJq6yoJZONyqkUJjazdkSKebtypZBpFUMb6GlHTjvQwWSsfFk27rwG0N\r\n8wPB0aeVPpnIHOLlKg33RUyIlXWZlqPBKexgJbys1cQCZOGZbLSREg5ZoMW/\r\nf1sfrCoe3DCWNUcQVj8cnwPbjbscgMqD/O146b5x0VkJvBFHqshQBuj8mOKO\r\nxsbkkJC5FvUHezKunLcdhBi5JRTVoIh4ez8=\r\n=7SrC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c3924efef.0_1658341738152_0.6369589272572476","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/typography","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6724626af2cf8c57c8215834d196c0c2806beba4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cf5c5907c.0.tgz","fileCount":22,"integrity":"sha512-3FARwWpPWxI1argPsPkmEgNAdFxiWLMUHXxSGIA3MwHg+ATj2L4ltPkIisu+dBPEZpYnWKsuKGVeC+jocqciPw==","signatures":[{"sig":"MEUCIHRoB3QLzDJFgQIFFawFXEL7T46gnnNkwR8vr2Ks6jqYAiEAvNW/G8/lbmLLWz68gvWIHU7PMU7SPrZE3rh1cc/CYvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCfA//VgOg05XMJzRVs8PtZX9zQ1JtxsuEziGypVA55oeMrG9p3vuf\r\nRn85ZxxQGBdb2m+7gqFFOvTMXzOW6qGvW66gi+KsDEGtn0ozUeKCH+KyMs+s\r\niv+XBiWHqjJn4EF2L36rUhChJVgntnK3TaLxU7xCtGNvcuelLpRDVnTMsZvm\r\n5wEyBxgCve3BHQXCCCsovxm+cP4bkn1etMfQeEHAen73XY1zdPfPZf3obJfD\r\neLtf4UBPCy30ljNtFsizmsX7/W1/pqEoRL3AO8YOu6PnlqFZw7OQ0duQFX4m\r\nEn7/GANilPEsXE0xvMsqZc2KPqNZVqMqYyEPT4IvD1sa3AltLxa3aBMIs7W+\r\n8n1tOjPB5xlj7xkZLYnqOD8DCEX42cdKHoefCfTIkVw9AyFSkJfLxL5WCL10\r\n7l3O+4heDlT/d57tiYEz/B0pIZcGkAQqYz0BZMnyw4Ys9uoLv5J9yvQJDGRX\r\nc+Xc2q5kCQDSCz9J51H/Yf8h/OZE0D5GZNGhrQ/ipDr6Rhoi1153gThfr0ev\r\n0SfH9dVKru4NyCrUPh/tdqso5zmqTTR4lidM7HhYhEhqTvE+aCERKK6UUw1a\r\nxCpKPZ5rdjIa28sBIXnaj9bQp+C9ORieX3VSQsV3OAcHpoHG8Oq7epyztdPA\r\nJo52xvP/TOy/3VLFp1nROPI7GCeq7NpgUnQ=\r\n=/vfE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cf5c5907c.0_1658352090747_0.6104677427163296","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/typography","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0617e2319.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f65dc5734cb8594360e4b9f633b9a5bd56b1d58c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0617e2319.0.tgz","fileCount":22,"integrity":"sha512-KVrmKBkzq66j2lqGVQhrxjEuqWrf3Ey6D1s4FZunXlHIH5Qgn+D0Qn8O6uCwfJnBUZiLA4gXBVxDJfDk6Nfn6Q==","signatures":[{"sig":"MEQCIEDFeZG4yiQctU5rVB0kcVE0t2k6Ab8vv9xno6Gam0IGAiAE/Es52EV9AFENeKD9IGJLVt/gmo9habDmtjfMxqjfzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HYcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5ow/8Co5Q+yZUx+6T2u0pUDVZ757kfjWVmzI8EOe7XwNGYr+oigv3\r\nSoDt3NZVz8gQNnuE/BavLrh5Ob+eZRyXjnHlLwANCLFTT6RJnpXcSaBUEtMJ\r\nyBuSET4JUtzsWft5p+fi6KlUNIsSW399Mp4DTDhDiSXwWCTA0pBiuJtlAmJ1\r\nUeHtOM1bdghMigcNIVnvDi7+/kqh8FfNQoRtCuOJC5nTkV5tEB3u7/2y78et\r\nifaljM1VdGCV9bgFsmRZn7LrbNPWNVb77tv8OCnup5W0DkRSlSr0AbCCdnwv\r\nw6Re7YmZwDSYgNg9S6wbd5tRGlxKHt6iSZ4PC0VXmhl/RI6g6uDAgq9QDn1i\r\nvzaLWgOr5QNKOJuf76DnEQrM4USBzkxhMfjfn9883PKyqwOAqggsHR19EnMV\r\nm49yS82bATosuvaPUR2rQy3O6NkuUrwIRpRoop2MJmU3K2NzgT9u9cJdGZUI\r\nGRB+tpKF0kdJC4010f0wqbZR/Q3ivDUEzEMAlln1cZ+/AgavpGPCZ+sdqM5U\r\nwN5oQCt4ilm8pYgsq0P2YwpU/Gl6QBeta6c4AsukJ8Goor3qsmxRw82zgOtX\r\nYfm7UxuH9Jbuda/W7WcoHd609dlm8DXMV1spZcdHpm3Gg0wimCSpUJ7bA7Z2\r\nP9dc2Cz41UO0zybwCk+GgrjinTA52zwbv50=\r\n=WQPa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0617e2319.0_1658353179934_0.0018394052024874874","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/typography","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a743b7967.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7fbd187ce79c5031a63dd5202e60c6399e3d256","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a743b7967.0.tgz","fileCount":22,"integrity":"sha512-iPakTdvV259nQAIM626rE8Tr+nimhaI3qQ+7bGgP+GU3W516iWSKXk+gxNmtfPOiTIufK1T4VKq4Btq9nRg3ig==","signatures":[{"sig":"MEUCIGQbGqhXVMlJxSZDCtRjquUO9p7DotjtzkLJCwAZBndCAiEAk9vDYGUF6Ky+oyU6y9X2ACB1fOjUTXMlttAA3NXPsYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HogACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY8Q/9E+j3SSWnJFzXtpg24TLwGWwTLYd4y6HduzY+bFNG7NsSWXkh\r\nygBPpK2s93lRV3CIERRFHUT+9Y9LYrztb4uRM6wsAGAKLxQ2tPQhjJeoMni9\r\nWX0gI30CyGw+EwQIco17KzMwXNs7ywDAbbL6bKHW3gEpPUf+/PnTA5Rno5e7\r\naPIOlGJqDOs4IYi+M51GRr+8u/TA6yBpnIMikm0y3dEoklPJAbB37ntz3PgR\r\nUS8zvmqqmIiPBE3YEC/KaKP0AgWq2i9iEB/v2ty+vty8BOyUl0D5ufUus5GB\r\nuuqFkZAT6FkAL+H5DHV0LtcX4rFm9CoqIWzuGj7i9b4WZ+VfxRyiYU4RWXTA\r\nMgh6GVNR/xeK/+PrdHVUY6EnnHSEYAS479ZD5LriGaeFeRuN49IcNajEr+Rv\r\nE73M0VJkN7N9q+0xtks7CxR7PUCM6WncgAokRZl14v05XeE9fwfboG0/FAIu\r\nXqVrTLULnsZH0eodyrlHPDAGh7ilPS/pNF7hlQdVs7ymeGv5h4BoOnCeqONJ\r\nYwu9Gc2uPmXYqmEc15M1NKtUjwCo0iLSd5ndP3Nf1M33GSpm9jVYmYfliX37\r\npMpdho3moYg8gn7rCbh8TYkVQ3qxyOEpEeEJazlBp+N7TUNA2aD3/8oYR7Cj\r\nrQx1AaVLMZe66xG1TS+33LKM7E8Pj4S580E=\r\n=LwvQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a743b7967.0_1658354208585_0.7147814218698803","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/typography","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8418dfd1a0455b27e05f1e059b4ba959b8eab42b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.69fd619d0.0.tgz","fileCount":22,"integrity":"sha512-IJB9N9XMK3RG9w2rXrzAM5jNgM9uM+rJivqBw4wk6XyUBmRsVOCEYCzvNhvBZYRXcWeckV4FIsELcOQBADgF/A==","signatures":[{"sig":"MEQCIA11YMGBJhucB2ws4D89Vd+dvsEep/etEr9FiYKmawFZAiAMt0AgM5roRVJ94czgWXcsqLB7QNXV6qhW9F5vZJkZww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HzvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtxA/+N87OtDA7IiVCJE/tkYsjnmu7jd9odugWtYVFgpxa2uzLLLUV\r\nH5KQiPlSeVEU+7x01QcncPOntfLcvt6KKFH/BcYtbnSxrsRnEnnJhU9PBvcB\r\n57RHLxAUpBM81R/Ah5MUOVgjxvYCYRHACO+PQY4ETb3VufswuDwyyYtVN58q\r\nsuY/Zz9fV9VYZKukUDQ2KtWC3c6i/BVhEN5gdjX0qzuMfads/bCidBPG7spL\r\n5ayNpkdrWQc2vzq9/87Zyb0JdI3RgXb1pwPGhm7wGuKaozXi7E9fQZqWlv7f\r\nb2SdJ0zRc53/+H5QNIlUlFqR0BaPZcoluZDdcyMOUXeAQpJCDyG1TyhChCfK\r\nQv+yx6EcK7AtehzTED9Wmcg/XbCnvEqOG8I1OtWlrWy3DsoyxYVeWmd40aYy\r\nMoNIG+Sakyaln00eGhLVztRysCSGT+E5roq1jdA2rftUqkNeisT1zEt5yqTR\r\n6e/rcFhCtwmSqqJGhjXwmhKfWDSRICmr40q+bD15qlBvGzG19KzFM9PKKRBM\r\nZRDqWx988f7nyTd5aC6QxMr4Ydrz/RXC/Zs2yOBh5PYlIWBcOZKrF7ver6vE\r\nu9zx2HyoeSQYFxDyJmYlMrjLCWtbcpF3yz4DFuMoVOPFkdHOYgIUNaXFbh38\r\nGtDCgn9ukF25TY14IUvREp7AHEGDuijJxxQ=\r\n=WR6c\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.69fd619d0.0_1658354926937_0.7137738506259368","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/typography","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de5c661381c4e69336af462a00dab740b36e40dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":22,"integrity":"sha512-h0CXq5hG9cJIiEywDQiq9aal/OpiwlP7Ji8jN5BuJbBra7kQ8sedpzX12nt/vYzfZq3f1ejzjap2kI/Vm/yUIA==","signatures":[{"sig":"MEUCIQDNynbEzc5Qfm0+Jant6le/jSokCMzhGtJ5S986psom3gIgZEMJTExMkSknQubMXP3kEPCyxOiFEJeToazQrp3sCXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AT+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8GxAAggnjGfTHkLCHaDwfDuoeYAdb52tno+o+sZvDL4URHYqjlwrs\r\nKDaztNpakrBu6SaUaNyrLk2jhXj3RGsu72PolMA1Ym73WhnAjVpkL1HB893S\r\nfxPwwBLgMxaQxta0Tnfp6Yq2EaadqbOrecODDjcjE/XC/5E5WaX9A47g06+O\r\nmVKvZwSWory0gqmVdIioFt/5RMvLFN6nM5pBOBEbU+cRDxIKq/uewGYNE5X+\r\n/J0wZWIfGwLXvBfcxaLMTO5PaWPKfHfd73zVeivV10Zk7/Chwp/9QDnIsX/B\r\npecf0IDUhRybx0VBv1dbikDgrFh4VJNwA1Koons/LU1abyUnW3ueiY8oqr38\r\n6Wa1cXRTwIXZ6Zmz4xhNBXlYqjzfOr8P0dN/hzIe1rbt3A0jzYEEoYMKfggL\r\nSJ/MXp2Eyuu5Usf+a15V5otaJC8LInXMCwoidkRWkYSxhls0dKM6RooCKrOF\r\nKG4d3vHymX7rfJztWApvm2zG38dKyD5AK3rCYkLaw8kcPrKEwA6J4p+j85dt\r\ntJDEPH1zmYb3xyQDxdyv6veknzbIXkr5/34vNvwX11g/hzg302ARfEy0lRLE\r\nIHFuUpQ7Y9CFu1a3wK27vTDCQmetjI4yOjtwZ4s+zLcJeIKs24oq5bJns8g9\r\nE0IHWcisPrlJB3EG7zpxubIUwfiulIigGKw=\r\n=xM3O\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2a6ddc1cf.0_1659110654067_0.11419992195458839","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/typography","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9e3df497c4377294fa1d18c3bf878ab67a3f18d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.86efd56f6.0.tgz","fileCount":22,"integrity":"sha512-2jxrsaRmAAkwvcTMnMnwvKd9nZCjNfQTapXSr66PdFjJobHCOl5krdeamShZqQdnGVAhMl001lVR7fjQQl6dhA==","signatures":[{"sig":"MEUCIBk9Baostpb9OMwsbwbzvzzmxpx4t0c7QK1wJBoQcj/cAiEAl/Xb5GolGpcwQciDuzolvnDnS0FTvzHof074v8nCinU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6Th4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryFg/9HD163Cb9L8mcw3Wdrp8bntqE6UaQRJSPyIsl6kt2/QoqjNyl\r\nEZZlx2ryFmNsdL/fzgv1jojcGnozlGfHLZaFgM3qOdbuQGwGMev4afUs4T77\r\n9xDmMDiXIOZMJBJ65MY+zr836LsEC5rPrZXIOfaXvb8WX0BADD2lQrHA1TKu\r\n0908FQlUf1ZMQQAbp3YIdSlBlcwNgZBoUvHzzYGGJ7XQmPa80CIq2dxWaalH\r\nvg/8XG8iDMXn8BY8rDVCEkjSGSYY82xCsjFDEDjl9a2E0z0NSJhX8R7H/4he\r\nU9HCk0OAMHFYuyJXwvFdIFtMYVNhW5XmWpCPu18BTpfi34Qa5I8uiXB79TBo\r\nebnpm95wZZyemW614Ms0Q9Y3/l1RxESmwHZEKekMSFJZdimHgUK0UQ+eJNjS\r\nzvwTcjUXMpnPxsNTODhzazSQci/SfALmoTAzCP1zZkvIUzDoJHZkYaR4HmAU\r\n5kiCL5q6Nl/DmlBmzDmdjWtxE9+i6ylVoHlTGZcdHWME7luKHFN4yoVdbMve\r\nfvQNI1QqRkIuYL4SgpwhloM5VlvfK4z8LKmj/7nSDx2awx3VqjPOTXeOdl/E\r\nmLjTAsylGslvSkRlSI62FdhyM6F/Tdw5EXZD97Mo42h3eVNB65LDvt4lzIQg\r\nQhqSDEQCFBrSaux5ShNA8iwj73rTfAaesHE=\r\n=uBxK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.86efd56f6.0_1659451512212_0.9830258542223336","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/typography","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1076f6f808dd7fa611ddab5d07d962acf7239e64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ccfc24d19.0.tgz","fileCount":22,"integrity":"sha512-Blfo8L6MKlf35s/R6kH1Dl+bOjfezEkHFkOpu7RxIxhg1erlTL2Sf0FpW51/ad70s/DbOa9wndlOdutSvRzItg==","signatures":[{"sig":"MEQCIGYHbr4EplYn/he7j4JGdMCZxsyMLXYlXOPIlcDF2QB6AiBG9rTloWyT8FMowr1w5kUNHAyVUDj4+q6C5U1zczWR3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rq0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxmg//W2LdYVlmDW1km1NF3pjP1Cjxw2s51W0vANNMyhbygbDvEE6z\r\nr6mer9tN5m7yWTBpCIn/rxj4UR50qieebJTnETbOgw0qVb0UA74dyi//0AHR\r\nQIB6RMOULfPIEosC7kyPJm7vu5AKI8grG1O5ywPRozX38LJi8PPi5sW1zE39\r\n3UB5Dza8A15cj/fM2STue2BuUz1w7wJItocKdacdHlLblhjZNV1Kj18PF3Dz\r\nV4uN5bQoDzdXgI9m97kU+hSH5znFEQReUNG6LVAmWt0WMxMsLRXX3FsQOIfL\r\nQ5f0JR5xVYjS7jV+QHIvOlkHovDmQol7m4pF0pue53Q2nbMklerVPufNsoc+\r\naHqcVJW5oLLO986m1jjI0Xu31ujlWL0qXUywT6PPuLuR2MPp4t9/kHO5e7ap\r\n6XW04cSyNb/Vr2mgr+w7b52nqUhadb2KZY/oHlcUFaTH+oCp1+vCF1rWdL65\r\nUvClA4BoY0+xcLx3xkZb3crmyiKt7Za0IVFqIvHXhslRlUlhPfqUEvCN2igx\r\n3HCRUH6Pf/cxBQgzNbhQ78hnAi9nrpXbWlO6UuddYG4ytPMOzA7+C8SCdfYo\r\nL4CZxKD5ALHgucHNx37ArULttJktYQfIf3pXaCJBVOQWv6gygGOKuw9QXAI2\r\nZVEWtByra0Oc5MU3bS9/g4od5PcXcylvHb0=\r\n=r2QL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ccfc24d19.0_1659550388179_0.38201747950520404","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/typography","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e4570146f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb64c8aaf0b866f9341362ad76ff851dbc7dc671","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e4570146f.0.tgz","fileCount":22,"integrity":"sha512-Mk2J4jZZDCzIn0PRzH3BszX68kzKwA/fMRZHRYLT3hkSUEchdlNK2LatHt6zxyU3bnIqVv1smLQdz08XHOOw2g==","signatures":[{"sig":"MEUCICDIweb49ocec9ym/vS0KaZLFWhbwUXvagDhPe8+cbhtAiEA4GokntO+hFTdnj1paK9nZvAl1rAxJXRXQ9F/kIpMUiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sESACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPAA/8DHjuGCd95tYI8jkMetQmzSBMiU4wMtG2ke5GkpD+JHL15p5q\r\nOOQ2rwmCB8APTZOloRdgS+jLwuTf0Uo2XoEKbLYpCZrOXTbzS93J/IoMM3GL\r\nGp71d2niaMRGxnCPTccF9EovrIs8HC+CcHPeh55FHdyydwSc0/6O1W02kDI6\r\np/6VeQ5BiXPih7ly67L9+gTFQr3r7oFii2cQfsrz5FcjFajhSNQxzTmkqPks\r\nITLVpnqxvU0NEzuMbJAhLYGE9mas3TCjzsiQaNNlbrUc5uoyuEJwwV3AC/pl\r\n9elXn0KR02TcVT3CeRQ72MNQausKeL3H8lamPj2M/Mg33qJk0QRK+cPUrNGc\r\ng8xrsjITMNqm2SWYQsIOgh+8l3zqPdExYAjTFuAX+hVD4t4E8Sul5GhigrWo\r\nRXrqSYzU92D8S9YvLX74XQRLw7czOSJHqj/MTvljsPbvE2rX/HfFW41fUTI3\r\n70VBEKHSdtwDL77p/q25BQZ72d5CfUYEy5CruYeacHYfrUlEJTVyZeKDBfTx\r\ny0Zz+s063iwFuPXzmvPeVcZqvQd5n117BnTU0hICckbU+phu05VC1evbcr3X\r\n/4Jqnvdx0Fx2v++0FARhRQhRf1sqBA573KEX7znv4p0O6SoiSB1+W/tcTW3c\r\nTJAIIPVkeBC524DuQl/6OCux/Fus6/1UoyU=\r\n=+2ka\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e4570146f.0_1659552018318_0.65402098804323","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/typography","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f3f18780175f36011f6eb38242743a59f4d63be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6683a36cb.0.tgz","fileCount":22,"integrity":"sha512-06FiPwyAzNNLWdKGjxTLqdxYudQ1PaQ9GLDYtzvYIS2j2ESw89PmOwNQ0Ak1MFDxBYjydctBVgZ5oT3KVMIY/A==","signatures":[{"sig":"MEUCIQD9S/tYV5Zu/xetLNWeWWvYi+cfUiAlMl0Fh0mmeynpTgIgVyCdcbtfxdyfnpzbLsKuzbOMZn87ONygjXv2jPmMnp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6spyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvow//UxnWozkRsbKy16UrDgxNNgVxzSqvIPms9X7+LcI0/6NwmzVC\r\nmlNR1rkmQiL6N2P6V+heJfqgmeuiOg8YbfFrHS0FKet/s/mtwml4ea53T0in\r\nrU/hwIcVVYTc0prAGbO0isbuyLN4FWJ7geHNyKnwjzU5W7+C4nxouRMn5duQ\r\nazku+jKhWI2uCf8aU7BBWvbvC+mSR3/9M6gri3+eHlaPkZBFdDbnAfpW0Jh9\r\nPV0tIWPAk3wPaxdY/taCpBqlFPgCUpTdBEhaXRb4t3hKPb1GLTVAMay0LTze\r\njpFtas9eYT1IsISwouEFnLKVUv/+20xMH0DVsdeGVJqh8jWF52DkVPY+xv1a\r\ntBok9y/WF2GDygVIbvNZW7xFJ1j+4T+Hvg/Sfi35j6ACbnOqIKeJMihaT/q3\r\nMKUZcSNpcwzyL6G8jJVZ64nabEU5tj0VHGG8E8DCyGFrZBDaqdk/abUfEoCV\r\nfvpObDuOnW0AwLo9CXrSqlNMQOPT9HyTnSJ0z5Z/0fwZjAykddGJMq5DSqoM\r\njxKSNn24Vab52SHFBwOVM0ucp2oWNYog6doBTcuzd2vUmjce0bMglW8rVVy5\r\nOw9oc0JO2GJKEe+RGR0XhCbU9RUXM7YH4CFZRlGwpZH/ymUvtD20H5U2E/IJ\r\ntEx4JUC9lQE7If3SRJOKVvhaGmrq4W54dzE=\r\n=oYtD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6683a36cb.0_1659554418346_0.5677238051993474","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/typography","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.10196647d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171e9fa9086038ee626321bdefdf641145ffc75d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.10196647d.0.tgz","fileCount":22,"integrity":"sha512-WT6GVMqz2GOoGJmG8OZ1M+OliNttVa6NfbRUkrdUUuCcNzEdkEnSnB6JX6JXliclRiLc01+IcTEn85u+jJlqJQ==","signatures":[{"sig":"MEUCIQDl6BYWiFDDDb67RYVWtUhJXP0+6No/mssPatu/2RiIagIgLfOb6YeLivG4ntIraVOvhvM+9pJBskbLVaLhTVF+U3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u5UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbaxAApSp2Qb6do5PHLklXzk01tvzQR1Z/i/OY/1FQ6+BgA6p9nxTW\r\ntinprt/fMRYpBs+FyJai8UR2fykzYVo64v7829zc4j+WR0ldkrwXf9sW7jP+\r\nFys7aIARf0Zs97zdSNDfw7PjTOrWTkrIwafZ35AGBp6mp5Dx0H1qlAvgCitj\r\nnK9Ib3hMrxedYfN5mxgEriGHQ1+CpzKKfqVNPOG/9pVtCIzHUT+wG+vw2zp/\r\nICHp9eHTC3/LRy9LQAJ/mUI9g2vEjHa1a03DeYp2vh2T99lZdPnAVa+ExIij\r\nPpL7QJbTfD0Wd7G8CDXIefOKokWMvY2iHONObsHH4RldvERGMaUSv1W7ZH/h\r\n6hwG++PDgETA+bTtaONfzrTClr8Vi8UBABAlqEuxEsPoKRzdKZjnf46Gfo8M\r\nJZ8uF3kBN8UNgZNercLcg2W6XVENu5t7uYz5hmkF1WLWO1vxidOWsvSztBop\r\nwCXk1B7JJ6anSVmlfR2qXz4xMOTZRohNTp3fvky2v4BWQ1BGd35BODsXn7zF\r\n7m1522p4qruVHzC/GlURuecpQq8i4Z3Q5GbUGa2L16u9w8SqyOOSdasNFGmr\r\nLEdSJLt/DG769U37GHK3vpbxUKegifWXhTIPx7ojG9ACICcLPwOSIQ7Xa4+n\r\nmFU4JbZsITkiU1NgHTk8qJq4xNFPmJTcolQ=\r\n=LmfY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.10196647d.0_1659563603830_0.8424089346787491","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/typography","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec834c979dfe00e78da8abdf534b1497288ec408","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b20d3d73c.0.tgz","fileCount":22,"integrity":"sha512-mKXTJ0vezzzZzLh0d1JAvDQ6it6522Fnxb8XrCyzGzMSXbeq3WKD0NYjAWVCT1i5toZIiLJwyZ8YiiS8tujsCw==","signatures":[{"sig":"MEYCIQCE2QkjnGnlLg0PcFtJv2WZuYXuZXKaqUbPzmE5VGLEjwIhALHHFt6fHgMXNh4Tp6QhyXqBiLfVzyX95SIYlq6V6s+a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EtWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgthAAgIpoljjPzZyR+knhFnknhfdfE5JfrZZKeGiAwQXKiULSPWMn\r\neZGP/DwXpp+TIYVe8ufujWPr2KSVzmTu+QEA0dzx5mmrGwMgQsW0W8/pUUSh\r\nJeA7a3x8uavmCy0yJ5lRUEGPRgpfzHXecDtks65Q9uTibTmAa0kgZgqAdyb/\r\nCZVJJnfOr0B0kgesnlLfIYiGZrPB52+yFWkf/jRbCx+4REQWelEd/sSUbabM\r\nfWSZ0/AFpEFh7xEb9rdgJJ9xboChg7/FwFFOZ2Aa7/JB8mplpkhwadipHy8K\r\n2mETu46ElE0mBshhTTtDHQS4kuJEU+0u60njyCPjW/gFMGB+AQ1eWYkAa/kl\r\nA9AXd4NKCBHK5++JxvPX5gnrCeS6CpTMuda/SyoUtLJwpIHiWaNs/PP+3yTw\r\nidm7FMxja6ThrXDxQpGhg64IPVR8mbyU5Fjo+rGCrZc+2bnQqzUKfhmove0C\r\nxIp2Smt8WTnayqltbUPU46JqjDJQ+eaxE7J/kfjHMkplO25NXdc+2Ef0Ewkc\r\nU/tJuvINa8bAAB6vkXgTqKaVZLUSF3RUbMPZSpk512Irp5o5X3PDRtxWKh4Y\r\nwGk0NmQ534p5lzU6S4HDM+ztBXz9ge2DApSzxaF0zgPBy4I/zNeT3BrCqsWb\r\nn5UHEEwTIo4ZPAkiuJi9AnLqEPItZLBZd2k=\r\n=Tn3B\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b20d3d73c.0_1659652950140_0.9653048962793416","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/typography","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a409feee3e483bdfd4c7a3f4e4e555246d84f353","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":22,"integrity":"sha512-VuOtYTwyPGXO7c5Nq5k4KeoemXZIzWjzqT83IrVxrAZNmwUsUflUoALKvCv9ItC+oghoV57ooWvnNXbnKPIwuw==","signatures":[{"sig":"MEYCIQCkzityFgGcBoCtxAhqUW03ttX7fMpmK63RMqlPno+9LwIhAIYo1xpwLqjiry6UC9Puz8INWXPdkUonF8uj6NW9cEvs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiLA//aJ5ZaOLTxGoZTqYCctAVJYPup0p5Yic3zEXR0fj0h8IExx6l\r\nWJ3t+9U8thiUPsQt0oll55XZmlCxI8Jd1TXEBGdnf19BaOl5FqeJT8Gbv0Be\r\noOqEbEeKkFt1oZe8+GFYvBu5/LGZ3g9/NxvmtX24sjOG17WL6HAmj5c1wnlW\r\n0K9Fc76iIXkiFx1IIFqQHDZF+fejk5shB74+sZ12ocApHLElJWPdSrDXVpjL\r\ndx8ERwL3ozXDWGmv426KCFjTBbAZyLaqw+DjYd9ftY/CW9LUd74tchEtOSuq\r\ngFywZ/li8Js4ZcRkqPm2qezi+XtQce3UrD55eesr7ODl/aglh5xYgmnGdkdO\r\nmb5ea3Cffg21NVqWNh7nrPVZ3+MQEOwyw41QMy5yQp78p6jvfNBLRVMZ+Pwo\r\n6SKIqyQXNp9jD4SQ2PhBr+/rXzU2w0hcJo9lkWmC6DxHR7pnAmDepAwJmd3t\r\nYnEBlWkOD09Pj92dtfcUPNbzGLZ2rhvP2w8EBCRFpRsgrucyTZTwZsivE1l9\r\nMkUAtBk92hFzYDFMxygB3KEumEEVdWaAaW/xYSwY/SqKRR7Ya2HTdw+96JTG\r\n6Pi8yUo7PFYpSTIUba92MPKx1HjF187mZEMGRc5b1TKRzT+HsPbSoGCKnatH\r\nv28cs712iBRifpY7s4Uii51wdDKJ4GhayJs=\r\n=OVvu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.47c0c6b1e.0_1660058400467_0.021403033586059994","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/typography","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e9e4ccbdccc883a1261293a9fa8d31c719094c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":22,"integrity":"sha512-sQGtGEHmv3GhAXsKcFf653Vd9befUrSiT0T32nWuWGASbSY9J/Zg+8sy0IeeR3HZXP6W37wYJBZj+4VKens4Ng==","signatures":[{"sig":"MEYCIQCg6rhQlJFuC1CglhUKJBPpaHd3Spi+jWqdE4mRsOmvogIhAOYTc5f61uYm8LkBo9Y2g7ZTnuUxxuGywYqJPJDaFMC9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfcA/9Hm2WqDbgK1wfyPuoDndM6QkN5xVBCbNOSRDJM7kuzPBjLS1Q\r\nUkj3M1UJq0J+9S5gdNEiA5SEp5VUzWSkXhskV3SD/RugjeMeuqqSmX5cpfoU\r\nqvRqHmq+z1siTu73mKvTkwTJ970q/CKum8Fufm+ZGV8TyjkZ6fWZFvLtbGNY\r\nejR+yzdejMFh4oz/A7MZblRu9krnjASbNHnjaS+RcH53I6bYIfXc+AhaJXMj\r\nC+e5QxYqk72YBlO9nRCvesgKVuT7H4+sKYXf7EyLUwgg2w90KXuqKSHHL/fg\r\nzIzLVJ42oNE1j1Wa9YlkD8CG37DF12a13LbiutUPAzaJ7I0Oz/VQ40Quh5rt\r\nlHTkgommAxYHmgGBIJwsVbtfQJaylI2D9RSwasq7yQSRhMVj7jw02PZFJPM0\r\nOESfsnjtLz0nIu23ya7N6+fgxfhkKER4P22t/N22p+RykRjGGy854OhvBiYa\r\nMksEjf696AOrChh+/Osdl3lx/mMUqnYMOtW0z71T0ROjKBKDpaiVQxZNbpJW\r\npK5GxxJfJIzHeqQiQxt8hxlxBKouyTV9nl5ufV648beCcXcpt7jWoi1/MPDJ\r\nZ8ozbQm9KGcH05CRKyARt/eWm8oA+etBKgoUBZvJhlartQEoDtrw7oP0uCOw\r\nrMc79biqJ43HITWZyoduWId9SeBVxoU0ucg=\r\n=awUj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0e3dc8e38.0_1660243533406_0.09847382611001221","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/typography","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6693aeb80aa13ec599245cd13e2f808fbc602feb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":22,"integrity":"sha512-jk4lhdBDJxD/46W89bila4WF3iRSb0K0eW9ZeVoVDg6U0SMM1UnpkkTFLhaWawhRnnHdUDIrlRrqLpsbFxc5kw==","signatures":[{"sig":"MEUCIH52JVUl7MaMtIVzamWLizVWqAVnHKSwJT3PdAB5/ZpvAiEA0Wudv4cLfMqwWiQ+6rKbXHVrc7Y8hSk6Fbvo979uWW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpanACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+MQ/+IERzNd3oikhMX0nLEGFvWVgCpuMlVcfvbECuV4kaMctUCtFk\r\ntLZGq4ZADT45fEAYL3cbJdZ7Gany9xRrNEyGeUGIHUCpVkH5slVZ2zIDWosP\r\nGjHo1BufROLvos0HB/nQxD21GWh1J6XCyF6jSokKp1rtMx8wYiD7nvW3Sbv1\r\nWWHBndOu34LHzoTpSHMM8OkJMwv9AhnuvqTfFPVJLExnf0Ql1KZaQe8Vxf8P\r\nCaWsyra2TZrFtAnZxc805UvTWK3VyxN4fCLcM7P9pBGOnx+bDLbN5KiRsFdf\r\ndSmlz/+FAxwtuwTA3nYhx5yYqc1GbUp6xEChcAr54pcmpFnxa+dukhnb+dG4\r\ne/Z2Z8QDujbGsi+JNzfM+gBaNl5xznvXbSD5texgYkwtRofna9XNqnyjzqyx\r\nABEF40xmn4lsPHif9aBTwZ/GZhIDE5Z2dHOTh0Y/fPGwnvkdn8geH8t0AmAq\r\nlRzACLVMCe9yjpX5OsdkwjnPh7oVKP8TIHMdwTcnf8givnNugfMeg8JbdLPw\r\n00NlGtcqcCYyYUGAhjhalqFvtjm0n9XgdYQxtNrq9dW3tWk9FKkCLubF0nYM\r\nj6746maeR1s6OlSugRSBe4IdOfW/H05d7f6nVQ45ksG0kvB1xUFEe9s6xdPt\r\nL88Doh7XVGt2jXadPARw21WOv5mX1GdxSOo=\r\n=2FoZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d5a11f1c8.0_1661900455335_0.35261188787199704","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/typography","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bac992a95.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be3c4d5e881dfa68f677d8a759fe0f0a40ba268d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bac992a95.0.tgz","fileCount":22,"integrity":"sha512-sHQ6qJ53Ng7uuD0SPixo0xN0Tsj0BqxK1ZJKgJlT9saex27QTdE+gXDq4US5gXuNz6XT69YRF5/UkhlZdBTowg==","signatures":[{"sig":"MEQCICModI9m6d1XxXBjuhjCc+Tl+hS27VSlfzj/zw7Afo0kAiAiTC3IKR+aUI42oUWmi7pzlzZW/CfCSIl+S/VxxWcBIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFmqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqx3A/+MJW/0Lgb4cL1RNX5HwAlc6o147R8jXHist/uHbsAMgzyG+01\r\nHA2E2zNuHLcBnoYiUGncyTiBP/QYi4SK79r+iteoMflrebWWh5RKd9PDigFe\r\ngEKONFAvBOEiPoRQn3zfyiug54mLw2hC+9207Dik1c4wnOVhjVm5KslAdGCC\r\nYgGgZUqEuFg1dLpM0UJ7CpoNSB7/8FJvshmtu0g6CdcsplZa6RvhrYJk32Cn\r\nU6pf1q9uB6APOliIerCgfpR3AFjqorGKzOZQHLv3+m6Cv7HddMyBV3xuOCas\r\ngzRbpYL+KOQKkP6mIN7Q16kR0FIdQ/Xx2uxCVNqN6/qmAdgOtXBHhn1YjV9q\r\nH1YeQBMthPtN5pREMYIaAv1mytDKY2exMan/9eZ6OEYgccxWcHHPCa7Xvoqa\r\n326eQlZDKDuQvy9bjwrbQmuNA75ONJgvPwONjWwUW2QiTak0hs8xbvKVcO66\r\nE5k8htrZsl7RwKodTxi7otKWzwJcgUasS+kR+cuJM/EAkn8Dai+oP0MQu2N2\r\n4Mc3Aj7A3+Y2yc9R3/GKOrcgyeFJXh8VOhpTuO1n5GDN3Ewm+vWfaM0S3kCg\r\nPCC2eMMFBYvo6q5zuTy20rSadwAiS9cXUbu7Zjff7yOL7XLHTFbkt0MvVZgq\r\nq80WgGWLo3vjqqVqS4hrVII1+f5v42fZopE=\r\n=LKF6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bac992a95.0_1662015914476_0.46147864723004783","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/typography","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef0661ca3baa71d78d5a09872625a696b48e3da","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d25f3404c.0.tgz","fileCount":22,"integrity":"sha512-hKyAlrtzVRYlaIx8Z4Z+cX1l2Snm2yrwl57ov6kNpab/Jw5lonnbGGf3DGHD3KVQsAUfFMqgS08zJOdNrwJksQ==","signatures":[{"sig":"MEUCIQCmwqzshVjBSvR508393fYKQx9jeHuR57l0I+q5yV2pAgIgInMW739jMH1xCHvKSQtOhaJfkNHqYctBZvwEgNwmfXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFgA/+JAkPJ+7HjBx+XxOklUZbNQ1udKWlZnWNO78+y3M8eVOhShOC\r\nO779ZlnKZKWQAOOBg5ZHfPzDHpi8YGJEhSqVDVmc1LakjIl37DfCveTWmczO\r\nDoM7DLiGsHa4eX7PkcUGoYFiCpvN7zqtZmTTIzm8h11n14pUOChpkB79kmLl\r\nSwxKrN7ttUcNDCGhT2KPHcVr0vAWtU9HgYRM4cclti4/N5Y0N1xf1xDMI7DN\r\nCUmo5drfyoFxnKSLTX7DCrR/Ug2b9Ab+MHMSWe+rzyW1wQMpLbcPi1nL6sIB\r\nYyVoLs7jE+uTQneNA+ubfNpQSOhot4mXKwKTavTN8lDbit+qoWZPRbxwg3k9\r\nQq2+wbqmiJtw/aJ1Gwr5FEFjmH/9p1j/fiZ2vVjFkLrp0ZdHOzxbGcwq2fAg\r\n4zntHpp7cbsg93PlAEB+ZRt3v/m+N93LpO9ZYswrB1aFa0nYY89Wihf0hWKT\r\njxjwBL9pOplVTf9oDOyIMFRQtqpe20o4cpaFzKzAsY5NIPUuGfA1Wr0ULr4v\r\np/7km3pOtLBkhXexrBGlZKRpgUr5A5XIi77s8gLXw6HahCie8wL2G5E3A3rl\r\nWk3raC2L7Umc3wquTTi+jiLisF9uM6uEQWNXs3WYj0A9gAJclrOdxmIs4Voe\r\nSgW38cviaDxfF/C5BKPBcLopD1Domegfhj4=\r\n=WLLo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d25f3404c.0_1662025442711_0.16090131475697378","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/typography","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512466c68c5d8efb9bf52f88f1dec41ab77350dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.920d8a79e.0.tgz","fileCount":22,"integrity":"sha512-RKJmphnozloipB8mJeg2DbQ5u0gFO/aQE/o7nOxuVY0/B1I4mxrcCvc6bed35drLhalb1LfIsItVTAu2zrLErg==","signatures":[{"sig":"MEUCIB0gr/PX2NDlG3KNiGjpSUHr+fikpF5VCmYIxixIN64UAiEA1wM/2NROvv5T1oT40RsODyFw86H2//El9cHZQRnCPIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrtsw//SEXGd4tMSM67DLXeICdmAK2NldkRyuQ14hDI9d87Msb2wLYh\r\n9i3w8zRG2Df1mS8An06I++xdwrOYmCXlKfJPgdrPUJsSF1Gb5AH2CmCfUTdV\r\n4W1Jidegavwqab0Eh6qsRAccxebu3CxrQp30k1lcmvlT1X9vznks5ncjk1cg\r\n3P25KlYZfsLstEPhseJ2kBxq7n9OzIJO2PA3ipDDzOWBV3ipDsC+O62AuU53\r\nfirOGtI0d+gE7VQm1of7IURD6Sk3rGhcRGxpV0WDewkaRJKf1zwPf/pIB9CL\r\n4QOtoChey/Nom1XDOxExh0o6k4cz0KSfsBLhuaOQ2BIesjPWkgYg8pGz3Z79\r\nYC9ZeuJs6t5Lc5Fwe4cC9YhsLqHHOhL3SMZqXdyXhAz+cF1hgi9u/v8lhezm\r\nvhAFMwZtYBiKSC7tRak5+E38i1q4pUbCh5Rth28+FxA6vDnXPyZouRZsgu69\r\nRUrUtKsZ605glk9rQR2fmp3yymi9s95a2uwPRRSdR52AtHEDoyutDg5crZCf\r\nUIyn46jq4tbpgf/cqP7HeN93f9cOxQHrl3SR4w8Kk4NTFP6cH/J6A/3dX0wS\r\n9ClHJo/PhOBaV+RdG3k4x/boeT4XVjXgbo6W0I8RzPjse4NHxbEmjTV/7dLr\r\n5yMmUCnpNl+SJ4nN9eQcqvqmOfTySbqmpi8=\r\n=NOoO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.920d8a79e.0_1662063635883_0.3645740025776405","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/typography","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c363f267b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e3967c7806fdea12d5f7556aa00c7f2656d99f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c363f267b.0.tgz","fileCount":22,"integrity":"sha512-X6Gw7biIe72xCYgMGk89Bka3SFSmZRx9ahiQX+yId8B1LEqXMcs8d+TZVN8xO6BYB6CcENeDoyxz0gumLBLdmg==","signatures":[{"sig":"MEUCIGckYm6NBD/cZ1Aqq5awi0dJhgRK8TKzMs3bU+NUqVLoAiEA+oxP16GN43GNMFcOkOps11UOfqow4UnG7I4VvBGCsaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESGCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgQxAAgfaMJsTm74Exk/xpTMUL7sXEUoc4lRgTwf5+nIP2PMjZPfW0\r\nQoWXizcMNFMEzPT5GXORS/WS37BGjtLYDTDn3xB+AIfWOW3IYw0o2tqe9HFf\r\nmk0CpNtSk5EUw7N5wsZkSe36zV7XitFPbIPCe0IIHJloCW9ivS+edA2+vvF9\r\nggSb3Iu3leApTba36fL0nJD2pXcj/iFNDWYubAf6weQtxLNugJoLmRK4ldFV\r\nYGPFAP6XTLI0k8bVXtEx9S8apSJxG2YmwSaORN5yZX7e+gFqpBjeY7zmAxMe\r\nNKlMf5IAmPP+LBDGHy8irkUBRmVj4KvoWf0hnzgi7kvrLofsBOoiB2oS3K5R\r\ndMq+ADDj4r2Cbv2nRekG22SnjvD+9p6hp5FsB/HHZSXB+2UXNHKTKerEGf+k\r\nRqvHx3OVAtBkYaUCWRoyNVZ7p5Xjk0I39dQhwjc4Guet0jRQ9s4zVp5T1got\r\n3/tsNkDCA01rNno6RE8Lb2g0hpUUmZZ8DbZTas6bRpSVyHevInd+hsyEckhL\r\nom+IZHGxvycykBR0Ct3TuiiOcjkrNiJF/Whqo3it4eSUysdkPEAKFIwPnKGT\r\nwh5oUOtf0JIT6aQMTdxQsiaCuFbqcyDvcL9BZIb/GsRjZCfflbthPk8oYEVQ\r\nnnRs/Tdg0/yEBvdRXV0QwxtTPrTcUXNfVa0=\r\n=sL1W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c363f267b.0_1662067074628_0.8294121661099008","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/typography","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"589aaa56752155f3e9c539aa2e4265b6547b0b82","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a4eb4937a.0.tgz","fileCount":22,"integrity":"sha512-baUIgF0cstWXpeao1hNHZdiabdy23AgXw2ZUJudH7lBzc9IEoWv4IDRJxAgg6HTkkGFzSNUKzYa5h2f7z5Iz5w==","signatures":[{"sig":"MEUCIEbD79OTqnQlZGE9sIaemMuhUvU6bPW4dnoAN1m9O6HmAiEA5hcung4gcAiUI3mMMh/U5bOzbJdm7oMc03P6dpPd5yM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF48uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA8BAAkpmXB4CtP4ojssK837sEO8NAP6R3pHUZlFQSwb+LsTzDYhZ3\r\nfC9Qk3xi7cx3BxW5cwycTcHbsY1rpjKPd6Lz7O5qyrYIZgiet5+8BpS8GosL\r\nx8imIZbFJ0AvNohSY6zyTPTaXNR6OSEJ3kFwwwG21bwaER6mv+NnLkzRquHQ\r\nYwxe4S7VgoTsx+NULgect4rnHk6oaqINk1EZRuoh+c0vM8bZiuk0s/GgX8rz\r\naDiYCj+MXe6Iy3FVksONxEB9bUTvIa22l2mXrAXjvNFg5rJ97BUFD3dashh8\r\neKvlilHSzuvg47vc8Zfso/9dwdlaaKET1cxsLWUkGqMxwy2QjgOxzatjkpkB\r\nHK1OBqBuDdSiz/hdlahB4tKZLG8xRu4AgIfxKDaE9EiPy68cJOwBe9l6eZw8\r\numEXX95KraSS/GQqF9wc2DG+MZkX75EWA8ue4WkXd/sTr5BLsG0gpN7t3WWO\r\nXGFwJPFC7zV/7sdcWxs0hqWooD3rLMbmVB90a5eCSd2McjEOKDCH4QGakc6C\r\nhnWAWmleC90BZKf12Wd6D6UPX1+wRWMgvipWXM4SdG3gTctrepJ3NC84lePF\r\nL9FwNTecC9hSOSUJdYT5fiF1SrtpsD4SS84os4Q5IqnfpSqF54t2A6VSlTP8\r\naltaXVLnklF4lp42hkRHz7ejRmphowbuHx8=\r\n=llFl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a4eb4937a.0_1662488365827_0.08925147186816673","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/typography","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4299717da.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96090a39ac2ec90c9836efaf14fb1be2d8d8ca45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4299717da.0.tgz","fileCount":22,"integrity":"sha512-mCu4kq8HQKCoj8Qzh06lDub2uZuHUNJc546p0Cd8ySSujBizqIPyxgfHmpLxzZR0NwXZqdbjJyRYptqsAeWrog==","signatures":[{"sig":"MEUCIQDS20QapjwUDh6prUj9DtGC5Vr9qqeIY1PBlSNTnj5XZQIgNgLgYTURoq7AgbJP63UgbhdqXnu+gorrFa4CxR3hwm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMOWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm8hAAntsThnAU6uPTkgV38RIlbfrLkbQxABZUeJMaHBdpsnvYi/Ov\r\nWO/fjPgnAwxhwKLrgnF7/qpijslwkiY8+sMg/Pl1wC24BI0WK0IDe57eRZ4I\r\nDUJ01V1fEfNSgoGJxchenBb+INFMbd+Hc9AzUDpK4XUlhS2cWAjwXA8mT/MT\r\nnVnp36hAZgWTfJ3pjtPd6d36eXbty4WDRy+iY7mzDNDkWQEPWkooQf1ZAhAU\r\nxEvxgw7R4Rrl4m7dbYpJvio4ba2WEzhoSWC44qjnGZUgtX0KC4/O+sm17hyv\r\n3NooLkydqVfX28b50DUGX+4g1IrTFHTW+/7QFGf6juaZEqgbFYD35sVThYbN\r\nEA5wdIu1OFDHdnr9KItpFUT4tADFl+06PQYx6PZ/G7kYVIH+aDc81pJlEtcl\r\nIp5+vv1piyL2hrj+tuFuxyRpyNRC8bwvBUw2Wss07fBKRFJd+4ep9cXX9xKC\r\necziCO40HLCV+KLZ5WWfSIfbP2m89EYmW/9tMweeei7O4mLLsFL+X0C169DC\r\nFn0zCZHc9KqRS2Hp+hOYfns/gcmn8sBYKcWuBxE+q/k/5Gcugq+XWve8J/oj\r\nGs2J++O56WZR82LClOxfgQXgHG8jhCwY2QTAKwQJ1YrvYE7ub5RmTGmasoqi\r\nTaBB/jzlV+DTKOuVxwzTOZOwPR1p5X619Yo=\r\n=wmm1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4299717da.0_1662567318120_0.030657857155991453","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/typography","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d28a5a8bd8521a0312bd8c0fa58f12692ffd3f76","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":22,"integrity":"sha512-OPjFW7nONLfHV2gtKIWOlEJDKRxLJHYUMWZqcNPPhMiC2u0BWTFI/V84Y7TUt/79GX+WHq83Lruo+vB/dHT08g==","signatures":[{"sig":"MEQCIB/Ox2bfYazAb80nRDlfpOM4fU6AwcAuaH+juhC2SpjqAiAT08rWhElN7J17fd/u+/JZ0lqPGtj4mqIio26YGNXXOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO5/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroaBAAl6MIIqSCAYLn1MXpddangKmOuJr+/FBhxrPkvCb4Cl+J9idT\r\nKCYi7MG1PoFDe2HaIFKd/Vh4ZeLBjsXzdBrfJwRzBh8Zyl7+9YGQET2M6Fxz\r\nkGgkrfPy38+vypnDPVW3xq4eU8GWY/sUfCCsgHq5exzAsP4LiVXfxa+3IkBm\r\nsH5guQBqGlSwnk6jW44y7gJCBY1ndhBcQ1RsJyWuz6qmaxBhFRXdUd9TQ/un\r\nxuPRvma4IWCk/YydyHQVlpPrDmi4cVGCwHncqjNlbDVqCfYluwxFTOigTtO7\r\nnPaaookcLy1qEemYWF9HRkza0UZ3rZGmkWgCxtVnfbErP658Qm/Q9Pl0U5HR\r\nANB6X0y7oSXqO7dAqeP+OJf7jSm4VDDbc7Zea/RNQf8ev+8BrRxqVuNxFPoU\r\nzJfFiW+9u6CatnQ0kXiMCXbMeDStO5f+/2K9A2rLWh5CRfarCmV4adIed+50\r\nHJIVI6c7jf6WYDUfERtsP59PPIdF22XyKbMqswMKtVYxlal9ZBNUkr7xjKnQ\r\nKI3e1ud4lgV/13VrkF5yJUVbqVZfyH9kpX9vAdAPGasrt1DpZwfcs63P/Q1M\r\nZ/svYa7UzXutXHq+/sUAK01u+p61WC82FizZvcCaZPAB6uc2MVslYQEHg/Bf\r\nTSdUTJy1buU7b6C7irqSgTEE0FPKi/+rIR0=\r\n=8hZt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fa7d8d44b.0_1662578303348_0.06159789090017287","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/typography","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9050bf1671d5ddf70de7a7e15453bcf3eee9e4c8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a40e3c768.0.tgz","fileCount":22,"integrity":"sha512-eAuWEkD3vqavh+qOleqsOUuZDQaRgwjwXzu9UVp9oG32hwZVF51X7n8UKX6jlv8Rs7/Q04Z6htZVvVzG7i1v9w==","signatures":[{"sig":"MEUCIGnpTzisQ7ul7/wxX0fH9l9EqL3mE3099wWRKHdrXpkXAiEAmVVQgbZGJlKQsOQmPF/xJHifT698vbJJ5cfgDiZ0DY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5wXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBNQ//d/Jmh/JAmCrUEd0Vv53NOQjheHUXxCtUDoOXkmJrRmFuNWvx\r\nSFn1qBcsl81nt98wAWtO7aLWBDf2trCOEeEynMLQeAKLbTOioHlwkUiK2XX6\r\nJ5uthjobrneOqe/4Xw6LQD3vUFjLXPIyjq5Oq9TgGBTzO/xDTOBEso++VV/x\r\niCJpa/Tkyw41AkGXW2moH603xIQUBaRSwmEMDNUs2KJWHsU0Wlt6YIm1UeFJ\r\nOt/TecupVDbZ/zuYp4OmBBOs4TqRKme1MJ34+xyLZ23K49JjmJ6ltWjnemdA\r\n6EGfgDh2KhWxRZzKsSAZJQgJkkQBk1TawJs4Pgdb8UkbN6kbUWrHaEye1ier\r\nHoRklHkegccRp10SuXLo3UGuYdAVXez0Og4/vKBlYduGessgumNV6K/5aARK\r\nV8caoGAZxYVwyZpMlwd7BqLi6gNcoV8xyAJPO/BobL9pvwCMBOO8LsAvQZP4\r\n93b5Xl+0XqCjw4Y4PwT2PQQD0SmFFjdYGQDrh0CWA24ywh/k9OrHUNAhtP9B\r\nk9guuJGH1UxzEVn3/zKZHLAn9mPe8l6GLJ6KHJeBiRsVK4LRZY9mPjE/QX76\r\ndt1/N1yw1xW8J0kqc5MvCYMop/oUR5IrsSh7QIH9E4cQ8ItP+qdTIxKZ/sUz\r\nGvjqpesL8E5H2CcfB6/n8nqZ0jdMENms0QU=\r\n=lkFO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a40e3c768.0_1662753815262_0.8497412468777692","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/typography","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79a2df67df8318a30f32bbb0fb825a462c5839f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.18cdc9a00.0.tgz","fileCount":22,"integrity":"sha512-qNKHGYWeLLM+3OeJJuhjG88uxtpAOr6OkMXBoxc76NAaN9Tl1AfzLLVltb8xtMx/QOhDaMhW12/x/vzz7FkYlQ==","signatures":[{"sig":"MEUCIQCHtz7mb9znt9sMhQNjfTiYliHC+y1x+R/c2SvQpxvNBgIgXAa8KBbdMnTbL1Ew4kC9iVBH3j5IHvIYNsawHGNeHTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH55nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTfxAAiy1G6/4vnNFSER8FT8JAJtU2BiXErmfvUzPlCh2lDU8XF0Zc\r\nNBh677yVzM/q4iqwAdzImc1q4yWX9j5GyVvxOsJCT1LHXtQ0yGGv3J0YD4tU\r\nEcKWpjZGq9C0vf3LDCmWZikzjfpSays53hvvukMPxe75BF9P7DNC6eLgufr4\r\nyQtYtp37wO6hU5vyRIZA6/+orzr2DJfLNnN3OLtheC4mmq6yZInVvhHH3OU5\r\npl2f4hm8uz4cYgWC0rmUrXh+T5taOPXMRLck8PRQLPFwR/eYGz+6uPl8GllZ\r\ntpksazyOcqht3+YrLwyfaJmiMc0S59QYB7GmiKU4qUXvhHXQ/eO9ykCq6K75\r\n3LH6olzwK60UNE5Zux7MAMfyv2CHhAhQ0eF8y/UgoWtCC8pUoJR4CKnsl8NQ\r\n6Rd5/XEXYH7oOrXmdfCs2ecZcOObEciUwBpwTWOW1gEuQf62sgjPUdf0iUfl\r\ne+grvL7TFoK8IfcoQvjitKTVgwipqlNMvckJbVkZhZ9l4E5AcSEB1jJIo1DK\r\nsL81/VCMih4nykMViNZqIPePdjJiL7E6t6NSst8ZjgvtNqwH6SiE5h5tIVcu\r\naqJld5FbIHStRkGElcb1RbZIJku49RNZv3+ttv0EzQayp7UE0V8cU23OfrMy\r\n88L13ybeYnD9X9qiPr/kcvh7JoyvRXnrhHw=\r\n=DaNu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.18cdc9a00.0_1663016551601_0.4107920985092208","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/typography","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eba42fed70ebae777ab6c7879d2225feb20bd430","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":22,"integrity":"sha512-ZBJ/RbtkQ7vGyOCIIufoq7DHFFe6vfv1kT1JWyG5XHlKdpw5uE2aiICubmN3g5dn0ItK3luP/AKqYFjArC4tVQ==","signatures":[{"sig":"MEUCIQDdRJD+oSuepBgo2o2ftCR05BLUvQ5yLPcZDqqY8ViZCQIgbjkfKCfNCvp3+SPY8CNrN331YtnMbrs3q9YdVssjrmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQZ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoadw//fn2eBf3HQNN9/T4bDq5f1flW7Mi4vmz0kyau4KlcmPfqZ8RL\r\nHlLwEVLGl7+rsphnfcUOc1pFueIhEJbGQEJY3AOD5coBAwyebXM1wZM+Q1am\r\n6sx9A22mxGrUKn7YzT6gWBgPGZcEd40H13nA6SOrtnMEcZu6GwuYq2ibLgw0\r\nMXMv/nrbLDD5bRKUwHJ3oFQcbjjBw+WBheYsn75qpuChsH5gb4cMxtHfhk3S\r\nceLbIojChwkyORFLfPRRxWC1I2OHJjXihayC/Lq3QaClVGTWpJ/Hh22tAIP2\r\nzEUrkCNNQ3X7oAAjrjdpflklPHF+YXXldRjwc550r80Vi3y6ev0tfYj3A252\r\nFhanc5eai6z8Ly+kPqJe+pVEMRZY5JHLNzw/c0i9fPttEobvOhMzuT6lEBWu\r\nBEDGQPubYM34ROkTNR/yiMxC5S4PYDsxb0BcPMg+ih6HeyAGwl7W3dsvp6Cf\r\nND+f4eymxJfzIgerO9Z9/bjeWp4vdNhXCsFyUbHUmfaUGoasUkmxS5By8HOJ\r\nO9vUvKbrC0HaOM9ORWqt/CaOUG4o90aFuMXtonNa36wUJGFCgqZCPDu6fyOE\r\njYDxmQe/0P4LnnBPzOvBTvzEZfeXUY4PTsjGwkKpQZfAd9Or6X6/LWuxCnVA\r\n6iIbPd6eqmBZBeTNpcr+AxrjKiyYwb+Q6L0=\r\n=3jhu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7ab3cd3c8.0_1663108728559_0.9851225333336759","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/typography","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2860d244d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d24bd6e1badc69fb5e5de7dfe17a201174c3890","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2860d244d.0.tgz","fileCount":22,"integrity":"sha512-ZGquclB0P72ybdqy79FLiyc+8VZHszUpfJu1mT/cZUSDbDQBh+CnUGGTSj6ARmULw7q1JewJR0BkmpJXgXLpHg==","signatures":[{"sig":"MEYCIQCqcroTPfvbv/BtxN0BV4dM7S3lfazf8CTc4apHC6PaxQIhAIbJ+X7cskrMnh/FxB1VtcZnN2uYEfaDpfTzGzYjLZiX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP6lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLmg/+Nd85BfZ/y721Iz0PLCDqlmmeV2v5tAnfNzcVMw35rlX7q3al\r\n/ChLa53khZyKHVlK+AGwM4jaBG2R1uiebW/ZDRy7zIMh/ApKEPKvYn9TXzKC\r\nCdzGXRvPZkuHdi/3o6bcNB/sQ2/KGmOFrwiqI6qZ6GHc0VY02tlR81A0sDAW\r\nxfK/Z5mJIZ2DqKF/F30XoZ8NCHXAyWZRUtSIuM1FWtEZ7xzwcg2Da01MJJqq\r\nAinBEuCb3H8vHVL+EFWuJDy56qrO0YhZdMnRUfqL11fRAaLyeFPj+HQ7TcRp\r\nVZ9jwTRhMgxNzTx3nM4TzGg3DqC2Gvt0SPAJb5DTb3GCjJBiVrZolc5ykEku\r\nMslS6aEYg6HlB5AAju81SXGsPmsUzO9qhDzdnQ05qvyxONlY9q+TbRJ494So\r\nHvkzn5ZD6CIgr1Rv7/ZYIlAm6Os6Y80Z+KaUSYTfrAhh+Cyigq7ksXw5zVaL\r\nFL8X29Ta/b2FzBRk2uDyNYfppx0khWosRPYekixr/uneQH4kQQRGQ9iCkJeA\r\nXZscgo3FnemsDRy2LER2fb0n7V9FhP4OhCTF3q9IGbARw5EmuMdZGfyJ2vRR\r\nyl+y2/JiSYJA5hdU2r2lLgIC5HU5KURdWq4/k1O16pNnrUINzUxDNhlhGGVt\r\nf0h+ygJFSc8wi5O38XukFAImtuMUsC2W8M8=\r\n=BIiI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2860d244d.0_1663368869246_0.504835869328216","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/typography","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e8726533c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90e7c46589f13f65926aba3818a737b9d260c13c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e8726533c.0.tgz","fileCount":22,"integrity":"sha512-UwvUR/HOf2S/nCn9GeElfagRtAX4mUC6rvHZyvsLqJrDQI5gEFdz++Fwp6xSfrlnE2/epR40V0plWGyJcIIhTw==","signatures":[{"sig":"MEUCIAZpo87XtCd0E2HcFLh5DawX++7wcyzvgEwRrTWG+duCAiEA1SakJv4MeDhQCQfO+TRse6I5ECVQ1XlidL737mL/ML0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNjQ/5AIXP1w7h+MDKXiGhrFyqurcPDAEDUGk+xjVhNMjhrQ4X/2Tn\r\nLYdMVEUVDYQrqV5nbp2UFT+SVKHwcQG4GvIfF4F+EQ8RH8MeyCr78EbfRRYz\r\nG5UZrMkj1DMU/1kVgqwWRztMA3TPRH+kugNdFyVWchyjdrAovkizjBlqU7Zw\r\n1noH9X1cuhQANp4Z6fxGCfQNxlbPxc0lEI8frJmwMIfJWnL4O0j32YjDPNb8\r\nsTEfcB/0Kmd3GBzoeavisXrEbyT7RH/M0kXCs+QRZmERciwD1KSBIC7f/UF0\r\nufpaXzr4yaMBwnLnO6ZdaBfsV0Sld/Y1Dx/te9YnGjccQ1z0cikeN2IhTaT4\r\nVRlTh+LbSS6tg/Cit+FEx/q4dfC7a2yiyi6uqjgR/KbiZ/6EN3TG3O78A8JW\r\ng90yreG0M12RnU9C6NAFV+4Ipwzcg34DEZR7a3Q5xTm+6ncAidg7obFS5tb5\r\nn7UEIztCchhInTIwkZ7TYH6xaqKREuRzDK3B82yAzmWRApu/opgmcIXrpsOQ\r\n9h90LwAxFN/T4pbCauQJWR5yZzv6RHQqyTRsrfTSNT8XLln/tJJn7MHJvnC7\r\nSPrmzInZVd/l9gKjuvhXLcEGB8BBlnaSs3gL5ZOR4lts7kBp5KeqRtvXYSS6\r\nATjupWPFuGv94XctfLJ821T9w+lqei52RTA=\r\n=lFeN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e8726533c.0_1663705038804_0.8625857273436166","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/typography","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b89eb7cded5c8313785a4f9ad0afc477b6201839","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.00d8de0aa.0.tgz","fileCount":22,"integrity":"sha512-HTDtYkrK+p8F5MlvjOSH7mhWAGVVBVTUUOrYGwVPomv0gP7aUAkvp2+PhMpAB671qzamDlIf8pZZBgkOfQzG7Q==","signatures":[{"sig":"MEQCIGtZ7iaMtErA3+gTygUp9qyzBtTbXeMSHkAKIDARaErnAiA2sfZsIRUZghnW2Ubqqgzj3M2+gKN59ZMOWm3BOHKKhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyuNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB1Q//aonRsFp0UE1j8h8h0H75+4kotRBmloZqHt013O6bMDaC0vBv\r\nTFnd1VjWSD4RNhJVqOyUvUtOGf2W1tuDhp+NqrLhB9YVRCeAtak7Scc57ed4\r\nsd6tlAJZyxIn9VtXL6n6q3s3uZI2kcUS4hHUEEWpC0vGqd2ljUVPu+aY4eIM\r\nhdBvLbOc0eqlIIQHqzf59RIWjYVsqeAxIcDG0q/qhiuHSlVzErQyqtjxV6Ot\r\nwJys9M8qjmlnDoIJZ4bMVT0PgVo6dBSEQ7TNVizE8bJGkOwWub6a9n3drSlN\r\nscReSwhTtUWzqK/2Gz3m1ldHaN5mIWYMnasNrmbxYDT+25wwkhOLmYRuFrlH\r\nxj101B//hTzIpkgTLdd2rMhBlzqB8Ek69daAx4A2SgNR+OT3LhcYHmzJ/ow3\r\ndu+MZE9+82typ9dvVWzNNYFGOBjFbVzXwkW0210eOmXR7knlOJ2+So2p5kj4\r\nOyLkMaiN6M4DcHyiuiIT+Zzy1MYqyD8oTcE8JgGgJr4BqLVu9k9aPJ8sigWP\r\nhwLirqT2Af8mntRy7+0AOu8JUhVpYVpVnWBCqWFkey16JsDSvGiAGUF55j1O\r\nDfqmKdxdj3U2rL/xX6Ll4bhfljolG7VGso9d8g0bKzlmDKM/dRUuIfEanGac\r\n7vv/MYvVQ3qFtF3QCF/LR+Xf5fhMN2Pz27I=\r\n=TVGW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.00d8de0aa.0_1663773581317_0.3189756218984152","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/typography","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.271aedc30.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8d2122455bc3b31b5bf60b2030ae3d02c60addf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.271aedc30.0.tgz","fileCount":22,"integrity":"sha512-RmdPmNqmd3X9GjFuXplxpyph/irll8YU1jzP02cDrNhQ/1jZKsdGOPM4qxNgTU78luHquGIZ/i8Z1AsvlyoW4A==","signatures":[{"sig":"MEUCIQD5FebVsXkPucuSwCLNGr08e7olTTiljJkPXReYJ3D4zwIgcKascUEk61Sa+JaMDoDj/zwCkMtsFXwTZZWk2VHCmE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy9BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoK0A/9ETJaJ4JXWnr8o/QLzTO88HQAHzpKy2zIF9gAnbp2ItC8Byr5\r\nWRNkDdFIF+M35BM1WilF88GA2UDHQf93U4vOTfvZikSgd8crnzULahVagFtC\r\n/62L0Jis7VclZTHRoEcBOBJBp3zbRB9tpNwfpO1WTUDiGPklCcwvqrl4un4J\r\n7G+xMH8i5ASaclx5q2ZPuyhbYmr6cIw497NMA05i9bKCDrtlCIm1cz8TvTND\r\nB6kiAiH+uaZJMNGrENAcLe/aXufRkW+ilnPt8jmfmep8yvEGr/fxdWdzsJuv\r\njyhfsugSGNeXQGJicfXJDW+Iha5LCIc9jksHuqYWt+s5944uilZ/l1WqrsGO\r\noPWJWh2LbP0yDlCV4ZzMnXrHM8Pn47z/YO604ocqTSvYWneW8zSOl74qN6Cz\r\nCOTO1lYOieclc3GEa8DZDStMrVuNSzAJSMAM3GiMhMhAj4lySL5glH28SQKB\r\n/5YzcEWwJRI1xjOIvswXuzLDpeLNn9LNRTV0TWK7qrMh5K0STrdxRUc7a+km\r\nmhFK6XxqoIxWx3f+9SKNsOKryrhJc2XF+/OmP2IhASKClVI9PGWZVRaJliVX\r\nOhc609bMOzhSKQdQ1tSKFpqhiZHbRdm1BnhG+rVw+D4+0ZcxLkg99x7NsALG\r\nRcFpWicR7C4WgX/ewWKI5yYGt/538FFA8Og=\r\n=TvwY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.271aedc30.0_1663774529433_0.36096435036224905","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/typography","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2721bf5d9f3d9adee8d50fac2b5b2b5850bc2169","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":22,"integrity":"sha512-5Di6mxUgRpcbipJiHYDF+TORbvAmimxBZfcE3KMq+BvrgPWaPZhCdOfKaC6IOlDpg4kbnAZ+E4Tah1pP8c7AYQ==","signatures":[{"sig":"MEQCIBz2pnITyJav1U7OO/wgr4SVfNwM0ig9sCX3ENJ6Hy6OAiBydyxkKk6o/9DgYHnrAMxyPaZpdSJxeT92j2Bh8uBjcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1L4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAEQ/9Fx5sTEeNL+Yb7hvlI7xEepicuHlTk4/mwHnuvpycx+gd79cf\r\nmeBlZ5aveG8aAZYdKQ4G7VQRNUs7FhsrgY8tTrgJzD7q4kfvjHkKk2E3mYsw\r\n+uOXHg0zpXDB68h2Jd+EXbRJvp23vTOVLT3pLuYCO60E9JBOwMhQXXSUyNkc\r\nQIQ016j/fumoa1EtgJj74imQSULCyTjKuwVchBtYNmrai/KyXsl224G/VbCZ\r\noVJcJ/BBMZGzY6GEH/GE57/EoJcathYx85EL89gESaZpVez+3X1FNTxHlttG\r\nLF103oMbUFdnF2lWKiCkHqgFZv3a3VcA4M7AI5pTEUYJM/ehgiNG8BDrphjW\r\n5w+5iAM2ZKhaVGv/P2RM34optGp1gmswd3+ikzv+KBYSAzMHKnaGfj3EyYjO\r\nQuTd3+5ADyUqzE79puxFISlXtdOaA6tYtUpEKlNf/aFP1XUbXkd4SXBZoypc\r\nwljjlrNQtyuHu9EG2eZdg7zSAVFQm4UPjFFaV/9jUxSVNt3twuELn2CVLIT/\r\nevoksCAvT2QVE9nxvRNs2OMX61T7ZEuj+IneIt2JqzVgYfAULJT3Du6ENUe8\r\nynnP2pXz1QX5Tzyo3Sl7o5/dVm722IpGUub5ItS2rm7PsJersCN0ZWl5cNuA\r\n2rUqttuNOyqJwW9I66kRPBCWwQxUE6q0wVw=\r\n=2Qy4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9f17ff2cb.0_1663783671871_0.23585449236022926","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/typography","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5b4aca4ca537e27ee405d1589cadf7352f5d746","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d3344c16f.0.tgz","fileCount":22,"integrity":"sha512-lVsCNTyN7KwfK6nmqAknv2+bmjDmaDnXeoNiN160aI8R+mkLBVxL58IExw7Cz7tDPm7g5ZUEwF+hDFoCGsG+ig==","signatures":[{"sig":"MEUCIQCoRHwMJ3t5o8cxpijJfu0CPd/uHOOiLbb2gCFSgRNMVwIgI0YtRwlA39hjvMytLPdnruasTQwozRUdl2yP+l2v9Xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCmwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQRA/+KrqIDxm2SpKEl31dUFaISNMNd2SU2LraTjNSwlh7bgJbm9Mq\r\n54HTo/NchBD9oeVFPtY9jwNsFHE/0oXcDmfrgDSPjguEOP8Y2qmUMlqCzfOT\r\nLQ2OtW6cJkl+7g9rOOwoj/A5jqGEV5Z48QqiIcJTCtG4CY9M988OQcdUQr9l\r\nndDDei60UgfxiJiesNFUjzWNKqchF7ETRK7b/vGUDJXfohkN+M4HPpkgZAxB\r\nXuIMnt7o4BX75CoL8Zob554Ju00A614OP3Ay7i9XUAyu0Cca46u6IWcfOkUN\r\n4lg2Hx+SlGQTzejhLhpqjpTc75tGXuvXB0Qh3FD/mJNf73aNUvxj7L/rIXuI\r\nWK9RtO4llUJjT8TrUIzpG35OZq1As9UnwH7uumcxywNeewvxmc+cYIfGCOdZ\r\ncsm4GU/fY0igHBYAHYAN3lrqESJcSQ2/FIt5YppGlpCHEmN5YkrkwXuop5RI\r\nnfyYUfp6msoOg1SOEho7NE9Qm89qTBzdH/gCm9da/vPaxoU2+44tm10MhbFV\r\nftfHIJUjM0VS/UZ2Qh4f7hV1UUJ35dW7htGyVT6Q9Mw3dirP6949zE01fD+2\r\nom4jKu1ATK73OMcc7WZT1H5xHQ8wGVMrreCAAr9+8iHk1ttI5Z0ZjKO7pg72\r\nMY87d8g5Yey5SiwWMJjsTAZ/x/N/CQ/fFWI=\r\n=edmh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d3344c16f.0_1663838640250_0.19937573751697557","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/typography","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03cf1ab028386ae72d065cfe327384e8a8b7f113","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.94f20ccb8.0.tgz","fileCount":22,"integrity":"sha512-/YxD5kttq27vqJ69vvywCvH8F2YuLmSphKmImMGAcWAtFneDt3Ae2n81uELENzvoqrBS5yeHF82h/aBgumu87Q==","signatures":[{"sig":"MEQCIBcURsaeUom6rmT+oqwNl4Ujsls6Ni8TZT842UjZj3rIAiAzbbhxsdMEQXIxjrxzyfOvR236nW0YJyessXT4Lsx59g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHdRAAiOw2uGu08DwP3WSuqB9k/h/QHaJEwt7y3Tg4yN0QDart+wXS\r\nYoghWoDsbr/GjoEmNK+Ouz7oQDOiQJT60AFZJCm/ZrSdweil1wbU6O1lP+ni\r\nD+j5ioxdKTTdRi15sS0sxByo81MmTgxcLEtc/GSsaL0zJ7Ev3eK5976mqh09\r\n2vnEpfezKoUaqhz7znEV8paee60JLCWRAKxougHnMCeOZwkB7Tjz1qsRdtma\r\nvNExWtFJYcDGzv11xN7Lwc1N9iYQy0JtX1XRxymTVMqgmUnammBhVscWGjZ3\r\nHZeLLbWFd/BcyBDmLIZ7wMwJ8AlBSu4J7XSqLd1vPviHjPgFj/LVD+r/tF96\r\nsm8h3jvgHIzJMUXK94SEspgl22jqm6Ba1q2dj9Sf3nlKNkeMpUW/i77YBuCX\r\nXdxLcvoNKJDqsY7KCxXmxVEZlRaggUgbBMQtplsJP9BrIE6TD2jS1oRr7ThK\r\nt9Yugw8GkSiL2/l325qQCEVDASisMrcBvK5KlbVAzVLtTzJD9wL9Va7y5kw/\r\nAIKiqcS2YRfCq/EtqRg//ZGi8HAQob44kh4n+F+Bo0f/uJ9xqO9p0MAHMVzZ\r\nUy/bAh6LkU63XqMiTsgyOsFrG1CU9qjqjpIIfFWb+jM2FDEaq4V9FhA1VOKq\r\n+znHWK9k1i+1Sx6tNYNVCIK0C0pf9vS2aXk=\r\n=EZyz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.94f20ccb8.0_1663879643076_0.3390854185801486","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/typography","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a058517b69c067f221daee62edf46d05b0df83a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":22,"integrity":"sha512-56i55EkcvjdEjaoIACOMvk13YsrRUTHa0ZjG/IrbmdPagYZJCNeBuG6HckfrVaIFanPav/TYmk+wFxmyJ8PFTw==","signatures":[{"sig":"MEYCIQCW+N0CZV0ZN3rFJOvmuB91X0megS9IF9ykoS7ESToBJQIhAMYBdcOKqn9j7KtkFTp87qGqm2HZMo258KwbnqQubfMq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcu/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4sQ//Z+l7fjJ3ZvdqptcR68TKD7H6O8VSB9zMPAG8VYWLP4VsLYbm\r\nURRAtlHjCTTdXelAWu90cQD4ec/nyHwoipmScpfnsOXiQ5sC0F1XxLjc/tPZ\r\nfgIJLgoa9DPPWFsNucWxRTBRcbxZcQPJ3ZUmmuKyMZ1JldwrHdk5KXoFUfC2\r\n4dVzJr7x/5m/KCHLZprlFId1AZ0NDqd3aKHtJ4KAKf+HeV74IUeoDvfswzds\r\nIHsqCdFWC5mW9D6O/iKay0r4rmTi29miMwaE5XIA7KBg6gfEtJa5iy1RR/nu\r\n0mtmCfzxizv5afiByHp+4FpOchfn0ZhNwyqS7dcWd4WMRwzP+B7EDtsRNRge\r\nFwIWLzp5IDz+dMW0dBVg8GYkHeGiC205CkfkB7T1iw4KaG7i0xBMdyOWvqHU\r\nbndlDuEJ0B3q+UaCwYEzGKimtc7D2LnhNpMwR9m7UpGq8IZQQBecHaU33adR\r\n0HHnSIYG7bEp9k12j0VZKGFxqKRZ0GQN3u9d/dKd/vQEj96oe42ilwOepJrV\r\nai8rUIlWFJpzlMMcH/RIdJiLYs1jJz+tWuO+0NyNOEYA2AiFO7wjyeSVDasj\r\nDjVlWdSACgD2mDDlaeuTtJJoW1cGGPt7w7KHXb8CKlKqq5GrUkidiX3erKQE\r\nJI0oNlnxycOSTOD5Uezq5TXE0ik2lSKqTYQ=\r\n=M+nY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.81e4cb7b2.0_1663945663086_0.8698973868510222","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/typography","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22eee302d6a45f30e7d2fcbf537d04d877790310","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.aa85f9413.0.tgz","fileCount":22,"integrity":"sha512-mLJwA1PJwhUdXzYsnZbRJ/LBbjmSF0vIfNfLtNelA5BLSv/7z40Covk06wB423CbK5MFgXyyv8f9kij5ICy1Wg==","signatures":[{"sig":"MEUCIAtqKqsqklMJRWddeJSPZAPaykIShD3MEZUq7Wy9GjjsAiEA79LKJ+xkaX9FlvAfgYtBlWnhutAYnKnCODAPZ6eJNLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMeexACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi/w//WQYTf1yW6MJ945pdke0vQH/+vBo11CZ1G+gRD7a6CoEh9p09\r\nkpx5cgwGky02Dc5YptuwfpXVlXZQIRQp5j7P1d0VKCgh6IntcE4PCEq0aBwo\r\n8RONm+MIW9VUWFBjhfQXihgn/NwpsCszxAijWNHJDB4XHHQPPIE4ziPnBwgP\r\n5NaMzOFXBToqe6sQP/eejCSl4DK4hQJedJVhjEG1OLI80j/EyoTUJMZp434S\r\ngsuZsRsEB3CktxygTXH9p5dk7YAbRRvpKhQUyIZG6uf6pjqyFDJpSkO/X8mS\r\noEU5x7kt6hhHDPCzttDICxi79y4QZDyiS5VvsO3WsK5xKRKLL/5qGpoG1xW1\r\nQ1DLk4KhzZXrR2LBL+2+EkrqzlXDBf08jjLRfCXr6Nk+uiXChshoMnwhlyCr\r\nz8knx1IiHsWPtUVJjtJKbAoEcsi8owz4elenQGO4j/MR/BPMa10pBkZNaaV0\r\nq318qHzkTkMlot94kCmnHt+FGssr9clKjn8c+0VnTRwpryCupHw5D7nQ9S4/\r\nxcqJnjYUQVqmnY/IsxI1n6Bv8sS6/1zkMTuJY7NY7A3w9vUirAEshmHuJxOA\r\np6AybplBKEvAUGYAvRXbZfttQ+Fnkss/GWQ273+KUHMkw4RzKW7Wz5vsIMBD\r\nF+2bI1hDZC3abiUceAcaHuOgU+YncX6ApGs=\r\n=rnqG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.aa85f9413.0_1664214961108_0.7042079726455919","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/typography","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7134a7752.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"875f38a89de508701a4b1fbf2600eee41a6dacae","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7134a7752.0.tgz","fileCount":22,"integrity":"sha512-18lRF++Pbj9sdxP+t1liNoQ/FdPhUDbpJH3WgHMgdkDBrRKKBzaqy3bn/64klHUSVlaSPRu4gwYTMcuPwFNTFw==","signatures":[{"sig":"MEUCIQC7zuWVBaihfrygORZf0dKO5h15O0Juh8iVICE67p9+vQIgDn9zTlsuzhc811ZcJoF38jDA/aUQGy+TXGc/oZNFFJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiA7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqttg//U2m/gXT9lEIcB6UZixeYfSuN+foWOFOCl/5QREJfBtPBxFZ/\r\nxxhAwJFEHK19o65ZKmLpUtEVdzX0n53JmbbLhfjF4Ko9cNmm2q4WQFezW1Ja\r\ntEsdJHIOnGj4cF2aagkHflaId8HBJ+iuiDLuqc993iicu2RsibqwyQsInegr\r\nCoNHnUdrBXDWFWkIzZ2nu+Y5UKj5buVVclw5uF23De9cfqbeuQoQxqCbsBrY\r\nA03DDmIFo9o72YK92L6S+BdQPfsFbLGs9IqjE82c52hbB46PvVzCIXKqGtdX\r\n+GvhQcCubVoykpfx+R0IUHdxXznu7Px6D/DxMg9Ks5OS+82DkHtNp+S0vun+\r\nvYhquot2kMFMVwmqx6pM/+B3DIYSd3g6vTve7y/n+Id77UoRCz5sKAKtkkPz\r\nEGTw3uQ4Nkvt8fG7VwKJjrVstHO31ZbM0oYbIA3ysQEM8MiJnXdytI57JLFc\r\nIFx8O5lorQceaZHH0Mi5PYOMIfcvDoWlEeSFQNDXhg31o3zZe1ZElkwevv0b\r\nkDLTUQgbXA2lhMs/ku3A/u/xwksXdOYR34meXXaXnX7QTN251Rds+XgSHGJ5\r\n5yVXwdIitIHlPBO5hkoK8UQUYYsgucxhAouwI7PBlUWRBINT2ltdgqj4xKHu\r\nfatisanZd39MO87mdREgD1DApxXxY+wCkRs=\r\n=kPGo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7134a7752.0_1664229435691_0.7955503786097915","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/typography","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a7dea85d4e9a8aeb9cbf7c10556bdd2cee66777","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.70b8ac16e.0.tgz","fileCount":22,"integrity":"sha512-99gmWGg/rAoxYnOdlrizi7INnvrVfA0PQOdK2hyTtAL3lJ3cMZBydFXjsfwgtR8EvYDGv1SXPNie1Jsj8DwlwQ==","signatures":[{"sig":"MEUCIQC3ebVzKX7naA4fcMSb09gBbSPQdYMHoPdMYtShFnXVlAIgHyuoB3UwjfIKPOWg16eAbh4glXC/Q8OCEm/ylISYpVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgBhAAgvTa5VzDXYtfpWL+pQ9f2ZyRxSLA11Sp0zSwdp68ml//fYkl\r\nPBFQNmqvcdZctb3bEyLaolQ4ZONe6kBXR3oL7kEgATgPNsEc4pZ9TvfvriVQ\r\n9QEbtr+MMx5D4SCNO5txNjaoo28YxhS+KNMLWQFp8dR1ScxmKFBQg0p5jpRP\r\nTZZhFMd8+1vip8ilDlygAs6kJ48s7PYIKuFziNDzS/mXixoTzdmiMhYTpbdD\r\ngzCppid92nY6Fkfs3tIVvzXydyv+1bgi4j+LyvCYyo1S+6T/2lflrui8X64G\r\nE8nFrQZXFUBUkFU4uPyPsbwSykbG8+wppmXZRKBl70/WGiqLpYoI4lETeFh/\r\nEcbnrStG8AvdfFtKpJ7m/VDTIWfR6eSUrIi5OLyp6TxWvh+ronbC0YYmh00q\r\nwHT00BYMQqOEHxCWO7rL4uve5vJk1I2MdrCIuXBc+oyKGTizJVZiyAu68ccD\r\n5P+BIWA2RvBjy/xwNGuptSeqP9EOJj2Kxb2zrLFT8dDswk5O7fKjVjtdq1ze\r\nvxJ8Pn/ZoIhFiznCK9Q92S2FBM8MDnIokmdolJgzCSJ+g4YR9zpU+xXgY+hx\r\nyM7U3EVANmIlFm3U0Fndc3L+qYr+uG8yNPKhG5yhotZVDyzhUG2tlvwkhodX\r\n+SEG3jzRU5N3G8DEB5yIcfLHvfzJGnHa1UE=\r\n=T/T/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.70b8ac16e.0_1664318668561_0.07051368841046401","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/typography","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c20d74405.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc7b5d16df3600383794da546e9f01e0a84be7ee","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c20d74405.0.tgz","fileCount":22,"integrity":"sha512-cWj3JZsSJyo5KPXtJKpptgw0zAHDEzXafA4bqG1NPk5JXeWmkjxyY5ppphwxBYa7+PL9+XRTaTrr35KTmHHiYw==","signatures":[{"sig":"MEUCIG/hpIOFp6U5AKr+3TJgrY0nITWUmjd38QusswWKn3Y8AiEAjtCzKm9NuY5qP3b0I646FGex1DcWE2FFEEizcxXXYsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4epACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHLw/+K/ri/cIYfbOAZXWbe5b9EwrRinh4jlvCioe1Uh9ArTl7NG/a\r\nG2NE9FnKNzOOpoPaFl8ao1bGiBeZ/q9U85Cvqag3Dyh+CnaNPwqmA2m9NxhK\r\nPBjF7RBZjVmxBS5R60E5UPAt71vGAOwbM9tH5Ow9JUmayugg1f1IwKkwrfny\r\npQVg7aWJbwricqLtl5IIo3Yyrqy2arixioyX8+4gKENRHEm+IC9DZLxzh5K2\r\n0kUmU1WAygCRHkkMSYESC4fh1qatKsHHEtW68vssnFC7EnzYtKGsQjI4BoXn\r\nUyu44zUsNKw1kdXEm8ttWrlprt2TFK5gPRJWQAMbmvUtIOePefsqcgrRKuAU\r\n1nOd3RLd8UA9oC/iAtv04mZm3ghRy51d5kdbpSQbw/WxbJ5cxsgKcaFhOl1V\r\nnzoXAEhGumPqgn4oZOiBoCm/+GiAoMqwo0plNAbqhcPctmk+DLPKUHZSwzPK\r\nF3FfPacMDQtrWLrv6s0vK7QmFhEBswYet21PS2RWVH96vESbYD7hkseCqTqc\r\nXSd2uJ9MBTeWQlTDE2Q0iV+rlj8IHajXVjUnQWsKEtiIvWZqDFWkBgN4qc37\r\nmzFSHkpLUuwPStMSdYPFir1iDJtyhVhsaAU5SrT/LUruSzHiicTWChIQXL8P\r\nNV3nyQQ/i4duP2TwogwuxJC5BTFaWl8gTcU=\r\n=ZBzk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c20d74405.0_1664321449059_0.7790528204205884","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/typography","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14327f84574d9efe03e4ca14cf4e475bed8e9fc1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f033fc8d1.0.tgz","fileCount":22,"integrity":"sha512-feLoNZuUTBk9N4QyWqYPu5eXWIMimfnAbr8+jZn6hPK5Jt5NSNGrSakL8ozG1IDi9ekctY66D+kG7mLDZMZNoA==","signatures":[{"sig":"MEYCIQCcVrj6CWkqfLFvDrEj2jIZIa1+K5HhK37jTUco9e/2tQIhAMLIaRSdrs7wIXDUTgh23TPf2ircGdYFgUmlbrZ+Dnvf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6BhAAgm3cSyCi7QaKZeVhOjqTXViaoYORJyIwXrNklmFZZMWi2aUM\r\nLCe/PaUex/0/7p6E188TO+OGTXG+yVpwd1CN/YanPVoquHHyQpZq1ip+umyW\r\npvDze+Q3vbNaOGpcL8hvzmJjtUHnSO8svpjBUP5Ja4ijM+QWhQBDD0AP4ee8\r\n8oiMuziNry4NZb9NCXszW9zTQxLYkO6RtjYStSV8VOc8rAnCCX93U4Rb/fsF\r\nOJr7j/lNoFGC/X53l+sMOZ/kW7GhS2s8YT0G/eKSdRYviePPYubmPQyT1Hor\r\nzeV2iQ13geI1wU+GsPoHO6UKBEWGQDb+Ym5BsWOw5NDHkT7T724Nr/VEenyX\r\n/N5q6AFsdUFdbbXk/I6eMg1S2NUzO6ssZGrxsBXyrF5KFMImVU1Z+PNMNfvu\r\nhjPHkgLAmhEgtwzu8WeXPBcWpaholerESGpwlk4EhS2VFndlQYbLtLj1dBdH\r\np2vinbwUaI6RB2FC8ECskn9PQvnRXznTJZDV4wZdlqLeNRnMvVbu8OkjNYCr\r\nQ0gHPltUzQrWWP5xzzrThz4lyaWKcneI+bKBNABa2RRuPWB2gwmq6L2VpT7G\r\nn8oVw1ZUJ+Zw5si1s7A2A4tm73QZIZOo6CC0v8JmaZVsA2ONta+OPPcTCXRy\r\naxgXXVdaku6Sq2Iz7TjjSv4xYfOBcbpJa7g=\r\n=Jizb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f033fc8d1.0_1664323014106_0.7362367435732504","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/typography","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e63b08a88562ce55dcf1febdc9423b311bb3bfb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8d7ae912a.0.tgz","fileCount":22,"integrity":"sha512-kwaBzsKTIPmEQEII68IbDYxVKpIChNxI+lytIo8LsaSx1yVVLF/lEMADDzFKq0rONeNWM0wPxZ2voPWZEI74YQ==","signatures":[{"sig":"MEUCIGqQFB0KNBi7a27lf9kyFjKHbHSVbUPU2lQb8cQSeKrLAiEArRbbbaAjfd9zan9z2dzrFZpKi8OPsalUK9tvyC/mSdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN8w//SrNh+oFEiHZt4pwEcS6oI/Af5gsORvsGWF7QRqpk6W4vlMXz\r\n1MNxQheNVRFt4v9WBL/vbXtNHBEa0pUzKdaRLu52b8RIt6sTCd2XjXsxrGw2\r\nqjeJPHBTa3yiNGhJG6faaa78+08I1QtpWAhVAZhJtYRc3j/TiuS8ynudfPM9\r\nreHfvtN8qIREg6Lu5qU4CLCllMI3TqEbmiBZEJYN6YbIjhBCgo7CO8/rJRVi\r\nOQt2EcIL7DPGlTWFiZromGIyjPgDLsPHkwRYATcAAqpsA3Q+GyCEiKmqZM4x\r\neF6O2rNDoKYhj13vDhHdx2humwYbKNh6k+tfoXLwKHAWCpNIFIpzfv18oghL\r\n8xRKEFr1gLwIjrHV/WCigeQmhrbunbNeFYMh4eeMYzi2W/5Fpenb+HCMQFU8\r\n2Y0d2HT6ezb2vBx51gxKYCkqR5BBxd1baKFdJmWMNLISVEd4JhBQYAs72MHc\r\n86askh/MQsp5ig8qW6unuD6WAViJNCnN+DGKg5qpFm+YVm63rJM46qrx1yUW\r\njEeC1o9LyUxnWdDIw/3cnfEVLtE7AZq3weo58T0plcp9eZsIRIVdxJwe7wsu\r\nrhgVXPrGHyscMyDtNaUX/SRrn0lo1NHeROD4V4b5OTCsKY8nwCfgKxcB+HMj\r\npNRxV+vYitbQgqKGXZzKHpna6+lBbIgPUto=\r\n=igs8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8d7ae912a.0_1664351740287_0.40567786889002","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/typography","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.db414b864.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ca125e5b3c7d6fa4aac33078935573ea22b5e9e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.db414b864.0.tgz","fileCount":22,"integrity":"sha512-wr+X+5X3BwoIS/1U/AzZJmb6Mrlr0+rnFqcqAoBmvkYJ2LPUv3FCx55bCRc/1OYpPnkResCIpJIfQ3V2mp9faA==","signatures":[{"sig":"MEQCIDplZBYfJhGk7Lr10suKVBbo7L+OrHwMhDeDBali8vKnAiB7rwlOdk7koei1YxQj2NKuv9Gw3q/aZnh8cP6a3Pe9ZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF+ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKTw/+Nq1FYMJY9tN709QSUfcvN05u4/yGNhIAkLxeNm2iXh+HT23e\r\nDQ1O4QzFQgzM6ieqB2NO1/D758N8Ilu/x7zTFyTFO86qSKGOhWv+4VOgomOs\r\nu0aVg95B9UjVm4Bz/p8YbpoXRpZbBX/J4uXb+ajQY5luCDzSwucjWqiObJVq\r\nRtXUaZwLUxthrBS9vY6LX7Ddm8siLCagZ0BwAJG/Ap+oyZjhTZnEX602q4Ot\r\nn7I9Sw3S6pGQcHcOijiqBiLLpdnX3kRETjJvBq4AV7qr35Qo190Ti5VSECxr\r\nmw69CuGDBwYiyYdOx3damyP/G/ftOvFnvLgF8peZX6FIkLR5ZgPXTGyRbI7b\r\nQ741PBnH/9M5aqPdA3podQ2tVo6p6m12qEBIZ6eOr6BW1uPM2tQJq/oYAl/d\r\n60SNm/pE5FfA4H4H51akGq69ZOY5EyB97+UhjF+3ZVCj8YWKHmBPOiqDMoYm\r\nGO+RQm1hTlcn7xXbOdjo+wBsP7/hQpcgheSsi81fSpP9o0aeA9xUJHC10wUn\r\nBHcfDLN+UVIs8SlFPnpWH524Iu2Udod3PMSw6JIfEB6xKa5eYYq+2bM+vDRT\r\nQzWiX+bxyoP7ntBGwEYEJxKVE1B0AOAEZFcHxrnc42a4ov/WewlI/eXYhgi9\r\nU4NsBTHM1gt4SpazDdkPXeVbD1RQvsZL87o=\r\n=mRHs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.db414b864.0_1664376729044_0.808851684741027","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0462d134.0":{"name":"@material/typography","version":"15.0.0-canary.c0462d134.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c0462d134.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcc54040df8f2aeb94a2b56c952375d45402deb2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c0462d134.0.tgz","fileCount":22,"integrity":"sha512-lgIjBEvii8Oe8V1X6QkGLuthcvmNfDionBQuzcEFOs64ydvZq+HOz4VQtNH+F02de94ApO1PUmzY9VtPiag6uA==","signatures":[{"sig":"MEUCIQD+o3ZV8n6j+CU80W+XqbTTkU/AY/OBwrVWwlil+twvBAIgJ3usTKWvBzS85S4QnBg9HfMNxDW07n8R4VaYREAeiN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNImrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHzg/9HKo+DXcyoJn1tkKqigAKLU9SPUegHof8y3IWxtSt5QV4fJ78\r\nfCKSxBMJwxU014nkMOnVLZwntqeZaPEUAknpAANRV9vZbK5CnDuyAcO/p4s3\r\nuVWtAN+GQXF8n0ussmzWn7Ry2XA6WmMI3zt8Vx5WStceO3cmLYbM/x9drxtf\r\nRW1SZL3X2VxB7DUf7U38WW+Pl+eoEwVlzPMHuzFrfd/HPnHD0/cBz3naagxq\r\nx8hLBHU+sxZZFohDM33ea8bB3TXRkzaB3/QfDhpRAgMu+3Sa4Ee2qxQkUHpf\r\n2Ys3QwCwvBIeSSnFfbe5T0w0CzPwd/xlQf/kWP0CTO76FHpahfuvDviQsNbS\r\njbgMbgVQUDYVU+/SXwjJETHkpYJmfWKmH5gujDcZyGtvhMQAPkmXiQbvQyRB\r\ncRY+4d8lY803bJTXJVhVLK+6tOGb3byZzsTLVstYl84iVlHeJeMQfXCuZeFE\r\nc/G1hvbVm7JbLghS6fvqxqxEzbRqOQc0TXwRoQtUtLEOkvpM5NoItQD2b9Lb\r\nr3MOKQxdxnXtKa9Bd2STybhaqdtyykEzcEF/EtkZIFFly6L+qtB9eWKkAGSy\r\n9XG6TLs9vAkpfc9euWreC+h0NSbNvdjaQnjnVgvjFqYHSmygbkiKyVQEVWv0\r\nPVkfwphlhzIAzC5NSFiks13ME5FNIASm2nQ=\r\n=eVUN\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ac1e8bf31f6e69539e68b22f40f639cb7eaedca8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c0462d134.0","@material/feature-targeting":"15.0.0-canary.c0462d134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c0462d134.0_1664387499557_0.35500256215834636","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/typography","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4df537488fa93194fce0786aafc048d0a377343","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.28cc6791f.0.tgz","fileCount":22,"integrity":"sha512-K+2E8R5kADFdlrxwh/wEwl8xsZPbb6ofDrlPeSwRlckF6ij0MJqtPpxhI6xjXGCSLDS+JAMg2Abekt3B7By0/w==","signatures":[{"sig":"MEYCIQC2WInM65WTw9Cno3xg/FrVgnG3fcGngtUGTuJSES0/6AIhAOPl3xy6mFiinIVYBc/J/EDHF46fXudVKA2T4jMsk7cb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI0fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMOQ//XsTsC44UkhDlJyvDbX/Cr4Yw0DcbtFGYLcC0hCVYl5tKweqr\r\nP28MfPpt+1GRVsCvEgEl5nSAQpFLZAtrEDRlidedvmyk92G76SQmNyN7yBJB\r\nNr2Jiytvxij3jR5vWqf8imcF/IFdp9TdY3PKufWvfNlV38lbHBRSeOXz2qbs\r\nut7frhDbD7luPKekjewV7infNDB7LaqHtW2SLAtxF1eMs4H+wZxP5OuVMaXJ\r\nf6fjcTry322y/JCltRMeuTnoBXsQYx9fT/TlG3fUrEXW6lwLMvZ+ezCl7eu6\r\nDe/X6y4JSpj2+kRXnjHl85rAyBCUfBjoSZ45OHcvefpRWpSKeMOdVKM8gsuW\r\n9LukTL2gHjj66eIE8F3h/sFJuaZpO56uGT5IG0uT/CJ8hlNT8VD6rPnP02oM\r\nqswU00pjlzXe2ixezkW/fiC1bSu+w4HW7iiL9OO57YYArgHdPW0L4ZQFmq73\r\nOVfrb1B/cARieLvL/42oPWOzV55NAmgjqVJ+nTVlZFTFgyiCMWocbS94s80K\r\novitoPY8AyFbpy1l5WVLnZ/wOqx4cq227d7sQlIE2oh94sWl7dnMwKaJ74O1\r\nxW0/PBwY3tjgzD5DxlDuAIgbXCTSe+zUXGj0NRcaKa3j4lb45khQJSiYMoar\r\nCJwHjz2bvLCPBJ712MoM4CZ2pC8zq6xuN30=\r\n=tRyR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.28cc6791f.0_1664388383094_0.47072789279801786","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/typography","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e649e3f93a314bfddf08defb9ed9b8c78a853a59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a515a2d18.0.tgz","fileCount":22,"integrity":"sha512-sNXsrdPFLDkJJNexSAfYr7fmUGZzwBBXZDC7JIpYh0BNsrHOYkwnuRIss86QM2Ge8xPkpYAXYFeRKwcTtMdACg==","signatures":[{"sig":"MEYCIQCY/i5yLrnKXhgl5eYQhhf5tgpTfvcgBAPr76gAZzryggIhAKXxomI0qL/bNeIvvxBeQ3pc7o6RudwUc3RQHOkhuhUS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCSA/+JVLy/IiKh5asbqBhySpgXe/R+rPh+HN+cUXQfn+9DN/riyKD\r\nXR8iVv+5ou2UODrwi2aXNQQIX8mPOFx5+qcCSnK1/ZwyCIPQ3uzvI+C6hBxt\r\njUNxEYhMNTecqu/LziW6Oz5u9J4Hs1YavZS6i7BuHSGOA7W89mY4Yxmfab7s\r\n5j+Sj3i49LE+GTkLHCLosSzBt/ntECy+22P8Z14f7/0aOD1r+rMuxRucW0qF\r\nO6CPGDx2qyt/064q/Yc2730Dl+gyZD0Bti0yiwo1pfSX+mTxK/3PIqtmy1Tg\r\nw2eVIIrtmY+nvG38k0tKEbvZ2tr9aNSQgyQHyceLbeHj7NxuEfM8q284aVRO\r\n1Ym4TjlZY6rdSwcYxhPuOOBd75kx+LTXpCbU/iyMEz74WIVvZCsGyRLPl0Nv\r\nsFCZW1h6Sq5gV2mTy+ytZ78g6paOWTVXX5LMCNms5+OFUhMNw7VZqYWpd/C8\r\nSLdyer5pPVzxIGdWojDmEvJX8KBudR1otNS7iFB1YYiywxFPcHn8lApofu2b\r\nfybjJ++aatoVZRYlhB7mLzp2XUsjDIWFk9RX+EwP4SUHfUvfKqFjsO+kazW6\r\niCYxGm4xmbOO9pSRTXwj4sxm/fFPPQlwWh0DHrS03uMHGh3ekX9a1SVBF9/H\r\nDtZ11FoQTrlyXhTXUSPl0CjorrBl9LmFi4k=\r\n=BP7/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a515a2d18.0_1664391318635_0.29777783453647433","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/typography","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ce9523167.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"260611c7328a39c5a7762da0785c329b2e3c8df9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ce9523167.0.tgz","fileCount":22,"integrity":"sha512-8lkRo+Pe8iWalZFTU1tZSnDCSP/RvLBm+L/r6l/pGFj1rc1sh0sfUKzGfkSJmSBbaSS4iKmKCwokG35mdzwNtA==","signatures":[{"sig":"MEUCICXrPLYsbxsSaLjzxO2y9Q6tdRQkPlQiY85PSaXbyTgyAiEAwqm+MgGHgCZIEfRNuhPkQc1K+ozar4aCmb0+C000iwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgB0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGaA/+Kg0PddDLTj8AGZyD3EHOSOH0GGBuhds2SRTT1U9ltBqpTsbl\r\nk4SevluPAOXoRrGh//7TQ1VMowA2xcTpF1zyz4VYDvsB/SGuWPWNwVmGu5F4\r\n5RIsPEIr6mBdQpGMxDkwdhFOqGjbljtB+BTHEA17i73DNU6dUm31+fyC/Wlt\r\nkW2Dqj9AAQOJV8nCIYAdqs6lcIcAtxJBgS9h2QxBX/mWr7FCF8RKy70lk/Tg\r\nP1FlSd01aH1PKvbrAZia3+su71+XYWImrFjwLQf3Nflp52PuRMFRLk9ajFah\r\nrkSMdOVN7ZAO9bxD6aB+819pi5XwITALw1m0CAWmmERjc2CYFTjO1qKopvbG\r\nXqi+mqiezWmwrhmMJaBoSzn8R/3BRnMgjKO5t7Iaj2qOMt/vlDzNSoOR7lEi\r\n2dxEJTzCHqpT08eMP00rWoTGevYOzoItbImuhVnubwLB9c2TXzZxyIdlLelS\r\nGtmt9ZduJYO5genPZytELOmXhxRwvmkVpvQCBPIOjWCds/SOQpajJPqQpRUK\r\n1GtY19rivCt48O+LXyYIj3sV0BsDMwCRgDSCc+HyeIUgI5KTIPcuwj49+N09\r\n3Iq/MaXlo3zA8DlUAqKSzL3bY+D96FBVrLGDnYdZfZP4BBP011xIWXQURHvc\r\na35/vP/w+x7xe84SFAg81OjJyOYF8VEXv8k=\r\n=jyhf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ce9523167.0_1664483444025_0.6220729117620882","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/typography","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb122c8b19575c03123cb66395e3bc75599e677d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b2310f7dc.0.tgz","fileCount":22,"integrity":"sha512-rQXY7zF2Y5A4OpzFFEYaXl+QYAtAtaXXIVh4/DDEXjJ/PN04rMbxak8R90xZwajigPE7GtrgFmTckB3IhKpRtA==","signatures":[{"sig":"MEYCIQDK/9o+Rg6TKKhNkp7XHZ4ByBdfWYgmt8mROj3LrCIkrgIhAP+Ic2TySwPiOnOVG1BBFh1BIdoL8cszSioxwj6RzG+d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjSlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Qw/+OtPRjbPrnvCN6XMS1tv1yez6RlXNcPFtMQpAc4LL2mIfPK5u\r\nJV9V+IwYgfNNt3IxE4QpaF7eYod6cLbn9UiAXC1Ngxv4VxS6Q8nMl+fqXwxR\r\nAE0RMPLjbCqGO/iV7NzBQC8i6UL/6oXw3WCBrRFNnF/ESX+dxJIJr4NpQ7i8\r\nL4E8o1/6VdOVeaBenwSKy2LL0WttqTTndmjMPvEqtrggwCq5KMYI0aN49ME8\r\nz6nEFsbbw/qx1TKdKiO+USXerNvz4g8LGRjfsWceWHsZ6ci8GRxvYJX22Qrk\r\ntmKUUVBUte/EGToy9Evz0s1jexCmvpVQMxcHy+PO2Tlb0tQ2EITt128/0Kdk\r\nqdMHu4WwSe89epJyQ8fhVfhxf8XbDT2CasX6ylNNbGzuK4y6tmzXwbAZg0Xc\r\nQ19XATaeZIyiLVRg9CkTdqF6VjEPTv9+pqhxmHyog+uEnjFBhdORb5RVolqU\r\n8v9ewjt3JnxuUGnGuUCH950d+T8Vk6QiG5BFKd+Uqw3IHJpX3s13Y6fOzrS5\r\nIGMjf5NhOfJvA58puzRNn5rggL1vrJXBxa0nn6z3kKhMsFJtG/IhMYuKVVmJ\r\nU1nBGGQErHTSFkSWSUTglCNr7K/gPraoZHMHtS52KhenHk5SHskoYI7wn1Xl\r\noawsgdEFAg5BgxpT+u1zWEbW5orRF2hRecQ=\r\n=AqYI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b2310f7dc.0_1664496804740_0.2629370958946169","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/typography","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a44241e54.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef7c930fe4cf74d9bb4b92e56df7dc7f23d2dd64","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a44241e54.0.tgz","fileCount":22,"integrity":"sha512-z/MxRN9eu7k1tFivrR8ilORJgJsZ22fY0wPXQ8sDO6bGRMhL6lk8jCGCoSdalqGy6PUGz5YVOGGM4jYOVRJIuQ==","signatures":[{"sig":"MEYCIQDIF1VLbJd4RdnY+3BrI5l30jCGYHMSyUcLrB/JDjkhFQIhAKQ2ilPM/wCRpuDD66iO9AJX6CM41BrNvVMZtMYrk6Uw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqbYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYBg//Uom2mKY3a31RTm/Zb4TQza3Be2Cc2AY7X3mPIgB918hRVNFP\r\n/eCerdNXfKUfljF+zMgP2llFFEhegGy4XPuf5BHuTickU0ITyavzqmJ4TGbP\r\n+BXCXGAIZpvtvf3aBcowH49GbSZ471l1KJbGr1iT3Vt1LMDS956WKy4ZIT/d\r\nLHaLLQlT4/BKgF/a4amdEahltw3Ph8WABYaCjXTLQzAVPUBc5PAzvOfBV04H\r\nsuJUxUXGkjOMoMoGYBmpBAKAWx9TUDMfyiW2IF9PZvIdjfyZ9gHoM62GtK7P\r\nKhPyfHTMhAdql6azk5Q9HF9hUsitEPsXOKItLjs1GOx090SjN4UsDMegexwf\r\niTWCtL/MCSkIcPG75+Fn7xItUxPnGMXcQjS/A1ayo1jpp9i94jqGeUKj70FI\r\nv2TrRXTzUYFtlRl0HImL6kSsitgHRTmHFVvAIdizTEl8hfT1nSP2R4jPx83K\r\ns7rV0QF9xDSK2B7DA2aVq24m4oVXf5a2xYxn9wP6CokoOexrD3dLcfTxsuRO\r\nY55x3XMSCPkdseO+z7YpFXYvKv0KEszlCaVDto/7bgqp1XBQo0p3XPMy6Ptf\r\n+AkMzlMpUAfnrr5UHNoHw4eeg8N5ksjBgcHjhDebr3mm4P4RzBweXm/JHBOs\r\n9qo6b57XnTSNma6wMB+U4yrGG3lvARJ7T3c=\r\n=HZtX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a44241e54.0_1664526040456_0.7882283484302546","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/typography","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e74126fd10ef2482e6db790ce42c931c9603f55","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0ce81e115.0.tgz","fileCount":22,"integrity":"sha512-dVP7PgweM5EupAyVE4HFmk786DHhE/maFIIsO5bdvIIPWA5Do7Pmiyo5CWpGnNFrQTj9MN3G4ybPkIr0dIIpIg==","signatures":[{"sig":"MEQCID2baAVa98HPT5wlMTdxjnXqI3kQlZAR3gHdXP8lFms+AiAUhQDiYH/3dq2YUQXr44mO+BlMCeOctwmxS+GT6BGznQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzLIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4sQ//ZE26FYM0ffZNvuwgHooHTRrZzWGQ4DSjwKeQVf6by3AJSYxr\r\n/spk42Z4bgNrRnFal545xRUsCqsmGz9fdgOzL2Ppvbmz5Xdvb/XVY/yTl2vw\r\nZy+pHQyRyKa6Aq3tGQRWgMvyEGklGwkWil0CIgkvvbloS1PWjhneJrYIcAOY\r\n1a1L6F1ycJhrDio8CHeDDaLZyQinBqkA43rFX5DZx4maS7fm9gM6hRs41bBc\r\n8f7WcMLf2z/7/BlVoP/i5k32/X+mblJmWQpsDUvIchVh4vw2HnCuY4GHKPUP\r\nbr+l97MXhpc5QXwKtATLI8W4BsZ1d5xgYTjX3XYvsEwGBUfDpvJ5W7YnHP3h\r\nTPy+r2C4JcC/cTfauL1UNOITi0A26v5zL/HnYsOtmBdgGd3BVWkbh2YXmWFP\r\n1POgwbSOHwG0w8jXVxkPkx/c0rzxyRTaMD9wvm2BVkIO6qesW4R8ehUKyKwy\r\nEyzVtT8E+NDnBLYOEA97RngJiaHw4TSY6uf587krabRCtx5sNdItHmz+kipY\r\n6DOdRjhZzeDlgcqGVJJfj8sGWV0kY9Qw9SVso05A4Yfkg22zr60jY+ZElrQ+\r\ncIn00/ag9hir7IY5axQWzysgRuxKAZSn6sa+mMbh18IC+cWAgM9NzmZxTSZg\r\nbiEAnvRgp8YR8Xjfz/NkqlUe5/3d61RKAFo=\r\n=wDqt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0ce81e115.0_1664561864126_0.2993782272151124","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/typography","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deed957a686d53b635ee101a2201143957563f53","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":22,"integrity":"sha512-JV27n1BbE/jGUUFbk6fm7RGi9kwYQAlsHDImlBmVzMpulcdmYgWRpL+TD9l5sRwid21pcaGTkO8Bbo2EPKpnlg==","signatures":[{"sig":"MEUCIQDROb/B8mQq8YyliFxJgUuXvgf+vfQf1Gwi5BM4oyiZXgIgfpUTLTd+yheQ8n/hcKwSsR2JIj1U3kh3oHMCAHiMJh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmozfw/9FEUpITyNeWnd86k9KGuYHg84M1IXHBJrVj0EF7kuE+dK1elp\r\n/KPXy1fG5bVLxc6W/DaVEXMO5VLsWapYANCVBLlZyiEOqFssmDUuHQh1s4yw\r\n/U79uk1gPfPYMTPb/EHwtDQf0HxTNQZkTMvTL49swkV+yc0c8O0n6X88oYs1\r\nvheXEzJPx6dXc6Sr76//7o3hpMcMuO71zGSBbd/H15CxShID5T2w4kcfd5q9\r\nWcZY9eruUXNYJ9VU+zyBuxU7xBHjRmMBAiJKVKoRBcWfHQCjdhMj2H9zuwcn\r\n+4RJ7Pn6E/MCJfzCa996zxmxbh1XityG6WxvffFBo63ANXIPVxzEFN/u3SHO\r\n4dIa7w8XhEiGzM+Z5aErAEmaOcdC3P5m/UJ0boIAPY0tPVb/IdDLxCc/AVgu\r\nEzMj1KAWy0i1qr6UKqCAM47IHxWImi9OzRgnDK78NF1cF15BozEmT6JVOGHq\r\nAxkPNoSniHBYMItDJ3duSinasmK4RlJq3C2HohYRSIcjheIeF4HrY8ZKS0n8\r\n6O2KstcjoluteaqByTeH4bh6taWT66L29Lbk6zi56EfYYeDGJy3XHq33ywV/\r\nWIKukvRirkd7Mvozy6+3IXD6UUEV2kzVL72FDSRrS8h2TgQpsV1zuPiKtTl7\r\nqBJmcmkBd+mQOeLVm992vgRb7ylDyy07RBU=\r\n=f9xU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3cc30f6ad.0_1664903927617_0.10868098344723887","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/typography","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8a8aa7af334ea3a7c11b9b9f92f490a0b985925","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d9cf98e60.0.tgz","fileCount":22,"integrity":"sha512-cocp3N/5Y4Qk6osNq/mnZTSIcGywXcdCjLAkKMfZ5j2WxTv2GKfm909dybusHEKmw8PWgU/C0YDRcZqQbzlL/w==","signatures":[{"sig":"MEYCIQC/n2jT+UIJARDGU6FYOaVzBrIh8MK4m2lyQNnVoJqN+QIhAOK7JepYt8Zg6mcbqO5Ixntw6Dz6w1i6Ok8ej+nBRyeC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIN1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvPA/+IQ6lBeUVh+r8M6U1bKPGlPshlXaTtFLsFyOnrVc59p1Qcid9\r\nxd6DgGqff+eLP7TDdAu5AE7VR5sB91p+o/3ULw2ZuVIaA8FQBt59ZE+LrMaU\r\n1pLrrXCwAdhqpuBmr3n/WpR8RQGtGSonp7oci7hQlBr4BVo6DdFK4UzuhKbd\r\ntjX+YGJ021usvOR805FSnKbPOOsExTR+/9spZykRRoCT7Y1/+WH+4ZKqgxbm\r\nVFdwjlvijyAbZwlj8qVWawIzy9UsUtlj5J68R6pOazPBdViCjGhQH8UJk7dB\r\n6nspTe8eI1j4b8TLlkarkj7JkgMnwJTsjehGAo36hIdyxBhNIXMQWC7W5Dcj\r\nFpzL89kGTw1CulGJHSrqezL5iPa9mzEWpbxymKCX/xzKpwitHT9xYDinPTP6\r\nvY4jHNf/cNNKH7xG8YQe4A1FRruGc74C7i80l7pLD8eo0Lo6bNnvgDANOJ2I\r\nVXA2OODN5NAGKYRHz3+DfHzx09Woax/rTNv3Q106M/hhSY5Oxqu6xeKiqx18\r\n6diIGgbzlQg4elGitKvd+xeEEDEKBJzsJoQ8+7SlmyTrD21JjGYE9MXqF2Z4\r\n0vzvHJrTN7IzefrGnAoLC56vwDKasnLjeQkVa873Xoybg2nMfcqEy/nCFXE2\r\nWt2gX7Hv+yv8hvf7LYhv2CHAXjyxgDghy2w=\r\n=Vi5P\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d9cf98e60.0_1664910197787_0.2173835207151391","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/typography","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78d0270b2391a602dcfec742f1ee116af1c4c1ca","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d71935c8b.0.tgz","fileCount":22,"integrity":"sha512-wnJ5IUAzmDOk9t14QFL1A0gCFtSTBCD5WCB035N0Hy00mW9tpiqG5NoYMStmdGz91PoxiiAgyWpBzvj4zr+msg==","signatures":[{"sig":"MEQCIAb0B/7Vs1Fb3aQhPLsev87zILo/+gWDxctWr3rbe+VRAiA4eRszwj/QFJqJgebk4oJLuI4KW7lfyiedshu6BDMKHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo5gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK3g//YXzJwMvsfXcFBooVyzD0p8jOI5pmOh5fUoklgoH7aNdBeooy\r\nZGLkI1h9JvxEDZpq+UlELjMKzg6KsBTWg4hM8ZmSBhLJ9Mn0jYzeJmPY3IFP\r\npY2nYCce6RlzlV0fAM6Scn1Kuax9lb82nBRaKC7EhYeIRXDNPZ4ngTpnpSn1\r\nKhl0rV3XLdhDZnx9Q+S/2xnxsc0rkUDr83TfBKrsuZ32yHJbpX9TPgPdAnXP\r\nOJa//Y5gG7QlW4rCr01jIguVefarq+PcB/7q5yNlwY79Y8WVUSbqulR7flYJ\r\nKuxH7M4dbIwaXh9gjB4kWn78KfkEraKotTGOE+qdQoPQgAf1UNlhmiAMrMdz\r\nz4YbykamUipERi0Za2D0p2vZiRI7nO57Pj+9VX+8ibLXWU5FA46n6Tg3ZQsf\r\n4WoENxwyfSbItDvgW+5YP3EuWZCC1nbcI6XRt6BfeQH2FNAhWTbAH8RRutnV\r\nB9Xms+xRiT9n8z0+kfTejNkT9WKNn8rvd/C5bEbwstlm947WUolIR5Un7KvB\r\n0lV7ibobwmwDNFUfpXZ0m6ihbgYqLGYoN5itdGbXBdlyPXxjRHCcLcxKKdyT\r\nVKmaRNTcUwD5zrAtBLDsZ11vcO/48Vw1Sl6AEAK0NjWWIW9V9bzwhpi4Jwi/\r\nWeCbaZz2dWcOcjVW/yQhvwu7mALNaQGg6to=\r\n=tzHF\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d71935c8b.0_1665044064151_0.9223948361717957","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/typography","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"380a278fac15e3137ee5ed1de0dda39ec0e314b7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.49c56a25d.0.tgz","fileCount":22,"integrity":"sha512-5Hlb2SybZs9JMdQ2EENbM4bbaF2N6CIbNh4vebojvk/9i/N93JO71nIOxzSfKT6OYKtGTVvpl//80USKMbf4iw==","signatures":[{"sig":"MEUCIHQSvPGTDLEppMBeLkZWjPpAnrEulTGiE/ZGdTxv0CPdAiEA6ytY/8M5WayipWBouuLQTHokGUOhD04MOaLtxIeaiAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyN2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr64xAAn5SjOauoT/D5mqb4+4SMwm3m6JedZeqCP8hxEw9C/Vw5nXua\r\nPn8Fwf+/Azrj74GbS0mT78bOwqB6jF9eXWgOT8YKiEM0CcM7chtpcA3neMls\r\nCKHpqZTZ6fYbpLh+XLOJLqtTgOglnFne3H/XGC3la+XlSSd2eNih9i+4nDw1\r\nBHSszQn4Lp7vhzo600bFC50sgk9OX4/gYBPCPmgtEYOcv9wfk7wgMRw/zqn/\r\niVkT1kAKjTr/eeaqmqSU/gcejDyUNbt6jdDTKEjmSoumQJdR5r96NXJNTtER\r\nWDQKMqmFtUe0HjfV3YDZ7YTb2D8HLBJW+P5UqPBNqWIUkBomiLD3uhJ7+yrZ\r\nog5H2V+XUtFUVV7fXTcA3h8R8XlbhplgrWSSlI/BJ2XdsCYfZEL5F5jVzOG4\r\nn5fRD2qQN4wCCvsMO5TOH168xutzI71MBmFtQQBfPj/WE7tmFOdFycCO9+Oa\r\nrApeze3I4x4pAL0HOJzLyvy3zNQqlcR5z9MzVC6oo4AMv8gWpuRS+I1vRRY6\r\nDFxVZ5zEtRbjwQpR/Gru5b1VxlOmv9URcE0WJ2nYjxzE/S/ZDf+GH3IZZpZK\r\nLV8Y5ArpdW5T83uwN1qk2Oc8xDOwmdHuF6nxqz96gHjRAkX1kxIepzGJEdbc\r\nNd35Bzt0fmA9EigrZsHxLHbWv/D9okrk3SQ=\r\n=Er/8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.49c56a25d.0_1665082230009_0.935791341067703","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/typography","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.07acddef3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55103cae59929637dc8064f1d324c480d6dfdfe6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.07acddef3.0.tgz","fileCount":22,"integrity":"sha512-+HkFdOIK04iWuHTSAJ0WN5+errdmNKKJyuYQfEDKRUqIHRRKb4zhS/WjpjlNkKI/+ijmQToGsCxShioZehGWIw==","signatures":[{"sig":"MEQCIAcB9CpxqtdmIJks/08NNKP1xiKhJUbqqriOgykw1dyMAiBW0tOL957Ivet7YazZPqLNg6iSAkWwRM1cljX6vOesyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJwBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI+hAAlIXUumcj2WuPK2IynkOd1sXLWBmKb4gS51uOfn3/YsjCYD7k\r\nwZkKUowvGLeKCPijQqbEKF/O3Fp7AUzi1mV3J2LEhh1C7nVzUQzCpZ4AvRTY\r\nHiLNw7xcuKCqcyOLp0XlAzLL9OtXoWofAp/+5Zqv9zkRbphaQnoTV4z3+trq\r\nPpsVVBWJ42yiedu6cnrO2ssN6gRkuR2tybg0ai0lwbVK3z+HCoEs/B+qF/C9\r\nx+MDYbFFgnyB7+bJlVykZm27R4Ssb6XlShzjriPcplVwWxvSgAcJ6dRTkaLg\r\nCMaixRxEBiRUPMp0MkVLEewO2r//wO2lfECPspyCftt5HQK5k6wm/RrGHyZ5\r\nGgtKy+VyZoaw2xNH/6yZplyg+yvjzovRT3k03a7G1+8IcBhv40vs4CvQyzy3\r\n+b21tzhNvsSXbwTOtuJm1Tl8JCNXZgDgyZ0MlrMsvyQhJZkGvNUMHG1CJXqJ\r\niRdyBk+jQ1QWr7Pb0Z/ICfWd0AvCq6fhWrqo4snIhAZmclsviCIzRFcSMr/r\r\nTqCcvE+Gpz72k5WX5g4wd2sctoG7UC1JzxKea38VXSu2AKAjZDecDM1GYOMZ\r\nrwR9UeW/NlKCDLB8S1hVKLtaW+OGy7866xpbX5Rok6sZH1BfC+IlCtCACwm0\r\nbGmiJU4zLUT9TILF37MzUxKC0REYe7jb5wM=\r\n=QqZM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.07acddef3.0_1665178624860_0.6351417732553999","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/typography","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da18f93915422b63e59edc635198a2e0cc227888","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":22,"integrity":"sha512-KesVPUfqDtjAwuDYKa64hJSNpB4aqviwtZR3AVu1tQuNRV+I795HsApDN1IdEl7gfJ6QodrsSjUpCGVsNyC6pw==","signatures":[{"sig":"MEUCIQCEE0z0WYXS0wnKGXK2JF5ymzGOf6quYO5EnmGvQiCLnAIgYL8tRoRJZ8vIzh8/jel+rnftz2JFEDk/tElnhVo1JGI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKAcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG5g//ZgrDUVwKb15TyQ+fciKbo+B+SPCZD89pThJKiQdGlZ7ujMW/\r\nCgb1WzVtJKZulmwL4R92ots5r/Y913aEFs2lHy2IhnACHpNjckh6cxLczRSS\r\nymrzzL0yfZmAsesnFxXstBKGw9Twc3ThpRm2B0rrHF/pE208qGzl4QSDhCyT\r\nioXe8Iso3veeHLtyD5WJjXnbFygACaM/Lj9UNheUw0+tWae3hU0icoBDWdgE\r\nMcOn5dgpxUYEcfRTu62dC7WwtyLazGej7NmYKCK89gInm3XaKs2nLbKCfikl\r\nQGof9tM3XLJzww/Fd6mwx8x5OZ9LowE3vw+giL/Y5hLt9u5ZTjslqwWX3Sdx\r\ngG2Z9JgX1FB3FvhAwtpPYHprzhQ3joMj7AeGzxvLkl1n3AE+Tzk8TEcioolr\r\nAKoJvMHs11oxbR+KE4REvnopGXzroNMy3cZ1JtUTQEALaJMpa+vuD+MaxqpZ\r\nahQ41fKBnyMCULzeaHxQc7AoJ85JAJbn7EqZqPgm0d3id+laEpo5ospZj8Fq\r\nSiw86kWj+FeEflqLmSXM7x7hipGgc4GFaiAWLnqz8zriGBsUqvXfhYUTEB9z\r\nAo9qY/6wyf3OjU/yEtZAJq2diIsdB0dwCJiEMsd/JQ15R+vc6Iqv+rG+dHVJ\r\nQHZtFAa52qE9NVU3ujmuZQY/iNzijd5UbnU=\r\n=Zn+F\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1c74eb2c0.0_1665179675357_0.3998674253496046","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/typography","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784f79d06de24ce88dbaa49215bf82b179738d1c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.dadfb713e.0.tgz","fileCount":22,"integrity":"sha512-/RjeJAvjlmmVmCzrzpOUGsRQJAOj3tltKmSskOjjDIxUnKIpwvwZNOJlAbv0SSWYk7NTpgZrew+PBMpRCw6HIQ==","signatures":[{"sig":"MEUCIQCtTEbe2jliQ3tO+QGIS8DEBY+/Sl0sNYbUvq1MwC/mmwIgd9QDMVorIjk8HnNlWLNnYYr0mdo7Diy1Gi8ze6hCVf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQUQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpiwg/9GWJUrfMgrLZXsUz1QGGhbC6mwQI2Mjdfu6XXabJYPMhwPSHt\r\nEdpshRt5Sdf9ZYh1zpUZBVo8IyfxwSLGQQEaFdPzRZtLFVUjMULbVPBFsSdX\r\nSi4JgN0fZF9/985ceQ4Y/M1h7IjOwfUWCXlrOxWFf6rzNmZEN9wltNBXpbjP\r\nvi1rWJ16h9uY7vY8IDitofIocYSURyRG4ZuiQftwTakDJRzZFESz04kCPaiM\r\nR+d+cAO+AeMkxWYi7PkilvDVI9S8pX3mTzg23oN2r87hU4H2rjZR6n+ZvhB2\r\nO4bp31o70VuwMQ71NeS+hkNEa5rfvygZtrCE7Yo5Pjcp+x31IHrq8UNFGKiW\r\npQpRFUZO7ZHZtFIpH2/5QD3/DLkAGvssAc8i7pmxasCwKlkh5h1NnUXqqLHy\r\n2puopgiNklR608X0btth6l1yqbQEb6eyHgghMx6m0psTJpVeCnPLUdhzdNDY\r\nMmMtpZVTg3PJOkBY7ynms9oheeAWGGXTthOgMIy0iKbCLAILl/YoE7/jHol/\r\n9jgDLic6qziPdLhOZ8Ehg61eNpgd4cDuENdJctCN+ZguHx01GUadAGDacwvx\r\nno8k250OYxph1flKoIuws49a5iEJkgecohlOSUU03JR7GspCPRCwP7by9UCw\r\n1CFZWB6OVwEUNSuRxPfmH07aXBzSvsd8IN4=\r\n=GMUS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.dadfb713e.0_1665205520717_0.06955906613476315","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/typography","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8be9ff49fb297ab591bf04ec651c3444c20ba3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.395f1ce61.0.tgz","fileCount":22,"integrity":"sha512-qrEP4G5dwiNlmflkY+7cHmSEYsBq+6MbFKL4xHdY08vW8/x2kBGouf1DPJvSROE1ddtnaULfRgmdjWvzwcuvUQ==","signatures":[{"sig":"MEUCIGoWlbMLnUiTrtL8YXYHM2/OOBFWy+cRrvMkVUo6ElU4AiEA3EYh/nbHbYWK9E/xXdwYT+/VGYVjJducrEQhvc2iHe0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD8BAAhupOKIWNI5TQ0zCrkNNV72rK+v5kOGmaMD4tewE+UDXC2Kbp\r\nuD0MGCPitCuiHlsxmZryv+miW25S4oJLD7xdum2hu6Sr0OFSNOTgXYl2XKfL\r\nj8TXxUuivspogq+upQfotdIEAj+syoqyqYKoY3QfyxnDPXNW7+ZmSzpOWHZO\r\nq35sv9TBWKzHLauQGI+9TlRE4gQJCZ3dzHKZMbIDIh9RHxb9sODlSUIln36h\r\nbADRz9DZjB35b+vrxf9D5FLHDheNWqxIh1S4xB4UFI+dptGfPIJ/g3GjLypQ\r\nF93QyGl98i1TzqN8J0KCPBwRu9v/2SIAMHLYn49eJXLOaKEd1/jvXS50oemM\r\nS9movhK1WT2MU3H+uGBzKFJdGSrWLnur0HwHtEwsmjOKu7FKm7l6BcYOHU+d\r\nLlQ4+zxwbsTN/xc48Z1KMfQYPeSYucZpdA6+yuWXE4PohpwLa2ytgvJ2q0k7\r\ndLqNer8rk4cx8X45yVJyunaMCUxn/reL+Tfm8fGZRY9iApkmoKjIOzyC3n2M\r\nNP3YTSbtLL/G8sS+43gBs6eZ8D303Uak0NzPp2abdU2kVyZ/gDS9M6ESnNQd\r\nNg5VdrY6EFPxp50esA2h1ebpFlYrtDoUVM58HftxZeR41cn9e26De/lCNoHM\r\nTu6FyhERHm5duWkHszHuq+m0HxVrYl7Vmtk=\r\n=h1ou\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.395f1ce61.0_1665205641745_0.4460550598669688","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/typography","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eda7c16986962783b9adad4e29ef56fe6973aff9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e741b5c82.0.tgz","fileCount":22,"integrity":"sha512-uyiUiOJKYW4If0WKtPa85VDO0+Kig9/gSxGxFFg3cEYM11tbcd/DuXyGQI3BUIEI++KFbQRU0XfUe/oKuQ5izw==","signatures":[{"sig":"MEYCIQD+uvGh1JR5NUF61cUMqWIRBiAW03ao9m/JCAc8PC4GCQIhAK62vUhaphDB43R+Hcjh5S+rg69YXix+bCELr7Hs6vbU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFhcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHnw/+IjWZFo1RgRtjgqjc15GevyE7evgVXpvnAK/uuO+/PCrJwgZl\r\nYxFQ1RAaqbMmi6YcofUPUThJh60rHFuCTpe0Z4iWswuLHAVmxbQra33BSXLs\r\nfMLh7OC9iv12soZHrIflImAm8lfIXVWH+Ni6heZ3Y2Rj00rfW5cGhpAkDhAC\r\nj8hYMT1FsKbhISTu9zNduRmRYL8pH/xvqYIZ3loWLb2ZtynDjI6wsBU7hBwo\r\nE/y1RMgullYRZbddn/+O2/BgHJF2go2iyzoG15VQY0burZ7bbjCAP8CIX68O\r\nFEcNG5QIB1blf+YkOUpi/LknH7wPfwc7R0WOrwdXRlersoxsIsPqTFQoeNlr\r\nPMTSuWjmXu5UKgoM1MMMMIviVJHspRWlqVKpeIxXcA44COexuy9TOs3rcIW+\r\nx9wAc/7cp9+3f3GU6XnpTeJTmWsl2slBXk6PcCP2cNV+u3CEW8Dgy8Gmj5Rl\r\no/WBrUtbw9Ab8ijZSx+VH+yLmGaV3vCpxSJ1r08e65bqz/el8rOC73YwcyOi\r\nS0FgYY+J5JxFp0M8geO0K+DKKf6xDOAJVPNfzpPmVvulItszE0mlaCn1CZKk\r\nmY/fW4pHwPZdgba/hlNdueiKpJauME+9NNV0z6yD359yEWJS/w+ykzissPPB\r\nMcvLmVECJapCMZeb2gRQMMBOgtKrzyOI32s=\r\n=h24D\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e741b5c82.0_1665423451769_0.023725021723651984","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/typography","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f207ed5292755ddc7cce74bf1689db56889ad45f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.582f3cc1c.0.tgz","fileCount":22,"integrity":"sha512-kx/rXlDTjAig8MA1L11BDpag0DZXW6fV4Qc/g/hktbUBQNf5wqIF4LGcXesRPov7sm0G9aQPQkVPFOMsFzvigA==","signatures":[{"sig":"MEQCIA9JcYL1lDz9h9cosrC2TNT1AegdT/7TFURvBeeomAvAAiBduIMjfa3JXdWmhlveMPyihm5gR0S04BaJsnP69V4jyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPWcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Fg/+MbBSw2lIrUTMOqMg3m/gx+qhurF1GiNb7tPSRDFVYg8Eez1E\r\n/x+JoJs+68qnEbmZ4c9zV/jHlNxf4i+xU5RieEHMjcIgw8UGJdpY9OJJcbvA\r\nCcxwkaGvxPFqzRGvf3fK7XcYjqoDP6et7gMMBJPzrp7n5gcQyCD7KREBLpA6\r\neEysYw8QZ2gOdbw6+7z0M36iaTFaU1avjMdN0gs7U9Vmh4+Ap8kKMCRFRPio\r\nlMknpiJ9C0Us0Ze9l1tbkBj9WZW6/ra8Xo5pPSYi263lqXYudUeYAxHYGyGT\r\nl+Gh58g6oGcbSDnJW39OFe6dFKD/FIYMY0hlDcmXIzpLhZ6V0YA4+PZ8poDe\r\nShat90cXndQ+qi4i/LKs/NBZCjxnYJVyn7vZGU1TsrfknlbdydbG2LU8+fqj\r\nWwoy4gOI+eog2UhpUV0OFVrRJjdPoAwVXiHOzHONBQ6PMIMDWbWtjbyUaAA9\r\nzn6Bv3/XEoCEc0jNQ+gcHrmBTB1YCITHeKpnYOH04Hh5sUecaSfhapaQzw5H\r\nj3QIz9GDoH+OVinexrv5fNcXdqsmhtCRLA01KQpCW+RlARTvUJ+v/muqCKws\r\n3X/7MDPXVUR/INOYuqXYQk8myOpdRL6cHZmQagGGu6oIjHap8E9kHnuIlzre\r\nuFACH4UeAey9Ma2AEFma/voDfnyDWe9KCsg=\r\n=rVEp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.582f3cc1c.0_1665463708354_0.44379667293591685","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/typography","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9f2ea09defe7048d31ee8e6519a0a2ac99fef5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":22,"integrity":"sha512-ed4Gh00VxjRSF7TTs+aBKB7CVq/jMln2lxp0qjNpnja1Imwp2lZfuMGN/j+ke/8xW1zliAcbzUjAudsj/pjrDg==","signatures":[{"sig":"MEUCIA9dwU65qKDxm/xYP19bj6iJQbCMqgE9KE98qhDORhngAiEA2TCgd2yvJXg9hNe1PCbPfZE9LDk0/SUyh/rjYw+oPjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqytACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEGg//aqRGJPnh6JkMnxhz9qo3o0flOsBqSP/iRznG2bVwTmoAU++n\r\ncT3nl9iaC/m4QDEWtsuJR+O7D8DP+goiFWaVjkmPLlVcMvOpvhmg5yp/PMQn\r\nPN9qaN7g+7VwUa/fa8Ewv6Na+4BO0XP0NGNvZZu1mi4cLGBoTsx56fkXQhga\r\nwoU2Y/hvnRzAXKr9F8msa0W6y0r8JFwj8qeXkzBgZLHWwchDdW8pPHJELX48\r\nv+5lVWsgRdqRCs3dzS4PdYflqKLMSKPbNNL0EcR3lm+DWdU7eXslpQ1IT75L\r\n9AeIR4kTLWIvyKKhvvatNSNrNVA5qqnfLYyETAeLTaGCXujvtslBFVtmH3M4\r\n0/Jwfjc0kzqUVvjIg0GENougGe014/t5NyrEz+J2ng54A88X2GtR3KGJBXrl\r\nzaSIddU0FzJNgwHbsnWm1/SecTtaY8uBBUtr1utEaLnHpJnAdFntdSOTa59d\r\n8w6ut1VDPzAY3IyLGlspyoh/Sl6jEnGnBWo5HQUdGZ4Nj8NFNXL3dnZ1eOWk\r\nha66bSfeDw8fRSqGm4HLrhBTQZDLNvA3W1Tod4VZ3awCIO9p8AR92J/da9bQ\r\ntXWdhmN5hktDG3TSWZ6mJSUMH2ldM8i+2FmZGwoam2aIxw2VHudnlTLKlkTH\r\nxjHUWzvqD5szAof9f2qlX5qFCH7WhpbfK1s=\r\n=4lUX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b1a6e3e88.0_1665576109473_0.34621088323533145","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/typography","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57c5a7782412ea8328f40c40574aaebe0324931f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":22,"integrity":"sha512-psM4x5thjxN+Enq5Szfr20NJYqa3k9Lj9VsiIcjnL4tmBDbs+UO731wfZR1uWYjkm512Fa3BRIz1QR/Rzvw9dQ==","signatures":[{"sig":"MEUCIQDyMf1bIX1ftZvpNwokDbJRRrK9layUisTrLjSa5RawlQIgKUrodHtEHeXinRQgOS7KThL9tArXowuYsmTZXPoZtLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvITACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw1xAAosS57gTVEE0Qfnguo69B3kVA88BaJbareExW4NpOlmOVTea2\r\nj3A4q3Oqnyi3XEPjdBhg3NTPP0k2Af7DxNE/yE0Qo3lskzahdCIEGl69hfjm\r\ngiwGAUdhZf91z+nuY9zy1Js3xiOLDwv0K5gxnpOIDwx3vJcq1PhGCPwP8UTk\r\n7rT2IFZ0pJ2n8X6ZiARTT+Bnyq5n+QIRjgoemKwhqlNoe31GOrbCo1BtqLG1\r\n+d0M//24t8NwsSvvH7pc7TDvjHImotWlcjd91jzukqAWhkit6E/NeWic9iMW\r\nkaqS4j6axh+XsxqFsC48CYAu12n2Hfqc/BYWucM11V1WSSfR0XdLngYiAyS6\r\npj1lwVH8SZlL1bnkUrzICq2C2YaXmOqv9BBxtqi5QvOceck8WqYQJ/Ud6512\r\nUS5Owx9nY15nO1/lA/Pp0OgnfhHOBziUHTCRxVI09QSaKEEnmdTX97vm6AvL\r\n64Q5hpDqauHvwytKdw2+fi0m3Jx25x11VQVpZB1gbNeNfgVe5Gs3Nj2e1UzX\r\nmQybaxPyCiE1s7Md5/3ctOuAppDdwTL0nsPMDBK9cXD/J4ab19QyWsjSZIsG\r\ngLOBzkiAMAQRkDe+pTpFsJcwNwsRPL6mzyt6ECbYp+0L72aCAOIJSkoUAeBS\r\nKjWAGE3q2QwOydDhXljWPMSLZx7U7Bb7oLI=\r\n=Ncnw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c9b1a31e4.0_1665593875372_0.06537800198886035","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/typography","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"925326141700d3f5f0c0f28c2133c9b3eeec8fd1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":22,"integrity":"sha512-E5btf6efBjlgfa9dITAKCiBmwneqI05gUXmM5O1p5W9kxLcvfdID9RVliuzZjaiIoVlfCnfjA26dvf9maFRRsw==","signatures":[{"sig":"MEUCIEhw3N1o6nsP8iQgCDnmkqBm8yVZsJWfiMiPdkt/ZooOAiEAsd0Pw972FlJDBGYWs1DlbmJaJ2n6lvdAdlZyN5nRADY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxN2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGVQ/+JK8Pv1cjMprF1G1rUdr5B93A85otc65HVd1q7D/GB/hrGBU3\r\nwaeDhF3+JapI7+cvY0OCg1d/xsoOfEt/AHuxClO0Izn074BsSATppD4Q8+W3\r\nGmMI85vNaOP5/sm8bSpz9BFsWJGX1CB51wvTcV4yUPijbgTwOGWgrSpzR1Ek\r\nzaQMdDKyRkdmmdeb2Fx9L0vBtHsQO9XqShLKm8WQWXzHi9hIJ18pTh61B6mJ\r\nFNjDFXQ7tXJYRQYrhJDXSdenBtiXVcoeFOCour6DF6j2OckkChMon4yGg4/m\r\nF6JORCtesJtxOTiAh3qIAUuFFfqjwQ4NHOVgxhTMiLWjAmNHPDqFibA8X7Ty\r\nFtbjbVVta4EaXjnRv7w7KHMedE4V8VY0UiQ82m7PTV+APbiSXSbDSawf7D9q\r\nLjtYxEJ0VFrWMLDb5tnUR3u2Oq27tfM9+OtXhcmHFedpAHG2RznuREiO4Go/\r\neYjYUVX0TRkOUgPtZLtPSlOgLEce/U3WD3KioEJjNWknJmmjwuI+IEE5552W\r\n8PNmu5wkziGZfpsExD9y8X0FctHjCPd/Qyps1QVXF+1g6RfcnKOWq3Cvu+qv\r\nZjQMY1GP7nGO6oKY5jl35DGQOpfHwgjZXEkB5OznpFDH5uxdo95FPRHWDijI\r\nC57bJPQs4fngtmHJTw1e0LWc/qsqGE8PYs4=\r\n=Fay9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.13e9b0d1f.0_1665602422626_0.12026750976889566","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/typography","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0f0c5d20c0def9829b3b02f1363d8a450fdba24","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1dc797e7f.0.tgz","fileCount":22,"integrity":"sha512-7hv2SzFaGATV8sLtKgJm6f8tXyIaeLK2XmL7/c2Aus8VcKw62pkn3FU66O4cdWmihoU0VXkqzOf4OXVeRHn76g==","signatures":[{"sig":"MEUCIGAUi32Se3IiNvlfJ6TVanN9ls3+3wJrpulFj4BzdlP1AiEAkMiLnQ8MmfJkF14TM/Kb4aIV+pHl/+YG2RH0LeoAoFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS6oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdgQ/+P/ngnIPRGp5bxXccJfQkLl/dwd0VeCDRYn5vHZ4E3H3+R3HF\r\nnef4kgBhd/42MeEoyiyu5/j1CbvFquBOqM+drX4hpgcf3quL9LFG7O/P5oqa\r\nOED5vgmbz23hrtVCxt+8Ox7BkChdROaQ7Kug88xZNfPij76PycP1+aqJmW0n\r\nqDSyOBnYpOX07oWz+BKhDzlxc3S35NLtD2wkWBOCBGZhDfUy871ztR7VFlvg\r\ng6MAIMdCJyJOvtGFuLw5PdgFqddMLCESKcTh538G5VlXjTRUDR1AreUtWy5F\r\nSSl7j6wtYnIjzlr4TD+MYr0VVsV2BSNVmFVMRvwARHJ86T8IB4qr205Stldq\r\nRN8A99LiIcXLAZO13ZyzVghgS0KH2jHHPHawBpsqoHmSYH00qDIenmXLE3UK\r\nUxl2VzaSoDf6J9asft542IPbO5Conv+9IxF1nhbe6q+E2ntL5v0XIjEx8Lbl\r\n3deaacrd66J2+7oJFKt9frb84V/YOUahGlQg8dNpRZfWQnKg7V+E8BQ6sMOZ\r\nievj+Z8JZ4ZdUCUfxnuVV1Fi41Lyk7YwOa+6yNKIZK7+q141SBVnvp7FudQJ\r\nuw2IsWZU2W0kPDyccciNSZ+MEU963BInhSqnFhm0XOqLwKfDdc2czGZguTE1\r\n68V9xjCztjSh2bkOYS/Yr5rD3VdXJp5+JYs=\r\n=FGk1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1dc797e7f.0_1665740455962_0.9317544057451579","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/typography","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ed4009397.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01f09119fb237addfa18b5a09205358518368763","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ed4009397.0.tgz","fileCount":22,"integrity":"sha512-eHJSPl8ZLjTgOF+2dk4r7EVgCvkvdX81M1B8qxOPD+tPLMA/2FVIX1pJnWf2X52KfazX+K5H9HNLlQrAeLMXUA==","signatures":[{"sig":"MEUCIDJBfZZKWCmyxiwWHR1GSlQWPInMksa5LZtL4LRSNMIfAiEAqBDqZCc5XUHiqMYyKULaJOOnSris0wn+Kxxt7PbKR50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZNkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJzhAAl5gxJXFeK6BKLCxj03Sgi0/szAApHNPa1jMBOBnqTMPKEeVg\r\nRtTg/AO7guZQSRoJTlMUyIUPkfKPCkJb3sDDrQ1ze6ZuYsNooXqHe73OXsyB\r\nIGBn7ARj29ev7egpaoGKGFeK2BerN02A1S/Y/tZR++b90W9unt0NBTPHaJny\r\nqQNqpFMTDmzE0/xTfBnjjOu4yXcVET9SpthymOxYbLl98s1vV4255L8UoAp2\r\nQK4HqPVj8P2XorYxFeiqKlUMjAinX5M4gKF0zXBJQJBiE0sWLB4+bm8EXO6h\r\nbjdqW7xfJwlXXV5GUhr/DUgNfysJq7pRn4TRh5TUgJAQYWsQGWPns/YBoboZ\r\n6PW/ulKiRa+gEQ3oJIuhkPgwLBCKd7jOURy6GB0P29CTUin7LNhMCudZPnvI\r\nMWPzsdefp1+lP/QQPFJU9xsOPqej5gZGg3EGqMOl2xdpRWeOydIsDTAkWmci\r\n1JuJlm25YAOH/PzcnwDOZBGOY4xl4S+m5KMAuH8s7nRdYjuWKILlRBN55vjC\r\nRThLTRioeKwy+jzoEUXx1OaI7eF3panLi375kqv16KpeFbEdSiVvf3GHvsHZ\r\nYKCs4G0LtMnYYXJTnOuPtpS099hI5kxEFDbdW96Vnkql54dXQ3fLSHC+isI0\r\nNVo5REDaXS/9uWK3nyxcuLw9e/0DJPiy6HE=\r\n=mSXy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ed4009397.0_1665766244050_0.2050580192789424","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/typography","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c88ad1a0ace3ca32f4c04754f8af8b2fc15f72e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.95ef196bc.0.tgz","fileCount":22,"integrity":"sha512-fQW4ULMfMcVbWqSJDDPsrZXetY6hA/LXvM+e47FkbbYAPK+SWpS+5NH7YRBhokvcA/TFm9qOPVlvkIWOXEcpUg==","signatures":[{"sig":"MEUCIBz09bPbZtMnjZQ0Hw/Qeqfus2fGtjdMwCw8i+GNwUvLAiEA2UAgS3HZWjLrXRZQHBD+nntoFWr2rkrFfgkIqbE55Nk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe0TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV/Q/+LXq2OjqankAo5+2QR4XLUIiH4ASPo69VMulcYrbG0YwPJ4PR\r\nhIsmzAwX+uffvlIAc4hskVKBJHqxaSDXkE31IVGi6Jr1RpEJQxy/jsxfqiAX\r\nPVL+5hON6ImJiME/MD+Hg32eMKC1tOyHeJPgS4drSfCwg+jbyQo1SP8z4BO4\r\nBZ9rESRToNGMxbnq0fSctd1VgiOo1xjGzxXUbodeu3Rqnd7wYSRMtt9RzJM2\r\nStliWQdP91HPIw0wKvUajPMvkgMn5pqInoqYuS1anwUcojbiUQcqF59qtSRa\r\nyZWiv0vKQXpXxzCv6wvH/fzbng1kLLEjNpuJWa1uWwLTvzu9L9f5M9CbDGSg\r\nDoSLbW6eqFFo0vLhuw9U61tw+ywff3hCSNQU0eAoBYqd3sVWpr075cBi17Tf\r\ncFYonZ+Mb10L1FdmGNZA2ke+zTTEmL0BhT3YihvgStzR4aflsDHgduKES3Fb\r\nGKiQFe7hDMuNeTeNKg7WtX8aAUjElkB0qLxuwzFWRvHwyoCo8l9ipku2Jqcd\r\n0HUOhCU+hQE0C8cLrMi+aH178sQv9orPlRbM5/h6dWJzUA+0hsVday28lveP\r\n93eAstNcICl83RAk0ADBLVmYfOMLq4V9908vLrb1GcLw2jdGu0NhveQ7/wma\r\nEkCDT+eHLvYTFoXaQWibUWfLdsHjsP0+Sxc=\r\n=6N6C\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.95ef196bc.0_1665789202742_0.18064968290257677","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/typography","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"658df9aa82c517120114c654c21eaeb41dc5d94b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.13eea1b2d.0.tgz","fileCount":22,"integrity":"sha512-g/7wHS6psK8HDy5a6m3P4FkgjJXEiJvq226lqFuuL8LiwMnYSvri3CkEcGkS7eTasQ0DhThHPKDl7qhdcqfh+Q==","signatures":[{"sig":"MEYCIQDIc0sRrVPJC13rusj6q0JH+taRtX0DdNnmPVgaaK6puAIhAN1i125WW40j0ocUDZfiAJqabX3tHaSB0nC65Q7cLsW1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNEmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpF1g//XCVlJiybL3UoJkmHsw+TxM5rxqqUyA51ChiSm7P0qMlgvWIU\r\nHmBlOGozyxNz/O5rkAqZfDklW/msj2wOrHs6EpP6iTAj4usVn+HKy0vR8zaJ\r\n/+faMD+u9hfcCdXXouFjsUY1lQbvAOM6PmKekbo9UGrk7SZMCVJDp4XC9otw\r\nz4ZEwcse/ua0OYHuO9YoIrs5vAJXpVUKJBqdBzQkczTUmIy5eMyF8BcVGiJ2\r\nVJttV1xiovzXXFe/HlMVsTifDBruqW5Ia4nAzvwX/wjjxig+/XcvZtSVYYab\r\nR0P87nuBtT/ytI6p1R3d4E50d6lCtFKw6xASa99uBfH9qOFW/C3cU/kxK/xL\r\nAV7QRZUlADZf2RjHRv/g2MJpWM5x15CyeOFqsgcOdvtOxBf8UDytX9cU45sY\r\nJ7Ld9C2iDcki7qYincoaGeU6ErvtbgDticnPpzP22e27SOLNaVhkIbUpWsB5\r\nnRl5KpPBHfumzN6H9ctBGUxvWA3B0u1cHombgNUQh93P26mKKHI5z2qLXzHg\r\nocNaMIiYE4BnxhdD50GajXMiSFmLdsVnQXTLgqopJmYJ78XrADboJYj8YA6m\r\nvMAZpoo4lKBGIJU0tG3MrSTY8XGesnL7ciLanbZI9CPfKnKhURs3AIQ+sPRe\r\n3TvucUec4hlVNzFGPSLzG1a8yjAlIhHWW0U=\r\n=dYih\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.13eea1b2d.0_1665978661980_0.3821612366370073","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/typography","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ce9e3e4ab41f68647e9ca33cc3a32c7d80c7410","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ef9b2babb.0.tgz","fileCount":22,"integrity":"sha512-hnDqeUYQMEqio73T37J2FDjjSqJTbRrXRlgiSQ17NSrj5q6STUlIIjc+iZ1exigklWl4R9nNTvA79gl0rUGYgA==","signatures":[{"sig":"MEYCIQDULKNvshz2JmgSG9nY6Y5/1cdl4y9A60qDvw7K3gaesQIhAMWiEH2YUv7+aCis8872sTJTNuWrS7Hb76DS3Mj/mGKI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmTBAAniHSwdeOm6fjzKzte+5/tGXXSnRojFzAVXn2lAW++1wMoKoo\r\nOjtyotPCdh7sbe4onyJdnt36SDDN36fjMY4G9E8JXNDmHNLtafvgrQHg/5w3\r\n/426EfL44NDEXUx0qIH/2H8N8R2K+V0TziQR/SB5cZumT4zhNNAMuaxtsdcX\r\nO5HG+wEiSz6YjRYxmmbdi0Jk8yfKcWDwNg1LK5MLfXa0tSA8v6KMsFR/NGsy\r\nE5EP139/gUYZD4V5M6VK2hC+sJOPKv7wHoOi26XeXlpYSuexeQwGcawMx9Q1\r\nQscQ9tFIkk2o7zXbn6zUgNZKvvj9hwwg0m5cNF1dLikMaMgt8eD6OGhsT9mq\r\nEGq//4qcR0xHHggOVO4xDCoJ0lF2SHUStvk+XASZPYxlhE5sX9WEkAm2C0A9\r\nEHZGAUNrNRFRQxqbzuGfl7v+CMIq0GekiBnRgyao/tETxNeucVspSsw9d0SB\r\nbpXqsxawD86Hoa3OleXM2sGaLhcSa/Su2Me6whaSFz/kv+GQVG+0u/Ur0Eck\r\nX2H1n99beACSn/2pHCNl3+S4y33AuZWLLE0jSkd4ITA/UFW+5yybprNQepH9\r\nT0zXq8rG5ldRgnlT47VoLZY4LcB6rvA4NXi6qSNdIp7BpK4YTrcWGRcvXfcD\r\nfAmmQaUjyTZh0iKsD4Dddtj/FQY9xGWKSm0=\r\n=B7+s\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ef9b2babb.0_1665998240280_0.9601618113602195","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/typography","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c72ac6d1b116a82aa2c893e98b7583873a9abce8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cec7fb987.0.tgz","fileCount":22,"integrity":"sha512-W6N1DD1aTB7/oLqEu/DkpZllfFWjhhAN9iO+JzthVYok7ULIvm+nizteTZ1/6edUxbWKtqIQ0W44XwocazRYHg==","signatures":[{"sig":"MEQCIE/1Ucb4424PFpRIDgIFBQCIeYtWNtRowqtO+0odCbKsAiAv1GACu6xE1UVnTJow0k6bo7be4abwwUZjGCEhCWIS2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTSxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwQQ//cT8v5EyElaiNXdo+WjW0L4un4C9rxXoUiREzAA5P5AuT1Rmr\r\nucb4wyXZjDoQ0h4g7Qo6oCWHGuk5phD4LBpTEhpxeQkzcUUZ1nmgb8lCwlM9\r\nGfkgQKZOXusTu/9KXTCpKAmDNikpzM1aYBpr/9DnMavlhRFyz35TgDDgnKUl\r\n3FLy7poWH+1Wl1u+cr9Fxwv/dLWcS7mHnUh4B5sFFuu59eB+IT2jvTV+w+hU\r\nF5/HCq7OFZjUA3qC5hDSJaIWdKA4LAZBlfRFcDuHf546LXXw+erP2xS90Fq3\r\nY8Jtj+nolEzI/r4e+2TShvnx2UsIg1C5sG3U+bAoQ8YXEhsB1eteiOEoWMvk\r\n+P8eKfq/0U4MJq/ZUFslBC6mQTsg8lIaMAaO6kObnSXCPJkPahmXFgb8sh2g\r\nfPl/X1Vvcm6DMW45Vn7+DahJH14fQHrrVDj8mDHoEe1qckshRK7dkZQ5tju5\r\nXrmN5BoAvde9v2KnqTg0zzGk/Kn/mSIoPGVgp4A5qZuXWEAqXDxYJLD0Maud\r\nFM6AhZBNj91droY96B0N7d1KoV9/9ZTFDb1hTnLh30M/wkkfNQgeoUwOaHVC\r\n5/ZgJNmd9MHm66jbCitQNq3Y3i+iYHNHZnNarbNA99qslhoGOyiPsTdxcwEV\r\nBN4XJAInBZnNbvJcrepU5TANrbBeeHxqgfA=\r\n=LsTc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cec7fb987.0_1666004145668_0.4889055436233092","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/typography","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9d3d059dd43fc71ccf1ce470a1f9985a60d34e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4fff58b08.0.tgz","fileCount":22,"integrity":"sha512-su/vz+wKVT3W+mZ6P+KE0e59UtCoWSiRcDR6ufsrTBOiX3dTH9el/BnNKefJT98RGJfzQJ9YHmkoDWps8GeBIw==","signatures":[{"sig":"MEUCIDTH1EXrktBaPe6WNp5TYsqCJKOrHOPK2j1rix/LOR7KAiEArPIFt2BgMB4HQPc1ghPbHHQpWzrw2wGZvJMOy4Mp/eI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXMQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3XA/+K7vDc9nVj+dGA+s+pehmsXqUdKVJOz7+oE6ijGcqkcnZ0cK4\r\nGTvyvWrsbLN2uiJrhH0ZG0Y0XnIdme2m0MpQBMmTVUqKF2XXht7AZL0rGyIH\r\nvHbxYrOAN91q0DfykHr4k22Nxz9hsb2K40BaGuJL2siCd0YYpwn/WrOqFKjr\r\nQmceg2JYIvX9EV+D5PiaZ5UFS4IVNbKbaE9Y95RssSUNrr0JGpk9J+MEyU9n\r\na7SDOVD1gxf6bV+Xu8Qfcb3ceG5ih1rZQea3knXYWzFd5vxWjdwllltiYwbv\r\nNlNt8tvxfZFc6l2hZesXErbBk+0N5DA/zt4NyO6zCVNZmcmKALAnZu2neOsM\r\n4J4khOvKVJOrNqY4kBoJKzRWDuI/NjysjFVNZ5EGU9QD8+qLjJDQvYBA5hBp\r\nLGp4cI84tsEilAwz628N++Dreb+67clbT8nrwc9nUKMO5/DfYK5fDOn87R3a\r\ntFO16nqFySv8SLdOquJW6w6kaov4ifTIKOAghK678M0PBPLjx6fb+M7ujTUC\r\n4htp0Ypc49TGtK7umX4jCMcyH70pqD507XI+Fef/8/ghuL0gEIt2D7wdjH2q\r\nTJbSQwTSMQAsx3rh/bzHM3DaDI5p7jYuaNqwXs+t71lpSMbl0CwHzr1FF1VH\r\nqsx1mEzIBxSOlMrxUBG4NPkdAOWKi4eWDvs=\r\n=ubWY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4fff58b08.0_1666020112003_0.5131091983337115","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/typography","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.587d8f871.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8884d3d5fd9c5a51a52e6812cc6f86cf45b2ba1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.587d8f871.0.tgz","fileCount":22,"integrity":"sha512-1l0fAgPwyc1BkBiixp1BLnqChbjkjAbbZgZv0a61saHP4Isuz7EgvEZzW8gV0bj9Rut8/h0L+022vmqMAI3XcA==","signatures":[{"sig":"MEYCIQCiqOKhNckdRC0EKBCStxhjBYrcZILGQT6MU+CmRP1a3AIhAMZjzb2E8tJiCLGKi0Yf2M7fSZs7HSkYCPCy/6koNyXg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXsxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3KBAAmKR7XiLpUlrLpL45tRNIernzMv9uHKGxOGFjs/Pe7gmCxkQM\r\ng3F43dZ1JAsJY5KjERWuH/39Eq9AAPJ27MyL3MLjoMuli7B5JwYixUc+4HcL\r\n+sNwV5JAPTK4j4QgPQIcGgcFlZX6TK/CgDfaCEztbYV0rGJqWAw0le2vZZnO\r\naeGPheU348Mz1mM2qGeLgYWf9VHV+6NmBoEVrttUbDTgLIIGD0dAt6qGzqtf\r\n9XI743k6kTVz2F4raTGVKhYut3sByBC8CgJccq3H+vSGGtaAXHHsGyL+Ri7/\r\nRqqbMM7efdrNC+g46QBpUlD6sKbv8MzF8JztBW8bo+VHChBc/wSFsaTx75uJ\r\nGoGAIvG9qclYy4B15j8ADYFpesQ0YgHDKKKBrzy9wrdzTLDT0qytNaf4rNyl\r\njpe7lWjdI470IQjSTIfj6grDKgiPeXcMzpaozjCZ286vL6Fr0HeSBGF2FffX\r\nSkoDAp2NtgJPUDFX9YcbTHzhz8TNnECYlGeO1G+tUiym66iHl7Yh30qNHbph\r\nCQiAcHDoI4Lf5J9wl3eRC6i3xD6mVusHTIffhu6SGyOpHLjauJtHZ8TIcAJG\r\naQxovQcDcq03fkOH0jCSadStCpv8FIeyeaCgUpbgSaBudJ6FRudz/6GA+6cW\r\n4X+Cpe8cWn7HnOqB9LSZbEgSuCJGenESgbs=\r\n=emFJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.587d8f871.0_1666022193752_0.3702979912670954","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/typography","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac1f8c06e73d6944b5a29d815bd3ba3a5bdbb8f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.edf4b98d0.0.tgz","fileCount":22,"integrity":"sha512-scvscIxtRbDvYG2oC5bpfMOpqKIO4qmN0bcM8cb8ZQNFibSufQjT1AaeUGUTrjdjXGaL0DQxw09IVwKgoulJ6Q==","signatures":[{"sig":"MEUCIDn6q5Qf+FRSDgzjx/4XtqfPZg5dPeBqrDeKAKV5pbxBAiEAr9ONU1UH+6c6LVcPAMYUR4uJYuOPpuXef6LzrnmHyd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYVaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYsA//d4x0ni4eZa7ZF4F91VYKqf1l9dM2+eH0Pov9raN8wGalyAg5\r\nZko7wQjW8UBuxOFfjPlrXTmUxHyG3QznyT5FupKZySQVMihCsO1Ui+8ZwBUI\r\nn+Fv/ncrVYGEekg4V40x/1CCWDLDm3oOTJa6QCnjMIfLD+fENAV7Tk9Tsd6t\r\n6jrB19hRTTZ3IWunnI09aLSGg+6EzJ1zEHoaqcN1d7OwhSNscMl8IzEEQIxi\r\ns1pkMNtXAv8lZ0ZAvYvIcpqOYxnUcHX8VVDl2ZKMT+QRJbYQl2lnD+Trj5TC\r\nsFvGkD2w3AnY06wrq2Z58VVWbyy2TloutMqyLAgnOJw+5u2vgUivA2KxYMsw\r\n5PZvX4q1//zlOLG/oadKov5bMcd5fNnBydaVX3ntX2OmbxiJvaacEuX7gIZQ\r\nnmINlUAaFxxivlpLCixJBAy2pJZt+fBU1jYM0tsxHGq9GX4VgcEimOXQgi53\r\nBGWzcIUk0zbIeKLCscrRWzgKhMpMyByQtFK/xHs8mDW4MwPMSxtkDT5XdXcY\r\n8ewpzMcnewza7dtteR6KDf13waTt5laBsjzBc+sFtet7eNyQhHP6DYgBk/9p\r\n5R/jxXFT/g8O1BT0oXyBRiBWHUqglEgfqUXd3Qkuuf6F2b8ETbAxxilM31BK\r\nzuI57VHFbwyYiIhLQkYJc3SPF1CPKfJ5KKk=\r\n=H8/H\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.edf4b98d0.0_1666024793958_0.7313428128203756","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/typography","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71bc23a25f4a462c507c6ab4b1457c68978311fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.024ac5f16.0.tgz","fileCount":22,"integrity":"sha512-xnzbOB2hB1nB1Wzw8NSWkPsUVcQickyH8hCcF0FdcYMkJRNE1B7sk2VVnciGwg49S+QUGzB8lZF1Wc07i9mkvg==","signatures":[{"sig":"MEUCIQCKQ5/bdaJA/NIn/2luIf4GE1vAHsbXseOCYPuRGeKJbwIgV4vtAJFy01iQzigl6vPg6uCIBm0ML3UTZuRDB18iqak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdopACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjkA/+LwXEfyzfDPwiIxkFQQuuE9uKtn9fdriaL8jJvyUbc1BazwjJ\r\nJW5b3zryUhvcQILgcQZvZ4wJ87MS+7UvpRXLICvVOVow6F5tHGwTOplYmJtg\r\nJUplbgxEpWzsGyCsfay1fqqgTBc5Qt+VBs3tbQ4lxFpuV7dasjYvvI0zAszF\r\n61XvdOK6TTNaZkCU6Za+fSPNYuUuap9PhhTb51i4QB2LzuAxoeQ/+jdEQekE\r\nf66hlXtD0lULh16A17hv+7+qdYfs9u+fjCcvNXVUdAN2zymASfvlq+pLC+qX\r\nygfognTYfiD5MzQkMsKg1coq3MshcXy3zZVfWs8dCE3NNjKNAgJKnf2FsnCs\r\nW14Dn8yz5DdIg7xsxqlV/XimcorQpk+XdI7R6nUC88CEt77acs2hMsh+6prf\r\nhZ1l8JqGTvQ14k678t2eCKgW9BzcKA7K1ovq2tgbZCwBCahuiq1av52pDJuj\r\nyCAS/ZsyuPf3cuBVRCY3PZILAAE6xINBabVakGMYTl1zOSrR1HdIkIt8TYyx\r\nVTbwvl0pf3Hp2QTjWD7tyR4esRnjwMLsX37RT69rzgNjnaDQPI75legrcGAN\r\niq8GZLKUmSyM64FtoBAhFO1ngFn3bXscqsqcFuri66s2d89Tthm2QA3T+t0G\r\nKZBbyj8FcCD6RLelMrXrnYQ4PuBqMJ0qayk=\r\n=xRCR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.024ac5f16.0_1666046505386_0.9546371551663777","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/typography","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90043f572181a28ced4f9cd11475a4c0e9d8b4fd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c8bdf6144.0.tgz","fileCount":22,"integrity":"sha512-jz5gx6rafDno3gjC/y/wRPbtz+L1C1K2PKH73+weqbMDqUU4IGTpW6L8l0CjIi6x0Fk1xm3g7NJz9hd3IQUcDA==","signatures":[{"sig":"MEUCIGdWihi7fn9uiJCJyb1i64eIIHuV3FWYKdtOQG+Z2nq1AiEAsr4UmpsgseAGdu9pLow5RGbnLwGGJQofl7Coe9EA1K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu77ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSNxAAiRHnLvTKzZ9sjXCfEoh9uWfmyOrY2yvTvoFrjeBytzRfsEar\r\njX8KtZTJpYtk1X93vKWHon5a5N2F7dkpbhl+N/hGJeHKYyYnB72NbLwQ2CQ4\r\nenPYJIeVLXfUaSzP0niag3tTy+N70WXruFMywwAB69d0I5ZX++eEMCFr4g7h\r\nok5iLtu7Sn2OkZ2JnVmh3dFUrlITArkAA+SPmAYx/qRgA+myJ9QMV0+Ia7Wc\r\nCnGHGD7bzNiSpiHsgWkUztjbe7rOGtRgrQI1RqQcA8w1eMdFCQb2NEDpgfe7\r\nPR8Z727v188sQ+zo1f+2tifg9+xBOw0N4J0ctSb/CXlbVopl1DuSE2ixT6E1\r\ns7cgBRyuvvm7s1VYVG3BtWktcDkEDV4HTVlfmqDM++JbduWbR9gdF/w4tQ19\r\navMsMw6ew9NoErTGGo6Fn99zl5zo0dQpr7+efFqQlywRuvEridZ5O7kbJPKS\r\nAL5thNNHX8W3LOVwUEOJcmZr9kWiOa48XpaA6qzThcr39gF7fEUCtnJmZzQ7\r\nXbYmACqTQpU+spDnexUddSVSpoqKyB2fxE9R05zJPV1BsF0e8tiq+a8UytY3\r\nyK49P2181rUmcqF/QCT8CW5KUdPoIE2lY9SQkIDYIHoizL4DLZQQZMrb8B0r\r\nFZJ8IG823bb0XXeDlS0M6HTBZgFOTiJAt+g=\r\n=Hxs3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c8bdf6144.0_1666117370960_0.47135019120839283","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/typography","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bacda4885.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da544ec762d8eeea9f3e22df557a036f1d23c1b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bacda4885.0.tgz","fileCount":22,"integrity":"sha512-59UoFx6XEoXcMlILsERGOhJl6phVJG0iEfxwcFzvCS+CC9iYsuEZaufl9YKmv8epau9gedD/3r9CoCGxpkWkBw==","signatures":[{"sig":"MEYCIQD+cS1UXUhLPJNyRsmPdmObAZdnkdZQZcHYKYy4WsZl/gIhAJjcdvRSW6xV1MC5j0e+syK8d5U/Olxi6zf7RJvFhWq3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvOAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIWw//fFSQjD+tn7CG/U02TtCzq82fDbLbmqarNaZdHR2hyfAPU0EC\r\nXgJOiiVCsN9GPW0zLgS+YXT9DvfAROXpawQih0DFNzyVp4rMkv6EEQSoRBVV\r\nSVEiN6BsfF7hlhBV9SDOusOhYytaYLrQAgzR27uV8OQLM3IdHgcDzHhDU318\r\nT6yAQEX+dGNuTaAMLl1AtL3zyD2AKEzJSeSDuQ2XjyjvDoEUJaU5YSd/EqSp\r\nYKnAo8z9PIS2I4wZwz86ha4C23isurQ4ZLQn+jGXXk3XFdGCpG27uqfUjWeY\r\na4EcHMVF+BCtJLZ3I+tA1xsenHKHNIWeismTvRYUTIJiL82KDAn5dW7XtI4E\r\nLLzI4FimbU/lDiVLit/hJJhHE+mdXrVpzyhGyd6IGTugzdypvmzcbxBVOswj\r\nVUh4dKTBo9OZMYs2VY2W0N0vFMq4WbjbLYZdDN04QUauSsfZpa3gbsw37giK\r\nl9KGI2m5YAS1NPOeRTQpT1rqB/y3PI4vir7bBzf0RvICQf1OySUIu8V5cCqA\r\ncPGLpibuB3ZQob2ykO743/TLGBcPUa73StHJb5BqaiXsEsLWUX90ueT9nmWX\r\n34dDw5stQqHCdnt1x3SrIiLGNJ3JbDUdNgnsDVOHkVEwLTcac3mT9Brx1JxD\r\nu7J8fZTHTn7vJDCvdrWNmzn9GNRO9R77Ifc=\r\n=Mju/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bacda4885.0_1666118527938_0.7117661654377845","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/typography","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01da1b0efbf39b9660afa4b2713fab886318e9b3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.92b2556cf.0.tgz","fileCount":22,"integrity":"sha512-I8CGbVnPPOTJKzA/jF3g2S8QaXFKkaM0bSN12+OEjwF47pZH9d3xz7Fh+bgfpcQgcbwFWC7X5Gx33eCJ7a7xzA==","signatures":[{"sig":"MEYCIQCgyDD9GL5KnQtQ2/pUZW6G0CtgnV4RrOfbsRVSGQSxFQIhAMY9maXYS2mzWN46MpUT1zDaVPLsy8tVVAqYeuJxFgrx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT08TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYSA//XA74pdAuumFuTVkEiMQ1U84NBvvJq9EyRad6/C351T1/8Mig\r\nKpkwsGVIFQqvwIcWICRnO8BmdmpOcMO1OW9hkkKTCPNiPfdAW/mSG1nve7Rs\r\noHaffKalsTOXPLq1DKV79GHRrE0Vk90pUr5Xw21PzC2seBPGNW9z8cg/0AfO\r\nLVIJKNU/fcMQqU/UEPJy8PxZ2M6jz3AUqgxZ/MzRAPDgHyJ+WdrbZuJ670O9\r\nsZoQkzzYqYBv+2JQsv2cwcJhe6QuotqgV6oQyqG44wTTKlb/eZGunhsDalvl\r\nv4VXZC8JYzBjTDKcJbizEr6sdujWHjKRYPbVqqf8twhV/q4I+thHmIygPLuH\r\n/6UAi5l66chD1avxtBWWlIkPvLYMuMPrVcO18rkdvx4lWzHt2ZqFLbGcngUy\r\n0vV7DbaeU0MC0VOKu7VCjJUA7DHDHS6N37DS4Hf7EYnZom/D7LfokNSHAcuk\r\nySgrcoQeLBQb8IiruGkmOQDjX/Bu/6DhUzydcSC5Kh10tobIBClogEk3hcTC\r\nE5tXZdlJxBu2eAe17aR+MfTGdnj5Kj+MjqlAgYTbJLsR4AKPGb2jjIfLxZbH\r\nv5QfKagvxlxbS3EyHVrLNWtcuubZUOow31rIEM6eGm0w+5khKUnIHZDajhBD\r\nKhh7XDROYv8mwsrYjyNseMzzETY2714YRH4=\r\n=fBxR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.92b2556cf.0_1666141970989_0.059135943252514034","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/typography","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cc804509a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5064980143a1570a4518bae0e4307d8f593f1b5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cc804509a.0.tgz","fileCount":22,"integrity":"sha512-/TY/j6UHV+o0i+3EpLY7pyg6D6ESzTNb+bngjvFyPi2m42p3pfsg6Ju/19qexJIdWwYYSPkbCMsKD6VWr5x7Lg==","signatures":[{"sig":"MEYCIQCo+m4xZYm3TtZ+wbZGGb248wV/C4N6THuWOOnD6egEWAIhAI3boA+SfsYHgiPpCIJkLTxxjuWqB/HFjGjnFSTECLgu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0/2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkpg/+JDOSpzh53nVqHIdXlBsIuWLF4vm2vs5bqlk4jdBGgzaWPzY+\r\nAfqK+DpeAOAosDV0tYREeOnAkvOlfu8YM2G4Uqc7G+CEtBDYa0sPThscq6+A\r\nl4DnBE9LFJgIGXz7Y78EHcKtyE7b+NZDMJB3jiZaWPS4m57lEY+zIsCD5gPD\r\nB/J9rvY05e+s6HkbwKVuOVERVUNEBGjGZd+yuWrULeK4Vs/ulYbOY6ppA05h\r\n/c8VfvvYgbD9anNUkzW5c3EkblhAqxYu/pybBFhsegYJw2y6tn4ImsPNT8rR\r\nPYRSQmTTSJokqzgn/CWmfjy4T/yppExPW61PPCAPSB+FtQOOZc4uSij8KP02\r\nmS08i/rAO8N5yNflwK//4vyIqVpYE1nRFfHVbyk0+uB5Lo11a22OJqJPt6cV\r\nyDYVBbGhRzaFpYUut4Nb7AZJYYEsF8goBdT1Mf2wo2wA2r0ZHYLUoNOtbnLw\r\nnLAaJY8yB4JBcv4S0XPmfCpFVjVi+eGXtkx5WhuwVV8H4OSEDjsHihVKeGkC\r\n/xQ5T/84U2B3pBpd8oF6jyw0XnOy9NeqOMBqNb7qETMq47805fEUQcFRVW8s\r\nZGC/7/iCVzOOTRvpzDh86on69+czI51pQaDxk6aEQE+1JZ1X9jkpxf1zYy4c\r\n9Eg/E1oCmfgtMgGnK2Zx26hs1GF3Jn7bVj4=\r\n=PCkm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cc804509a.0_1666142198594_0.2594799056078163","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/typography","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.982bedae9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"951aa36db32b019d1855e3b7c3777a831cf916e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.982bedae9.0.tgz","fileCount":22,"integrity":"sha512-kXZ5tsruzHGWK5VaQwjykIuuzW1byHhAF16qC+Q7WGdn411R/61+WdYkVBtX/847wgyf6d8NNNYih6yaVYZCDw==","signatures":[{"sig":"MEQCIFlR/18yrEFZX5kS6DnULvcSfTon6Uws0ihXOo5p59lDAiAg6Y0uCfX3cALW5aL8lwF+PleNlxd/Rnh7bXb3koB/yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1SbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCYQ//Wc2vT+CQ2qwZ+6h66nHrVovWvHZYH/i0JLVXNY0PwfnTfTyj\r\n99c60q6ap3OKgO+Khor5rC9BoEVm/NqlanszzQZ3MUXEYc1qhXnNxcB+99+L\r\n7jKNGIcMwN6r9BH1dhhPAH5O+TrD21OrQ4Qu/L3FfaneWPzH4H/ySwcnMGV+\r\n1KraN/o9SPiAxUpXFK+HUiOSt1NmGHxQvu/zjWs+qFQHFBmabMj43F73mgvk\r\nA8M57Up7+4a/tHRSBeLnWYzm+VThDJNwdYuZaQN9tp05n7xVLgkjgYoE21Rs\r\n5noXfyYGVDStf8pLpVXmbztwkgwBCu9P6kJ38ks2h7nx2xm5OGSo+wso75C8\r\ntfkIn2RyIM6y3sjerv3ebEsjmFZ9qxgZrBNQDjQ9406Slhcp4U200V9QABGx\r\n7Ha3Hth8MGzVrT/bu0i9ZEusOzLEoMsKtXTuU9cbwZQ72mEnDEb+8+yJ+A4b\r\nweYqFbuiNwYGATOL1jZPfq5HStxagLTID96Ltn6HEXao1p0Rxfv9TpRB3JKV\r\nsDvW0dXabwMT//9ZdbilY0rFRjTzl1oU+qet0UfjgnN429ZPjbr28vYiuUla\r\ntuumW3tpmr9fCxFlQXGz8B1C3lIEOhS9VmK9wkbwXIpqK0JMzh2lK0ow8chc\r\nhQNXNcigVp/U6FDVp+b3VT58vOhxIo/1ms0=\r\n=qEam\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.982bedae9.0_1666143387422_0.7197613558123175","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/typography","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"627ce01e04bf422e359659e7a4241e229627b99f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ee40081f4.0.tgz","fileCount":22,"integrity":"sha512-Rva5w9a5br241Zlo20XZml2v4gkTR23oH03SCrl2/jxzwWTa3gNN2MDzsndUvFblQRKZ5GCL7AAUT2iUoBOTFQ==","signatures":[{"sig":"MEUCIQClinfuFdfTvN/XMl4+l4cDmlJ7RvaDRN8/hxqW2Ygx9gIgBo7apvGdz5z++e6biDhCwEMP/Vu4a0pWkEc8xpBehO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotJQ//fZapw0TnxA3rZ0k420fnJsv4FQnOZbHJjKCMKINZmZEe/cXf\r\nptFE3cszAgRn5oZYQr8twIAbtfjAoF+waarg3bmU1StSS7xDm11Ywprq8OTj\r\nzOleWEJgZLJzOCmf6LVpamh2CAfFH3/jW8RmuBFAzMsWh+B5GdVKzp/tkKBw\r\nPSKx8E+ylhEvZ0Px4q/tsQ+9zO+HUqZ76e4as/P9Of2FN+xk1Tr+OQmA2wQc\r\nidNN0Zd4RsjZF0nhJI6ONrNA5OwPfcoUysTGyR+xlZJTZAf/aD9iRSPI9Z/Y\r\nr84v5QU/HMvOJDBahd/47ugwvjHOeZ0jEHRNyL9AFF9bxNFU79mNQSb+syiK\r\nSIpb7st3+G/QnYfQnrJn8rJkTW0RLJgG4C/kOwuBO1E5E6taD4CupaRGQLgh\r\nxXUzhlM1CzA6EbRSQ/bVSJUekW5J9kV3yP8wE64uMGsZQe9Sm5vXBvlsxlUV\r\nXq1zLNRQUg5CKdCYuY9rCAiqfwTEQCITWFFNzNY+wes8YD/dMtSjeDG7Fxg/\r\nJK4nt7Vqh9caVslVmxFDz8OJRiyDclL8WGXheTkd97q6DFxEeOcteQCQknh+\r\njE4pl7K8pwpE2YF9nFBXiJpP7j8w7xvWSllKwDoPqjqAbg6XD1TRlBBtYnd+\r\nwS/NA96hwNwHQl8fo4IL7yGAjc3xqzpo36U=\r\n=CU/m\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ee40081f4.0_1666210272501_0.5061118261708504","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/typography","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47c896bdefc3bc94da2e05f75db6237910d4c492","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.98f1b54e2.0.tgz","fileCount":22,"integrity":"sha512-AFkeqzsySLG22RO/Mh2Z8PNcvq6m5eRXgzMR95gK1FgbKA9o9rjhSF9v+L+CXnniPfKp/5fz6K4RpCl+/ebqSQ==","signatures":[{"sig":"MEQCIAdRZ3V7kDs5pgo0U3zuXimy/6GmrO633ezcU4hplRBeAiABOIVVc7EHJsNGnr4EIZh0Dl57eEXOsu7L+xXnSnhhmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsvA//Tc9uX+tOn9dgfRhCjpw8oarT/iYmWakv/O68TOAZVDnfuzAx\r\niIUN7E3wPCJA26ky5OGYrZThgYRBmcV7301XxTCaH2VT5FSJQaWFV9QM34ej\r\n+6BnUj1u2WRtYAGwfn7DheuFa2J6YqNqjN2VwIZhiqRD2saslD1oklDn/OLO\r\ngxUP7TUSvMZBu1UUYjvZTqFUKoNof6l/dccQjovd0Ui2C5Kg9vMsBbKgeDQB\r\nHY0B8p4MsnstkpfGU1dtH2ZYdvUQF+QS7b+QSTH/RQ5ecNVdubfYz1GktrLp\r\nHsxrg8Ktfo5YJjF6qX1YD/AFHM4WiaG/BnToLatb9rIxTr6gRED60qN8cZH7\r\n3zRuvrNmGof4Jo/F80DGBdeR232gNxy35fY1URXopd+MaAsAT+8JmrEn3EG+\r\nSyG0hjJXe7qGf/ZjlC29MQBJK/VGJ3UIrLbdfsz61NiJ4g12f6wxgQcwRYYJ\r\nc9XAxvRfx5VtFcLsSJEu1MldY/K3AUXDJ8+Tfd9WyxLlvXLf11U4olVWK7gg\r\nR4stG5KG4y2QFPUx+Cb37Fs8E0xB/jAxhjxSFiGIe39aeJglRpcgR79lRwh7\r\nXGYMeQezqXxvEEM5yvLeWxXNvVSIFNJawh62HO2xqKWLv5SHtSbx+k21b5yd\r\nJUL+Bt55CD/pzRiY4euU8ojwVjrusaPiUhY=\r\n=nb8A\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.98f1b54e2.0_1666306570619_0.2180609431633782","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/typography","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2822a7d9a7f786c64eaef80a093db2d1d181a8b5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":22,"integrity":"sha512-xGjinzBM2cLLX1loYRPtDE7xDlytEy8qVdbq0ozYG+kaa8oN2GD6gRnma/RDsLPAW+MjYFR6BdanZsQcqUh9eA==","signatures":[{"sig":"MEQCIHWePrKV+5ac2zN/TMgmb//pCoYOAWP9XkMk3hoTCAqZAiBNW1R/nKQgRPyhBc/PKWxza5xPeK9i92LUWFyPtl18Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtFKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUMw//RsV3EK76FmKPr7T3BIPTE2dA6B51CHO37FP0+eUEv0vxIhOo\r\nTfmsRaXRjNB79By5m89QJImS/3PNfN/jzRfKh56Ob/OW9DqIaOo56xfg93wJ\r\noRXdTyhL9REBVfqf3NLIMiFm1FlR6CLQ1VM6y78pFFTap/Uao5pKojEVTSx0\r\nl+jzIZyEYYz5xAV+5N0gINp3erxT/oS6EpPmXd7EzhCk4xHpzW4/Goa46pOg\r\nWIcLWTRi9Um5Fx3ddbHctI09GhV8MMYMmUQpRUqO6CluzfzE9o+npJCbIfQZ\r\n9b5s5DRq1rmbD5u/7lv4vGj2+fXRCaw+W4nSqZey5RmwgIvsAYGUif0tsA3t\r\nTKaBtt+eMcz0CWtxMxN72kQfb69fZPOYTpNyKZlDErb1Sgl1wwFja27kbMEg\r\nL33yDidYZ24vzC/b3OY88NJhBeWmGJl50EAx8avIwefku3gu9KWmw06VLnYa\r\np6AD5s7W49CYaBrSlpR/zdDsSjR6+jAbowcsVYCG0cMzHyz/yeAgxx1nyJKQ\r\nSAtdSf3vLbJN4VN2X22GWgyicofieLIFn6MEoO29dJZ2HN9wHphVNospJjtA\r\n5V/1hzrNxJ97jSAd8bxZYE0T16GWOORUadHlrX9PBwjwuPk/ZOEFY8wy6fD+\r\nA888muYYfSLlobWzjaL0zQwLFKO+rR0q6w4=\r\n=J9XJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e74b7ba7e.0_1666371914651_0.24218566275025943","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/typography","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caf7969f577a052f64b5744bcbe7115a5a30d23a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ab55c07d2.0.tgz","fileCount":22,"integrity":"sha512-MPSyYkaTDpIC5w7MDUJeru9DSQAXazsrTXqNWsuWH51D7xdmQGAcYXEV8vfEihjbD5eHg54qXsuFigypxzunug==","signatures":[{"sig":"MEYCIQCdVxKafNlTL3VUJKlXJHmCVRncgiJaALHSgZ8eZoN7+gIhAMqAxTt0Rymqh8ZvkIFK4ki1YL3PwDCOXtwG7jEH7wlG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDP+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBfA/5AL4wMas7mzVQNGiWJRzRgklYsztGm/x0Mt9SH3cquHp8AhwB\r\nWB4PK8r458tsZM3zAKVONs9/uCYOrA9PTS98lQJ3lmm0tYF8T97uc7M0v3hH\r\nv6sG9z3LKAu2s2mJP0+exE/OwfUPUwhLQ253wdM4xB+Z/KTHxZeJTcznEkUW\r\nGugNLpFLJVbR3LqsvtSy8T0LkMn2x7jFvUGpCwW/Z0znmbzZv2LTlNcF+d+1\r\nnAnEVOvcgGJXlKKiSkC4natxnRJgax/IOQoeXxboC/ra48x+55yWZmWEXrdv\r\nKffET9T3+rCEg44ywRhwPHPdWGUcX20Xnb0R+pfGwkmNhviGHtZ80SoJjxb6\r\nZgAwkX94u6nioGPz7paaQPBRM3j1UO1Kup85IN0dPb7BRw+eTVDHhQrpbuAR\r\nIuT5cup9bsFnUd4p4E13Gy8YhOe50fwEq07sRzK0O2gpXy01thKNhEzE2iVv\r\ntZj/Kuo7RhTdgkxkQkmW60wiHVgFqlg6dcm0cO6UFvBQ3rqF/k8SRJcnssrK\r\n1Tw9WT+C4oZJ2WjNOpNw+aDeJJUA4weFFzZzStTLGYxbXm97DQkml0MX6r1l\r\nHpxMQzfROQ6pUzNkS1EOovSlL2bXiQnh4UfJfqeIkTPvEKBkv10BFsWGUaYB\r\noijRU5nXBff5SL4I2tnk32N+ckC/aqCaQDs=\r\n=KYfy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ab55c07d2.0_1666462718508_0.6101522550918359","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/typography","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fc539db34.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef661118db83dc2e757eb4fef7e33f5a57344f3e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fc539db34.0.tgz","fileCount":22,"integrity":"sha512-h+okz3xobCIbS8qkp4q2WGpYACX+O6hNHKE+vhPKclzas9NU7OHEH1cWladcAr4NPygNimgQwk/c1NA5VULqjg==","signatures":[{"sig":"MEUCIAYNB5/Ayl5HtLcDHbKXlX5Ee2zuxh7qMgVF2HrN/XE4AiEAveHOEeNHSBM7ywSiz57fQIBYLjkTsYxdJEtrHnRVObI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuBcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkJg//eL1Fu3DpMdqrN2B0SH1kNQIuzQe3b9B0GIsHTaK1nuxaSkKh\r\nrpkE4Of6NTrJQgrm3+YVSwjGDfWprka/gcnXiUiQ1QtjkAIy3kPwTuB6bsus\r\n+m0tL3Bwv85AWiH0q9WEKGAroCQtOKfPhoWJ/wd7uC2Vb29deBfzFDPAgL/9\r\no37jHnpkAebxiNAqNhDo9z0K9eJj+xlT6RsU2Hy6ljZI3ukpzwY4ieLCNhUt\r\nHAitxS5G6V4jt8IhxuKJvsJYVePT+xB/w4pdYynq2JTHw/8wyukowaVCzFAh\r\ndX3rOKathJzU7TRKDhmMfX1fdUoS/Vv1yqapXJJLplNWUL4waIakI1pjYemw\r\nIdh9tYJ2ahzr2EQNywHsA4/4cefMZjl8NJix9Dbn5GhfQv/mkjYyNbgzOZ8O\r\nRA0tjHEa/z5qY84xPFr9Cfi9Z8J8Zonnbz5AyAIOW2L63aKF3okH5gr2/T3a\r\n37Uz095HglniyottcCoaydhB7ze2JE1kDBOdneXmgngwYAiO28rHAvbBQF5A\r\nLcy1SNKNGTag8tuJwRhRUyTvZkfRDGcpPLK1sv7Z+sRN7vMxpbCd1WKDaTR/\r\nIovaINpULg6L3wO+UgcQDy2/mlONdxHyDOiT2oE7gc21sAdTr5DlAvmOZLDj\r\nVQkw371GElRNSj+BKvcu9tPMq5i/cn93dm4=\r\n=sZxl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fc539db34.0_1666637916737_0.3001217338372779","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/typography","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d93784d755b7228a1630c70eb59755af7e8b3fe8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e340b04c5.0.tgz","fileCount":22,"integrity":"sha512-hS6EnY03RYByDaqWJ4wSo4YM2DQ7qCNHw9eQXXsB6Z3gizd+f/P0pg7TBKVFjB6FEGIq4+fBWjfUU+4LU7L7KA==","signatures":[{"sig":"MEUCIFoneABXWGZUIPzQs1a4x29d5GSS4lY5BASW1oi0PkhIAiEAlh7e2kqUSQUqpaS17UvGDTxw+Z7JOsoJnqliIXmR2Js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrELRAAlveR8O/jW9gx5x2wxS12ciWMb3+Ul++7vBmCSNGidzKzg4kA\r\nFym8ENt9fsDjtUvaE9DbWXdXRNvkfhvM1JUxVY8qGz93TTd6LIMD0As7Md0O\r\neOYeK5LetlvHT4sDdni8yaqc+s+eKB5Y1xihlabbSWPKD6W8fwOpQieCx6Nm\r\n8cGF36n89eGsnFnjzPmueYpzvxK8gGsB7EClX5lUvpsl8JMpQuNS/Z1B8xNc\r\njGKLBUe6VqYZ0+1pNL7nHdsm6AzxBq185Rz0qlnaCH7ItLUgs9mHOFdMP7+r\r\nl9IMFKiFoNLMSiNDh7S4MY7ntYbfMVAVNqKddkyhTRrnB8GOvcAuFnhaPOds\r\naLkQzEmA+JleSa3bLx8KkGsLKbydXdu9YKdCxdDP5uwBHS/qGYUxnZd/1i04\r\ni+j+J0phbOcJlT0EJdR5Ucjo8azTPzKdx3GUTMZRv3a6aBAFIb/WlCiOTlOC\r\nmjJ2l95FIPCmWmSMUVNRW2P1hZLAKFpKF72hdNseimZYLpbaFbSFnw2Jn2YP\r\ncYQrHKDLoomCznUQ4Yzy/b2SkHS/nuSGNwahfjauQMMjew2pRnZsuLsYnl13\r\njxEOCIifsw+cOLNdjnpi4McfhFoOrYlu8yumO4OFca6UZPf4gWrXf5r89J5R\r\n+fR9V17ESC6M4PIkcwYRGG5y5820KBTxDH8=\r\n=AXEB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e340b04c5.0_1666741468833_0.03025253922149651","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/typography","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be948e97feab59322a1839979f75b67d738563eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":22,"integrity":"sha512-ZXI5ww7j+W5GSFWoG/Bc4AGOOpHVD1KdKIXK1Q0mpZ/tKANDf8/31o1TgHXwFfDl0T4lrKigOQdDRUl+3OvDKg==","signatures":[{"sig":"MEYCIQD15K2YMArYEVSuKkG+ZgIfdwcuoJDTGv6JrdtyjbMOLAIhAOSYdVKeXdSKnnZYaP//TLBI9FfMJyMrGcxadig6lQGE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW6JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVYxAAlj3uAH00aD0NMaLz9XNszF3m8MBBrLUMbI3i+cWI0g4jvfBL\r\n5UbDXDLjocEwMYf7g2dvY0TbsCLbfVbnnUIAG8l2/OdbxobmPEQlFIWvO2zF\r\nB7/MOEUu9Ea5IsISw97AleRW+Q6owABV6rugR/F0MDnr3XotGNc36qSahFaq\r\nSHlHoryyGG9pj5zAy7EsvrMfYw3n+AV7COc6dg2RRNa2Y+eJX+SXec9HpTCL\r\nP+VjSJF7P2DEQVFKkCmJdqYXOF02l36F23szuhripHvPKbI7PKlVqlY+fTWI\r\nD7f7YXaGsMmiB0GECa1QxnSnKahOGdElfnTsJhXBmDoMORnMwSLdjh5F+D0G\r\nZkQJCMjq4lQx2iESjMzHld7yW0kQaxhcVoLY8eKOhawlHzZAU9OrjB6sTeHc\r\n/aKxTXKONn+bvN2pm14I1w5+9jZeoqEfv6SYrDM3W946aEq4QuQ8caJXThh6\r\nXoz8LWGm5PyZdB8IHtlswEjHC0168RB9migFXDy8o8xHqtJQJxaMMzz4gJFx\r\nwzoAqmCNIvSxtMP+JS+jtG+ro6reg/d7qAmmM47NFwRn/AhuBKq0eUHJp3eB\r\n/UZu0I0id0wgX3c8pxwvtUlwok/C6i71Cw31atr5fRrgPkqqmUXqYuy0gYvd\r\nffNiI47GyzD3/L8LxOYwTMpNjNQvGMISGNg=\r\n=UH1Y\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2c1a8f8fd.0_1666805385148_0.7131462624173379","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/typography","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"064abfcda6102e3bb1765a54f8b06364359f25c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ecfee946f.0.tgz","fileCount":22,"integrity":"sha512-hjX4M4Y1AuhchpkyhmMmG5ulGXqknKOQvsGq/w1fEK5xKmBEXoQK5bQ1xwcFE+NS2k3CMujCkoHe/biz/eHX4Q==","signatures":[{"sig":"MEYCIQDNqa2FZh+VFYXcLJjKymuU4W/T5gYcuFgHBsMk23NRKQIhAMGhlsDqoFW4TJZpaa5Qy/Ha0LuOCj4vFBC0CPjKQ+vt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZUqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2SA/+OM6hcUi/Qvppz6OlgKt147shaYX35TtJtTR4/2gIVR+D/yNm\r\nWavDUTDoRl7CYZtcVwVQy0kYSrkBlGj/hQ87l1lyyahA6giEb5E19oXdfUuI\r\nMsO/nUxhd4q9ahBACsjPSwAlOIemZbS4CwTtHSt9Kb4OeouBi2fBcMC07rB7\r\nlMA52o3MnTA4avESyPlYp3tO0O0qf7MNebGyL9a9DsHN9zUaBUmY3ysfHrKm\r\nb18bxHzaHr7QwI7bNvKqN4hzU9vGT2U0kMKEvzx1BxWJBv5k7fVHyoxTVPwD\r\ngXXv0Vc4J86JeIAUP8Km0K7QQhtu2/EMnyAHMRRcq70uaYkrmdSiGsQxwKd9\r\ntPcx6/fO5WiYwbQddjORUG23f2OA/1S6DKAZ0TjhEibOyVDTb67OPLaDtlmX\r\n0nwkNw2AhII7nF8AjkQNOSMbHh3Pu8piieCa6CKRpOtzaxTgs+MmVL22rGnQ\r\nRKJ2LANrZOT9P7ywAODbPz2m1hC8HRwTCd1OY8PIivUcg4d2Yh2v9/Hirxyx\r\nwaQFnGWm6PNZhmXvuu2DZppZEmyrmng4PV+eYjWlQdfZj1YtH/kgxUxfivMV\r\nQoF8cFS62B1/c7pyOQxD2KKKjbWukgsrO7h/kg/FQeCwE42K3sidakFiTA7D\r\nEZQuDc6Dq0FXGUiXsXp+uriNKL78h7jpqmc=\r\n=AAbt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ecfee946f.0_1666815274670_0.2198606805146026","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/typography","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0193612559db01312bb198c88421074f6d83817b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":22,"integrity":"sha512-/k/IqSjGoWaD+zT24JP8cKdr7F3FqXP7E/HQN6r/r5RaNy1ceS576znj/YatpIGPqQRQerpX1e0tJZ/e55ndFQ==","signatures":[{"sig":"MEYCIQCgEEYR0h7hbz4OlRoVSpFI4VpC73Z0zmfmw/ta1QGWtwIhAMTZXDc1nzuZhNtBr9vccCRLbhJeXN7NWCs12t1stwlP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAaGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Hg//cFaRcjwe40F7+No2A+5jeJlby0nGZt0B4tB5M6Map4RRjw6m\r\n/z+8jK77EGicXH9vhICS85sRQsJtN5T6RPgVyAHet9YqCL3pcOtF3nNvcQ35\r\n7fOZ5G8oM/XVnuS2UanSn/QFwodAsONGN0VnDUia5kRBqF8gJFipYJfvcQGb\r\nYe5vTY4FBLeBpjm/GZkhXDDCAUhIVSJBeIG/eDcPPpxoDhxPgmgGLi+TA9s0\r\nLWE6G3Ovw5Tz6fcloYKyKmGe4ZkoLGT5P48rWebxOyvzN88nNItWundEUlSm\r\n5WFLip4SulRemAg41+Ia59s9h/4q8dldFVyYNjlOvWR8iy8bwvoURQG6pP1q\r\nxLtDewThpDvNnmAjJYLHCVwYfu9XA7u0xVkhOxV6kBMKUHZSI9xMLHEBHj4i\r\n6a9gY3AiIlSgh+gyr+ChiVNTI8gpcAmZy5F1nO5Xw8s0FMx9weJ8zuVXNBQs\r\nUIrFQEblR8uLSde15QQJj5A7krPYWMHAwux6soCTMzAMXCKDrq2ZVSkaxgyl\r\nxlhrxSovYDR+tfi1hLkfYYGP+qTLWLKXsB/AtEx9ObRuYxr7lN6s3sZR1duS\r\ni0rsn28m1ctQZrKC/fRFU+YUzcqdiKbfGF0h92foUhLq0/D+r3lmpYWNt9CO\r\n7w6xJtqQQsiNlQKLeLZMXBmUIOpYwGzgTyo=\r\n=WoJh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.73ca9dbb0.0_1667237509702_0.6159468709128766","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/typography","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16474fc6d311fd88fb622a3894a35adb236c6108","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.357f2e5f1.0.tgz","fileCount":22,"integrity":"sha512-nFpGKIgJ738JO3Vr13ILIsBsmk6XXmx+2vkntJG72DTIKVxEXxiJInIO9lNQlQ+gj7YNVSnQS0psvMC+bQzAeg==","signatures":[{"sig":"MEUCIGzX4G5u8FqV6r1RqNaPuREM89BXmArGGMVkuxH6JfK8AiEA99dT5EIBFh+W2u0fxAA/nnCrtYEn+wjtjp7+ZENzKaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBiJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqprRAAoGVPLiLCvH1VmHDpvEMQ54ryehO3VXIBGKYt2dXHneRjxbqv\r\nnyI+tpEmwFx77elskgS38c/8PeogXA4WLkFWoYJIrgjV737Pgm8MQ6xBbpHt\r\nSPVHnTtTBrm6wGVcAOTZYShrLMGfoTOmwyUGHDj/zIvHKLx6wL57OvCf9rtS\r\nmrh7WHUZaw4G6xFlNF52/GPDj2R7PZP//NA2SlqvMKbLe4SclcOc+DgYwv1S\r\nVKANoj8qoWzIbtplR35eaPTxfWEiHBXoq7OhTuFvd3n9+/8KGUdJ1HnObF5Z\r\npMlcCOX2HxDO+h96lzA5mXvxX4AHxrhO1o4ma4BAcCm0qvqZZ53vnWPAS2ST\r\nm2ExDVAbQCRvxsluApkD13ZHDFs76AzQk8KuRDx9GMkbAgnPGQMcZ8YIHX6R\r\nME7UlI+Vl8fmCvit45Z/42Xg1mhz/Whoz6dtrXmY+7G934jb7sLAHgBpvRIr\r\n6DEtJsCAApDTuLa3JN5E1GYMiLh0YEN65Kjs7LZfo4eu9khe6fVW/abBmDEA\r\na/aZPStlQ7l+/QEDY9TXt6u47X1h/Q1dHRdnHK0qko6zgMDQ88Qf09vXnAB6\r\nAFckPUnoD2SiGwrbevoA4TtPwDYNMXohKrMWcquM06dHTne5iLImZYEfG79H\r\nhvf/2uBgOSRg0crfIJN5TnJLajjz8Q3Nbco=\r\n=YIb3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.357f2e5f1.0_1667242120903_0.8018385775425065","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/typography","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fe3641591ad00cef72cd45d934f4b49cfe996de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.eb103d4b5.0.tgz","fileCount":22,"integrity":"sha512-SenUsQwRUOJwHFZ5mWtQN3QWJzDa2pmpRDhHIBAGFNRp0hiDlTZhaRl5azWYdgDlsekGMF7zUOzOHzvddW/Dtg==","signatures":[{"sig":"MEUCIHEPNBHDhmAFIxgH2jtpMgI1Fv24k3XtmyO42We+GdUIAiEAoGxxufvmOwSZvW2cE/HV+rIjeL+51z6cmKz4dBastyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYChEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9jhAAgseG1almEMNBFNHMNgGS3tPJRvkSSrtMOP1ZUPsoWds+gvs/\r\nCgKLG+LR/JdaGMzXJgqs7ojBu44xzWGikxDGHtLO96BePAdNq9km5vqfuKLu\r\n5ubSJw09lL53SttM1Hc8rW0uxi0JysKjbXNWoz2sXq6HOvqZCcuHJPajVLtS\r\nzI0sJjpYmZWK8uepJCG8xcl/X+W+MNAa12vv4kx3quQ+4HZX25UM1BhyHONh\r\nvnpo1pEFMYrY4r0Od6KfEkEZkiMyvGzU0LOMCttTjtKi/cAaoW1TzgZ3X30P\r\n4pHLZBYF2f1dLkwgb4u5r32Y6Z74mGOZPPStnSUGMKO72hHFWg9o8nS+4Bhf\r\nQi3hJ+e881KWyTF1jvVSWpv3jfznAdMrfswsxU2d67OSY562yDuOL95V6Msq\r\nXSgL9223izKNae2cMKRldyUY0Jwsrzq0ChbfFdF+oKdKskqoUXUDH7p1/hO9\r\nyA5Jo5R88ribuBjWqX1PFV2IlDXzPvZdRluOiYn7WDJduPBHCpbw7H6Fg5fq\r\nPwYBf2hsAQLklCmakaZkqIn2CMbfB2AOjW3awkptsPvmNW+QYJ8W1jrvYlLp\r\nsfnySYd97IVA/+mGnOBZQyEsKEORtJj82dB0B6p9H2vu/cFDCtoYi46KY1ZT\r\nLvlROzL7bzVxIlQMQ8TictKhn4IJYBLE6Ik=\r\n=oHSy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.eb103d4b5.0_1667246148256_0.2913446796202479","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/typography","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.af5f01223.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78528720016836005b17344c101d283a6d771078","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.af5f01223.0.tgz","fileCount":22,"integrity":"sha512-ICUGw80Oa+u2/jn1HHCV6WMPM8VIK3PhFqimIJKwduKksFO3t2lIz/2OmJhjHeAB5tlaW4sUhJeSRCx70qShFw==","signatures":[{"sig":"MEYCIQDV5PORaH+v72t6abYA5hfPNDbs9U8NhusM1Znw6rCGLQIhAOcr35IwzXkQ8OzMCumTobdfRLBGjC3Cv9keMBdtn8LV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWciACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAtw/+KzQUG1SRMsep594YsLZQVRSF1A5byx9kfWD4qo2ahTzzWDY4\r\nkNSkvWZYqfEouWzaFFq4t15TZdgPJspXRoNA29IGHkR+P36ZhgblyVD5pCUc\r\n1taEa5D2sQCSWDjEZkvRgzX+jRO42RBylFXxt7Ri2MFmX6xVgF0CyeCLZSnZ\r\n6l1OONYPpE4afntIxDftbXOsyhz7M7V7Jyr9q15aCSPErzYDV/vERmmuLkpt\r\nrHqex/zA/EqK2/4Ev0f4VXpUhhq9kj9wPrjdY5siqOeF7ZzUn1IgIqS4eYVp\r\nIxkpOzSxmvOu9MEtctQbREwJp9zmMnCGduJXeKd293E+8lFW+WW2Zp6CyLLS\r\n1+mxJ0WFGY+XduzG7sZyv6nb7iG/u0HEUCdpHrfLFnWdVaUUa7hWAvO3/foO\r\nRtQLBpk5nZKLHbsQe0P5gxLE+kHVSbF2IGW185VX1Rct1l8BU0d6ooqYJcCd\r\nLVQl7L913P3y+xI+VWrGcTVs4xPUTjOmRWepFRIVrhpYX/+wAQd9quDH+jaZ\r\nOHjdjXXQr9E6glWgXCpIm7mCErf6M8IHOEEFcrIEm2HgCNIMV81mhvsqqu4J\r\nBB4quFwbZgxtl7+mWJs85f2J5fnfLxsW/TCi7FzwyLAR4iXhFdH4H3j2yBMr\r\nA13RNWc9iPy4bU4pByz1ww9OR45+9Wxj/mM=\r\n=Q9a4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.af5f01223.0_1667327778635_0.606589956701012","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/typography","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.58733ef41.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a3aa7f28d09da514f2e60f1a7bec03636f5ab52","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.58733ef41.0.tgz","fileCount":22,"integrity":"sha512-a/jXimpBBehpOOyYkV0+mthmGX45vFWvwe2ezTqZoDZDQmpzA+6XBFmCz7l4kpuoWI3r6lse66tIccLK5KCZvw==","signatures":[{"sig":"MEQCIEBw4RS8ewgo0GSGTzGGAzskiPwbuqCrH6ch/NSy+pi6AiA+flrZc74tt9A5oO+soBwMe8dStBTcm9RCAyFxvP9o9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrKAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMHA//d+PLeeWGVdbr1i45uFFiqhDDBsM9Pc2F/6UDhQanfWUrp7zj\r\n9xvFDOa+4PRgvgw11MvsBJhziatTuFH6lMv9JCcsA9lQTn6pJkv/NulWgh/L\r\ncJpBo5SX5EuAzkquaTUojSXCJ/oQYgXanfudUblqeqgL6FLZQfxr1A51crzN\r\nC2XVfCzCioDsSVLm6Hk6JXcN3qSWMz3TaE70fhWckQYtguB5+bkJfNr6dPuc\r\nrfjPgw+lC1LAFZkzVCCnRCztSd/+np4FgYbV/rPt6ZmRJu5u3D7X1J2GMMWp\r\n3AAe9fKxXgO2DYH2fCR6VTRjz+nQ2+Tx7xHtjXZ1rHeYaPWDWK92fZ2/6dXF\r\nClao7w3NMAVqiDIW3Rb5aUHJL+WTVOiKkmUXLzut1vjCtGfXiRxYgRYBVRHt\r\nOb0fzpmNOLaF2mHuoBxSs3fxRgHIPIgadC7itjL+3Y8p2rVKs7F9QLjTN9mb\r\nZBPf8zJI2CnjdX3XK0LejrotouSrD+kXQ0nwDhdM/Fzt55tQmMG1VbDGsW4U\r\nSov0E0ybcxr633qRwx9YMVD6gzIN9WJTF6KjyiZwA8kWvjwCCyOL8mSIsENT\r\nSzXLqd3N0tni067kzcZgCaSd52sshfXxq4Izq/h1rF6PA3t1Ty5F8ZdmIFg0\r\nfn4tuREL+B7MCPfVGGMXxYoSpbxAfuFRddw=\r\n=ZO+W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.58733ef41.0_1667412608592_0.3233520256224487","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/typography","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.909b48215.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8d7e1a53d8f058ba13983f359da086213957e8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.909b48215.0.tgz","fileCount":22,"integrity":"sha512-IXHPEulqrARKlUzgFlJyBvVyCJ8TlvKVyxsj0G1wyqsAmy5qWFOo6twgqwML+NfUdWyETJLry82u4ZDhpieLFA==","signatures":[{"sig":"MEQCIHwP7n0DtqYvMFdHi8xLIFnNWBCQux7PvcINpOJBCRkAAiAGK8HU6fCvni8GD4BPuI2Scf0pAb0OdNvxCN382gLDJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz5xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0sg//YwDexMPmRMn7DwmsLXTIH8hJdykd0lItEJR1vLbFCEkc61oK\r\nekSnJ4b7c6SgfLv4jI6eGrYnaEZ9Emml2QNh8yaYlTdjLtmZJqOwMAASicR/\r\nieiU5k8QcM4UPTPUnbNe+qVKQhJQRU5yadEET+dh1eBNmWRLQcgmSu+8A4/6\r\nKOOKGeTpUVEdj1YMBxNVRQfnv2Nt7uwrTHKTmzq+jC9N7yYOr7XUd6jx78CL\r\nnj9Gz+w5IFT8U7Az2XsB/yLsdbj0HopEKN95OE0SELOQ+/TI2FczT5cwgV5f\r\nF4DuR1rvmy7M/6GYBOfgnKg64C52yvABp9Vkv24UADoi0fzuHcynBQj2v/F6\r\nKyZrasvlvl2jeWDDQ4pVG4kpCheDxwI1esSMSTk1C5PasZjW+6v9KI+o20c2\r\nC7jw+TgAl4PP9ISGfSUGKbvW+nyKeHWNoXV6BRKej+tn46ytYNHP97B5pXRi\r\npAJ4mhnZ7X7vRr09eJRPEtZ590fmDgb4yvP+QgyKfGv7NWL7v7P22zkew9ES\r\nJIqZb1oaM9+nVkEI5q/T7jUPBIb/l6NAsW+ozaT+ezpoa2CLtWHHIP+0u3jW\r\nXwIQERj3fz6bBraqZ45VRtZ02JM7aQ4B8HachbNFz+TlRwWAjWbRBIRP/nAo\r\nhEJTZbjjQqB7hvlDlx7W75cjSXMx9QN01Y0=\r\n=D+qo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.909b48215.0_1667448432753_0.913767226315964","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/typography","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfed590ca8ca66921893f702622d323571c98b7d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7f17127d5.0.tgz","fileCount":22,"integrity":"sha512-K7YeoeCgAfrWt5qBTiPRRqULn6vBO2BiFG8DctBD5MQsM+rJpx6nMcQuW0KTqgyPLr8ZdPCNK0UpyaB5yEhaTA==","signatures":[{"sig":"MEYCIQCljPtJqr4EAsDDqzVLk2+99PJjynhPmgKUrjMqFEhgawIhANoNpv11TZAcQUAyEF1SWodMh0zZkCykuvk/pUeIkvur","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAX0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL5A//ZgIdCm9vxq8Dbxq3N66Zivh4w80GQL49iPJr82wir44q2dhz\r\nnimp3qIU7ZqhLY79e+WeRqYXPZTWLcgMftTLtmZEM09LzVL1TrniW1jd91LM\r\nin30+1orNgJmhbHwM/R9I8jcCCeIuAJOm/6IRBSIqHE/sZmHFsQ78RpcXTt6\r\n440l7C6gTAqhLQkLHMn9/l9z1Z4klwZl8nOqkI0+vwLz1g7dgLyQGgkL9D/o\r\nKVcBhr+2XEctpEivsVgVrN1S890IGP92byq3TZ2BTSmeX9tdX7h99MtAlzwy\r\nQDFd3SjMnPM2ph4bjx6q5+Xoe5APJpwnpVbl6sTVbKRjJaw8CxhqfoOYHnKF\r\nPz+UGC00unfN/KbGOOOEoZi+uRzlql8UKHp6HDfFghuKoF/npeRrcc6MxGNT\r\nkXxLGcDzblSv9kh8GPUMKx1iau95GPQWliljj1U76jkgIm5M3E+WAi6RGTkq\r\nZG7xoARjlvtm2KdAocuSxaVgYAGxhDotIPpYmLHD9vIr4tJIiGx0GQN6v6vS\r\nqG5H2DiQTE/qZPKkC+zphOvD/6VMqNXtOtfHLwuUhp7DRg9+QDV8FZ4+5CAf\r\nIgfhD6MkdZQq5fssTp0PmdnJmJRCbFy+hid/vFG1rY6v0fUppdeRqF+IfNau\r\nMluwoHJPH3fU/IL6DwAGJnl0d3aTP3OcCXs=\r\n=RATD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7f17127d5.0_1667499508187_0.5241946480363506","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/typography","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70328adc4eff170e06e9882bc12d101ac90bede3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.da95e2a05.0.tgz","fileCount":22,"integrity":"sha512-eKY8pTs+4HCO4smypXWwnhzW5u5Vxz7xPZo4HCTR4mlGmAcSyd6eA/zBMU4WvXP8JR+tu/WCLPuBpCORNnS+xw==","signatures":[{"sig":"MEUCIHplfZvmHR7caTuvmtfSBp5oPW93MnHAbAIrKadrcFjsAiEAttHE+wVZoWdI9p638ZWBvDlPOZQH5adKIzq7sNK4TCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUS0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpY4w/9HkBdff0+Tqtmp+Utc7uUAGsvjOKkOHQsC7F2TzrpBXDL3Tmh\r\nrxVgdiMhQeSfcWplVqBabjh6vQF3U+O2JMqKzTTRgxRjzP9jZW+DdS/DpYLi\r\nwCttumYa0fwSdKY/+yoYZN90Noq6JcEQ/63vmICLZy65BkHZfk5JFfz80VUi\r\ngavc4CVHUMEsJM8Gk2EOnsfk8EEUzd069go7l/49rb3LIqtgKrQZd+H8zoj4\r\n7uwbVqYnwaPNuBkIhB9vj6uRmoBp8+rmsIk8Ln0dNYOk0JtBHqoq+JwhPwmf\r\nPg5Wx0hdJ+ozRE3DyeCRRUnpIr++r5hSbBLP5blViDatVox4LQM4EIa4gPX+\r\nOl5OuM0ATRZzmajUingmMD+fLKAywexeb6c8y9xfPYvFNHSRdX3qFj0sicGh\r\neR76t3muXNqySyJW5w6AUKzO8VzMcc3NsCPgdMAV8nkWbZMq5iKkLw1zIxzq\r\nu8HD57MkiXy/dbp8COhM22iumA64bqagjhsc3V/l0a7rUj+9RoBKmFQbP8r8\r\nCNsyqLbXrTqH+dMdYO4EqevH3DSj9hw9eE8FJ82Nu5uJOWjJVpDdMZO9UjTu\r\nsb3mxNhFUQUY88c+nMx4EBkvCForTG/i9q0JFvqbD+gQDZTnILuChpDbu0l1\r\nyvRwy8CvX4P4oe4M19kFDTIfalEAZNwipwo=\r\n=FtpY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.da95e2a05.0_1667581107845_0.6292742089068359","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/typography","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4832e2750.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f984daccd0a78ed590ba412a9c816fe3062e4b2f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4832e2750.0.tgz","fileCount":22,"integrity":"sha512-dx1FGGbBUjkvqBhK1azhQSPc04+FJJpfQrcmiWAuLmkP/cOA5qgRyQnmC/OtHnZy7j8L/FkNW2mkb3X+CRqKtA==","signatures":[{"sig":"MEUCIGbmO1lConO7xpxDIOndZgBhm5y3sIXp1UtCzPy0deSbAiEA5zjPbYV+aLOwCXroL0ydUyLi7xvZa03ppXp55VBg7pI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXx7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmpg/9G+Mw1M872qMCtLogq4ZTe5eK+amqQy3D0esLxgV4ag6jvvs8\r\n+FOos6x7S8PCtiYo+NfMHkb12Z++/SUG6mOKpmo3ew07g2uwhFDG/d/cqre8\r\nc/dTOfQC6fZ5DstrveKlCyi45eH2eCMrFnDqy4ZRm53/B4x5aqfIFgwUzYij\r\nx8oQlZvR6xJ100oYgVoZ7rXw2KForotsvRjO4/OA+BfIIjFPMINNo5BHQsbn\r\nAJ2hfIaY9T4M8P/edvkypfqLWODjStCpBW1rzmLffMyajINxd3LLZkxvemvI\r\n/eQ96d1Zmj5Zwqd3SoNhUva0MYkVkKHfzHfKi4+hEwjWUg2wcDMak0Du+CM9\r\nJ+8gs3vjUlJBP+I6vbQPzO/qe6qbsqwfdxg92T3HDR37eEFv+ePtLGChTCfJ\r\n/tZG3RUSLB7rVweRTsigopLhBUzkg20kpcKkUe5e6ojyVI8YEgWAhfjVxDCf\r\nQsuC326YgyuZrETp/fMXcLC4eijFiLgFbl+B/ZdXGFZYLkFwdOk0ybpEUcFI\r\nvvKEBus118M4e2iUonT8NuMruJoIOUMUgYEmeLHYUYCUZ8Sccm6v3KIe6k0V\r\nWVvszzoPZAn5dmPo2vbP8QlKf1ub4d78FvolkLVK4EtxKlF+QE2+iL/MKtW8\r\nMHmqSqAKIRcKP8DeJb2ZoKqy53yXr4GMab4=\r\n=jJnT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4832e2750.0_1667595387150_0.030378147096082442","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/typography","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.215506426.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"835af51c02f9243e168627a74da48745b9bbe37e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.215506426.0.tgz","fileCount":22,"integrity":"sha512-5wyKEYPoKLR4IT8Xq06vKO3kG6QGnniKbxtt4W2kYeUh9i1T8rKHq3RFl0c20APHYlP49UjIJYnS9ilnFUgehg==","signatures":[{"sig":"MEQCIElyd0gfuGupvn9vHp5i6tdjLn0mZ/sibE/RFPK9vnztAiBxzaIc4OnFw36wGKaZ2GOG+LZpXVDNoAl0Dls5MedcJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbbUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJgA/+JGyvJ4LqvXk8wiPgrE4Iww1WHgQfbfDymGTaj84IoYMt7tb1\r\nCS/gcibVZFISaOkpTYwySPSiGhdKBoGfk9l5Ta/T5tLXVatCoyILxJnkypfS\r\nSZzDe7EpG3OzTm7hJ2jNmaPQZEHJSKKJcWFb3K6QQN1I8vW25yQhmwxxahtw\r\nCEjlik4ucNNqiSvrSj7DkITXMdcgo6aPIPujvOINfjPMHXT9Cnld/xBPizs5\r\nki87aJDu/h20rXMV7479qnozMYLDf7lw4kgCnd27d/k12dLMMx8icIDOuhml\r\n4Y2bz8j/fFG8hrKphqB8+VLZNxZw+aSqU03Z10qn4IjEx1m1rAA3y767kMvG\r\nrKyMfOLhznr/hYOV9+CmKWFcmdmWMHkz2ev1Jl88zTJy39mD9AJnzPmDVJ9X\r\nX4LgtGHgY5LLc2DFfTUxMFNFAEsvhNkJVK3DLsXvgzup/Eib2bSQNghKK/c4\r\n/fCaD0upXvAjtCDDbF6nO9T//gKIDnC7JpPpFqP6BCh6sSXpqsmLPy7PkgDr\r\n4x//5rBJhxXGsuR8xuuP3/dHsE8TBi3bxbfuh63nPLjg6znDchQItsOG0yo5\r\nqqXfsCAR1rNpKO/oPbkA9tw9xXHWYTWPl5RK9hRxrhyjiEz7zBCMs1zrVqy1\r\nrNMhRC7Dm5bjIY20/qiBO+3kE+rrdrz+9V4=\r\n=yrwr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.215506426.0_1667610324379_0.3771334943398046","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/typography","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4cf917476.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9150c349bc2d0531bc22c91da42ab115e7af136f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4cf917476.0.tgz","fileCount":22,"integrity":"sha512-ihSbzijeVKdJYuCxNsDc7JGQpacquOmSuHkhC7Sn+NZIwCZ0XPIPM2e0xB/KwsQOsEs78XSqdpXI8RL+51blbw==","signatures":[{"sig":"MEUCIQDpY2HJsH/d/hPgg8yk2TBDr/v+7FUNrtMdkx4g7c2VhQIgKNYsrK3C2bl01sCl1Yr2tKC7sgaNt0sjKAxPLcbvxhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqVzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0zA//XJZ3Vxlrm7SgcjVnSZWY/oaN9kQ0uwexglmQ1VIeLWD+jocc\r\nexn2lZ1IGENU04Nm8dipr0iYJklZ8mhGMXqjpkTk0k+SX1znYzIpGmtyi82U\r\n5qnluuas85KBpX+pQxc4CqcaLXF78dQ5BwIVpNC27GLo9K+zAfc9hBV4nSBY\r\nYJ1lRzOFnp7ZlMC45uUc4XSPyv9aNHNQcrZeq1r8BEP7WOayK8qFHf5Ejg6F\r\nXur+dzjq18pr/JkmPCC+7CE1eIgWCe0R/EolIpPEuUDKRU+Ss+FKMekhpVrh\r\nBFfY8NlLPbA4+/M9/CFc03Y/bzSI5Ll1i60UbLlpSHRxRG/IwqQ6ejnra5v1\r\nQ8Oky3rAyLSMeVhQs428TpaAUHqUXdtj+HtQFO6i3inqWHSaJPDwFr5AJ54z\r\n7PoxsfigRUTOjb1p8/EOAHw4C/yR1+ze39xwLpSJlnlW7rSV2RllJVSYWODb\r\nYnD/7/p9JWGPmlfL5CNsSlz/i131vTqaavwa3XY7tVnuRgcbQVoPUArOydK7\r\nU+3x02EAnEgV36G0Re23MaO8UcfXi+58SEbR7SiAr8ol0raOZJ05HG3gvBQR\r\ntP7puqgD06MmsLdToYPY+TbaoTMy+ent+Rilgno05n73TvK8ifKZzlOd6GBP\r\nV3BfpAPWa8pGXwZPnP/zohv9QVRN3OY6cos=\r\n=DO8a\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4cf917476.0_1667671411072_0.4597917023888243","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/typography","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e7f3031056173cb33af5af09df970abad075bf0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.eef14bd32.0.tgz","fileCount":22,"integrity":"sha512-mxKAQzzEMu6tzPWh3/0d3xbmd5pWP5U73dXYoHHFkrMCkZSdl3DTJsA23fGwhy2alZXwzztJIRzYE36lq70EGw==","signatures":[{"sig":"MEQCICwT3ZZ71Cvs8JHwI4MJ7VJhmo2VrL3dh8hcCJEdU1ahAiBSlegNfObQNDRD5oJ6kGrZD3FLhdcueBvwb/+zp0f5Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+2yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMyg//Q401iadKNelexH4cAqftWtrWB3AEPfu/M3VZyuP3Nap0512U\r\nbkGBBR1wiu7wDgvi+PnCcn5ydICjgNYwcEaFUqATQSjr+rJBS7/vd4qVxNt/\r\njBJoUsxGv86dzoT9/pIrGt7v8aeoz/ZkCdPF2xZUaG2+u/4VkPL5cLXRlFvn\r\n2ljGtZp6lPo8n5VJm/Cdjo5Y+n/Dw+1XrIXoK41tIFj4/lc8k0Q1MlJm6ZB6\r\nnQS0TNhJiGQAYvcX5YTzOIQAodrW4SpOGetZRMTdAzvi3nQkCWbhZvLLcM36\r\nCk7DOxeJH6w69EG2A/b21p3lMQq3ms67D9UCqVA5oiDx2lZR8Uc6OHAQCEAl\r\n1Qf2OBGhg9BlIFxo5xuHCBPtw457I6H9O2C5zZVytRDnxYPp1PFrrk/TlFmc\r\nQ8Xgg3WS/1aDIZzFR2Ol62JivDjOvWZ6cvuUetfGKYDN6AKF8MnYAGPo8zLn\r\nO8k+A/+dqOSbyl0oejftVBTu07z1XsQTfKASaCOODpGsTHop5eaYEoH+n9dJ\r\n+mJX9Ikfl5jDElIySKmhIjCb4udw2RfPj4KqS8NeeqyghY577JS1N7QfFoOY\r\n1199EJk5ca4qR5oI30jpclkLL/iwnUILQyXi2xzQjbmBv2YCQJTRWZLOLoW+\r\nUltFlIMcvtKrMUzLXICHdi7ht2UZ3YaUW4Q=\r\n=oQdl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.eef14bd32.0_1667755441919_0.6966385075887407","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/typography","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b21f3a39aa0877fb799019e255570d660be5c0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6faa29fe9.0.tgz","fileCount":22,"integrity":"sha512-xZftpmVBfAeE61z7JYkoTrvHwQOaKHBBsHWFwBMQEifUiw3chylITW9v6SDsvcBAbRauf4VN/yRV3pl1J2xzEA==","signatures":[{"sig":"MEQCIG/gpkUgWud+2rRt3WAmhbYk3jVucf50leToDsypGHnIAiAQ37POYK43rnw/sRXRQjrornvRUdZCKC2JMlHY3IVlwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHe0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocCg//SiYW/aowTuro6VxKeBn0DhxmOKV4gT1SDqcDu6znp1+Whatl\r\nr7bsPbPPJkqEp+5oLwHyzJwtXIf4IAozStRF74SlCF1jCkWkLhF0AFse+tOs\r\nTDPcrx13gMMfcGijRnoDu+m2zn+NEVERTcs7PA+noNd7S3Sx6gb+7NT2sAbi\r\nmQqKDuOEEDk7rtTFbkRCUce7Jjjfnc7zLLSXDhKTejGxB2b8QU9dXxqzMq13\r\nTKv6ijERy6hoRyeXTVCbyxPexkG3JFmW34vpPElyssWrPS+F8UYq5s/JuwtN\r\nXjh8/CTvA2Wj/vrLbHkn+ROYaiyE0Mx3E2pg85VDejjLvX0ueu3J+JxspMOR\r\ndnFFDl8dtRAvhUhpyGl/P32C2CpFXnoHFzZR4tceO2xNJCBL598uVztDDrkb\r\nIruO7ffEqsQt87nYh5/tVWHryJzNEq9uz/4SqUpXqzb0lKx/NwyVF2qp2ijv\r\nF/+9EeSab9Io9yyNYM2IKJefOv/4NfoioR1aGd+tfGqnsaAvb2VA3hGNiNQx\r\nHbzIcqlGXPu/dxwyeX7rbO9Z1K01WqMwNKek0xyugIpZ4h2U0hPJgrrVxykT\r\nlxjNyGzGNWGDXoAN3vbLgZRzlUhEsesrvkN/m05SRKzLFHHraKIwcbi0BAWT\r\nRIACoSGmoFPHW8c/pBMGgaNdPU9GSODiWKE=\r\n=OlM7\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6faa29fe9.0_1667790772621_0.25767181741924894","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/typography","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9af09b967.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a4c03f5bf1d349c12a2ba1aaca13278272eebfb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9af09b967.0.tgz","fileCount":22,"integrity":"sha512-LNH4TFezbQAX7V+IBL6Spug2XMmEK8K4oAeLvZPdUNNK7SOx4yPcfixdtijiz9NdekVgSFOnjby7aA70EK158g==","signatures":[{"sig":"MEUCIE1/3+BTf6R8kWJj8zBxNUvfLSX2bUNxinDk4fJBhXVRAiEA7gVTN16LJ4Y2zE4g7oGc7VHBkjsyVcKj5TeiEmd+OjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU33ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9ug/7Bh0rVGp1OSQ167cP5depwUaBYpgHPdLM3hSMKNIzbB2shSA5\r\nKB+4g50hz3KhMpcABRX9U+5+JA73RICJjUvDx6/2KvedoKjeYx8QT58SG5Tl\r\nQN2Nerq/6N0OXo1D6qerjrOSQirkH/ihEMdfViFkJv/NnTkfNRyt9q2x5YBL\r\nZj/JtOxM943HnRiMoD0HxMHhb5OrlaWkcF6pWdOJpMDSc8QjYKvyC/SIPWlu\r\ndhEQTzahd9GLeX54xnERuiZgYivIMG/xJ63AAERaQvcol1yrluxm24a4YRAo\r\nBsXOa3xaFJTUIBOQbQ6XKbAN4vDrYfKv04ojhOC9miY4TQYHTDqUtaCmIzkZ\r\n1FcFjGzOfV3aB2STGmgpp1moldNdY4WHSxEgqfmBqHzr8abkiAqfcSvKJCjb\r\nIrNvbbOiZ/UwWXYOMLtWD/VAhakQF7lDJANN6pC60fwJzyx8ilCcctyM6BWW\r\n4yrRsAUEDch7ROHQ+f2+YGsEOElyLXEBW06zPQrt7w3kaBQCXbDCkjXyIChz\r\n88WsSfF+QAZRyIbgvJ+VkNsRZGQLOnlXwX97z7ru6wOZjzhyhoRu6bHYH+Zd\r\nRy03DCRWv2EGrGDbJqU4yXBit9KevZavK+8+b5E+S2PbwOt8YM4y4TDFbwaD\r\n0PYW3vBN81yrFTUmKu8q8HHO+uKGrt1rGmw=\r\n=CXKC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9af09b967.0_1667845623546_0.9188352382588538","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/typography","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dbc533c49195626ae75f316b49fdbae46fb0d17","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0f54fbb93.0.tgz","fileCount":22,"integrity":"sha512-msOA6Uf8uewX74G4DCKlal4gASB3cQXWHQuyuwkzjWdbsAdV8LH5LRFV4ZQaxUbJFYc/npM9OEY62j4xFuN9jA==","signatures":[{"sig":"MEYCIQC61uVeq3MXRQDqFQ1FOcQOrm72i3RO+GmLhGz1n1enxwIhANT2JrAwKLQ3ZPNfClcT/6iU/7fun+WL0xARzNrYhs6h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatByACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHag//clKURoaALTV11/ZzX57R1rcTb32Rpkcm/2mHnuOjdn3Emrsg\r\ntu3U7Eu1i5uQAH7zx+NNYpypl+O2WOdbKaEqXzx2VF9BemR+MSiT5hMzDTra\r\nOC+NpEd6lRaIRBAUJga/L1TcVjbEHoCGEWGkSnq5GvnfKGgn/98rr1281b3S\r\nA4zGiBkhCefaRDnJwqWXKuik/cONgRtp1g89J6jwWxlzN9vg0QlljiKIhAwb\r\nIbU1M+0SPGhefwCS1U5U0pMBgX6vYWFFclHRms2WpbLEB/qKBmoPh1frIWbM\r\nSqu32EJxChBaBKQHGAE//CpRgFMbeVhbDpCg9DdNq0Mq3EXm4UznlJHVuRKI\r\noLqdYE0nrN3tKRrxSfAZcZU/xEirgdnxCYFPcibi3LGfrcI2nn7npd8LBdq3\r\nvkIn1nVc4JU5zuBD+THXVFu0RdiNYitplnFiVNaeMUKpI7DHmad0yjDupa4D\r\nAo+n3qNZWr5/ENli/CZbTo+rUnQ7ZIDj3gTcs74iR0pzD/FkqnNSscK/HX+1\r\ngzz+gnzBtYj89eAkzGbW6VGL1LCMftfxIYSH+cyyPcE+Rny8lb+OtiBFlfd1\r\nx66NIaZHVL7oHV0I0EyI65/alFA+C8CNhbBQUiRlYH1IWELykZXwlvol81oT\r\n9gdp94Q+Y/Go0VGZcp1jduaYNyMMrYkDfRM=\r\n=GI8h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0f54fbb93.0_1667944562162_0.06347259420397533","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/typography","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"460b727336d921e3b24fefa080f77c8caad39f6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":22,"integrity":"sha512-xcvX3VHFJS7AKpWddXiW18pwIO5o4TqYU3Wq3tLQfIVJzMxKJO4mkL000wxL2/x20Lx4tbUWwHe2GsHBCHpn5Q==","signatures":[{"sig":"MEQCIEcjI/6VT/eYaDwWnkSeKjypsALbMEGG1OyGOqKRTu/8AiAzQT47GibM+4MxzAWvW94argQUIpn/C4NCaRE47LWWSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaym/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmtQ/+KFRikvpivjK3UnZ7oQRH4Jgpu5i4QMudQ8anfeyb+blxUNZK\r\nVKS8XFgKbZeD8lPoQynuUPeg/lgVlr6OHRFkxFGRTU1X/B8LwTRHPdj64hpV\r\nj5BgQsy5yvo2qA1+gltsB7lkyUa6sCqdJ7v644wqvwXGYW6ATdu+t8YA0meE\r\neBrE2Nj1vUopu4U7tOkiV7JjpepLKa4UzMx5FC6UFIy3NN1oz0kIo6uaM076\r\nhdLDYSNSIFswFo9BzY5t3lwe9KRUgfb72jOxKOj8Vb5FLnL318zfH3bX/uvr\r\nSOlW8pfyIcrCA0QKOUG2OEdTYGyTH1Kzl0VcTQxnzVO2F2T8rTu5Dz08E0iu\r\nmtu+ljgeAQc/mpC4/Wi4Rj2E6XqrPkTZdHqzt8EUU7CjjxPnWTjbaRN15scc\r\nj9BTf2bWBc/eY38sot0pqSBuIrO6gD4I0676KepD59ty+WhhyAGkP0/wJsHz\r\nE4f4xLl1OUGFybaxGOzlrlKj8RSss+nXb6QmRmA54IuT6vbFdcO4rhw3Kld+\r\n87oV611Ue88TQOP9mNrKMBcQEMaMqGgAM0pEHQk1qR0VMrIalxEDRHW+6i4q\r\nXF1SasTZBhmpEkf2gU4eHtVzVVY5d0AUHfRijBouhXtps6wSauiiA13e0+eo\r\nCs5Tm2pcKegkfgUDfue8loo3agWVYHX3WcU=\r\n=hKXs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a8d47f9fe.0_1667967423239_0.2560050278506343","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/typography","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"900b3337de72f712abd95fa3178934bb62807a58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.66a1e75e6.0.tgz","fileCount":22,"integrity":"sha512-PbI+hmjXGOj4DrfdaHpEK2LKwOn29HIf0EX5btiICsUuTQ8F5WfTUncVkCELNoPDsq+i3YXCnw487f0egPwG3g==","signatures":[{"sig":"MEYCIQCvQdT9cnmhNK1rgkfjae8XOpVPAly3Iu4/8ZLAaCX6nQIhAPkBymgDFOj5IBn5pSS9AR8Q711ZOKE27s1BSHtatdmW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3REACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5xxAAoqCd48f/GL1sd3SxCFo76aZ4JsNFZG0aEtlEkzMFt4cP4eb5\r\npUYTH/jR4VFR9rkI0mwUW6hlVLFbLRbXVRdyWJfG/C/vtAHykgFRDHUNcLEZ\r\nZQxY82BJZrO8rNsG+Wj9zfrqH7Ouy4bfZZnsKjTrbsi8cJfcFCOIGNfclaiX\r\nDmma8dNLOFaRoYYGnaWZyzoV136684ed0wBtYTwhhCdBBYZbgIlBWwsKgOSM\r\nHOdsEWrx73rbX1OXvkd9QokX+0tuLnU/OXdRQkVhMIge3uJoYT8RzixtALt6\r\nyz3XQxSd6YTAuHCp11ynwuvJKGI2MRgnrhAQdN9X3xn+7hqdANgaS9UD3OVg\r\nu64kzABJOwelOlPYw7oZpbPnGlc+7QaTkD8bPunpHv3sbbUzv7rWNJk/0rso\r\nK4rehRyDVrM7gDRV9L64hrbIjiOkKxlcvr2S3p4O0uJAnvtp7VlzFqjHZctN\r\nMqv/fFRRu8wImWEo83aCWU+lo2go+7YaGfgkRlgj7n3uw4uP1dc++IvpIRAU\r\nhjDtxV+N2Zq0M16ocYCjm9W46VocxNZK5ZOWgruRFGeAwjyntjls+01K29Yo\r\nNEkg6DsN/GpgEa4S+u+AMkxUbDhfu+s7jLTSWsdMCbeq/VlcjWreSjTicbNR\r\ngGZq8cnyuUnFiDoEYlsr+tq1FL0fpa6aRt8=\r\n=Qg1R\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.66a1e75e6.0_1667986500344_0.7716947705677355","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/typography","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57f9e886bb7ea18377074d4b08221dc5bcf97dc1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":22,"integrity":"sha512-CkM+tTULt5e84qQqkoYI81+ux5oBRodFAY5bUKhzuJPuX7FthkjkxM1XImOJ7J70Cu3OLd9xUVw1nqCvWBmMjg==","signatures":[{"sig":"MEYCIQDDdOD6W/4Zr7f9IOmjy4OgRSVtu2RJXqxOJW4xZQgsawIhAN7I5lZ/qyMWVTZzbybst4/XNpaD2j5yurc5k1E5A7EM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5SHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5XA/9EiNzoz4H3Mbp9wT+FQAC83e1ef27r2obb3vLRZJoBnralgQ1\r\n8Qvbs7T1E3andZPulcWmZW2ZQiG2jBXDvUbqgJs68zzGwwC4uIyt1LFx6hkt\r\nYgZOuUnOyiji2UlGIqObnbh4i6vdyt6mSUIFFmcZxLuie2MHIwK4ugyYX4dl\r\nSpV1UZcTrWzUaxJYkK+7jcE+6uy3RYrqwUb6/hwjORJd8vZW7HX6QVwfFOyL\r\nsTIXimufyReIB+hnUXzL4ZdR5LfG0rUNBJYC0v9TzxwHMLvAUr/k8ccRKl3t\r\ngENi/TorRspz+vmzRAyZqfTNCbGyJMrW97zC8yGA3lKdVQzGl88EDhkg4NjF\r\noBdb7rN7cmBt02VgbyrXHIToegUBy1saz3aDPMyUTHaycL9fks8O4hpfG/Gn\r\noKX+97Xh0FUZ7qTeGwCVBw3eEnng6aynkIDPHReDE9rM/XK85u/wGcLbrePS\r\nfkHXRdx2cHs2qrHBAFjucivD0flLaQH3CLU89fXH2A48tiWFtXnwKnxZsESn\r\nBHVeYYXmwLtEUUdq4nMiPknvQr5FgUzl9EpUJxoXETJV+Gecuhc0yAlA8M9F\r\niYeYAQhUi8QEYboetdAWcua45FjJr/ivJhCqrsaqT/E+JJ3A4lFKF+CLPN+D\r\n6/8H7XhJroN64HtlrhluLw8S48jkg5yUwo0=\r\n=fJix\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5e5c2afc0.0_1667994759059_0.5701174262186937","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/typography","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1397e738819ac86a5af525dafee01a080b738fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3e3f43359.0.tgz","fileCount":22,"integrity":"sha512-22yFTWOLggW6YWtzCx9zitS+WSLRLGm1YQgSRbgeyg6+umEXRj/eErtUGufSNJ8JpJV5C3uByKAriUAAfJQGoQ==","signatures":[{"sig":"MEYCIQDE2ZuADertqO4TtoB4x2YbLt4KFBbO+zwCOVmK/9n7bgIhAOTu0Pwd32fCKvn/lVlxhyjYkAsauIIURRCfLr6Dadti","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAdIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptJg/+I/N5nyGpnAhdQjX0CXtR72puvMk5v64Fi3wa9R40wQ3QHKIz\r\ngOJ3JNdrF4Wz65nToQY4xWYcKwWb+1oZ+nA9eH3jJ7nrM1M6FPjGPqCiYjHo\r\nuE5sXKvkS4UCco5qSITTnPmSCBhvAnX7MGuIgNI2cJn3lVqEN2t1DorJ7WNx\r\nGsRQhE2b9oL6KYp0RD8twErusbWXTz3iH3XSTpeySv/EdgPXa+cV+PhrAETX\r\n1HB3UMSNVa+bVX8h/jMwL6xQXSiDbeW6clVcg3GSChUe7nJkhhxvgAX7lX0O\r\ny3AaW3E8k62jhJq3f9KPpTUa3vo5zrFvChlbuBSU9gVivAubYdoWTrq9UV2a\r\nJC1Od3+g3erByAwTSkASSA4OsVYLUl+fyizXPvj0I1ew29+/IDUIa6+3ul0R\r\nE0AF/VjtU+l3Ast+8A9j0QdGheJftLlKgmKaBE1/J8VV/wCPyiTiIBtBwHZH\r\ntXGXadHjcXd8nliSlIqp3nlH6hBqY43U0X51ed3dM06Uni91HXqO5Gi0qlzU\r\nZlQ8PffUAc7x4QKei9dylOLVYAAKg0fZFpmXaIOwPI6Hg4UVhUbtkGn8q5m6\r\njMKT6MWhs/IvqPMpVijMitOZIT95o9EK5bP+Tz6jDfQfW5/N5eU8SsXBDfw2\r\napwELguv+hfD8ktlEKO+bl0/Ef10y0f6+nc=\r\n=uE2c\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3e3f43359.0_1668024136563_0.7681513527452004","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/typography","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bca22b2c3480b8444ea67e7bc0700269f008ed","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3f667fac6.0.tgz","fileCount":22,"integrity":"sha512-RoDGqln6vHD/JFyZcfLvpdlLb76CZWz9we17C/qDuOUAgyilPsdSz0rtOPNqLL+cV1G/A3zx0JO5yad2bTSSfw==","signatures":[{"sig":"MEUCIHj0ZaAL69BFeb/TEi8fr8m1eqxOASMnR3ZHEaqECfpwAiEA0zygunw5LkGDHReksaWkuXcbhkwWa1vE3EkZ1QoBagk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCQlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH7Q//RBAqA8lX0drTXIlB/2VVtzRqs0RyoBt9kuS0I0Vx6fNOuQV9\r\nAZpeT36DWaLzNH5pXDrTimXDqkBykFn6lA+HBK9HqdubVVhxjO+oytVdcvyZ\r\n3xrkQnwO5dYA2lTVPAzV5+7PvrIKlzCowsPvN6Tw6qR6UlwqCxpVuJizg2Ag\r\n3lad3NyH+fK88eVl/q39mIzIz32Lj/bRY3NHREfZaPhYD8AWN0VFpm6WT4+P\r\nzmnQ3+4oChAqwrfgVpx765/DTP5OPTiPJWVxKKThFkKVFFd4UPBfkCXRp+GL\r\nPQ8P4gcrgyNE9mWSPyCg9/+DovmId21DjJGr1JvbMx9kQ6CCqD0fu1FBEKzk\r\nn5o7R2kMU6ucUrjRy68deOK6Z73OFnedQhxgEm68wJdvseXYiRXsBtL4hfxE\r\njSaTJaJ0ti0Hm7SOUcwC0gDnzASbEKgykSXBY6sFuJkf0Cf9ZCeEr9vwguHT\r\nLzbDkl3IlkfgBBEmjiZB7kJFQNOH8NoTuJy8ub/zFkkscoxRFPvKyDGf/6Yi\r\n+YbaTiCuv0tfpnQwIHSo0/6lxX59AyPYqDp4x8d6RsoAfLHxsjQecfGwNAIK\r\nzAu77ph4M1GXpEDG126oY+7XroNWdlUezAnvh1Vd9lc57Dd0MUog0A4ZDjQG\r\nOZqxPKuiyGM5FPLs7Qs2gdeMek8AQ1rABpA=\r\n=5clE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3f667fac6.0_1668031525325_0.09959301457969372","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/typography","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb88f67115ffb0319ac0acf7566ae67ba24a0c51","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.faa28c1c5.0.tgz","fileCount":22,"integrity":"sha512-tDBvgQP/uuUNd9pQYKXeZka3hS5ll+rKmxX26r9bEhtLq5ZRBfjfwmDxWMP7L+tXwlfL/ZhYPut361ee1offMA==","signatures":[{"sig":"MEQCIG9myc5ZwOxe8v5xtD8XQU+TUa32DhfcTi4qf06TrPA/AiB1pGbImwdivxLXgkyOdHKZzG1bpR37KyeCudvYAKbmeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnm/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Og/+IA6zkk695GgxoOF3biqedaE2dhXWYoqwmaTyZ7DorJooxCGK\r\ncFnGDPEVq8waEorOOwXE3LgXLRVKjP6kA7ypL73vbLqL7GSIvxv5OBKDPV1X\r\nik08mxYTadk+YbCP0zRhKz36qUAy0PusvXs6CjU1D6/korb6aLAVYMWQRFbs\r\nSSxe64z6gPKrvDj5lnn6NhnmnEMlVKvT3y/SlOEByinVKief6h8GhcJ6UssT\r\nRo9DDbAFz56qLly3IN7ZyaC3ZwgL4RfC7i5bgsuUkEICJjPT9goojlohVaym\r\n/8fWXfdT+qTHnATb+p4PYxhJzm5wyoewaSz5Ul83NxW1c26E6xantV8EKXbg\r\n336X7jhtVrkWDjNBvX2xJ5ul/CtvL1fmyrHMReF7rGMXoidbII+VsRkdH8vh\r\nZXbvX+SlJ/eQBHPkBpXLjeBll15wwOLSbQXUvfLTsZlrFDB/Vm4MgMQWIE8W\r\nHXqfFgVwxIxRsTunJK7rkiWH+epUJqH88rZAOjVD7H6/rL4eiSB9A9aGRLVa\r\nPX9bvhuiPCuEcTQ73xDqX6owRq09Ej0Do8C/g5+PtdF0e+zUZaKfVTDmUJfV\r\nkE+shXTFzQurdvjPI+V1lHdCSJPlvyZDanReEP71UvTwivL6LH7dECf0FmSf\r\nu1t6C3t0zWmYcKLwQUyU53vBsnYaCFVIoIE=\r\n=/8jK\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.faa28c1c5.0_1668184511488_0.8433674370137247","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/typography","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a868c7866.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ec53b58d1e1be43650278c7ae620225cc11756c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a868c7866.0.tgz","fileCount":22,"integrity":"sha512-XAhB0TJCHEnxR+8/c1b9d1o/yBb56s0VQ2DleX6pNIh4gTb3yQyJOiXL7Vyfg7jQhPoXEanJHMIvABnkbto/wQ==","signatures":[{"sig":"MEUCICxieTm4huTDaaAO6q9HQXieaWE3KuQGZ0ZFxnf0NCxYAiEA3v3B4yGnwdnxG+nIKoxm1Sh+FP9pLd+ic0uPQcIXH1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqusQ/9F/nGZuqn8ZSewthITU/UPyarF3GdRv1u/hGVcoLx7fj4sROb\r\nsqhM6KjaxxhADzyLPZGUp+x7AOVt+JDVeNCItU7bCVYOWXOqqPcJxRkTruuc\r\neQskt1QRaypk4TC4RMVVNJC5UGmrgBpZ/jJz8srD5PXtVpS4YQmLfJf1g6Q4\r\nJ1rXkN3jvOgccqe1Ptl4LuSD3dNwWf8QgsjY5OuYJ40PDfwsG+nx9YM5kUn9\r\nYr27n5lLX16b9AuCa/bVFMAHEqXFjX8nwZwDLNGfuka9DNiwvQr3J+jpmgwG\r\nenjO+kq/ueE5o0AX6NoEtTJu/QjjGPOxbaOG51+iAjzzmLisiyB9EE+PtfVw\r\nmFGIFnJdYmvNa4EZpBwXxmYQudXiBS2YRlCZ7s924e9RHdUq0aHbDfwPvRmn\r\nMNlU1+F5PFCrej645EjpKiIIlgRfHhCsL3FOGqvYvHRrW0yzWK4LX4E/o6TW\r\nJMvzGZmZugeGMci6MAJVnS6OK3ToHXYp8gRYRpGOwRO/fr3gsI9VkUyB6onT\r\naqqMd6AOezwcpla8tKlOC+NnKCVn56NJWRljNpx8c5G2dRb+pL0rmwKvO8er\r\nzGpkSUutp7c6kuyC2ylCmfJwwSzNPQhdYsL5+v6g8KM7D0sChaTi6X6bqZ0E\r\niGlG4LuZykfgHxgBXoJOf+JO9HvUR2w0GNI=\r\n=OXg0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a868c7866.0_1668184554469_0.3949253422105694","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/typography","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8bc625f100dd9d9f55c3827eb29b7c9ae1ab74e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.602fe8efa.0.tgz","fileCount":22,"integrity":"sha512-d2zhZ4nnKodOmCMlZFtI3epfSo3bVhaXW+GW8psXnhd7CgHh+4ra6iUz283rIOKSmOKdmA0rXBzwFb+cpdyDMA==","signatures":[{"sig":"MEQCIBIm3nKa+FzQ2B+22hJlUkmur5xmOb/Xo2GjDKPe1D2SAiByn3xQC7AdFCa5ooZVJkkjBXLpoINymP840n4PCEtzMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboIyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr59g//TeSFuTX8uRcyyWPz/vL3d4pfi9BSRzf/WpdJoKscmFRlCdMX\r\nv+hmh76oBu7bDAdhM4W0nFR5nxXo30GPhkuZ4oanJF9jBkSZheNxru6WnUan\r\ntjdJzcgWqBH4uiJtlxyjMGDUkKeI0vnPP1Lxgra55Ai7Vccq6m4UyoA6As9o\r\nsSX36QiWuqWfoDto6s8OgB4PmBdVHB04TAm+PvznV7RUehXmf2zZ9jSU1+st\r\nYWn9agBrw8CFcgeIbRlRBHv2mf09Sw4fx4xyA3QQhfiuvhgzixcrV1Jz8DX/\r\nPu/B0oPoC3+G+YQRfKYgNsTpNWHr84BC3ll7GfYtKmMOiN8AQSDSFS8b5mcj\r\nFx06WJWodgai1kJQfwMA8C4m4CcySFb0lV5T9tHFGSOiZaG5vgZSMY+oFKcL\r\nANtt8j98VTquChj/fyZ/yPBud9+bVif9PYgeyaXdVnMrgC7zyCYOjXlIwgtD\r\nYrppZvZdms1NQPWdkKuisCXd5WWmzuM9mqvO9R5gQK7cHkeWj7EPGpRAwMRQ\r\ng43obdo3eA+Lf9ZAF5YxUO0P+xY5tAe3ELQ+P3+ZKW7UK90t7CEOMUtikd5A\r\nYE4bbS9FEk7x0bgSqaztGIJmYFtp18gnpN4cTIe49AYIGYdMhK7XmZ1cV6J8\r\nvXnap4AfrSCQulasAw6s/T1iuYQFM4ZOAaM=\r\n=l6aL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.602fe8efa.0_1668186674552_0.2306534406741605","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/typography","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.558c2be62.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a7235d97367bc29977b1cf2d590e3a2295c3769","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.558c2be62.0.tgz","fileCount":22,"integrity":"sha512-LF0YRXEDrh7QfXWJV8ayg/rABu1Ey3euSYOP06bRAdpAwgQd45sIxAnMqmIZZcs3IDJYAhsEsv2sXN6KNyXgFw==","signatures":[{"sig":"MEUCIBIN7pZE//lsOMy20HB8fJfWLXZCeyI5aL7QyXpNlrz+AiEA9y181sMa0Fj0lPHVLCKL5pYIa/7OorvQyd0fubsoL0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtBaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5ng//XPFc+XQ5fZu7VGzUkJdSDdV9x3kftPXpjVMTiYI2xcqV23Rn\r\nGC9YyVg52N5fdHdsiY3cNSYIpo/DQd+/ctAsJc07RVG4MmlLyVlWLr3vG3YB\r\nLIhwzZHpZx72ZFkBYgh8YgBkCa4Hq7l0g1NgvEfxNU8VRWE5NSpz3fDlCozd\r\n/30aKh8magUXH8wrmt8r48yPcecfj2lBmuaiiYjaY9q75iq8EXLovLNFTMCq\r\nEHUbSzcTvjhj7GFOqz7CB+tpo8RRI0SLMbgoDwjeWQk1kLdjweiI1fja1X0v\r\n7MmOwoSePkGPFT/t/dclmHc54/L9nadjDOioyTuBSNGUZGut3gz1d28wra8F\r\n4hcNRTYA+BtkjdS1SpqkqChYFlrqfWs3BrXtiVzEfDvo4RuStv7uTl9O4AaI\r\nksFkO9mSC3NXhX6Wu0d8hypysS0HsoAA21ge5cWRhgK4MRJkx56Eu18/eCDX\r\nfO+K33Lh622MeJvW3E8mcfvedmLP5h75LuJkCxOquurJCV/zOcI/baG0pbA5\r\nNefFX70ebQogbqLl3TJKEYZOmRifxEmQuH6YsLIpp9MIdQfIyPfTkjoR9OZk\r\n8RA8r5PLNMyEOuIDcHbGho+GxbNdbDYvnYMocJ28zybFeWZwrnOU5nQ1mqKM\r\n03rNd/nQlR4kZcipCIkUGbv0QHo5LAsrlnA=\r\n=H3hf\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.558c2be62.0_1668206682752_0.03602792801988497","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/typography","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76820dc789e42420de70d15ba5dcb35e7a6a0922","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":22,"integrity":"sha512-4F4XHAbhtFqbKd4+p70pYcEaJZNI4ciHr0CjYvTT9afy1Jq5x31cU0Rr9rPjnK1d6lh/tFB1bh5BP/3BQWhm2Q==","signatures":[{"sig":"MEUCIQC56jHNZ6HZew/luKmqIdct0z0AsBgvxjlO4xk3mBNRJgIgD7g/+vee+Hts7FKLaiwajomLltesMl/gxzCUCgMcj6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmWDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdgRAAknYtI4mnQL2mmUlFDgCCBxpgZi+h5797wXQjoL478n62peky\r\n9csQfbpzr8brGtJnyKxXnHOl3MxGNiqRthtWDc47ZzV+HyeCuox+c+ntsXwe\r\nuy07FwyG/zYWLxYuJpfeeLvdkdFOjDy0QP0wAj/9Vf+jRUED6AyIAz11mLgv\r\n7Ec8PSuXu92IacX0+safDwD5Sz1vmsMkl1/BsUtLQMCXEnqhaoJ+Ez1GRm0M\r\nN2NNkoJCIPyq0wL/KvEPExDH6NPZyfpR9FcSyeohR7E3pOgz6V4eWSF1nB5r\r\nT6xoEtjZETEhYn0sgpW0zkcDnovUww9jat7FslRYa0UShg1ScPdpLVeywwEY\r\nmq8/1PiKXuIae7dJf6nEwW4U/y6ucIP8RrPLoUTPWjPFldQHdKbL2Fhv7v4q\r\npLgExcPoXGqkZlqHIACvMgIpbcQ2B6cbkKamU2cbie1OtWPOd38ljLVxA9Xw\r\n0aLaGKSd2Ehkb9kwsd4AVe0ZDl7oATmWRqiHVrU0BknPh65wHrC7lY8KnECY\r\nawyoov1Q/k4+HOzByHYOzv3A38FdRl7+kzrkaF5mulUEYLCVg/Var+cQTCtL\r\nkTY40qRPlFO+v43h+PEZnLddh9O2WI3dBOAqkPl/adCi/2n40ILJySvmRRLY\r\nt1mnwH33RVGeKEvixOPSHIMxQAmIcujze1k=\r\n=jRmY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b5c13a7a8.0_1668441475385_0.5271582108118487","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/typography","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a23b024ff812a3c95cedd8ec150a5b82b708e97","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a6e1c0702.0.tgz","fileCount":22,"integrity":"sha512-Khdk6aMYSzjeENhXfadRN6iRc+tzK4jNaZchNjyDRdvsYGbZ1mB8LsVXX3YSRjQWaosWKo6srjji5/nyjUTmpw==","signatures":[{"sig":"MEUCIQCRdNmdercax7+GlRJ5S4ylaRrvqnxueyoOpaMvXEAvugIgN+F2QZ2BtefTj5cDTenY+28inWzer1bpc00VqAaVIH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnpFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo28g/+O95VHdDu4aAw2Ic/VNeQywFRgfL36wge0wb7Ml/PZGAACLUU\r\nC7VrDcMkzb3m6kjjzkU9QfEYwCVIyGTevZvSruqvyU0KHjpEPEjSI5h7/h+F\r\nMBSkxMZhoUOlEjHpMEE6wtcdOry8hsJU0dirX7+PtQZ8B+5xGgC5BqqC36Re\r\no1J4uE19gY+VgXU0WFg19t2IGE7GdWdrDtv4KsAbG+jsPsEDliZdYuesVQYt\r\nxtwO01LXrNvsmEwFPqGISiEf5CT/LItaRtneBsWupJjFGsxPxPSocm++BUgd\r\noWx9iIgWBx0Emr/L2I2kNyUrRg4pLsHaIv5NuJ9TN9l9JSUp5BV0B4SZh6s1\r\nH+wuLNZjU3PYElWyXtewAMRiEiNAjuVdah5TM7VnfMmiOa172g96FGxpP47x\r\nJSyb15MIHph+Ice0jrNRbpt9X7LI4/ud+j5TgZJWuiLBHgMR/WRxO5NVdjvV\r\nsKx5ak0sHYKgPBlrLvAbtiIrk8KB80s7wdhp1jYd7Z1SsdhQyez6QncgrC0W\r\nPjy68YJJ0KoyOmifublxph2nUm1pFJ70adIntmOKRV00NZ4HeCoak9Yk7j4H\r\n00rxXEtPK9HdwpiClVkHLuMuYydGzBtQruBjyxutHlfDQVVCX9+Y6Dw9pAda\r\nhC519nBfkMLRWwP1xbjBUpJGZ/qUoZZet+Y=\r\n=nckC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a6e1c0702.0_1668446788833_0.2856236106829708","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/typography","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e781ce0754a33c3f48928eb0aff9d9ba4d07d8a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b6f8a06de.0.tgz","fileCount":22,"integrity":"sha512-el+qMO424Mf8Y3NdG4jWPTVkapji0EC9s2gLewV/dmshwfvksVCa9KNKZudCAPUkK6hDykzEX+1ttnYB2dIY8w==","signatures":[{"sig":"MEYCIQDTEsIrrX1Sy7bsOwYJUfRC2MOlT7GwxSYtqX1mWRjAUAIhAKH/jt2l5YXtbp/l7wpS8NocXJHWwLwmSouS3FVhpu5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1uNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovsw//dhxwmhBRQfL0npXX8RtjSVnOuuzLhud+staKDW3i2EcuJ8Gy\r\nT7qbZ56MbzFm5SqSmPIJ9c9VqDUlmuORM+RZM3J5TLVk06HUb8pBx4f0Skck\r\nAwYeWpL90L6RvsPz1G7X+MSTNZXyqYQp5HkojQKCnq0x7CfgsnuwMd38rZ/Q\r\nS6vOFLnmAg4Qx4hd8CPGtYb9qOYxcZvD0Hm90t4k1t1t9fjby0z1W0XWxwRR\r\nKvGrD1sKOhQWOjIgcqVXFTUxJO8fF7dXtn0yNmsFraZoLOMtugPM0yOsR6Wr\r\ncSnPrLnt73B1oXI2GKJzKX5sYq2iRw/LZ/3h/5iSXZNZxYOnS66g4DdS69QU\r\n0CiBWWB7i+Sp5ZQcJl2+69p1dWv1fTaDvGDjf+nDFa8OPnztGjEYnTne/vk+\r\nBA2/Ui9oYsrfO0BAeukkQDvYlULlZPfcVtw4qId2fZJr37X1cXk1hnK9Kw0d\r\nPpmc2HPw//s+/E/pLm60vBhbz/OhxsxoQNbcawBo0VJf9+hNVluOH+0xa/mA\r\nAu9dzHbA466GS+rroQpWnwtaJj84Zdq0fCslvfuSVLDZSg86or4FNw7G+0HL\r\nXXLKLxjNOtB0F/O5oGT+VCEvpxLVVbVZPeTw0vl8AsedzC5S6MudFzvW3oJz\r\nT8EdgtZcQ0yzA7h+3ezPykAtvFpVcokbjz4=\r\n=t7EJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b6f8a06de.0_1668504461421_0.37018884468577173","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/typography","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd6df63d6edcff2bbaf6ec8be7f944664f23850","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0163f3ba5.0.tgz","fileCount":22,"integrity":"sha512-+yxiYB2OmO+JCM3jWfHpHjOJ96GPTbJTH20H/PzCb+u7dx+/gGNyznlDEnfT7D0syLtAuD2E3lWAciDE5fI/pw==","signatures":[{"sig":"MEUCIQCItgNGvBOtIxvzIeUo7hTQwGFXVBTUPZELlEiPIq+FFQIgZS2lRhDZqkvjfHsQoYi8sOI2jfXME4xo5PcTtwpWewo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9PyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgJw//Q2OKMJzpt4ituhZ7Ijm1pARbB/qRBw5pIMiP0IFNb5XqlV99\r\nEN2VerNX0ihjmv+wWYeTTbFWa8tGzLBkZxfa1TX+9gZx80oIELmoE6/zsizP\r\nnu14vt+LB1tSH62VMa4jOMXYzMUcGKMMi0i8+5ZbyColxZyji/rekQ1PvqOw\r\nHbr/zSxNJCy35fWmrX3QlnXVKAx/kOw0XifioKznHKNpwjc3TPx1pfAwKYct\r\n3CKbjFG0XMcja7rXbgYM7MOSIXNdj1DG4A9Cs67jScDiDkzJlfqTg9TaH+8N\r\nfLAxW5LWFgsvCpQkTrN8kQDP0vKdt+Q8HwGyyX6P29XhDvfm6nito5Oz+0cq\r\ngo3PaaPLBisRpmCwRQB6Yifqnr6VWGNIl8YY2b7DwJE3tSdFw5lDvoV+rPP8\r\nPdcweEjOmwosjCjUtetvITkCoEXza++0+BUR5dnEFASEtAV7FpiYGrmvPSGl\r\nt/qICufmpSrrUwuS/L6l2vU3lV0JqlAqV5gdn5zLsux9c/DbOn1cc0DJWIKT\r\ns055Fimp1NdFliq63HaU74jwKM+XT4g0BgxMKMj/WqfV8KfAtTZ6IOt6Su9G\r\nhAUX7/ERoBg3HTNjqM5Ku9ENZLFFjHPwwU8hzdbFxcHVNTFl2iOsW+5qODqy\r\ntaBIW34A5nr5heClpkO1RQ5uL3cfyNCwco4=\r\n=aWQZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0163f3ba5.0_1668535282366_0.23078352709940453","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/typography","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4265afedf60eee8c05e8225580b53599467b2e08","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.66c5cbb94.0.tgz","fileCount":22,"integrity":"sha512-YBHWlgEn7Htes15WIsLmFFi/6YhPsHBw+AYJ3EHiDNOsJw7N71A/v+T7EtDBQ1NUUjuJN7+7+uxaeTDpm0PWNQ==","signatures":[{"sig":"MEQCIAelWbPIHqT/+NGUgDl1c5dZLoPD4JLcSgi4LTN4Vzc2AiAFag3D8AuCUCN6K0ODMMMWkO8XMtm4D43vWAGULyMIvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+iQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQWA/6A8tGsA5YnCSSNCBDahCTbsDHeK7dUmrWBvoI0/w9ToSVlcNG\r\nEe6JsAcFDk2pcy8NjblDtvdPr6UBAxpiCiMdnp4vb2cjON9+/+WITo/u8olu\r\nWHJR21EWn9MVgPASx+bmc9KGSgvvSsnHeDKOGSx9MJjg+N5ijwD2gMC1lprC\r\nCjGm2iqP2MphEnG73XNkr5w00qy3vDCPbotOtxlkaGJtB2VV5mXSsCfQ7Oyx\r\nJfbwGgFz3ui4mWuqUw8FQTvg+IXcmKHNpoUkB55Ny5JFd+zqIAO+311MnEBu\r\nR85Noatp+OxmAXJvjed2z3xSvA82bbx0T/bV9CaluXsGZWNN824+rInyvE9j\r\nWaeUv33dgji5a6Z7PmW9TjNaca7I00xO0zEdjNWVNE6w0Wx/INbWGMwo/wBE\r\n7Rs9kn3Fs8FbZnLLRSxVKikpP4kCMi2yZgL6IglXWqFfMC72yVYbQex/IBkj\r\nDFybwY1B7mmgzTUy9If0kWedgPSWkFc74gm/eDYVskM5eQDRnYi0pxTORjEU\r\nA+mEk+7hxlB6ga+N2trVO0M5I+E7eZpSl/CWEEw13fXs8BHjavJRw/F2KziI\r\n79Se/ZHKkaBhCNezn56TTuPqiZEFyXSb4BdPsTcB9JhTBHnXJB2LtqR7wvPV\r\nJSsq0W3MK9YtEek20UeAWfHBIBQ5p06cwmc=\r\n=Nv9Q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.66c5cbb94.0_1668540560326_0.6680555740919365","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/typography","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b01136063.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"980d3798eb00fb65b6750d67c5779e5da6d74db6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b01136063.0.tgz","fileCount":22,"integrity":"sha512-qjt0fJ3NYeLplVPFPHb3cqLKuha6nqi87oXB1kMTBijVdSpNUGsWrxSjYc2xIUDYOmMMviotUg4CwUfMlVSzAg==","signatures":[{"sig":"MEUCIFFs9YyKlb5dmXuNZ2x67vTtyE8sUmvyfhELCIcV1T93AiEAhpAfHJa9kV2uDe8Ry9qebZKJJMu8OyieEHLnjPSwfRY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCuMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol5Q/9HSsQ7M/2oe/cCF5Sj7TdM5YZrjESQNUv1A/30Swlc8o0+cqW\r\n0NaURRkdj0zvuqzcJ3qzgp9lKR0pkE1lerHpf+e+tfg4jGwcPpuOdhfr4AEN\r\n4ooo83481TEXi9tdgFCNT00w3x6y+OCOnGYFyWK8QKWWfBbDJkrticeklhh4\r\naAqx/ZkLfHzIIWzFFwg/gLxD4g/qJQ+lmKwsvRFZ95YdkiC+Uy2K3f3UaRU1\r\nf0X3IAInW7LTV0wHSPfBhnFk0qQR83TF4V51A22ToVteKOUnhXJzyhG8YTkO\r\nbwEDAFAlduHTa8my8uMbmlBGfAVQPT+12jVDseX2N4jUMQ8STjSZOjI2sHqG\r\n9oUc8B+0d142zBc4EOgAI2Vb1yJ2VjaOzCmlKc3PZgFoLlSAXRF0pHnnKego\r\nZM7pLq4pHGGppcct5Dzuk6p7ZSJ7GKPa/kO5ETtgxrK258xRe3C6jBWDkemB\r\nwz43vygRBtImcPSwHn3Z9bhBAXVQSIn9ztp48cA4JQDpgqYoYpPJGpwcJ0bN\r\n3bwMdKy1pR8dc5Eqt/qvQADq6Gsnw9fCnvxVjEHBmMnuq/7PLZoGxStw5wJ5\r\n2QnP/bmmdmvv5U/ToXJkubv1KX4tNF8goIMOqQIcUtQZIN5iRFUxHCuw+kQO\r\n2dZi4AF5R8Vql9BnVhzzMfT5u7yADiTs6Jk=\r\n=PNlQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b01136063.0_1668557708211_0.7842000775327287","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/typography","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5effa565cae8df0bf7a89f85c340f2c1c85545c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.01da0cabb.0.tgz","fileCount":22,"integrity":"sha512-6hgdXUfRnxj8OgDyRM0bk/g9+8OJzr+V9uwbRXkyTtB4jOnmvOTpWJyAs+FQSv+hjGc+PZrwa33CpxgTnxL0vA==","signatures":[{"sig":"MEUCIQCmHNnZjv+seE1BfJ8A+Kyd1dR4hM/B2qOs/HFcdfsFXQIgBu2muWPHWIdafno0juNSwYdQ5/PcgW+/xEsRja7me0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKmAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPhw//eO9uoLmfijzLAAZY8hAyWd2Msokyjr18UDdonW9JpvXQkBf/\r\nFakZVap/2Xe+3UyzqNU2uxpxSLxAOdd4apZ8ccUCEeWrL2yRX3as01o5roIK\r\ne3cC7cjOHZKvqVknwQsTg1vdGHwiz+/XJk9XkhcaeYsxVeKPg3Ksb/oM7mjx\r\nR3IYkv3zUbdarklujWrPLfVGkhimV2rT+Rh9inNxKbeIbIOqKFGcdk7vrIu2\r\ninqfbTXMT6O/kejsiJtRrwt9L5hRn/GrnoM30tVLSWvICL+Leg/hs5pZSJZy\r\nTydmC63gJMISovI4qVtcnCpQPUBajeI2cpzABc+58nE6TGakjjnS6zGIySjo\r\n/+damWnU42NzOUjMXaurTiO2k5i0yhJTLjyhY57Ac+DXA0ZJf07LY/IXWB8H\r\nuo0H66Ya5U3q0aCvp2TU6LXy8Uw7afGZLBr4Ojxf5dAq8tO3tJnPGR5FCCQm\r\nfUZXTo4G0WEdrEgjie2diIxXRw4Tq+9kbGz0kSde1mtepGRaLOWXE/mvqWPu\r\n6+WNhcuxdkx5nTzJxDhVH8IHXBja8HyJ+P+J4djWSgf0ijH4sBsHZewliA5/\r\npAWOediaDOzq6mnqjSG2lhVZQXvHzxnngK+BXwECD1O40rPDPknD2OTsBxkB\r\nHUXtDGpEGXbH2PxLJOZCQdWgP10nLFxpIIA=\r\n=3pAg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.01da0cabb.0_1668589952465_0.048430184603282855","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/typography","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4ac393164.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab667dfc22ac752605730efdc92d818037bb023c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4ac393164.0.tgz","fileCount":22,"integrity":"sha512-coWMfUrSPxE3ohvo6pZmDY9echTmkX3HKcupJPd+HFjOKTmRVfJBL8LRKT/y+ifeG3fKYNPH08WAsUVIe7lbuQ==","signatures":[{"sig":"MEUCIQC55zG4nk6dfJ/CZBq+9i+jICIuZCSvUAQr6g9GGQycMQIgYS0po2CNExqVZW9xqdY1JgxPOpOeA5668yHvgSm5Uq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpn+RAAkF/V2rl/YwdqFBsWFENPiC+hOKn8GRTLAK5dfJ8nRe3FQW0W\r\n+f26UbdaOASN8EIoxYObCaUdxuRK4WttGsKYpnyfSwJKEhqwW3bkoazHj1Qk\r\nttRzJ2gNV5cx1IGM53GKI9DlOAsbcpYsWUn4azMRL54Hjrn6EINeXA8VE94I\r\nr14iohJWGzSpx9YzB3awEh9KMUdKxL2qRGSUl3dY5u77OQ9P0GeiI9QOCpZ/\r\nYGOaCS/1jWlLTba+7Gp9VaFdsSO+0EprlEiGT3eVSA6/q7zfZpFfCvhceEjZ\r\n99bATRsIpj5FoAsgMT7kRoJ6qLt1QOF0VSmO5EEJp83JIz+/YxnTPVVUOCcB\r\ncNK6FiZNAR+RFYiPjajhlUILdoREtaPXVt18YPf/uOStJNdzAasTQ2AIicA1\r\nqABaA/w51sN3rb6VyMQ3DKTql6URpeOuL3djGoXuVlPNvIhXVDG8GE7qCIhZ\r\n4jYlgxPPe1O3nBZnItBhdES8OJy47pALch8f4N3PjZXL+O04F4LZ2STStDOO\r\nCjEbfJHQsuvT3LOc67gzVOcN6d2PHWwFca5lrkKWEALq30c7GLrJ2CHIT0Tu\r\nMuoC+r72y3CAoNCc51aormkbcoxWcmr/53jIC3ou2mZXEwhRrcrvygc9fmxN\r\nJ014pDlBAMlBEKXoHEJE1iRZQGDucMV74bQ=\r\n=w9Qh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4ac393164.0_1668615274557_0.9551505149856281","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/typography","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6048fb563.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35017884532993309396fa5e5c41bd182e2a7528","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6048fb563.0.tgz","fileCount":22,"integrity":"sha512-S6HluiemWc+wbpIaM7QSH/fPMJVr31sKWjrjVbYGTlQvqddpCTUbPbEbo/6YxP1hBix7Dy326o3rfkWY1tVPVw==","signatures":[{"sig":"MEUCIDFo6aEXGrq/rPYgTa1ZOH2hehO9TuMqfN0Mri9azJ+IAiEAz/f5AI9YEt7eJoHFO5np16e5hj//lkHA3CvEa9HJWd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQz2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotiA/+NK+q4SvzejwPyGZlLpoUv/ciWPAII/PsDr11UjbLVKJuH/93\r\nV27cGGhll8XyonwLyuMbYeUEsFtbQpGDyIPuNkzkjaqwIPVEOPVRi2WeX9Ws\r\nkT5hqr4huRxkY72WP3wH2SA7ebUijHUSgJ8gQulNUxWK8k6S/SZWYeMeUyLS\r\nRBtcLm4jg3DqqxxI2FLwBza9btxhFdxCS1RZvVxb12Mhnr8ZIa1Zaotwl+4y\r\nm2W5iTsQNDZz2bTMdGQDFdWAxrf9zVXc9FpGnhug5iPGS69blc9Vc9u8Vsq/\r\nDN3rcrCtC+bAvATcIO+BYRnJ9rJao9Irau+4atbHOXn0jmBUCBjAc8V14VtD\r\nSlBk0Ou0TCVVxGjZWc7p3ixMoef+bh2iXUDH94HYdmZd2v+hzD73BygXcNxL\r\nAwjsKDw8onXod0Op//m6AGkGPQ7qTdZ+dVxeiNzo2TAVfFVb1ma8I8IocSae\r\nebbRwHABLIAQfeiial5SL8Ea+h5TrduDN78gIqR3mCumj8MYMGTBLFcekypq\r\nv+hYbfEsvNTAt1E6yWgYI7uDKtT+kWWkPoJ65RSt2218NoUQ06pIf4e3ZnLT\r\nVYU/bR86u+qtUv7wvIeAB1EYVQyKzZeZYjMUWyOTYUrFkALa3miPFYzHRKk/\r\ne0JDmbgy688PahY72x3i+t1xUqYe2a+rZxc=\r\n=44sD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6048fb563.0_1668615414360_0.40278395087945973","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/typography","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b360bd7d411df44263bb385b38ec3a6a7ae2e3f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3777b03cb.0.tgz","fileCount":22,"integrity":"sha512-iF+gkh7Mk23yyLlk0l2N/VI8e9wSTlO2m49E7CxxSTwJ2j+Nr212tpYrxjr1D68dfG4SxKd+AjibYlOa548qPQ==","signatures":[{"sig":"MEQCIFubmdKiqrbYi8FsBEg1i0WddRoJS02KwMn7eS725drFAiBcV80nBuGuybcsP7sv8Gvze57cDZWJ4xnAA1ogOl1KIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS6qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHCg//VrJ0S0Y318/FLkRaBi04TwpGwSvlxL+ls3WKu9ZFYf5WT0H4\r\nBZSCaq7mt4jf4YFKzsMnQ6YCkVGJPo/inmHvsXUoHbOUM4DoaWveBihQmj3k\r\nQBXyu3VF4dcpuKO6zBcjZO8jlvgv73CY/WeRgx6vBKdntvoYK8TMMdWQsXiX\r\n2X17Ddi1yZAU0ZOVGJChMyFWIwQNd6CYyck6nbSowxUJsC/fsg7kHjRtLkSG\r\nlolwF5l6zsd9aTX7TGaEL1iHTxl5uff764o6EPd152YxveglVny/FdCjYrO9\r\nhKU74XkyoravJNmLkzMx6Bc5vJgede1WtHEa34SWQ0QALWCVMbMQ1n8ah+WB\r\nzw3bx5QMa0jxOONAQ3T/i7hF60QifMuykPX2/11iEuPupkZyqflz9QToFFYA\r\n0aaPjoBzenUx+Q5+1acC+gFOFf/p9ewMO4Q+qK9WeK5I5ms4UVIMnSdEr3hL\r\nUpt2F4GRxxHYY185Pgx47bPXjjQOJ2+PFJvT/2jWa0trVrYIB/qEKCGiwFH/\r\nnu8XALlKOa2rivkukFpA2e9HQWsIRrwofWJzqeDi50Tf+nGAX+GNPUoBYt04\r\nNikB/t6zT0UtPkJo/GDF5Sko1maQp+MjCsKER65w07Eu4yzTsL+MydzAqfkp\r\nYiFR1DwsWezd7bc4zqvqLKo0YBpV2ALtmeo=\r\n=7AcJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3777b03cb.0_1668624041835_0.8327214701884942","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/typography","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceee2ebc2767a3c5d61cff452c745767e3334a42","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f7f56fff7.0.tgz","fileCount":22,"integrity":"sha512-ZpSvXWoYQaVMkcIDCEVQVwWvoch0Yf7UU7jnmGxcwv1p2DhR6F5suyyS93Zrnp6OuZ/M3R5K4vFYuc2nu7sFCQ==","signatures":[{"sig":"MEQCICsaT1EPKKwNyoATEw8GYfFAtj21W2H3TVHNip95CjKNAiAsHoRhA59Y5zGU7GeAkwx7HkkanBlpNVJgGNzRUkVRCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUAqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUNA//X5Bhe5qLWIS6H2WbTfJAnaePbchF+39RYOiI81nNuU0SHhgJ\r\nCQK85SGIYQRSn9Xhz+imNLSsjsbaHUFL8tA4YiqI527c74ou/iaZM8pQ805d\r\nhsowtuZWKJwAaQqNzCnDY4UudwLEPOZGBsf0QLqXhQ8ESS0k5FrGj0EekDeA\r\nAzB7vZGXMNqmAF0kxqAoxGOCdG5ORqWUR4j7EwtL8wBy8dGGJQ+VYALSEi75\r\neNU2rfTQwLMKM1JpiqUuGoEz1LEd0zWKlOx0ZZ/qJ0fKO43JFeN8mid048f2\r\nGPAE5en7uid47njZq0AlxX7DTfBC1/OLgzfron8b5V2b8VuaWReTkK3r0eKi\r\nIvN/nsItDRRQJKeOegOWluVQ+23o3iLyDwW+zoCtVvRz9+qkue3vY+euXcvr\r\n9okSX2HMxyEwmQkO2pFgZ9K27+MJCvQQATM2qUKii4K/J7Tem30ah4RB4OAt\r\nB8yhF/5aV4IOT1T0iZ0pgEhkDtH+bLPaDEDYfbDsH8YuQAqpHUFdKPkLtVPE\r\nJ7oWTz8hvYkwAVl24XaVM57O3y2cqvZUeVuDtZi5hR9IiAkBUa/aJ3ctS6U4\r\nIlIjy8MFS7ZKyaf483xU29ZChmBdV3MIxMsjizx4LYWvT6+rrgntTP9J7awa\r\nmDRTUWjuFFysevWV9ta2lqznzaabvyjbjeM=\r\n=JnX8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f7f56fff7.0_1668628522386_0.4341346788619933","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/typography","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ff4132559552ddaf82b77ddc5a5a1eb2aa16812","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7c73f6134.0.tgz","fileCount":22,"integrity":"sha512-FmamGGuGHmprjArKx562laez60PXPhW9BQoko7QaKdKyPkYJnBCL31u7dWP05a8wx2qmjA8BjcJpPqebVNCpLw==","signatures":[{"sig":"MEQCIAkT77uSKe/+nyqZ0nRdF6kOOR2IkyQhn7+NtBgYMV2JAiBaY4nnoDn57BUUsvEIuTRtxQ8X4S/l3WnAh5i7KwCYQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUEGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSDBAAmBKYKpDVqK792CW29+UrWe/oOtoT7xgPq4ZgAyshMVxLgeMU\r\nzrhgzqXk6W2r2iLVQddjX/ixAqK93JIN9K0uQ02Pby3yn2K7iBc+9s1JS/Tw\r\nkIp/Q6ih6aNbkbl8czcKIY4SVqmPxzrJuPH4haJZdk7Rllse4WMgxEFF0RsU\r\noGHTP5HHQJiFHZMBg52Rsw1n+BmnDWuolvmveilQ2X+KnxEH3h5uhT+EYBt6\r\nVZCigPw9lnHioq4s8MnNFzvdX9cJTS60M1E8/xnjAO2Pt4mrCPoT76oWkp0/\r\n7UcvZ0EBYPOHdqx8YTpOt61TasixtzSdRnrKJA7ryaJjQ3qb9GBqQQik6GpN\r\nWPku06PV9n/5UaagOGPldClv/S1IfL6WSzK6C7BLKf5fPJvVVdhXuCgO//QG\r\n58texQFZkYm2dDGhWADRufgrufKenKiSyqE6tNmC/uc91Fw+aRUc5XHTS4y0\r\nsCIr8irohs3HKi84duN50f9rbePfy7iK+RYuZ2O8uFk/I/T8wLKsHjQXwk/r\r\nygdGpuyGczg5Z1zOKAHZYHIUhBXImPgYV6QZ644AZWJC0aOwogxm6JK0weBI\r\n3pn7sBmE54iCKhgzxGnuwZNGKRfQtolBonMW13SQQjwAhsvaxQfKVFkkbOg1\r\nMHLZbFmORdHCDU+jcuBTp5nCAYCC1D0ztz0=\r\n=moyQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7c73f6134.0_1668628742391_0.19356876435266357","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/typography","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f1e037150.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc968bd9e2ec7ff28cc9d811747e56bff4a0e99a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f1e037150.0.tgz","fileCount":22,"integrity":"sha512-hTVB8BgrTKCAZlHnHToJqCdI5YC0UrYabr+pmaJkPH0TfsmiEFF8EpCK4a4EWpxWKuEAhC4wlc2o+mIogRsxCA==","signatures":[{"sig":"MEYCIQDc/9+jtv79n7xWfnw4cUuJ4zaHzVa1zfJT3HL1qoulfgIhAOSrR133CMsp6mBG5b79yaxCkIWifEa7/2xkmPl8qrR4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUJQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQrQ//ZunNkm3HRf0eFCFg8f2C9PikeGiCknGe0S+8rvmhJ/RpBpJX\r\nDkbKaqR1eMkKp2LkGlYIotH5Uudy596BRW86LLoh+ei/XD41AhdIsJ4q7mK+\r\nh/WCrh9GKIM+Iu5AeDfTrVEopeAEe/RTGHcjYnFkYX1WItXyToAVSGOW2v1v\r\nbAWEZqGaQ5SPBfzlly2VBVpNzLtN9JunB44Is2VwFhhZi3jBcUAaKB9HIQpz\r\nGvgaq27Iip1xBSlJ/ohLBtJwaqdxzVHV3Y7VTGbHt9aZwWM6tyBfYbwZ2e6v\r\noge2cHkHgaAw4wMIvYGily0bjpiWO3xRHFw4yHiAWRRDElDilVuqM2rO6coB\r\naWorNz6j6V1pEUMrIdjGLNUCRWEFX/SVqln1L8Fa+QruMCKjWZcIUQ7FXPxT\r\nHfW7Y9MXAAPE/yoLRv3RZ3Hm7HKd10q72QOdBQJ0DW7rOB9f/f7w36QeuDuz\r\nRh+/paa11DWuLSfceVm54+O/xlLG1ro4ndx4KBzwdOytoRmPe7SHcc6dc+ot\r\n2zbHnKrz3Tuf/biIcj4Z7jofdYl6ZZPlrfIVqT8LjTc4zhhn8Q3gBdxj0awv\r\nzLIWo2gjF1jpwdYqAXrEiQI+QVsmohoWudXkWvVlKSSOSOK40xJFLWLMZyS5\r\nUNwraSCytybNqqneqoFNgtZLY8FL1hUly8U=\r\n=0kmG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f1e037150.0_1668629071727_0.3928100474891294","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/typography","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.40b18d043.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed56dd9a8dedfbbfc1300122a7d8d13a40bc673b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.40b18d043.0.tgz","fileCount":22,"integrity":"sha512-mSlTp+awidU7lBG7K80YmZAuh2BRilNNHC3pLjoYJ85qE/UbRgLKT5mDZrzYcTno8C6gDy0VtxciTOr2U84nPw==","signatures":[{"sig":"MEUCIFh/1lPWwlt+kELAw9QL0u8YVXIWpc694FpkTCgIqV9aAiEAyufBr/nwwhfAxQM4DZAqzQpfBDdbJ+/c0mJ4C+nk2VU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWsCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreTw//UXK4bAUoMy9hxtDSv//juGEGlAtPqC2B8OZoxieER9YMlBzF\r\naj+TZUsLrbWfklojPXmzSh5Y3bCcUhU8pYlyZk8rEtiMHRjT1Ji5iyUM8Gee\r\nJv9AvUHlXlGWPQkYZdKG8VRbTE94kICpAqfR96zQejwymp7aM1WUTAhxKAMa\r\nx0uIgrsAMbqUkdqPX9X7tJLYv8sM3pGjiKWE+XoaNZi2YE01HW3wkUSV/0Sa\r\ni3PueFwP4bD2ZkULI52zdbcZKWDH0lX6Y5WTwFbYUI5HPMAFgAATcY96puzU\r\nbgCa0GGi6ID5ZHbBu2XDdRIVxHi3ulza//wZ6KBKSBHa5SEZmPWeUYM1xn3V\r\niZ2R59rXDTaI2W8jRXhz2T1+wzRlSmZg0wwbXAX+tJM2xZFBhzmA0V7Ory7E\r\nZImCEHLE49Tiz3JITq9z+r0QVCsQCNOBZ2GMnN3N3sI5SgZpJ3aUgj8xWrsl\r\nDJTLKbR3K8VtR/3GS9xVZqPdBu7SkwCg7gFEWkmwf+EwebMzG/JvlhvV5bwm\r\nuImDbkaiJMJUifH4bmum8WdQXmZn5FQSRSRpyQqK2plGoLR4Zn1716M9RnDb\r\nMks/YHq51bpYVtB5t0OZkvG0P4eQ7cLKmzkCIjoix4dnjvi8LI0/hyT1LchF\r\nKJ7KWRZy82cnIEwfxDMdNzrA5Fcz7KUzN4I=\r\n=Tgtu\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.40b18d043.0_1668639490062_0.4344244787394722","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/typography","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c2f4f237e3db8fc0ce9e49ee7937f7241f7e8e5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.86bde5c06.0.tgz","fileCount":22,"integrity":"sha512-HarTapWUn/Arj3U5XJvHGiul/tuznv9u8nMF8NfK3ByWyWYBdaBCUepzqvzr2LscsOgcBoKwzRlRrzUg+bHC7w==","signatures":[{"sig":"MEQCIH0msnW9aNPCGQLTQtWozxlvISnMSTVUT+aR2zTQ9AgdAiBMETWNOvQrqWrLCPmyaYcvfOoh03P1U/MvPFdL1wtIOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW1lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov8A/+MIF17hALSfqIG1YIRvHGYHuGKQtDfc2wfygf4UjL3sZnE+In\r\nrCfRLCLlDMPc+XkQK8VT+IUnvcWxolBJaEOhRhws06KKNGarw4sv4bD8jhCa\r\nFkD+fmXuqRuz9BXEKkPk/LSTYFIybAG8Jmp1ENZsdF8QOieuYHpAAuT1OFmm\r\nIb5S8fkNRo9KATEo+V3fUlIa6+MD/JWat39tRCSai9nXuLv09qQH2OtNsK8/\r\ntxVemXs0DeEqOIGi8eOYKOMEsm4hpVGB4oVkzsz8opEDV/0uO1EPZs12tkyJ\r\nHWntB3mUx17k2q2zpXvpDdBFOWWreQzTY8V8G++/fogLKk/cNPLe7PyudK7X\r\n3eOXkxlDeFUO4y7e6PFIS9xb804Vga/gk/aGZQ9lxGnVlT9jOwtzrLddIKJA\r\nbCEGo41zLNSApHc+3CNWT+UjS8vGXfVBeK8pNUoqWLYsfErscDebARTzFF0d\r\nfRu3l8JMVuMDhS+nywC1LCdlPu9hSr0HlaIfcxjcWYdIrWMg21rri/0oCX1L\r\nisHS4djL1EkKELQP/e7eshucnhadoZOYW1UMcYlMk9bRElkyQK09BTujgxM5\r\n0GmabQi0yF+XCH3AMSvjWcaWAW5iYeNlRrItnr4fPDQS6fzq5A4lvbxi4brm\r\nSSILKTtr7w2L9AhohrXjQzViYYhXv7s9DEc=\r\n=zIxn\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.86bde5c06.0_1668640101229_0.5804629146277243","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/typography","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bb7751002.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"017f68625523d15421d002e241e4411a1cfe10f3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bb7751002.0.tgz","fileCount":22,"integrity":"sha512-B57lFrJ/XRUfDyf5/DUiPuvlQaTQ8hlBkfA7KsIRRTQ9FOdWa8tNMlnZF7avax3adOxUsN9mXCBy++3JZFv8Uw==","signatures":[{"sig":"MEUCIAlxs3lhFVxWOoQsKwzYY8SSpyi1y8vwbBCfNUl065W7AiEA6Fk2wb01fpzZlN5rdYRsWNXHQmAQUsGmoU+Cn6RmBTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXljACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFuQ//eMxH8FV8a9JLG5EJGWjV7MiDXRGe4CvjDlHtEHN3M2C1jS5k\r\nIOTDkD2nvH9IJTV11YeIAL4iTG311MVIGE9wnE1HyBvcUF1iLK8s1djMS2Y6\r\nty3gJjYrYMwm46aOTQ1AYX9LKOD8e96WTm3fVi+TLTWQTjWOeakCPFMsvgAL\r\nQJ4LNK+rRASv3CHH2bsyfijdohKmaUN32Mb6uTqkE4uVlGLHV8V1S5RgwT2Z\r\nQ8E5Vysi0oO7M9iCOyw6r0O+l+DFY4qTFAfxuCPZmLgkUITOCcxTu2G9wC4H\r\nZer99pIiJBvHyLvpsHUrRnJcCF27TwsfbGObEyc7vgJtg0EMD2jalvJnxegM\r\nMwjDGLTorlz9nwNNd1ke1EH+Qh8X/wSg2lV3CFPCCKOSi3+d1tJkbyJCtmU8\r\nAbNjHCDkkLw58SxQbcRtej6lsTa+EWlScHW2BaStOTA7+7SDX2hPysDoWL2c\r\nvHlfpp3i9tGfJjuSreygE2WNoF7JPzE5VFqmJitYf4i4VUfpUa4w5W9eUTCz\r\n50eupIJATQDGSTMcIBWZwzmlxq74XkmUKhNNyyrSAiOvtCbVlCSZkMOCU/H/\r\nZTOOzKzblRQFO/aJZcZXoRRnZCPhplZdAHFmK6ZmAvzm5RaTA1SOiweu99us\r\np6GsdahTiVBUjoUomRuTKRXxpIMtSEKdluM=\r\n=PY1p\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bb7751002.0_1668643170926_0.9237622479079501","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/typography","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29eea2cbff2569088d4e2395a5c0db22a3d5e0c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.63aca9af6.0.tgz","fileCount":22,"integrity":"sha512-MpXUb/1DvjSri/iNbvuGP09poziZpiP4Pbkju/+W4XWPR1o6XRrxQGh1V80LFIGQZCM6ex1Js1HYVns7pLST9Q==","signatures":[{"sig":"MEUCIQDmDBpagy4C3lyYhPx5dsia7NyDbH+PxaIa0ja7R6QWcgIgfy/Mwq4SW9uGQZj5LRvdLaYnzUKqkV43r+9ohAJklX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoTWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqsbQ/+KZo1ug5eY1KB2scZb5hS0drGBwWhcsQiNQkYbA5mIqiK9myf\r\n84DGoQbDFj347ptXtiSh97Z3qztQoRurY6EylnMK9pwEJ2tg+tJq9B8PHzAp\r\nflHWIGkjNRVacbUHCK0Mq5nGBD6m8Lc7zIXSHmIbF7a+5lKWC+JFSFiMTdHm\r\n0zf8jkgZMumSMHkdi4RBlTTGU+NG2QGCglybG9pSIIPGeAzYlwhgLQWFWqZZ\r\nN8WgQyOds4Ngm7XLa6bvZOzavIoPinNbDE+Hh1PvzEyxH46CPOMAvjZlx9CM\r\nOnShW17fo0ky7PE1JFJMhkCZwyCtB/W8XHMHfZ/MCZv/RhmFhkN3e5xfdq7n\r\nsnOzU2SUNvtOZVO9UmKIMLEPcXVVeDTvGfe0uWjnLcpOoU2HKznkFXz305cE\r\nxOctTaAfZRrC4Euu6GXRiv9bZwWPNrH3F+IU1RnIAy3troQ3X8j9NP5hJgSv\r\nyx/EZnbyHTFRo7Li/0OZCEfsPBr/Xk/Ee68wXfHBB0PwffQdYW9UN66KtxMU\r\n2CMOkzuXAdfk2GfT730lpvj7qL0SgvMvK8JdTaOVPHkrmPppwu883TM+Hj5g\r\nYuOmlJU8gDdzjFsP43hsyUkYiAiKfecClQE5a5VXcn00PVyeKoshXtPrcLKL\r\nCujiLreHfCuC8/lr9CFDuc1Zu3peTtiRMdg=\r\n=DUSR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.63aca9af6.0_1668711638173_0.5704518669292828","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/typography","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b824570dca885f3fcd0ce9a2256623b3128e90cf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.56482dc2e.0.tgz","fileCount":22,"integrity":"sha512-6YTd3tBlxUR+hq/p/2w2Y1Bd9Qus1rZpk8/iC7h24P4VvyTX4c9WcN058UU+N8NVSZB6fs81wW090jlvoKWBuQ==","signatures":[{"sig":"MEQCIDGprA9xFIv67RB3ECFHgjqNWi4eUcOTKN7RVoTXSx75AiBcwqhGFWC9qqFbP+7a2nvvCo62uXjnAQtt1oRINruKKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq2eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMBxAAhKeqA5rS0mIqIQQKZcfBd1eeEm2rl7FoCQw+dXn65RDGFqfw\r\nPECeG7z+gzCwKLlZTNC5HZ3hfeW7uOMPRH0cAY1vF2W7ECpQ94hSx66SqDlX\r\n32j79bCT9X0LAfqYhBKk7NyrhHwJYO9A9hjcPZAFQphFC3HfZCjGH/afHMTL\r\n8D0pJwSNYqJxEEwtozjBzN35JpFSydf7cyTIj0/v/d1+IWnlp646C8Vmopct\r\nus/E1O0UAyT8jD5OX+UkiCIk+W2QsPGDOX1ZU7AVELv1Ugxg/bIBSM+OhBPS\r\nEyria428/qx7/mgAg/w02wSICsTkynSjRV9AU6I/XU/6PzHUTY9QRT+rBQCa\r\ntbWS9rgvVltdyu/F0kV4bfXMgOvTJuRMOY2A6PEpjE6s/1s5yLIzTy682iYA\r\nUXlCRvgyLoC+w05Wrbi5rze8PmJGiWBpC5MYj4WgiijUO6Ziwmm+Sx88CnMs\r\nlaoRBK7di8Q3H17RCXnZjixs8sKrLZ2IRxUscwNIwbh5cUMVUaEwUMWZqAHB\r\nDUxfdki73CImDBs+aSMMcoFD/2LCNUmuV8s+RCAmdXlBVaNnnt2xjLtMxrXB\r\nxIATX+sNfnuYcfZaFhQmGZTgUiiyEPFtyUWgJBgyj0JyFrhPcOWPtR0H6PyZ\r\nlPMB2J3VH0anVUWMe74qbMJcVe9WNK2zfJA=\r\n=7vBp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.56482dc2e.0_1668722078008_0.4739779742102528","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/typography","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.953e689f3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3fd6d055e4f3b376016118968e411b062c12102","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.953e689f3.0.tgz","fileCount":22,"integrity":"sha512-UiYh90+ZzFVhjwEMGurZ2hsAGckqoz0S+8NM8BvkbMk56EkhHt8T401n1sVpYjPxrgQtgRW2z/bqZznVTrkfag==","signatures":[{"sig":"MEYCIQDsWfSrNvGpKoTLwNVHwEHbiAp28VzVQod5ANeHs+82qAIhAODqmTcav2VYc5m8HeOFoZV7okeSuEoe6+11gn5ebg9i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBkxAAg9MkqeTEJstmy/A3j5uIFGQI5s0wYV0f/kuSixctJoJpm0MC\r\n4HdXxz1q+30zaSSnraDlbrOulGwWH/HjgTtamk4brYHXLbgHhKvU9mXDMNvn\r\nt0biR1CqevW7Q3/Q9tTJXBedSNYTi1Y941D0tgqRSEOsNq/U6MRK/LSzY72y\r\nINvkiafPvMqw2HLg2nREX4iDJCHWbyxiLCYiGm7IOJSdlRq7Ml6UynyzCcIv\r\nUYxnty2VfTNIvh9KxPxbpqEIvRguubfLR7e135Bce2PvK1KMNmCWQm4V87i3\r\nVJdrybsBQVdz74adHpUzUknShHmZukGoXAfknM/DqMYn++MlvdDqJ3ucYufE\r\nVr3TuxUmI/vNc9xoVYZRrNvfyyRfl9ELrNBL7LlMTKuMmGz2vC8ZnlI4AWKU\r\nPzT8t+l1xfCPmyZYwUE+00E+dh9iyZJGrSI5QsssXKJBQcuyOI3N8BpsKscB\r\nG0OeJtXGdA1wWo1F3WiY+2Yfjipz5J2xS8yuHi06en3vdYd1gOy4Fjk6Cauy\r\njINj70ulZo7rhc6xSdIBUnq82o4IqZ8BTifvyGiJRnWfWwLKmV5TwEPQ+hxV\r\nMWPxLyPxH0mG90JYM6TnMO/fQTelYk/XMynrSmonJuYMudbSVRb3F8WAu+wH\r\nbssWcryDlXA797DUdOEH3EIu7GtkwXNLvr8=\r\n=Rbcx\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.953e689f3.0_1668722646292_0.5797558838953318","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/typography","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b5606a793.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"710afc09ee61f47ca46ca7a176c4b3d3525dfeff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b5606a793.0.tgz","fileCount":22,"integrity":"sha512-pyVyFPsH/UicPWqRMTNKrDTRIUmjB0c8Etjvgw39AUbxLDr3Toy4EdDDqTKZcvCivcy8EUQ5ZbaX7rUKSB33gg==","signatures":[{"sig":"MEUCIBfFiugcvgbGXuQuPBv9uLJLy1vMcujCpaTRzFfyPEF8AiEAyJPCsSV3xWxZojuR85vXclASVdQWwDC3WC5UJ15bBxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1xuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJlA/6AnmwP/N1Rplc8HjPJPrIDKTKdk+vJUFidyrtgvJPWavOPG6g\r\nRX0hMdsq3TpbvEKwEEOcKVRUSFdbAw1eWH33Z70Iawwm9617evaDQiZOLlqB\r\nrZXElfcNQhNbVZAh0bxGzMZNrx0kK/IYJj7b49wq1Fyj7TOI09hlwjD6S+9a\r\n4SFQBEUqHnTjw+B7THEeunZXvmnaPGrMeh+ggKnZWSI9jtMytU10wVElpCuM\r\nwTh8OY3Ih6EDQg21AxvmTfktpn7roQHkhpdhriGOlSnW9H4RmigVxC4YLMih\r\n0c0+p8Yiyi5IsvmYMnFukIjNZ1BDL7ydkFBuvwIHVJg/LOrOk55Xb+QCP/us\r\nbJFUGQ81BdRJoWE7kb25CICx7ljGcZPGFuPEgPYjQ56xo0rfKFWc6h1PRsTb\r\nZjVEwHfOzJsDObR8VBY8LtMFDMOup9r299KxakTxrykc8S2g4Blh76QEJ4OI\r\nzoWGHVDUAl7kHTXGkBkQtly+EnSwlJtOUqKyOJ5xzx8fOvzN3SWWWx9ieEKo\r\n4ApusGMnliEQAJdpqwXDzP6COY2WaUxGvzYSbF235HJQ660Cj25OXClYUxIK\r\nom5EB5GDYomA16Qz730xEZfDQxgu9duEPxoD6xpOsyHefnGdAsdBBYVc2Iq9\r\nVyfz8E4d7fzXL3H1ODOpZwUGtUCmorIbqtE=\r\n=b850\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b5606a793.0_1668766830065_0.9316950007688249","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/typography","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8c5675942.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24d49a415dacb2ee6832f062149147f1f2808d45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8c5675942.0.tgz","fileCount":22,"integrity":"sha512-DQcQfRdVbiG45r3Hdah/J0LHkydfMDei7sn4KhGOAv7KdHfgI2S+aMiPleMUdWVP+hRiYc8y1Q3UHuWQE7EWRw==","signatures":[{"sig":"MEUCIQCntHBjtG71B4t+T7jEtpVxCDZRaPXnk3Gb26AA8lgFQAIgL6xlzoIQ2T+0wdJIakVYipwdiz2NuluMkZwvawxSt9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6GXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokWA/+NAQzJlO50ykhc8LgOWNYHyh/14Ic4l1W7s3+jWxkgNPWPdAo\r\nCkhKMtF/FmDfevpXniEXiwVysGW4IEHkSwuhVpOWP9NWjKt1LtV7Gst7PM5X\r\nbTwegKmyJkDMU5UG7sd9nwfKMgR0Qz0hy7N+qa8GX7uj5BWBg3y6GfMo0AjI\r\nar3KqdiXU6VMBum8zatSa8jrRk5TSvLGxGaSiDefLtma7dUfJx47Eil2gj96\r\nWDG4TA/Vl0FnxFVLLkP46AoVkf2jAh0GIocR5KYOFBTkFAPV1eI/sDqB1xn9\r\nXLPP36asRZm6+jvStMK8yl+fH/cMSH/ZDLCNG3+O2QElKa1VdW01aSjhq5If\r\nFMX4Cuu0PnoyMmZAyXXm96j8HOYhHjQxo0Ov5MOhVvHOaytcCFxBecAAHWmi\r\nVTTn8892RC1DIAm+FksHPf04DNTIs7Dh5UN+CjO2KMk5Cz3snXbk8ycejQ9T\r\nFl11hjQPofB4Gp2PlUuSgG+nOV1XEO/NyaCO1kHAvifPE8CnRu6VtJLJX1gX\r\nRODZO7cKHR0xtIn6NmiNYTVtWj0D8FWF/YsCchNO8FVUS2affxV4RuXkj/Q7\r\nZ4pfJa+f3ARqvZWQKra3BOf/skyPpSNCw8BpSlc1PK+EVcPwjgrlHn5Pl6TH\r\n6JewkYnwmTgvg9xPitu5rMi71lLSsb53zas=\r\n=kXWj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8c5675942.0_1668784535381_0.1518959241866047","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/typography","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07b0cf69c97a65704e3ebd3ca6245fd7f7ec9536","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.697fbdebd.0.tgz","fileCount":22,"integrity":"sha512-y0+5MjNKYvX2gnyLa97VaOf59WA+Wq8opZ5Afw+HQ2zwThDYQNAy5dtuSoAH3sc6baYQGEiFpZUyviG88k6b+A==","signatures":[{"sig":"MEQCIHOxl8xQV1Q/FV49sUiakTiEe3hjzAUXXWgnLJTSf5b/AiAMAU7VnCEWHazVPf9E+WJdEvgXLqrmekMf9UpYITo8UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7oRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfLw/6Ap4dgjSwU+44WJfemg8FKBRoHnb/oAQXWjHa80KYjmj4HE0C\r\n6d4no6Mg5AS4KLMkLtidQojK4XgLMou3JCBEvCFHZwznw03yn04GPFeDzB6Z\r\nNgwWm575FpTTH75gep+baigItCNgrXuAe7Y3OBZS/7UbEWYeFUCcZLcxwbMv\r\nIACScRtIvUsD7jfPH7iUESMnIk9LHtvLqTPu0w/A5N34xquXJOJENWdhdop0\r\nmpbVbBQUtaHTDjnPBhhzKoINI+bUBEF4lfoAj3uXtb5cPyPAfBx7mqeXrRQZ\r\n5mnClV9uJ/JrtGd25AE9Wo2wRYG9RBhYPdMWK99A3oFLkf2dFwN/2mvveYWW\r\nLzrC4ERXueLP86Y93at55S7DhVA/eLQTgUzaF7GgMgRRK+BTCWEU9O5EsmLm\r\nVY8/04Kp9jLTf5ntnWbyjKBI/BYoO9Vasqvaha4lw/ZOWAo4wE356RxqKqoh\r\nI8drmmYNswAGvxAk0Ml2j03oy+z9eLPKNKOfKvY/loPs8Tq3NS0SpdRvphnJ\r\n9gcIAFlHk6BaiHd39en0aJOQL7s/vQAN870ZyhcOL+vK+zzy0yknDXUzNG3f\r\nrL/d+J7NjzJKEYUVJ6a7DOHqfzepqPZtC8QVxNbxihvdU83cIMRWDZGYXuax\r\nYIWO0s0vrsknjMw7E7oEFnHbQfzAxPdpRGo=\r\n=0NNA\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.697fbdebd.0_1668790801324_0.15659371229175467","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/typography","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d58410453.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8dde8e15db2070f8d394bb03ccc1984e9c47a11","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d58410453.0.tgz","fileCount":22,"integrity":"sha512-hBD+zmAEaI3aLToClYnm4wAB632oaYlhRY6dG0FiNmmJBIEVFTKfuqVZcKpmOlgrq7/Vb8+wlOs8P8charxl8A==","signatures":[{"sig":"MEUCIQDzr5F5VMkLN1ktvrIKY8/AEZnhY8pR8yij1CB1x2GYmAIgeGPLL4QyTz3CUTVDmRPy0JoZ8kRIFGCqAozLamwe+j4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9vpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfBg//Vh1rGIinGQRpOtXgQ3hHkBWmA997e74WGSeVc3GJrItaUC/H\r\nry/Rbdo0lfB9n4Ob6bWWbgA2V/JfxsbyRMUywHGPbxOrtKEnMSGaEfs2Ig1l\r\nOsZNK5UeGX3RN9AAlU7lCU8/y8Y39YK2ErJDBBhFjbi5+70Z/QfoFI3Z+5z7\r\nGX2SzeG4cxMl1sEUbXjz6eLvjmlf0VUD5DmfyxnBAyPJ3W+FgGFmVQXwd7jb\r\nfPMujbmFsuj2JMwrvEk3QJYpbd4VHGQqs2noM4shd2mtH3Z40GxRVEKFrmNw\r\nI9gze4LgFJCdpr6W1KrsJUZ9EJA0qwMO4PKObBeOKwIYwIGUJx3XDgS3ms8t\r\n5OMkvHmjPLGTT6TC7F0JQ0IWqRxBuKyizJUh057ouF9wbbmBksFzoWWs8Czu\r\negvLgUK2Gn9eumM8V4IJnqJ9BGiKWPqw7BILLLFmJGRoF4kplMtF7Dfgz9kr\r\nOd6m578PWGQoZXU5LbWBsAufif1sz/1TlKWTe08sXHVDwvoARRZRpKpYo1Qs\r\n/Lgce6A/1JsyiSaqKInhARGG2JBV5IoVzj1RHybAXMkV143PXWebCXrZ+ZFO\r\nMr7UIFJy8a9FPjvWSE4yjwyfZ9WiyOcfAtEalhwJASS0VSS27CrwMoXDriMo\r\nxvmFnhmaNAMPbVk/nZtucNQahaXd30JfprE=\r\n=IS1v\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d58410453.0_1668799464962_0.18745291478568737","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/typography","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26b197d2384490d7e3c9bd2da57a398ac9c04dd4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7971d6ad5.0.tgz","fileCount":22,"integrity":"sha512-4J5qPXbCS3wMtGl0AJIj/M9rUxHR7fRX3IKtfOyvra10lZbr4qma+4g0+t+O9cPzcCBS1NwPkJ/E4t+ijEa6gA==","signatures":[{"sig":"MEUCIQDGizRLbafiTmZqjOPE4STthUlrKTr4G8ewnNdiNqEm3AIgdkbaTaiIRYFKmW2nyU0OUKBbVpn8MwZXOD+XuUUX/Ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJd4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLog/+NbUI8Cx3IxORhSxZjhUDKLtmgcG3hgKFPgvsscnbmQjYOkfx\r\n1jumIX7/Vur6ZHG7W5Iu47UtlCb5utuBoJOWdnXfCzF4uDEdCe1+JxbyzsbF\r\nJ/RgpG4JHJ9ha/56f785UHWfDzbonT0DTw63LoZ4weg+IrdFhNLdXaGIuTYI\r\npEhOVap8+ILEmMTWH5rIWtXG/d0VIdmrPpztJzTTZT2/hKQnSTxJWz2mVh2i\r\n7QXQTQHEAuOWuW8vx8eqsuaVtpsikBZKGr4AoTklrZ26hSf3nP+/DmTUcj9V\r\nRCywVC2Sv5/U3DulMNRiO6vMgu2pJnH54cd3e5xUct7MZ/7evOTSgoAsb5DS\r\nMt26Ov8ecAUSqVHiYNl6pSuvDeI8f9bGBNocLrZIBpl8v8X4x6ZoH/Tqd/mP\r\nBfIeejimzvoW7lJDPorBSGguZiUGUU0Q+ps1LpQOTtgjLB2fTtZmOcpf3imS\r\n3REI2EyHD3oYTrFpBpZtxcDFv8PrQcYx7XIfzGN6TRyTFrgbe/w4lNlxLuH9\r\nZs2cIVS5fUHLmCt1aPZe7ce118SkXHgvp3jcawIIGMSWbGU/P9vq/w2H7lay\r\ncwtia1S8HQD1jlplnHAzP6VlOO9kqeHnshcE0wehUUOXda8o7XcuPOa6vf3a\r\nR8+sNQ85pOodqGhP44Ni3eoMoDeaTRyNCVo=\r\n=AGQI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7971d6ad5.0_1668847479823_0.12243644521314923","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/typography","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbbbbe701b899d78593029228f9d551271097f55","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":22,"integrity":"sha512-4G/Qhjc0wQRfyd/86YnFOWVUk0y+YpL/kjnY1kGIvv3xHnC1omBcJu5Fxgs4/BvEx/qeT4d+HGw8W/Xu5pTtSw==","signatures":[{"sig":"MEUCIQDDxhmeicLQPX3Jk6xaiOPIiiDcxV3UqRpe7mCz2AK5cgIgZeFiI8+lB2rChmh9vDtLMkt6sadIDDEZs6vTmdNCtLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1iVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUyhAAoYsR8/nzM5okJgb4SAnXZYDHWTD01+L+3UxJJ4VCxGev3Bnm\r\ntTMnsPtxOXr94ByiHLIdt+y90HMhaQTndjmon6ibdpHJFPm3gsQhnG3EejWu\r\n+7yZIo+rX9Pek+2NeA8hoM6PM5qVNm0SxDrbIGxmCZiaUjHLwVcv8nDofk2e\r\n42zAayli6QXlvojMz8g8x7zgzKiMENR17KhhVn/lQYR3IMHB2DLzZhehfwh1\r\npGfheIJQ9kcoSun9UPU405IF+fFSR4PIqGSTpjJ2gFF+9YOCvUy640MLkhRv\r\n5b8TQCfPp3N4UriMfz235FGD1n/vPsYPxzAJmOdu4GOc767rDLPWT/E7hsnr\r\nDQmN4x/1becU7i30R0D6Zh+enidmFO+PaJUXei5Z5x1eSQPNEGpmPz8GPr1w\r\nG+WOMgah++Rn1zd1naisBQuvNDeDrOibHa3f5qrIMZPhh7WPprBDS9anpoEa\r\nlvp3Tot9gTMUu6D5nyPOwo31LDp9zkdAelkWyFWnj2IToFnoePp3VRK/QWos\r\nirWGOEfdpjbORJglw88vP95Po/wguT9lOhYgGkFvt812ZVh85l9KimF9rfSw\r\nSUOf4ZzX6GSJooGlaaqchTD+zhdg91IY3iMAR6HglOgRaWdXrlpRRBU4qHJb\r\nsTN4BgNW7RxnoncCvsFX8E8Os23SywLIxHQ=\r\n=lS6I\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a0ae73b0e.0_1669027988907_0.27088284097996684","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/typography","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.96f472604.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2925b5bd3fc312a6979ce129eb40a9e0cde094d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.96f472604.0.tgz","fileCount":22,"integrity":"sha512-9h3JmqEBu/AHUJU047nwrYFmLICuwA4DKSds4ovUZSSpC56POQxQis8XlI6B17pT0EKhOC/5epygQVv93J3x5w==","signatures":[{"sig":"MEQCIGvoc7iM1VAtZEA0kvxxAkuvSSpb/5gTZtmHEyNTQtCZAiBCVV7uyZ/zbagfqNPQwolx1X+HL5V7lCMMsfxy/aZwVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3R1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqDg/+Pgy8lLCevuS4eHFWXAqUlEalZU5RCsju3dR53sjjaK17FBGl\r\ngBnkormIDavcQEdnVw42M311dW97vV0J7dOrYOyL/pOrIA7NbrhQbqzAotlD\r\nW1SIcf+9TpnKB3DEtXiRPSbUqkSd3c3sCRq7J6BMrGqZ/xngp9+kzLxOFqUC\r\nmNES/XACBxsciueUkeFfnVrHsQSSyDOj6kSOK6rJ4+nN2pRnZz07cw1hYdqJ\r\nJhqFG4WR45LFv5ortNKfLOmOs8Sn59rdIrIL9rBa3YzjD91rP0YsN8k6T91x\r\nIsf7HgsGZqU07DN6DwegcgLNAePJs5sO9Mk3MJp3HXPMSWxN7lMHkQHUqpsY\r\nves17kmv5l/m7SqMrbclL4Rjy78s69gOj9DizHsvuErvP+WPvwmBga4o+akD\r\nI7Zog66F6xId2GYtDY7FZqRPt3Ht0ScxVrlWyNqITGiGSmqQ2X8ZrSn9n5fA\r\n31QnC2OloRVAEN5Vl00Wf9Xp9ypUeuqIUxfMj+Vad2IOaXD9QJLYg6hIHC1K\r\ngg9uhH7I7jXyldaYK1ymzWSHH2VUT05m1lw0uvUC83MOlooQoXblYXkCvYji\r\nDbqNq61bT9zDCGlK6SuIhuNkTmRoqu3m+uVmxUpZ3fYJCBqgAT6cuohmIh63\r\nQTyTJEAlkTIzD3FkOuCS3940lE7W5gG8wUU=\r\n=qhst\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.96f472604.0_1669035125004_0.2577485182404722","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/typography","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a05d27950fd8bb3bea57c24dde6d31532884b2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.18b8f31e1.0.tgz","fileCount":22,"integrity":"sha512-yTiB1syP1MUsgI6WzDvCHlMR/LiebWzK0Sds40qId5Knz+Puhe7HFF5IEXmY/4JPN8r/S919R3s/L7fo/Tidaw==","signatures":[{"sig":"MEQCID0jN7a9RxM+bF7NGz3u4wUKFrL9HqWIq/je0bEhzZe2AiA3mqtzpRTsrkTVuLAZbtjxeZIS+lA33sDue/3p9KW+Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6DrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLow/6A+gv9d5WTyZMDoVRlq3DDJZzVZqsWqDCsnh1GOey+PC4FBsD\r\nHrleE3ZzYosHuppfsnyjEiq3EEId7YF3lCmsc57/Cb5pSmqOqiL9XPCJiBRz\r\npeN+1zdsbMfzRlafF5FETJ5YIjw+f+/u7vchskVdRoo7eSgeRnIBrFoV/5ZT\r\nZWdMgSsSiXR1/MWIxt04Jk/7snQ1RFYoxanERbFGAA4Cd/i2w0CJG17XWbZT\r\n25DsVS0LtFofQ5+dKRF5Shk3k72bko+YWbGzXGen/1MtFARcX1I8wdOy/scp\r\n5+HU+n60G3YAWzpM1fX846ROCeTSviLCR/siSI7O93RdUCH+GRfJX5bhLhXY\r\naGscRN3n5TrU/hUmf7oT2wfoOvOcB1RHqnm46NKL6PCZfUYE/iwFlcPVxS2R\r\nuY9VztWHIMZa3kpUSxHw4T3Oo+L6dRLJVEFA5z9LoDz0LAlM+yAHp2HtpGqO\r\n6ZSgMwn4dZhFWoXq6EZr0bwOY89y0nEpSN56a27QG7+IpjptlAfGLMlLSRap\r\nmi7mRw61eQqra9jwNHl7MhiEL1XD6GSen/hnznG/6U535z5trQVS25seejce\r\ny/VUCvEk2KcoPLa0p+Qh/ZHdM40eCSngD1bpY5fJuddahSkBOmj+a85DaRK7\r\nKnR4PlSoTdbASeCVs+puFN1yDOmlvrR/1JA=\r\n=5ogo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.18b8f31e1.0_1669046506992_0.8435220930072265","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/typography","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"559376afdcdfc105e63730c7107dda9ec3df5c54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.912f33ce4.0.tgz","fileCount":22,"integrity":"sha512-NWs3r86KXAGouoFAKa3ADQn2BnT/7vEoopyPffrNmvpBUnvkv1bXsn33nhZeUHQ/35MYLnNCCgPf9fbdzJ7WNg==","signatures":[{"sig":"MEUCIFhle3tnLhKiSbI+773NgYqr+gJmRfNYfv/ES/qkJE6GAiEAoj6KPUrOeEOQu4zwRismUJPct5/J+9iHRB0l8tfFNjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7sTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL+BAAokuIGvrFCSancmHdFj+WH8HLuxCFR3T7kU2fTpbpCD/fjWqP\r\nDDVpOpQeAdXnbFLt0V70NveX/29mLV4eejKUgoDiK/8pyRgJOefrjERfgFbV\r\nGxF8f3ex7wPPznZMfmm0ePtJW1Iy+6K8A1jYQ21PDXUoxH/clRK4nwSrUk2W\r\nxauNDV2t4OmryljZelVkFtTIjbtPqH9BsxVET8Lzp+Ivu8876DKIzxAQbGlw\r\nONHKLrynFa14nFegG4ymb8VBPjaAzQA0c8MrJgLiK331Hu5BuDoturaVonrh\r\nwSmlnAEvkNFktfmIY+ZFCUCK39idXyQUZTlM9Tq5jOLP9ehHyDcrqrjlXfK7\r\n/ylPbWWnBdSzFb3LaKjMNFbF+CHB9yrRvLiNoJLb40jJr+U96phbOxoJ8SU7\r\neCeB7SS9ZhhSodRH5qgEfAS2TGluV0+YuGLQ2Mzdeqx20APd6flA58KBnbb7\r\n+GshvhKXIwUSGjqEuhhYEkBVnVSZYqxWTkNjghUvTlKFnQpfgTlDyqQf9NJE\r\naXC4U+XhgUZvjwnio8V+asEBic9jPAOKjuog0w7t/rSr5hDxvwTfd2wQihJj\r\nXtH4+uFJknG/4KjKqpNtw6Emu+PRoOwF146lwBDI066z3bwgPpGq1NPAr7T4\r\nY/e+SdG8hMTxZYVzFv3c9V32lE1uQK3lmWQ=\r\n=E6PL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.912f33ce4.0_1669053202819_0.9709711974075033","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/typography","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7768772b247900737c1560b8f0db29a0d56b15e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1e1b1c369.0.tgz","fileCount":22,"integrity":"sha512-pQ2k/Dhas9VjSweN1+bcYy3x+r3MdqGajWYskl974bLK3Kfw2XQhl643wBVFcSZ5EFowTe7+GKgGR9xvrubBmQ==","signatures":[{"sig":"MEQCIAaiHYlO5cEJeTs0d6h6unlfw9OFFk/gxoNUkSw39zSoAiBfSjK+08Eg7S5QmHmJaNKkK3Ot/LqX8W9IUHKa9cPrlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm2sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQRQ//T7KfSUlWotfSAdwhUU1lRCU8Elv+L5OCMTSfl1V6gWf83hrb\r\nRDIFWJKlNyz1yIMSptF/0IwyWcgv8VMmr8T/A6xGq1ptKKFooOudw7Jx6fy8\r\nikrLuanmrVac1TsWaMs3gaA834PqrPquXNzLryaZuVmw7TkS68z856rrypSp\r\neUV0IQ0DFolOa+2McVfweF7EUNuSGaN9mzBfE+2piIR08k+xha+goLtLscxQ\r\njcqC6k1b/MfThBAqPAZgFHzg/Px5/6OpMEHHhPYHdXAZ6pU2b0rMhCeJ4o/H\r\nskzkmOJMTg4YRNBVdVUyEEylXJUKEjCW6ZlJoTYwKFN9Ww5dhc04jyDOuIvu\r\n9ijHdlrL5OKY46g6C1LqHDetJQ6ByThoJeTEFqyGBRRoyvKAasRkbO8Fc+34\r\nRHRQPOreZ/lGmjs79UQY9LxxU1zprnEYpDDZJbz5dNAfXRuGxdm33fr9RMB7\r\nH2lByRDFVJ/FTn+ALVxUCQsLDT1az3UhqQeADtR4aWtHTDnn548RmJWLZ+PT\r\n9+Jw8t5+e1DWhZA3jk2lvtGUJ8g0ehCNt6sCziV8aHT94/QTOr9LH5D8q1eO\r\nyoUluKnO/0JeM6XNKcksMZXSGGWzp8tjZKeReMVmZAIDxm0XLZA1FoGzE7xE\r\nWybP0eokuaJAfEAbjtZZsG78xOvXJcBUA/I=\r\n=gjc5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1e1b1c369.0_1669229996119_0.4447314458535816","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/typography","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"544e102395fd5c619eff8c4ab1bbc23897b5f18f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a2ec49244.0.tgz","fileCount":22,"integrity":"sha512-AjHDcUBQrdMcYqBgiM4WpxEB16NYCJzvCf/guEamE9m76VPzMW50vMM38h2esBswI+4OQjUqcNwkGYXH8AruZw==","signatures":[{"sig":"MEYCIQDwvFhO6Aca4ScxqvVoEPbFciyDgzASABnf2q1R4YvtsgIhAMLeb7JsHC+A0pdC2Bw6t+znpAIEAvAMU4N2CHec21Bp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnTNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8BBAAnIpCY1zjalMBASEpybdWHwv/pETciXq9broWENz/0fsxYfK+\r\nq60HXX4r7OYfiv1So4ZtKWOcd4WHvu7tsggpO1/dbdHr3CAJfMvQ8+CsHQHi\r\nG0vc+FD8yIccGLmsGtq59QSgDIRg3Fi0AdqKMT9zk77EAEsMAz0hEl/s8K9/\r\nB6j4GSZiucbls9x2y405J5GjF7Nf8e08Ml2ZZa8AxUXSUcpK+YlukIuEm9fM\r\nGwyF37PJJ/FJtsJCKqp+cqbz+TGL+3JVfQG6gXcE1e6b2LjNC+kq4I3kl7lU\r\n+wdr3ZQQ72mOzhiPNRp3XNZt1lVb18ZkRBqdddM7KHWG2LGc7Pz9a78eWLF+\r\nX1EOQKORLhW3SaMdowvA330ww9nOZYKzH2UFGqHDOixZ3IJnDqbzLsMmiDPD\r\nsDZZwcgwt9AMuHbQidoYOjqN0iymAH1Wgqp1Aas7TV/Pf6Cj7+a1NXNl0z6U\r\nWU8pKW4yoPFugJJWu28sWZMwxFHSiTnwii2vlRNfUZDMqdD6GHFwl9uuQNvR\r\nY6BJO6AIiWAw3XTqYXdBy5CitYCFMSh1iEpUna49Zl0sFIbAKDk10J9p6Q0U\r\ndrA11M9bLAz9ld3Q89VMZ2pcW3VxeEiUQXIBCFO3bvQGdIstEvzb0puh+gGj\r\nn1NyYv+9ogdtiM17Bq1iisJgPJiz3ymsXIA=\r\n=T/IU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a2ec49244.0_1669231821718_0.474977236172061","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/typography","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f6322faa3bcece454b987ba3ca220187e8d55b2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a7458ba0b.0.tgz","fileCount":22,"integrity":"sha512-wyVCX7GgTBQhB42O3suhgnvNH4XFGjaP9CWl5sp9JcH370h66cg8UTZlMGPX1sv39rw4bd/lU2k+54zMrTFvmQ==","signatures":[{"sig":"MEYCIQD4afOoetZxWcdxo7Kre+M+10buZayHAHoq4CUz7irYjQIhAJxlnxxcKWBWRADDx4z3bD+/j8FDBuFAZlwr6frn0uTm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn93ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomiw//etbpR1xkBiA9Qc7nHvGf9aRaSCtZLWmNbo0ovLecU05GgfUA\r\nroIUo7TPwlCLkDJg2UrOvB5cJH7WUFSY5uTTYcVuf5KnPS0RQ9TG19Lx6+9b\r\n/eP4qwXWi/2pCUt5weIchl86w5hGIkwXWjaL+ByCPMmUAOEPvm3hwFk32At/\r\noYEHy7TBOSEyBjFyAYK5Qs0gyWpX25YrhVci5zo4jxeTdcjcLwcJZr7/e3J+\r\nDw4BMW9/DcX58ERxAiGvRdVlNC7UqAjlZPzBIzfEhdurfbpdpOA4Wr/TvOfi\r\nmTaTh4LUmnR+HPrO//MSl4QGxmpQLSsROORncyWr+bA+DWNzlhF7FNI4w+Sc\r\n1gAzuMEtF2BsY6pwRuGpahnaGTC/eUPBI/XEh3axN601IaD+GPSfXRWGVeAZ\r\n0y5EL3oKvp41ZvX3ebj3ssxD8NkO8Lo0O+xT/viSXLGSKErV5h1BlKy+DA8n\r\njfPVgm5Wv09ZWzCV7LfZXqXoWs9GqLEEK2izd6FPQ5JfTfPQpK8e9NdepsAl\r\n1CHRvAXL4SNolGkn6HM10nDmi5Kb3W7DBi18BVWFXv77C54MKRn+RXE2MZeX\r\n3oFoccW8bTzIjDQMGKZ6v0y0SuVGRGYT0bQMo9pwfHy2g3uFOz9bWlUkhNCt\r\nnqg/ymzffdjhUS/FZOahtbZkFLgWGieH9d4=\r\n=ZUVb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a7458ba0b.0_1669234551279_0.9322478418831637","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/typography","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d697a8f77acf55a412d296b261a2e24dd1ed847f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7c35e5036.0.tgz","fileCount":22,"integrity":"sha512-trpPd5M1X966ziPMgMDjvzzzOuLW5OmyeAeePn8KE0y9uo3RUg7CCXgKj3cW/IXUVpLNvLH3Alj7zEgeK2nHfw==","signatures":[{"sig":"MEQCIEZeEeGqkqzlgiCy/zMPEds5XB6d6tkoiCTNQ/pVVEaXAiAKkqi8IL0vgo2ToH1uP5TuocZoJM/DVKfyFxzgOVNPaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy2XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl9A//Tm9wBA3jCXZcutMjx0jNqu0dZi8SEcelDac+0q5ffKd+BbNz\r\n8Nxpfghsn8b7qfgmjATLK/rzkjl4S7vYbQgmjtT+WKmOb9OANIuRJHq+hkeI\r\n0tUuhUeL4VcZn4x8VBv5pGfgx0XjArdUgNvwLHoExfJLgys6pEiEUZzrJsUZ\r\neeualKf9T+QmNrlWNOr+1Vl6WwdrePbt0UBIxz6v20zfgIeIj2w52yloumvK\r\ntStdqLd+WQmpjLghvdaBPF1FIi52W6cJ3WhK5Abk0X5FMgvSxgq0/qqbb5pY\r\ndw/dKd3uAhNWBAmZg+Og5UN4JH2rP6bNcrQ8meRXMbKgNfmn40a1Fia4fG8Z\r\ndqJ/OWz/YzkpvHc2nrkFlAEe5EJ1W+HcCm93E8mdDVjdkPE5CObRMxCPjR4E\r\ni0+Cm8F7rBKPe/CIhNpDYM+YCHFe9Uh3PiDqJFksrPRczhoMhunqNIez/+gQ\r\nLCiEEtw/8VUJc4c/fsgctzXSRu++ZMjt9Ul9lcSMuqIhDi6rF8PN3FFEyJ3j\r\nUzU8paYWc7TeD2G5H6/+R3VCHPMUPLbdiVNVuDorbwYSPmhEPDpSAQt/rL2F\r\nxCXaduPhW0IWuWlLDWzV3bzW//9xSUpwg6zxBVkfiMj4kzQBZL82vT3D2ap7\r\nT737NwwRs/DWN0XkiBZc33W6l6eUBW8uu04=\r\n=iRsW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7c35e5036.0_1669279126953_0.012493965101723736","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/typography","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1168430ea56d8539fc5fba6351d5ef99889d08b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4356e05c5.0.tgz","fileCount":22,"integrity":"sha512-SneUrKEiXiMbRhCD+Gk6Exy/qaahzX2U5PX2iW7IQtoemrtgOT9sjpTFMBFXSnrv3vZd6lh9JqzQSzOS7QCZIA==","signatures":[{"sig":"MEUCIQCi7PicDD560OWDpK0fc6PVvbWE9Es4m7HVno7jp3I44AIgG4T1HngUmAIT+2fStvcKXUNCLu5BqUnB4Uoi+oN9+Xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz+4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovKw/9G5r0EBMUS3jMv0OhP6VRGa0st0l2XK2dSn/lrtMXLXCdt1NU\r\nhlimeFEbcmX2xeZmUozlCCvSJ+zgidYU7iVNYjShJ5fHRMJEgexBv4yNYaWx\r\nbjVtNI3u1Zom67rSMxmCL0UlhUYHI4iovGQRmatkN4QJAczmWNCVLA5tq1xj\r\nWgCpoF2/ZhXf5APvf/v75l0NCmKZX3fNPFjVtmqKeF1orOWwB3jCdPHXIlGz\r\n0XElghbjJsoF1ofXsdaq6L/ReQ6l9fKQ8UO1nxytGDRor/dXPiep96GY6ZlF\r\n/UFr8QQGEnrgf+yRY5ItbZfvBfbTeZFLyjaS+JAjO/AXjAUe6V9/bjtNscHU\r\ncvlbgMqJKY9/hv+AraZwt9zUEE6/5Lz8mE5TGm1j3mmucyRUeQCBIyLmhTjQ\r\njPtXTg+u4G0ixZCQNiH6OA/u7XCtDNBST6Qqt0y1quY0ErSVLVH1CKvgKYXl\r\nYLGZRrV4rk9tB5F0q6wWXlGvzq6458JnUulwx37XITBFBl0/1jt+IqoQsSrW\r\nGS9Gfrf3rPWMh5cB0YCrNPXFuxv+FwLdX0sfCbGyPe/qssNaCzuhzdlidQSQ\r\n++U2hGEnJlk3J1WFwyqfTkMA+ownuz8WAMGc5w09S/eqkWc6fv0x/uZfvSQB\r\n6BWzpGLzT0OVhHZEWtzLVGnXxtJWOBD7aYg=\r\n=0hJG\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4356e05c5.0_1669283768668_0.2780730040914505","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/typography","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72ce8670affd021521cc1457420a85825a7ac066","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cb605f8af.0.tgz","fileCount":22,"integrity":"sha512-My2L+c8mPAouoAQZ6COTdeNs3Z39sin3fp5iJRqm9fMcvbPWK7dZ49Cb5WtThYvXwEl/pTFmcPkuEBjdY3GlKQ==","signatures":[{"sig":"MEQCIFg0GJrpWQl07EOgADzxiJCSI2HHrdY6wbBGqxnSZAcjAiANuO+rMOsyYJ0avRrwLc9yOIU4TsP7yRa8NOLm4S6kzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0QYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+LhAAip5+ZlVxOQ9bL69dlVoUBD/37kcy8T9vAp/dCtRw4JsAACCf\r\nMHwhYLpNaopV+sQlyX5B4DgqiPu1P0kEArMxzPyX3b2suA9MeGVSNcAI+EYV\r\nj9Utrpz7mXjy547CUxfWVlPDpBjOYgwtJZJUsjOWZFuM5Q1PgVtJMlGRntfo\r\nolTEufTvI/4sOJsS8nc+Aq3i1vz9SDJ0uS5B6lkzc5jow1czQaSTIV05e4fG\r\ncGFO6Yu56ADY0X08puKtu1PitX9R+mHfJeTNuaHs3kXG6eHNMELaK3qxXkGG\r\n4gtgFKuLAKJwDIL4lHSINmApyrKLd+GHQKkteXLK11KcttB6tfIC2wUTAYSO\r\nFWeX/0tp7v9IprdcaXvvRvJFKBC5jb8qt9+x+NB7V/idtuhMM25WbwvFMP5P\r\nhVWJ0C7GJevddR0kXCSxvCy8JRXrh4LAh9D5NfUTBNSpFnrBoeMzCoYIU8CO\r\ni2vK8lDktWoSi6wAtc8gfHp2KeZzOlyOcxn4qkKWq87T0BRf5bmQeMxJd68p\r\nfprzcX8talE375ygFBNvHrO27+IrJ9DM4DBQvxz8iERFUK5KdDpD6niHHzHn\r\nmPs1NBcxQDE4vpNDwOSIaEgyjU7eam2lA/Z9juSuCPN1VfNQ0iIccMOxmcDE\r\nk7rM7mTOBkdQt+DmMta+SeJaWLjDsgaGRAY=\r\n=o1IT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cb605f8af.0_1669284887895_0.9374706748050636","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/typography","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf29d193bb3791ee380d5f862871ca631e650c2c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.05fb07f9f.0.tgz","fileCount":22,"integrity":"sha512-4giShWqTvzHfThsQlUF8HyU7y1/H+W3K7V9OQbsRvvo8W0c4AyXVne9Zsulb6rc5lcIWuUCYJs1xaVU9hytpsw==","signatures":[{"sig":"MEQCIFlEt40i7aJZuGFby8izCfFek/yWg3dp5LBRtJM0jxgVAiAFua7xMSqbx9hm2epqzaw3svZozNrkWwjmC8A6d4IKHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6YoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrANRAAii+0zMhrsJFS3ddwsErdFhCdDhDwkA3xPgnfRo9SNTByA+Ow\r\nddNc9tVH5mVKqRXJvCxNnaRbAH/NJqVDUHZGsKZ9uXNarvOlILRgeJp5WHwo\r\nQ3TbUXQgQA3GEy6Tm+onjcj+EvPDVRj9O2X4ypZoHjnA/x3SE/dW4jyn9Q7b\r\nVniK5WZb++l/CgyD8F8pbQx8Q1XtoH4TFWGOiNrfb6Z/j6x6/LV1IkJHWM0m\r\nHOowCUUeFgKivDHBfKo/unYGRAI/JDpIH0lGjcs405+KsEf8+uUPS7gpnYM4\r\ns2rCe/flyf+dKIOqRPKyBbrUDuzExqNQRWn5RFo19+BjOuu5Svi6RpJdMlUR\r\nt7jNmlp4Qv1b3alizX8+xzQIb1g65L87p20+0GM9Z3mcM0ovKNw3ptH8Z4ds\r\nd0iHR2MxndRw9OjwSQ8nqdDOT4WE3aDml/fjkR7uEKdztTDkH9alU/g3Exfq\r\nXleWyICGQP878gjwNDTwoIWzQ2Tjd2Xju353XmXidzZ5mPyKaIIyDpsTkHL4\r\n1xp6W5UUL2/kOUwznkWOfTU5rFRRzynxlP7liyugMgdFoRAiAwkdwfyCTjNj\r\n2eMeL688hYzQAWEz8Tu3i4aQ/s6j7dB6bd8jOa96a/ep1bJHV1+XF6JDn9NA\r\nVAaaiCM+f1wUhjev21E2KhSAERvMouaJx90=\r\n=S0R1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.05fb07f9f.0_1669309992006_0.7425598609916204","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/typography","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a911b386b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ced4f1f629f484149e8acf48aa18f7fef29ba824","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a911b386b.0.tgz","fileCount":22,"integrity":"sha512-b0pXomvsL4r2QSxpN6MUCvUibo9ae3mx1g6yuWSTemyfb98QMv2YQ/ue3vnJ2gXaocDN8W1cykn52zxGrp/QtQ==","signatures":[{"sig":"MEYCIQDPZEqfDcq7+LUWckURoR2J/pMx217mR9VuysjOxt6SwgIhAIv4GZzztzm7B3co05HtClzzrwuhBBStvSirTjJKHqkc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOX1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoEg/9F0xCSHsAEe/BXhBAsb2Qup3k46fe1siMyoFMalsglRSKpLYE\r\nUxOY49XREYimdEpLnwDrCASTjb4XmTo63rSerkIBKmca6R1qRtvkOVxetSku\r\nNw+HmyoTxh1gaBZHIVWISrF/0mXvfuwsOXxvST4T7OpOKx0Iql2R3Gbt4tAw\r\nRSocghj0Gs9X2cUDg64HCjM5fwDcPp6MC5dEh7bl0YtHrojV95a5IbInH/8K\r\nP7pP06Wy0YD+4jADlaPm6ZDglloXrqF2PGbymFB1lwGcqOPlakfthgIzjEuG\r\nXQuMBVJliveDypwR2AnWZhAc7Qr2ai3YQD6+l8E6+j42WPowfobULBzjq+Rj\r\nnFDqITA6arDADtemK07UPfFVerNhy80KZAEE8W1wCwv/QSwjijyrG7BCTey6\r\nfz/8aKID2F3zgmNAmZQ1CXzSw1TTqzpYKE+JDpwZiTyWtnk8FSolL1Gcarnc\r\nfJ6vnQgYNHfaQ28W4Ie244EkFdz9W6nQZYkGG0b0tVB+CPXPDJBd7Q1bUj39\r\nZMABzWZ+/0Ctd1lWFp6jKsbR9ZMmDjD5Ci3KHCpvUB50kFoXmt/W+j5DNQfQ\r\nHzhCeFviXU+qZtJbkCJSfXp/xqMmX6SQfJa0OHPEgPvvxxhkA164DrAinv1k\r\nfWya1uMZLue3rDxWUhLlufduj0yajT9NJk4=\r\n=T2n9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a911b386b.0_1669654005371_0.3194136294033889","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/typography","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9674e98e3e1a001ba93224d9ee3ea1ebfe66996b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2aa8050b4.0.tgz","fileCount":22,"integrity":"sha512-QTV0xt7sYw6RogukRdnOaN/9SSpoO0S6LzilzGp/7Ma2OwvBhdqFUAAcNj9ea4Y0LobteuVoPoWT6HLReUaPjQ==","signatures":[{"sig":"MEQCIGgDQL1tg8XAeFMPJd/XDYLn59P9V8lQZgKGbtz1f/+KAiBo1164a82DUdf8loQbMaOdGmMYkICUC6OzfgxbD0Hriw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQfFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5OhAAnEae7gazJAPfFRgPz3dXjKhePUKhuyFrUHBcHZPP0Zo9QW2F\r\nOhJQkS+iwkvb29FcxnwDNKQPqx357112DETneERJDQtbuZSZ2iyIJGhHMNuX\r\n2ix8iwj5jErv6qrWAvNIivDeICKNvbdrwGh/EZrIJ44/YTO8psroM5y/vnqx\r\nIHgYJm8djEG+i19B9M5JYBdarvI8kfy1efq7ODLn0PjjdtwftxWFt696EmQ3\r\n9mG4SKgX/h9El5z1ZSIr75A/kvlmzfPRvMwfcNlz3i32w7BK0FLJMfYbFiL+\r\n9caBQWDaolzL4k8IhJGc+pQLQTIomBWsmF4JxSKOJrj7C9JIzS5Hzn5yhCHM\r\n15Ei+PRNAgQWDXYGItjszc9szvdrDbcKJQeWOu2VgUe8ArrcB6eUjy5J3KEM\r\nTtgzgGQpoFkBKwmQdtc0k5k9sExf8ugbmzPUeq88FnKs97SxNfYJ4lAqqcoY\r\nuiCxp7qYQi0wgttPSaclfnJx8I/mTbXaBOjk1jOBKC8OUnLT0jVjeKfuBwNO\r\nDwGmTmz4/ZSE5PPMBIu4ciepePC9FTLQkGArQe8GmbJkWh77pcXENXf/iVTK\r\n0uqcYeNfxjjBaU0IuDm9lEmPLcK5F62QIqIrIZ5RMRIai3ghZnzuUmVXSyrH\r\ntsDp1PNI7lnRiqdCr3unIxtZ1SWCwSDTjyA=\r\n=o4CE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2aa8050b4.0_1669662661357_0.5207414571544284","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/typography","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.323904a9f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"729a3412dca42b53323f61529f38f3b435009a59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.323904a9f.0.tgz","fileCount":22,"integrity":"sha512-5tKaFwzq9V13jMtXvaADj0O5yxFDt9KnNw6BbRLbhdBuSa2C94iPeFA9pbgpgAOIdxIdAWS4lNt3T0FakHbRrw==","signatures":[{"sig":"MEUCIQCuToOP/T/BZLU1xKVUkqt6xmNAQIsVU5JW0ZfUJHjWoAIgTabBa9Jl1uZgFCt6crtTdAsKLPeG4y0Gbk5OJSdXpC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMJA/7BS5VGKbm6Mk3tFQIDVtyjtRiA7yz93KNkO5XEhAJqAenUJ3F\r\nKIdkUXWRP7WcBROpSJyKpr8liNz8Juhua2cRCpE4dKT8dNt7/ncRfvGMdo8I\r\n6gGWCyfwCwAvZLRtUXvXOHV4V5IwJUrQb8bfkX2HbmnWZyqnO5A7zFYHfeRF\r\nY8LdTFwIubZlvHa6QCIDuBjzBrAoT4vLTI1xRjxc5FY+p/B8o30LBYCZL03y\r\nyfTUDgniPpcKsf+suXSNfrbBP9AZb0NbW7cQ65PQTyMtvhL2k1wUCnAadBA2\r\nG4De8dX5a6hLCxgSE6R1EJ5A/YgdmXtzy3gpylV0rRfdUJrzb2VhNXEBpuA3\r\nGsCH1DXX7aeGcolsXq8NYLNfUPf3ifwdfRt9/yAMlW0fFfLezYkhek8NumsY\r\nQD4QFdMphTQyKvBimiT5O06NU/SpKhY+gULcBcxoEwQ0nfZOmg70qmmu4926\r\nfD7KidnGYAi0WqmrSyChjv6sP9aRpWCZ8GUI/yHsfsAHclMm5rDyhTRPnKhv\r\nkYIwJXQA8/RuU7uwJCbbccbulW8jQEd76nWZovL2DxYHpKVRrZzGtExouy/P\r\n8UJKANtg3HEDpItEPS1fgPCKvTVUci4umLqkg1lynz94NTCNRxqnC4rQdvj1\r\ntr7x4wuEx70+ruFuXt+mkAacycmhmJuysX0=\r\n=lAJJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.323904a9f.0_1669736003098_0.9486565408818017","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/typography","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.168a629a4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67561ca82f6323e8748f267468a86a2959c98268","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.168a629a4.0.tgz","fileCount":22,"integrity":"sha512-NZDhUrud9nAI7+joHTk54gTuB+3abFiKM39VCkJc7tvRwQGPHpQIhG+fWf2uYGCc3CQF1lxPSQNLIetzb3xxkg==","signatures":[{"sig":"MEUCIQDPHLyh6w8fWp4XtNZf5qxwtXgeGVm9K7AeeupXLoF4/AIgaJhmHmiFxutDdNJyQW9rOhnKRQJTx98kNEnMb2Ih4bU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjfKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPHA/9FTGLrYyAk5VxAd6JLF40HDsEruvPGGNKNNYSAD+rGdrb5yN0\r\nV5VN5PhD4+YGn2X2iG5p6+SU6pL0BzSbKcUGB075AXMTNkk9xEnfHOrJ57ex\r\nylVhzep5Tq4WFL7Tr83am4OlgKJLUvSZgVeMRoo7yDvFB4t6UziwGKnr0g7S\r\nchxjr1Ret+GRZENKu0vVtzRZ+KPK8gqGWsvaB4NavWdkn4VG0wZKyGZTYvLC\r\nPk/AfUQU5S4P0znC/+2ObLWbEO2UPq1wuMAqhL5U62KrJkyISUM9cpC8Z+eo\r\nXbZhTgx5LNWL0LZwr4RHtfcsvbbgdbxRzXfBPkbfzUkqBhotukzYt8ij+sbU\r\nIaq56rF3QIGPmkXuhAOtvdKt/7ZMeQIgNy9vhZNx1ZSsa6PMSYGFFS0e9ETA\r\nm5dHXGOuy2rB/JedpMDpdEE5W/SVpNoz9t7DDWS4+eykn8fcQTCZHMXU579r\r\nJqNOFN/drlNKvUiIf2Gc3WMeDWHyaFguR3E3Kci0Fs7JQv+GFk+klLojPtli\r\ndmi/H0bhdOg1qsT0V9uVJUgG25f1Jwi1hjj+M/eFDGUFpgDej2ivyjo+f82n\r\ncRIn0yIy+xJ1LHNN5gZk3oj2YDJw/uZMuBTKyBsviiEu916CmEQGnpAGPmDL\r\nHSA589Al2q3IddYvMB1A9d5zy8Qg0CBmkzw=\r\n=Kxhm\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.168a629a4.0_1669740490735_0.5351125369640746","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/typography","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.65c411674.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cc9ac2acbef8f27e61378f4eeae5e155ea82ec2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.65c411674.0.tgz","fileCount":22,"integrity":"sha512-VL98iHBugbFN0AO4N5uIa54twNxbW4WaRumI7Qd4sYy/Fwr2gTODBATULBgn1yFCPKNCZs3VvTg4f/sAHoJyPA==","signatures":[{"sig":"MEQCIC5ZdTt8MqZQF2v/O9eZayZU5s0y2j1bKy0ESR1RBjiKAiAh4FjkCDrzdKm32SolOsHPrrbq4GJxw4W/8HbJ2KXMNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkNhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq07A/+NMzZS6dFdEErAo2naw3CkqLvYA0R1PGJznvbIUs9zJMpGoBE\r\nO/FE7pZ04RC0QTA/a3AyeVLQem2yA57XFqfVMprdBbhV0cdPhCP14541LI3K\r\nbI++Epti1CgRBMrEKvnJ0RXHZSH7Rq2JdohBe0YBERqaugNIfof5DkzdaQVN\r\nIV098oUJ3W6RXHF9A4WSB7tnWXTzcrAJl+XqFVxfsr/tUa8pOizojtdCx3t6\r\nqGGmh3Xv0vUM4ohxEFCxILzNb7ckb5kAEw5PBcdFjlwnGFPUUggAS2Ag+bKj\r\nbIebw+MXbw0TFIuFkvg+aZTeND7BVH+ngp5v+QCgciHuVNEyQYTxvotqyV+s\r\nQ32h0Qj/kejBnVl0EV9+sYTbFnNc6RM0WOW2X5Y2kjglMJeb95azcZTe3x0H\r\nGjNWGJGofafW3re77E0TydQa1WHyGVF1CsM5IbX2+FG0c3/tXEndKbRdoV3P\r\n88ffKSKJrhtAeYWFhx/WGYI4yuN0IontpmbS24MdNofkvxjCWPLz5tX4mMLz\r\nDPk1MZz4lNnd94Zj8SRN6NplrEiUs8L3ZlF9q3Q3/fVGuHdC/kS9qhoax0oD\r\n0l6qlIL5TTe9PBzvz6EO31NGDZ1M8FMLmkirn0SyYDMw6WJZoQ753IfO5DVQ\r\nuf2HGQqMyCfCkaD/aninZZmWJj7xNaekX3Q=\r\n=pjng\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.65c411674.0_1669743457411_0.25976933638886335","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/typography","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4a0a9b3d7134624faa5d584d2851918f86c41f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a86d36fd2.0.tgz","fileCount":22,"integrity":"sha512-HPZ13QwX7CAVUkYYwbUndlIA67FYxjLWpUEuwYZ+y3pfw7rClZHr94SxQiVVNOKCO0VmyO+ECq0BouNNKB/hNA==","signatures":[{"sig":"MEUCIBufe8t66WEG8QTjDt6M7o3SwEGLXltoq5621RWhpaWfAiEA3TAMO/vhfTlqxDP+HwtuyC8JmAkPfGtbFgTeUhBPH3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrxPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRiA//bsbcUeX0a7irns5aj9sy2reQ+VLO54PUtFUkxLKbXtDnt4Dm\r\n3pgkE2uDMbbq+WsiNyPwzns4emNGsC2s9FHj0VWDMOO6IZMnSHs37kYUMlL2\r\n+oGqks4RRjjOjSyLwj8Fl0E29o1hTIg83YvgkStafmCROrD58M44benXjyPL\r\nEvDU17I2j5bC30pZKH3JKh4AFEOg7/fGA1GrSdYhetLDg7x/weRCqlQjWMoG\r\n3zm2tjMjrDpQaua9h9LidhtM1UdxzIVtO4Dk2Cx7SszSB5kej+qFronITcHz\r\nW6Q0YhobhjvqT4NrzFEEkpQPs1uvvAESyiXKytnz+2p3p2quscWr01z8wshF\r\nUAB65CEyPAculMGZqwULBVIXhheN0YIqddA6Vlg+vUZlXalduATmFP0UxLW5\r\nLaqDSdj4JBXOwFLF7wd8mdEoIGGhsH3CbSbkyslv9L0kwJ/JMr/dUKrcH1lf\r\nKqqZC6sLzJldSZM2oiWYH4WiKaUU5Gb9SRq08scoFS4Of3lI0DwhNE74lA5z\r\nBr/CaTLQ8njIwKSp6a53avQIFO/QZHjJdAv803GWMdGVfFqEbIeVlq0SxHby\r\ne4+Gh+tAyrYTsIkSrla9GKKvrveyyPx2ZQziXhTxcQy/PImRP/noD8wjkuRR\r\nN+0AUO56W+MP4Mh0OLt3zL21YLa1OMI6cyA=\r\n=RXwO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a86d36fd2.0_1669774414809_0.31416008202453116","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/typography","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e34d08970592fb510238e0cfb3f09e9f7abd568","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3a1f46c66.0.tgz","fileCount":22,"integrity":"sha512-Y6hf+E6xWF48g99qWHwQRdrsVbTIidfHfru7FzGcmpCOnB4DVFsvLr+XBiWMI5smCb2k8AKWwoCSooXhesSbGQ==","signatures":[{"sig":"MEUCIQD8sjQ6MF81Nku98sDqr7SuCsanI3eXMUTjG9yUkBqhtgIgIpBEmkrLVAL8d40hURSIxfeLDd0xIzUhcNvHnx+vSbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0dAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8NA/9EkLeSH/uFsyXjxNuvNQRe3q1MDYkbgdW3cGe8K2pJgb01j7B\r\ndRpbVvrny3f3E+E1nNd23ioypoOfsJ/KElkp/mZLhuO+qX020jXhqdsMlRe6\r\nphDd9Iqk5aOlssQjn5hddS6O84NPnk2DckDCrZJtfPxPzOd9UvOxhVwDFyVG\r\nOWdhVAO/E4yy3VPQi6X2TtujOEwz8raT+IGoVVG48cKskdsfTAiet7CyRvVU\r\nVwtVHmIvZWs332p5kjUag6esUDr62Zxy+ekN7ghesCHzwRfd9YTLJ+lSwqMV\r\nD1XsYorQOn6/As1QSUwcLSAkH4C2Hi7z2HK4oub5hjLBXPqkRAEgVJjPdvpP\r\nDNIdZ8aNKdyEdtnjgMC9xOBJetWW1vMlhgAZqyFuihZ+63AfC5jZpcNOIB5y\r\nodPG/iaVzCOm6cOrnJqo+LumRfb3BgIsg/ZUT7iQPk6UsGqxgAokDdweHPo8\r\ndQHnuFeYjLoG3eTTxxOQQylZRe4Pc4zW/01NzieQbejplKzNlBubsZAZJ1Bu\r\nQjijJClGjWUnyczlPEifN9leED3bmKB6tP7MAQg+DUh/m7f2FFsYFznlQ1uX\r\nFgKyFMI8PFAgSAuzi9WRcH8mojc6AF+363KN4UHeg35LiChic6JBa9EqwY8s\r\nhwCAF/NnjacQpgpr+QkvufU9YpzyC6a6+/o=\r\n=ouik\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3a1f46c66.0_1669809983993_0.07208123816193801","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/typography","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b33f19e1ce313a41db34dcf1e6a5a7e96d0da1f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.32d8a9648.0.tgz","fileCount":22,"integrity":"sha512-J9qJK89s1v6fyP0TvETKbrzrZz26FiSFe4cbfUZKz038aAZFvv/Q1EKBNkIFbIQ53ri8LBxmwZvAmFoF4rBI6w==","signatures":[{"sig":"MEQCIDCd95IaWh350fxDhuxEutIWogX+UpxzWUL4ApYxg+yTAiAf/7nXL9iaCuv30bCFk5AJgv1jlBDtuxUOGSGIsHUPEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOQ8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1PxAAiC08Cx5UJ6DGo+/1RMuiVgI8Dlp9+MiJ57u8XC1PNCkpKT8i\r\ndqZfhkr2yg2N/mCNlTOu0GFliyoUeCow+OxgVS3nIPVUfMsbqwrMsFSE59ai\r\n2LBBQn49Og3cHeS4J5g97Ux4BPfilEfrAVMe4oIonDAvLurfT4B/Elg6oDPF\r\nfuDM9OVaUoCB3WKf9KoZVMbQFvnoeqpwWri18ECeLZYT4w11VhN7TCBmUGkR\r\n0CwGJhISBqXuEovWA5qbJ6Nqg9fs8ZvDwXxQqvvfkTwJk5yDdyuMo7s2HwDE\r\nkgH0fX2BS9rUPodOpC/mEky//pKlTvaTe9g/GGBcLtkHS1SyTntTmqdmilAl\r\n09Tg4EZIQXbh17yo+15X/8jIJok7Smc4Amr5Ucc4BAmz5bWo0lbH7NxjlRsB\r\nCZ49hZ5ztXGLO342k00MQ2QLa0gDIKeOTu6K+6GT8aCOsPrsWT57cf1Xnyl/\r\nDYvanbAeCX/kgDi3rRXU9kAcVvoGPCOULmcjd67KWrlqlWoI3IRTtmeFMYSc\r\nNUL7gcz30kuNFxUopWp0btqaFerXr2vDDe8beBCwoMmryFD9llNqSdXUqTWD\r\n+hZwmJau5GaP9FiEwuJru6LO/JaETuMo01m9hVR3eJeh8xWrqXPXtyxC+7vm\r\n8ihS5AdQywMDbHHoll1eihxhU+ryV6SqK8A=\r\n=oY/h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.32d8a9648.0_1669915708247_0.39777368595933593","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/typography","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.03618ab70.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e454d82b7d1eb5769098fb3ee77563a0acce613c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.03618ab70.0.tgz","fileCount":22,"integrity":"sha512-VtSCK6pCRBzKJSBnOYpjoHShdQEVOaLsiWEScZeypuT+LNDPB+n26pk3gGhzcP2/83TBpEs7ff+JLV1Wg4lEOA==","signatures":[{"sig":"MEQCID/1qTbBYWrgD1BfxcT9MJo4Oc8oektzlvTdduGf1yr7AiBQW51vJCZFyhJ/Tra902fPqh7T585e6OStgssg39NY+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTQg/+I/j3tJjCIaF/y/efErViMJMAy3hVsKsWVldgxPyrIg+a9H4R\r\newJlSNF5oPl9tk9ngLgpaSuFAIzVpMhCbbq7LMoHrqFzV/yhxRU2b3/H40I4\r\n/aDVw+4FFtoPWp58NWelPg8Yo/hvTHtadFrG4o3iZ4q92EmVNq3FgHn8fZ6V\r\nvj6JG6wu100+Yc6S8R8+GEBz5prbgwwT3sNPIdblXXoWblUvkNbibAbA3UlS\r\ntOy/s2QLmvXLuII9vORRNolkW/eSQLbm2qeRJAZx2IZgaj5/Q26Sb0CXUzDW\r\nrN8Eph/5hOKXh7h9avANqdO4PF25cQlRgRpZ+PNzKHR/MZ10q1xm9w8XBb5H\r\nttDuzkLOg33B/e8lGcUI2PpQVEcXm0d9fBQRqEdpZAxAh7a5qT4am+cT3awn\r\n4CthaV5ibdGKvHpLloUBT7njvfJ71Ihwzcwtcjn2g1Jdl338otZGc7zapANu\r\nxCq2pEPXhHAtUibjH8EWNo8iASa3vauK/qebl5PvTEg4EYsvh0t1dTDSGA1H\r\nd94T3FbMmI0RmuUjdcCgyxK2C94vSZGu3TFVbFtKfC/9nrZPTDsbp9vl3mn3\r\nzXR+G6YZSZO0Pffh2R1qQNfx1Yw9WaC33hWC1f0qBwwSXyn+h5HixKX6pxrN\r\njaolNR8alsqE1Rpec5p3h1YEt5b5GvRzLB4=\r\n=lrid\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.03618ab70.0_1669928035057_0.9031625278402866","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/typography","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.68aaed940.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"464d7370ad63d16b2d1a9144158f56f2ec783167","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.68aaed940.0.tgz","fileCount":22,"integrity":"sha512-dH/M5sXZ7Tgt/fqAKRBSfqsXYLLygrrmrk4ywIXt+PXR5mlDE96J4pWSgMqJFHh53Cc8Q+tCmdU6rCVgA48gvw==","signatures":[{"sig":"MEUCIQDdF8HrY+nZl0S1jQ1Q5gx6kJ2tZYF7KJqZ+WcLvgx6ywIgWNQ/zvGPF9Aqes8nRoDbeXVnN8RpApjoLgAzEWi6i8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRtOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDWw/9Ec2RcAzR5AGzc2Rc81zbji/sv7pWNt81BLfFW6ZjJba5EtVN\r\nMNjYvQyA/7eLB5soFfkAcblmEFGmC8soOX1gTNjp2krEXcps1EiVcUx7NzzD\r\nX1Vjdv1vvOQCjnX1BbVibBfHjGZ8xitz8vFUvulFPco5PeFV8S2vk8yoC13D\r\n1tRxlR0iHd/ADsAJStQKt6RKjs2vGJ6F4R1Ffp7IBPUbQjx7zwqf4DHct5tC\r\nN5PLfrlKAsJ0oYZ6a5iVnZm98bEXuBpAUpMT37bHzM/kHH+9VeqcqJDkrT3h\r\n0LvMP9vXuUHMMAajz4A+swyzZG9ENksHiVmswSIUM/qMrOkXglCvp2bvycOn\r\njJGILeqhAsn05d64S4UxE924RHe5N48B86Fu68zjnpNB6PXkQywdFF/O8hJB\r\nygT1aB7i9/Drn+3dj8TZmuObwHy9plT1H3gJUrVGYyTVomLLav0vnkIvmgWj\r\ngIoINXnfWP/96ylV1bpHzYiTrvrH9v8ubH5Zoq8EG+ViigM9O35SXfo9jpuf\r\nweueqlO5KHvdq/J7ofeEro6C/Z8eLNp+6jLI+v6TlK/qej86T3uElz2KQRhS\r\nf/mB45ikhisCQV2FtcTtdjU+qc+56MZCL3Ap7Dn5C4La6gTZ33gzhwEiIJil\r\nMVOR7ZZEBS3tN42DEwsXhhh1YGhbpKUISzc=\r\n=SH7W\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.68aaed940.0_1669929806699_0.07218582095854398","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/typography","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97054bc0ddcd158694bd155ecd9dc4c5d90e5935","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":22,"integrity":"sha512-ZqaX311K6xmLGoi61Bnec2bv/El2NIJQcVWZj0ojoQBA2nQFhA4VhAwpPtz2Dg/n3p9uJ+2QOBtObY67pjE6tQ==","signatures":[{"sig":"MEYCIQDOYWYGyQRK/JsekWLg++4Yumb/16gwvSBa1CzTjfqOvwIhAK+XjlasjBklECeafbHZgbG6GDLL0baBTK1s0939YrcF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib7YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokCQ/+JuYbSLhL+MSjqYc4auCoCY2QoJcg0rLiA6f/g3jmJlj1cb/1\r\nlGWi5xNQRVMhpfmgMYhpHAUtZkwItGC7QvzwEOL3fR9NDA8celnjw6QSeTk6\r\nYO6KVnWpNrOOpuubmIWE6gMp8LJcGlpj1w7LyAydJE695gFqQugRMl9BSrHC\r\nDQlKJ4XIY/Ox5RReUNDKud++dE2fqQREdQKyKcyT/wB4LNfIL7/BWmOBow2/\r\nhcR27qiIFHFF7jNiJgD1dUVEtBTiel/yxDxINR7Ph+iDFI4G6MvmsiAud4gz\r\neyNl4lF3STHl0vdwVpFGRseWpM31998kvdykxVuSIPDAeTvEnbcWJqu2jtIx\r\nFSbk8GP/Cz0WK7gjln2OKCtZSUNutz8E9mz9cAixkLq9Pzjd6w1/1gX/QuIV\r\nV+6qKu8ePj5QTlufqOPy9ZJqyNeq4/mFMz2z9fsvNvuQv6C8eyD2Y2Y5nJJX\r\nQkqDNg2yt9JmI91aQa0YoUVhtWoRNrJprdBR5xXpZk/+dbAViA1iSl6kXFqt\r\nzzs2tN0eJD/A47ZPvFSPJt5v2+Zo4NXDpb5oxK4MJo+133gVdhTnJN+DVtBw\r\n2W8V7Ky7jyDBkUJar4hL7lFU4g6gbUPOvqpzwJKhXrMqkhjkIlAoLddI7+kc\r\n5G4VHgno+c/UKwUl90s6pCkvnM0PLPiXOIA=\r\n=LQt4\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f0a0bbc75.0_1669971672176_0.12704084695457807","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/typography","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9edebde4a9c3a158176711a24d3ff2e49a09534e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.dd99c8764.0.tgz","fileCount":22,"integrity":"sha512-9gN1KHm0dxQTf1/9l47q8xkaEImufr0f5HCRqvg0QJrMGz+NzY+rNSC9gQz2ygc1OQKL+qTL8o8z0fbOXnPnNA==","signatures":[{"sig":"MEQCIGBzhJ4E023E8VBfFgIYhTkNTAbpzJznPelc9Ji4VEbqAiA5qq3gCXebgh8dgN59URJOBMW87Bnv0kRIjcKXpQfZdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigT4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcVA/+PheKzf2I7jzzlqE69QYJ+QcEL1Bi1xDiUx9/6V9e8z2+o/CB\r\nHfcftqWcTgmFd1hVrWNCdtoMBt3VkRn6V/amND8YDrOmto2KnQ8lsNM+SZ/m\r\noXPYit3XMEjlj9zc4A9GtDaw+C7yt7pkCMmYO+6dIP63aBbZG6dE4+i2ZF5K\r\nQZ3nS9H2mA0k2XsWeUacEq3Cb0cQL6F7MOznrCriXrnMJUWPXNCYT95057A6\r\niqQOUEvctMEj/6p9coQVDap+L6H9yQ2YjMfugQkRta2DlOsjIoxCQuYIwWVE\r\nfcslKrdnTQxKU/3FmfboiwxfTzYHK7AQPdzLsXCaWn7WF0n7R88Rxo5RCrXO\r\nxLHi5qPGuAjhHFr20HmAM4PVvbIrVvKyO4DQR6lVaYxSUeyHaBln96kyLzDm\r\nNPQ21XfQlruIG0dCAehnnIWq8LWwQIN5i164yOH7vqatnZ1+e8tSzXb07fzd\r\n5qLGPIHyFNfd6tvsxS99vIBv6Tj08VreeqoXE1DahE+R1AdKKQFH05M6r6V+\r\nOIjN63R1jBJe+T7xJgSsUDC9VF3buLKcrxX9C20kqsKqYjh7p02RrlPE3xy8\r\nJtZMaGhUUkfen97Oq+yTK5p76TLhhh0IKWlxU9W3oS2FrqV5wIy6AvmyGvuC\r\nXzr49JrhhGp2o1uFDATo9of7roqS6FiJfKw=\r\n=QXOs\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.dd99c8764.0_1669989624271_0.342086392140891","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/typography","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccd1ae3b326bae4519ec911b35fbf3b621678138","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fabdcca3a.0.tgz","fileCount":22,"integrity":"sha512-U7Q3UTeLg3LUQlc0+a2hawecxN6FbyZ0crqf7XRCkTr/z6mRLjYrWrFuuWnIK+vlpu9PN4fopNEaiddxM/+4/w==","signatures":[{"sig":"MEUCIBySouwNDuvfAo7s1lEbbWxTW1TPYh12sMINXzDTCcWEAiEA4QFr6z29tatBJfGu+1oB4QrE+qifdaTpxI2nGsOZ/tU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihRoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5DxAAiQW5oAnBWpu80+gnvsUNqZ65acmDgh9m36WWyQG35EFV5wgJ\r\niiBRc6XxR74v4W/YOroW5VrOyjjrfaM90gtJ4238wUaX5jnXypwZ4ynTDDWV\r\nQm3HtWyx7RDh9cejZPoTtQwH6aUi7VtrqaCrYt87Oe6rXXPk5aN6gB/kAd5f\r\nVuhcX0sEBXa9rdFuL6lryK4anbbHAs1zPDkj2SGPax937FGSWg/M7w82OMIG\r\nuFZNsX0c30spNT+zK3pctz0Dl5trhooXxjjlzQ/+5MpijFpIdRG06BoraC3u\r\nOd3e9wLoAnxTibChqkpZu7wy1PnMCfRWBLPlVao34s6rUwTkdBP82ojfFG2M\r\nBtkzKaDqsbWGMMhDXVci5pjlmoWsTioIvSTVbOV1KVLXAFkHOMbFQhfwvseF\r\n3JD5G/HRGjCxMO+G6KyRjerSI8d69b+i2W8VYPOVyw1X+hYanXzCzfKaWo7G\r\nkb9wvffBdsXVIqxYhgN/6POZs/4NDXO7rVfZT5cLxkcU/5Zwv1m5/YkLeHc9\r\n7hdHWieZ8pydckkwP0/E7imLKOEcN5C5jzhsiPeNHeZkh+BDU09HshdUeSah\r\ndt2RH/AV/xuPJ5j/tNGxoSzDZCP9rFxicrLV8rDbl/lxosDPSs2m3gI8VFJq\r\ntPjR4G2RjNs37m5q9Lo8H6zv+pqmNA1IOKY=\r\n=4dLt\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fabdcca3a.0_1669993576496_0.8859017453001208","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/typography","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe4da4364af7ae3f090354ff0d7f6ec75232330d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2d26722d2.0.tgz","fileCount":22,"integrity":"sha512-QLoYLU4MbK4ki1NdhA9dkizSKF0ctmzcPRWxOUoslViAdoY9w7qyXL9xH7KRR87B5eQ90BXI1sLTKIh6ZTExrA==","signatures":[{"sig":"MEYCIQCitwxrWbpOhGFm+7jmTGEVYR3+XNJsiPpvOqR9XOIXLgIhANDFWCX8hPd48dWMGW7dNmKrAJKVLUwubRn1LgnGe7vM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiicSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdzhAAixs8a3XrmN5eAfwqKX8rYqKuEBsjs3iM5rZ8aBwvQegr/ZuQ\r\nYU8zVygFPKX9hp5sAuc/Bplp/uXSkxbEIt1o3W3mJPUj7k/dDOaVTL3Wdh5R\r\nMw8b+ickO+/xrUw7VvP+2qAfCnjpNIcjiybF+haPBfagPOPypUweQJqV+v6C\r\njdt0HeFrTuP+OFiWf4nPczzaZrL4Z/c+hGV3tlBC/7gvvpLVe7ruMbdibKHm\r\nWrQAvramYVutoTjXmRyvC8k9wL4KC1liKrDEW6t0Lqrqsu7/MuSeYozlGcik\r\n9SPEr+MyHodk8FpeITtSzLtC37OtJ4CCB5uvFJNnePg2Do5JJH61xmtIzES0\r\nTXFNbeL9OyKOTO7krSq3uKFD/hRaR6XcQKB39vtq50OTVuS7u+XCgkvxN3hd\r\noeQjCyBlWxqQkLWK57lKEo6+9I8B/M1XrpCD38X3cf4FXvAYUm9r00q+mlSR\r\npenzI3kWM8J+nEttxq0+2VvV1n0lB8Fw6QpqQVOFg5gNBcApE3TRMCcIfecB\r\nde58nKHoikTJ/wnrdurBoBcmjS/GRFuRYs2tVoWQSzBErIQMEwHKrRWeaYPJ\r\nJZojLYVZ7u8Dvt76NmmagoRcJkglp2Hc6LTUSvsNQ3N+xA7QPFZXq0MMNPmH\r\n+Ov2R72LD6n63mQd4TFHff2UBeZGV5aL6vc=\r\n=iVxY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2d26722d2.0_1669998354635_0.24731848180872018","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/typography","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2c9671ce1a0c1c729d0658a3d946051cb46e16c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":22,"integrity":"sha512-WBYiBxHtpdFemq750o529cShm9xEmmLO8vkwrOZ94LM74PSSwj0yzN7PrKNkpNNCKqXLyFnmADI9B0jUfIYnHg==","signatures":[{"sig":"MEUCIEwMK6ty4PasIYKg2ILuc4gI0VORGxQVQMnskEz1PDIAAiEA9hHpWPt+ddAXfudIvTAqms5R/JMZecKODHMeQJsBMq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijjqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr34Q//YmuM39Rz+OHrMy+SbwzGINVL6k374nqpQDJ95bjaWUsntKRS\r\n8eOA2jBSqFQ744W2blK4dAHgWdAYhIqAsOMVe0koRwnvaKSPpU9H9ms8c4VW\r\n6bpTKRQ12fQ+pnpIqkI5/1gexmYt7miXmuXst8h8GpbMJ1KGwlDlq6TWKtEa\r\ng+NvfXZ+9zbb+GiEiYmZLHC7nJqVTRD2V4WFCwAje4FeH5kR6geQ/WTRPkFt\r\niTeGZiP3P3k8AS6KKh0SQ0TLBv5YRGGchDEmIs6HXGlU17zQ1kK+4hoHspHQ\r\nnO2a9JP4IUAYWW6TSYYCxP6TwiM1Ao0f9HdH1Vlv13Gu5JBVhiSR+XqNhqUC\r\nzHofRygIFCKCzQu4G5YqnrUKS3YCGuxU74TdiuXMV2awUZNxF/K64CARiRzO\r\nn99UZT0s84beYGwID0XYdIm+LQVk4ndlhY3cnLy+oH6ejWm5K1B6VAk4NRVu\r\nbzwfcGrAWwSaJlKUtWxezTuCdAA60tLuYMt0gv+jP2HNAhn3AIXboPznVWWc\r\n1yAmBhCLDk/e9QWIDxUMr0BpPKuj/j3BlW+EYuVwpruDsj7PVAUVBOlVpQbV\r\nGmJnDOu1lxRD2glk/ag9JgqxfwKHeWzYjtC3xgLbqNTi0OIVyXZbtbJ4NMky\r\n7fuYfvfs6uBtJHDXpCeGI6tzvIbQcjYfWCs=\r\n=5IxL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.eaa0c3a86.0_1670002922277_0.6451918074808611","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/typography","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a61bf5e3ad4c0b02433a3761e04044882004adc7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.79a613bbd.0.tgz","fileCount":22,"integrity":"sha512-o4UAzfHJHyjJMDSxammY5OQ2EFvX1eFUgBOvJfbcant4dFWfdiZD5ivqOpIszKdImQiEHnu2s4HLDwQIcmDRLA==","signatures":[{"sig":"MEUCIQDlz0gBQz+IosrqJG4iSfxn3zdA11pCESzPabfc5DozQQIgS2fgJj0glKN9Jzr368jia+vkQl7b+c3e9+hpxmswrT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1DFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyGQ//SEEKa0Vnf3NtCf6Tu3OsYvptZyJ7D+r5GxQphgEmbCX5Q/nm\r\nQPYZl4qlV4Pqo6Wc+nJfbqS/FWDnqJzXae/mR7a5e8ADWVnH6H4k923gMPI7\r\nEszysR8x2Sacvc8S7P0OEQ3bMX+uxuqCBb2g5ChVuqZG527LiNr3O5SQQc46\r\nT9VrYeYf7fxf2bxDiBwUr1W+EsPH53WXMJYku8IC19Ov4IF6P5ZMxz64ebeS\r\nhATz6jQHr1o+FDoA1WUddXQwizqQGcoLGZVsejis2cGAPXHbb0b+qtBHYx3j\r\napPAz5uYIonvTDxGZY1hYFlOSwcR8O3E0NKvz4cGNhuqiyjZ06qUldZXxINU\r\nvRDzmlAFl1xPBFhLyMzNRLJEtOrRCBVfOQaYXd3LE0osya/cxtIAWT78XL2c\r\nGdIlFeAJa7VL1KMy2qG0Og6ohQ8xYHttVe3733FSN1hQXAf/lYGQlE2HKpBE\r\nJWZBgE055a3x5++J7OkwJFGd2h5QsQjAty1VI8kpl8G8+mVTKVTXexjpYnc0\r\ndDyv05UJJ3AYdYeR24OF8anIIgTAjsl48F0yF/NnebIniGwOglgWVYCYci+u\r\nbt/N5TixtBochwIuCl6C6/QDT8qzcxw3SA2BWpApK++Rii2EoJKxJYQ4Pd5A\r\nlhIYESRA8uXu/J8Sjy9Qb+4wsSsYDxLYL9Y=\r\n=lOFl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.79a613bbd.0_1670336709637_0.8459536655880979","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/typography","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5f6d5a237dec493998dd00b26a4ce063cdfc0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c871fe61e.0.tgz","fileCount":22,"integrity":"sha512-qag49kE/EuYW+ZIkFnzVULtQZM34ageNcVonndIX+XNsiTWTZk8Hr6LJ5lcQe57QEpKGs5b3P6/TNlDi6Gurdw==","signatures":[{"sig":"MEQCIBb9rkHhsXS0AS410e0KV2qXsMp3Y6puUOFiPyD5hUhvAiBw4e+kXuxvrVKsvM9Sqw6LQA9CWCcATO8fqg+sHrC9sA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEX8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv0w/6AhiYRSw7ulxHPfpKL3sm53GZv21M0E7GyyCaiFtmN+hei/AD\r\nHfYGE9mNe/chpJcb43WjWn9v+inmltCS7iO7visUo6N/nEuDdVw/VTHa2laH\r\nU0Axph5+pL9u6VgI1bxAqXlOZcI88d7xZ4nJPYTU2N1LY+eqmK2zpiL68KbA\r\nfbtckTrF6T1Zd83uqyPXtJ4czRAXF4uLAHVfVktsBNcpx2IqfHzDKLK4jqMD\r\nkgVm5Qpxwa7OhWsD/eBGYVIsKRFA2TCHHO/1RrwL0n/HCJrLete3tnTkJLm8\r\nOikMdXsSFFagmD5AHWxg/9f/Inb38UBgWlxv97wcVLWWqJ6knlPXLE4ZYv6r\r\nBAMcc9r47z4S796yQiCdbP7kTcz072WWPWzGQ59lFuP6eeH0kn+QI3Qar2lB\r\nK9ujYVzatFQA1JUWXGFKCumd4raVkCSX0/Fzgs6lrCjZOVlvNmpKe9onbyQx\r\njzr5iQQB25XjaEEgVhIgnTxt/iRWWdWcWcbA6rUDhSz3jHNWpxL1ve7Hg9My\r\nsdsVl1YYxLNGXYvFrJ9FMS8hQeR/6lAKTgHW3WnPzh0QNW6zSPjS3f/bBQUG\r\ndEjGEwIS1ZLFxW078oncbkXNz4VALy15NqFM1ubL5vlbppu58lM2cWXVWm8i\r\n5LjVezy/hwaefK2GPI8oS46p8FaOD263P6A=\r\n=eHRB\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c871fe61e.0_1670399483864_0.0754907960689426","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/typography","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ffebd93f9928b3e83ce135cb4c5e89a1b09145b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9eaee7936.0.tgz","fileCount":22,"integrity":"sha512-EXFegAygKM9N3RtwseT0X/5nWurdYEG8DpNfdppi5kYNzOFOcQunN2Yc0zHZL1x8YB+LG41gHF3U645PlotsCA==","signatures":[{"sig":"MEQCICD9sSE5prau3ixydzzuYVvw2gKJTybaT6oZJsQFusXCAiA3hjBjCED8XoXdqekmm+KwoQWO20MU9Zq20Gp8b9BBZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPFJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzJw/+Nrw6oWYtHHSMjM2gAGCKLEHvXAZFEldpjj3ymXHWZvOCwO7N\r\n1s7ZKG8CWMBgjZKa0z2COmfs+YD/wGs2DzTtob+gefQlXts5W6b9XqgZJrvx\r\nbtc3CQNyrzMqDlCGZkZMrwwzowh33EYU79aGVuhcN07Qwork0O1XCxnQKQ6D\r\n4mRgXiH/YLLCrIIGNugyvJagbutC2UTCB7r8Sy1wwEoKMpwk4jgmz7MCfaex\r\nfAWcYdSxkgjx/Vdi5auNmQ8p60px7/WGg47gFqgCVztnkqrmoLqQfwGBvecr\r\n1n+FVIRzSdtcjNnfw1cBd8NKt7lJLXTTsNQ+49bW5SfBhM01fcaDi33WfLO7\r\nB0UMNnxGh3rn9Dyh2ERUAJul3jzZZInXDHz0wu4xfUwEuBCx0uv4KXHGO4xd\r\n9vmawP0V0VFIoj3ZK9CNXav3U6bQu9vR7BrIZsG4eFAXnheB2G0DrQWxn/oR\r\n/lWws7CeR+iH/lVe3III2e/U1OltFLkcPJGZ/s165RbEv79Sr11Yf+8NaSIp\r\nKnhAL04Dr5093dwxPWVsvds3UisXNA/GsG9xLROcgwOwHsGKOFAgVYY8QcAe\r\ngtvhPqA83oagACYo6rrSnudCsE2oythbED66MDEea3aTgqBi8mr9D/RGHSWW\r\n5EAQQ7dQJoeF3UWjaxKajf6HZSYSl/i8874=\r\n=pJsE\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9eaee7936.0_1670443337098_0.21296354904013048","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/typography","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8949d85c962ac593f5471486c9543968f58b4340","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1d37bf601.0.tgz","fileCount":22,"integrity":"sha512-iZMyC+Z+YpJG7AMfYIa9FGR34aIScXQy1mmtU0GX+VLkPQkRt5jZeUS7I8Q83ZBTz47KyiSq2x4UdTd2awULog==","signatures":[{"sig":"MEUCIEpTx+e2XdrqjdBFQNHPKzhiKjnF7g7fntqUcKpsSuH3AiEAiFS7EOAUk0zG5n1cG/DMjhhyNiXhK9K66fbh7s8ZAkw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPpPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqllQ//Qc2x4B9drAociGmjkdPFZlN7S7374SveWbBnVY7JjmMSpqgX\r\n09BkFxpzXyVntp+W8LDgaJpdWkmscw8AOJW6hq/no3Lh2v60u8PE/XHlgXqY\r\nMENxiwjYM7jWWNC3HoxMsNtd7GR0higbkrmCdevKA+AjQZ78jUajV3b6V3+3\r\ndVEtMZ4jSD7AOQW8dN9BEw6mdr3Q1h7lcVcmeBdRMncN36XiK0ITkHH5so7j\r\njk9Xtgl3mdDZtC94PDgFF/bHp6zTTkase2LEO9X6mCZHt1FCxDPe9nNtKo9m\r\ncp7z0o8QstZvYxDYLEi3eaWMtbnO8mAS4yXeXiuqjH0UocN8TkLfUfcsGDCV\r\nMiHVRuR47ABFdsqFelH+V8l/+6hRobf7ZNz5d+ZK8g2fsC9YTECgux59okSD\r\nFENbX/9SRsZb9D23DureMPGbAaEbr1CMJBsBOSL2kEl5pgEEeZD3r81bD8K+\r\nhkBd94Lfkhoqz+2rZ+EEgtpCGIcxFSAuUieeH7xzBoImaM6j70W5d5oqIaX6\r\nTWVWDhQt04+2dp35OudUsTwLMZrfQq7OLVChTndzrqtxieUOWvwi+NXM5LkZ\r\n75T+Gmy0KVTipy0rrR4QwYvJVUf24jXDiagmJyoAn1Mx4zmtDOa7W+b1VQx0\r\nDrevhDDiwHc287RGMpnlAeFDUiozr/WsGhc=\r\n=/ber\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1d37bf601.0_1670445647650_0.05772736989397198","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/typography","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2beef12938e3d783f3f9363f9742e81820e9db2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a5fe069d5.0.tgz","fileCount":22,"integrity":"sha512-wuqUVQUHjWlw5bSevyTJK0g8vImzXhZeBO0ePrOw/WgieDSVWqY3JW3QQEJde+ZyOhONR60KRMrnXgrRDOywZA==","signatures":[{"sig":"MEYCIQCw0IYD7Pa2lI8Dedv7YBGmNkMN1FEfqe0Xm8aMnQ7BEgIhAKCgeVSdfqWFc0RcDNSQHfZv2aE+C218Ez5cptvwMu/W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4HYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzEQ/8DIFOqw844wNQk285snOUtyLKL6rxD1zMhHCOgqC6S737PhiW\r\nd+g9OVuFh8eE2hLD2gK3D+xx4P2YmJ6q18QnUbd3zfxuINWXS4oFKoD0p4Up\r\nirtRtaNsAxLxu3muf/lbPxKWIAQ9qr8gZS0UszyZ5WDWPDMK0O3G5fWKuUgq\r\nPHscZMs9G0HhDZF5Z6IEt9Ie1uMRJW84wBsgYtl/UQOCxIBugYtZpr/zQWN0\r\nEwMQZvsUnFjPpLgInDTZmQWkvInO8q3wfEhAitvasjhajIA/MHEPYyMJ7beX\r\nj0N0ogVaQ6o4D0T28Q9x3Dbx4JkPCkl1JoQV/ihI16c7H4l+Os5+ngGD07FH\r\nV9OcdgWzo+tQVw/QKt3e1Vt5Ph8/7Wbg/xB1pk039WcmY+zpEinq7CeNRIQM\r\nhCYiQuieOa2ZRKUykJ93r/H0LwGn7bhygSVlZM3HxsKBQDLtuURqMYRryYrk\r\neHj3lYcNZSt/mCrQgBr660IDzr2EdnZPmwwsPl148oUSMDIsAJ9qk9ScvQjw\r\ng26wN3PbZubf+TTZFiOpYQYDLeuJxyvxhZdV2VdzBgBp/YH6mbR9dLTJmhH5\r\ncy04b9EsyoBlduegm9lT7S0j6OJDCGbjOPigq1MICT7boLgryWMLCN1K/hDh\r\nT25GE2ImGyhYCXjXPdOHSfnR1e/zFgqBPFQ=\r\n=8eKM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a5fe069d5.0_1670611416647_0.595355732633039","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/typography","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"295218f83728a7c7b58651f7b728588749ac8746","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ce8b5326f.0.tgz","fileCount":22,"integrity":"sha512-7ZeWaoRXd2klL4wqOvLqNgcLx8IqxVOqb0SdOjGOobSRBfXWn1QIoU5EGtYCGCcYXXQDODP9fzRKNzJ7sw+W/Q==","signatures":[{"sig":"MEUCIEvf6mUqB/2Llxin86gsauyUKQ4uxISSMi72KT77eTefAiEAs0vAhSk8YsX+OW19/oTI6YvfkncY60NHmUUmIPQLLvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8UGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+bw/+PX6wrYjWroT/3ofzAHz61nq+Q/FGLDsY/4M9Qw97voAt50Ki\r\npc/XnMnP8XUdRPRmaKYhUHRPtAMGs/f9C3PRvl3JAlasXuWjfSsWCE7oxgbv\r\nvFU+fKd3OLxuK1VHH3g0WIYER7Gz9KJjlbPIrWES+mffguwhwd39YJlLK/lh\r\n4HSgfr81ZuWGmXsOBfa09AD7B13N64hoEPOvrVmbAcYDCdXPVNZyOnGgW7WD\r\n+1EENJEfc2RA4y+VAJpEK9LK/AIoJB4FR0QxmmIwqAC4+pDlvz88h29aBkyf\r\n8aLYejV7WNCug9FS9c20dU3RqV42uPY7XmS01HLsMHyuf6UXMQ2aZDGeLt5O\r\nkk4oTDmxJe3p2n5EmdsmdXyRcJ6BdXWtSiXmqq8zpokZNjfiHHSUHRn3ZOmD\r\nNw5l0zeSpaIIa3XTq+pSGLcYsFWokmpM27fX6pFWsLrt6hvqJs1W7/Xuwnd+\r\nDbLUYF+4MNbW06JdP/+C6uMeRiiOkD2yypd4CgKu3k4L+itz+KNSCsxk1MX8\r\nZAM63jXCw45lLoA4xPEEzf5tvOhsqmRKCYYBd9T3+IIdDv1OTFHIOnEFNf3F\r\nITLcOcsq4czBXgtwahCjh0MWKBd6e5M4iKqh2ahPA4Uq8vb4oUkwG+f+MigE\r\nc+d2qiYslwogdKdWt59XcT2r0JRZRqmzu2c=\r\n=YOvQ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ce8b5326f.0_1670628614379_0.035723469602281455","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/typography","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a4e83695962d60ac1ffdd1c287b021eb57b046b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.43f5323bc.0.tgz","fileCount":22,"integrity":"sha512-8iqEtzZjtKfJm6A/4Zq2LAmyWa4abgxyA/ms8NLZrlfIDom2cAn04bA5yZ4/Q/TVy832STIYhVUBrJt5GMOuUg==","signatures":[{"sig":"MEUCIQCxBFwLjD76zWHu0ONhCaMTXSD5nLsVU9LXg8jG5yP9oAIgIcdEhSzeNbM4GLBu+n3d9vz9xdZ9Uy9X7XOCzge79Do=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1q8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRHg/9FWe6VnO4gWKZ21qIs9QWF59ZoJioXJO1gAjranrP/Jr20RSs\r\nqapzR5vI/548Dbv0EFnrHORN5Pv05pLxvTpSolPt3Q55xEWv6LAKWDsjF3kB\r\nnWlunyt3FRJnnFv1YocR8G01HrcLB7se7agQ981+IcX9n0FvlxOgVuLF0/28\r\nop2jC86Nx/tomFqQ+QrrVcm1JvJhxBLMgZ5PpfuAND1/ZNUvjzEqqgXFzjp9\r\nWxsQrlGITFTVyuuXrEdHJmp0qEUvnpOke/ps2Mday+VbUFjVn5HiIjFW3G/8\r\nXOi3taH2ufHuGcYRcoSBWXpBi7BnYdoiCbqYuXsjjDVYkVphH+GLg4Z2tAwg\r\n2TH3oVr7Ke+cBkhrDFXTAAU2tvIe0HKpgDBEGoM/EtnB+MdSdVxZ6ju9uzbv\r\nFNzMfLcyu8ioKnP9M6fjS3NwypXLPJV2+0EmbA9dZrbz9bVrgN+YkgSIiW5n\r\nTNK5VvKtCNU5HiSIIAk7RajaRlO7MJHFhfS65ruRvqkEJf5sAtfrr8CKpWU+\r\na0pH2OEg8TM0o6rDL+ikY3av6lpyAUUuO7RMe0QZN/MZuuWuB7JZzFweq0B9\r\n8K3nziBalcYbpR0Mx3tadWBqTKVBbi93+ggbk4CdindSkTiKDzsRsTE0P5lM\r\nWH+YVfshqSOv8hCFyls8yQLnlB+RFt1cU1U=\r\n=6AT1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.43f5323bc.0_1670863548226_0.451205317408389","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/typography","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59a0175fbb3a2cc750049898bf4658beabdc6c2d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5490e32e7.0.tgz","fileCount":22,"integrity":"sha512-4c14qiRFyqpHh4r9WNewhy74MmCGU3ssLjLEwfqnwOxze2V85/xdxda+FRnWeLVH/G5/af6ewkQQWKxUDvHOPg==","signatures":[{"sig":"MEQCICgR2j/thPX6qXPA88IfFnlckDwWfE1tkAs6JJCoo9vTAiAl4fe3DD+qzwP1a3RJ4hrnIVAjPFwI6V54uMqYJ4RmHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl15uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX5g/+NuoxM0oUPwTLS7uy8YLNBA9sMQR7rHziFf8/+nDUPclPjDJ8\r\nNmBTt8cO+BGiFdSUGvigLFEjQ55L6h3RORDLLXd6Z53tLLFLIFfXpGipjWVW\r\nTD4RgMTVT3v/4M9T5UquTPlz6nZ/QsovS6lqh04bZWH0UT4gDO8vsNFfifi5\r\nz3DBlEd22djzA0TvVgcgvTmkk/hnpotU8FJKXJbIX2WnLUsv4KwZGRhAwHT9\r\ngiPBbip9dBtV3u3Yacw+xT1FQVd1cG74Fm+kptJnEM99hv62ebZOQ0Hgi7Eu\r\n3fLJyKjgAe3g/fRGdIfiY4f0yVyYtxNYC4ToKCpU9hJnNoW9h75tp8s/DBG9\r\n33letVCNQpf2CQHWImklRWjdfqGoNKigBPD0ogFLTcD7HJypCrOECATpIzoT\r\nxACEY1kIYSXnIrO6C1fkFqiaS+oDNE5HReFxIaHKT+W8buWqw3J5vS5hKP6j\r\nSat9iNf7+YcjbZyBL/ehwobPnR5H5HtuPYFLKzc/ziYLlAT19eAPM5WbZXD6\r\nlIGBtNL9N5cg1Qp6KuTAksAm5pfoyWbrGbMAD7/t5dFe6UNRgyhy+L565xX6\r\nAvgX/ArSJjd+9EUXn4j5SEUPy2vahQpxxSjSsEAPiIhCbAeqAlbP0qp6BFck\r\n1tnN6mikONDKPbl0Pks7ZlUh6BsOArfRoXY=\r\n=re7A\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5490e32e7.0_1670864494528_0.5651470670502132","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/typography","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.817002c29.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"453bf78345d09c593cf31b9e722c867cbb22a88c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.817002c29.0.tgz","fileCount":22,"integrity":"sha512-917Lp7xubVsWia1TcAVQSlz23WW6HeWYAn0KHBYau14zRmH6jI+Yt7E96Y+R36lJBOFN25kIyAD0OK+6u0SMpA==","signatures":[{"sig":"MEQCIEki024XTM3bckh5uyLmPC5uS7ElLE6nibqstFz1GRy7AiAjRtYEFrlC4kpRr2eDcWmXN70K31hQaKKo6cM46PckSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfIQ/+OU5kuMVRiPMM2NZT58C9RNKAogFdCKdFZ5bPmQUpMFLjEfRU\r\nm2VK2wGBmUmtj59sy4zTr8Jncq66ZQaeFXbzURitmqz1b4rIvNv7FXcfjg9P\r\n689VQkdjFIAGi5ybA4BdJaGsvs0wCk0l5tmDip1y+QaTaVr5SJU5Z6OBFll5\r\nuugMVtf93GwaWLXhybKAAooV/unqp8JZmLzSjS9/zF5oDQemnVlOKlzCx2/p\r\n4oMllQRVPYkBOVAE1cpic2MZo270hxx14Ik76yRfoUhVCxChfYufzNwz7zUy\r\nGRynZ/Hp/XoEjzcdiJIB5wITIJmF1lQ/4cVNibHe60o1VUmSVV27FbbggumV\r\nnr3oyfRNBO8vsOnGv+J89n7BQwppj+pwnJAnDYF/ZS1hh6YN9XhzKO9adoVk\r\n0nC5oqT9xZd9oU9gpL+E8i0jxtQDy0rxrZaudHYChGhd90359hGQbVyUZS2U\r\n3zLS+ccgHRRbCHPv2O/J2THdbXDxrZqDykO8i1HP8V5m7UtKwIbetxQOMtYP\r\nUgEBUAftrDQo+b4Y/x6JUXqBj9bAbC4pBtX2uwtaGfQif5V8jZ4qJMjemEo2\r\njrQGvKhdn5hZr/jAmDJ89doVQWT8gVNpqqCNeINUmbLVjfjEv/Pgf6VZtbAJ\r\nar09jOkFpbNnHnkLq++8G1fm2a2iu/cpWKg=\r\n=OCUL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.817002c29.0_1670968405040_0.26981947287637875","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/typography","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.313a1326a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"455be841c2cb1937f7774f7a49b3e50744448bf9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.313a1326a.0.tgz","fileCount":22,"integrity":"sha512-hUmfeRu7j25un8Y2/5GOR91Mi+qJLlMaLjW5ITjdIDJ3ptwTmRYOK0RNLsiXDtJPBb83Qk95RISgCghDNCE4iA==","signatures":[{"sig":"MEQCIA013TUPP8arUGn5CSoxAx7h+WKJqldQPWP+LdZafNx0AiBxhTLzfXgOll3oxFtAeT5GO2sfRicDzGB5QHBAwDRQiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaU9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0qQ//ezvzdMPCoiSSa8dT2gBI0dKwKyagoNQjaxtb+UIDzb6M9TMY\r\nCaTyl0rGq50V1h1tszijer7haEQCtn658xTtKWfpErY2G7ZzqqQ/0/VSHyJc\r\nIWN+WN6SrtW0xARtFXOOTFm3qnzT1RwsC36jZRHj1uawhOX+FuJjZ/zUp29a\r\nQ7GNPY+LGLyOpZIR+Yb+cW3xFSwnmkZ5CnAomPO2gKnXaYmACU+7+RsMgxQw\r\nvMMp9fWtymUaAODoFYIwPOVgsRfBxwLH3G4ICWdBwkHVsjpaLjfoRTHhHv0N\r\nEMtlU6Pv1fUPSgSRlxy7w8n5+jJHi27saczgH8HB8u0s04g5cj+JU744oA1v\r\nJ2ufTNt1g6LKgc+eTz2Z9kJvHQ+g/KbV5cr098sRoi4gbvVlOjO+dB3uzyUe\r\nQ8PlUhtcKWN+wmgepZgD1sUJhXcLHhmhp7asGosocp/C7+F0AQCk1nyBMwVq\r\n/yrhQsbq3eswBupT1hQ3wI2z6QsAArfUHIG9/geHKjz8Hdy6ZeILR5PA5yp4\r\nPgc3d44L9zDQ+q3BS+h1krxrWSHtnk5mIYjHasSG4CRMGpWhiwVG+EbNq0+E\r\nXG6fpprEjG4ZqJ8dNotMQsan+N7ANmRWzp3WTIg5Rnl0D9jLARlmS8Y7RKGG\r\nlDGKHV3Y2rV/hWE/ivs4ZbWRsBZZ1BdgH3Q=\r\n=uTrl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.313a1326a.0_1671013693647_0.5283467319986213","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/typography","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8db01c30b6b7a8ee122e4938831dece801803e54","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a69c14e10.0.tgz","fileCount":22,"integrity":"sha512-gS1EkrsULZz+/dekxuYO0ZpkL+DQEsqL747q8iB1nItbhhR+c90AiIgtRfzMwIRU9iC9ywTep1z+SFUTDQeeOg==","signatures":[{"sig":"MEUCIQDGDUpSIQSKXWD3bvV1KhDWPW3exkUd9v3NX6Juf8nMvAIgZ0keQm8Kc+mTHzdakBY9wtwKjNMLtfFciHXN7h32HFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbD7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJDg//XeLUnapOmgBifaJVOrIMYIeWGXNIKjZJUiVorRyTpplev0n4\r\nvHlJim3CRDkT9HLcAUBOOfkXkrrTSVgF4RAS4555c8pbrQCbJQ+gxsa7GeTl\r\nyLqrG9xr2/uMVwF1ppmtOzJfx/e3fV2KTWvmWECBUizpfMFwOu0TIZ/tAcE6\r\nF0h1qN8szAID2k92eq8GTgHrp0/bUkSigLuqYRaDY88Irk8e7qxjfzvCPj7V\r\nB63QfeVfsxZnEiQxiuGN45/9ABo3dXa/Fn8IFACYw+t0/Cpgjlj1Dt8K0trf\r\nl56HEDE9T9MlXjkIrX2NDZZhxRqi/TTa3EZfshFXDyGiyC043++FvXyf8+aZ\r\nySRRa08R/fSjUQ/ul1sB9qL2857JgZxG5K5DcOGL9FkxkBzIYl3RIFOVvTQA\r\nzV2RNEjw1QnApEK1RvFmYdWzHaq1uz51OYxXoeT3fT6OVgWwrbB0bVqlRmuX\r\nHA1/2EDMbT2mPGTpM822XXVaQkRwgHzroiUKrIJlOzo5yPBfJxVYC4oipzTh\r\nzicg5Ulfzwh0DCgJYJWl/8Qk2SRUYdp2S+KlfHlnPvyqHfHOaAZmicNn2c2e\r\n8q+OScHMWSnxq9+qHpGa2CuCHsI3/6E6KEegAOufmR3DP1XdksSgrqhXx4Y1\r\nuHvL2lzcMEBJ5ecDkR3AnzxA+qA143q8Xow=\r\n=NMta\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a69c14e10.0_1671016699512_0.3102930931167329","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/typography","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1107812f45206dba87e1a48a73e07931883c0295","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":22,"integrity":"sha512-eKf/QiWBhvO/C+FkNWkY5gKi6cdF5mA1HfoKnD2MqFZ+PQ8jYhw/lB0cRDbfr62lEd7U1VGvROZUTSfS9vdLww==","signatures":[{"sig":"MEYCIQC/jKUtWJOtRVfShEyQT8iyi1N4QxgRWoZ3u1hVqbwsVwIhAOW1AE3zrIVDYxEj3qbhyjcVgfZr0mgtqOFhiFZXiU9q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf1hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKww/9EwDxtoTF6NGLCJ8zZRhOLzYZUSPW7Sknt/AKA30cI7CkgB0H\r\nugssVJrrqZGA0rHl/XZL1Ahk/tAW62Ggk5Edu4zIZ7lOT/YDulz6KYGfii9T\r\nNfJ37q5pAJPl13XzF+fKWff3HVNrE8KXE+6u9y1YdIxiJSxhXriM0G6gNm8v\r\nQQqzLaFglbauVGI6RkIn1nB61YfVIWZa93rbSAV/U3cc740QaJrqzBu5HFQ+\r\nNM83r6s05m94Z0tC5m84J04V3JJWWj7SluikuSun6Y6n8qzpTZw+CT5DP5Nz\r\nTAYRIkOzvyD36yXOo5CzzafwSW4A0YfgBd8mTKHvffnOy6dWem2d/QvdNFtv\r\neN0r4qNQ6IoJkvARqxaexh3SfZ+WXc7yQu5EpnvaXOjqlGDzqCNklaMCG9E9\r\nbeWPFh/wNapYkf499U+nsjnrrgvIUdKxnYx8222zDYe9QDoFCrsZUfX66894\r\nqMqKFA0TqYzJpqYq0SI/d4RSOuIiPMiCNtpZIHaedJ6hhmJ3tH6UNxhxN1Pa\r\nXcsEYjoCRP6/NT5iDDXE93DFEmPagxmh/MY3d7i8SrEfd1aQXGG7Lq4ASjBN\r\nDOna482E3GBOztMFR1cMIvS8FVvNMmsyj4JRFBHDFRmtkwy3FeDDlzHbhBzW\r\npObfBYaCQZiouyZq1c/t2LoleWAM7zmAbOk=\r\n=1x6h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f43e0ceb5.0_1671036257539_0.14761145426764366","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/typography","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.34767110.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26b38c3ffabe8ca6042765c905bd1c011db75804","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.34767110.0.tgz","fileCount":22,"integrity":"sha512-jnOzgN02/5+wXZm4VxLKHp5akw4o/UgHajLhI1F35HBX4/Yt3Gc5cbi87ubGITuCTnMd+hGtBGhvYQ8ydbxuhQ==","signatures":[{"sig":"MEQCIGwJS3ukm78uwjVJryEErpIx/Meir4W4YAVb4nfIr4DCAiAkk5B/fsnOhcYW2whef2TefqIsneyoZYfvtqvaoe1Faw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI8A/+Mt81pVfutuqaVIPCo9cusA80w7zx9et8LuZTZmhHvXPKF99e\r\nXBcl1y9ZffAWyvf12cUi290lHsysXfTsfDQRi3D8vXoo5P35m4IP/vxNpwCY\r\nEXZOEDNqkNyLzeAkOjbQbNw7zBB09PWXFx7ArEkJsuXgJdtWGu80mc5Jlrrt\r\n1AVvL0oCJE2lH6s8Nc8Y8+M9QXEoG/X5rR5CuSu3aVdpBK2qVQC/1LUqxgXk\r\n1QekoVPWjw7frtFfllhtVvXJbOIc2/YOAcxxfSEV9h0xXWIm68VGDu2hjf1F\r\ndz/G7NQiGmAOe2iKpL8NL0hMkC5iCFwT/zVxAdD79guOB4JGfK4eSGXP4Ltt\r\n5FhBY3V5jiETREA4acZ0H1RmPNY0p2UWrV5oo3xcY58XtyOqt4+sjVnB1JIZ\r\nOX0jlYrNJyhT1F/V52GXNimbHdq4VPQ2miz7nX71SKb3YiEyFnRxBqRFiBWN\r\nJdhdxPvydosLzeuQdEQTUHGO9jPuriWTaClva3LioKuSooTPkQJQ1QiQAApT\r\nRh6fl5JhxIG2dgsjo8rg2nbo5Zkv6KOxkTK48fa1vXmQ94EZ9FQt3+n/uFWs\r\ny9vqg8MLyBGwAYbDfJrAIGW5Md3c5SYFMX0+Mt1EGR+IkBfj6CPAyxVbuvBz\r\niCPRdbXoo4Xefb/UraokWhcolKjWjZfZsjE=\r\n=XPh0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.34767110.0_1671038590119_0.9868604736534343","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/typography","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d42aa0672893b85aae719ed23d392feb91c2212c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1f99f3c50.0.tgz","fileCount":22,"integrity":"sha512-/frmYOuoT37Ig2oSGv+Ntlm9O13f8C6L+u8r2a6l/ENaOIZIY+e+4reXcx1ziRY9zzUTIQLWORyHzPvl7DFxPQ==","signatures":[{"sig":"MEUCIQD/71ag+B8zRxe2JmLYCQb3lf9OvSZ5sTa5C1k3Oe1fygIgRS0fPrpYsAMZ143HgrlryMNb8gUk4LqE+1o8p6QfSS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCAA//csujBMR4GMek8Vn3aoQ03L0lqG6NbTvaXZoDTh8v0Ir+1UJv\r\nDqfimlWJM/kkhR3wsEsoWphl+bAs/Pc/uSNXuVYn1x0bXQPNLt231LwDWMjO\r\naV7RuBkc9cpq2zwS2HgPtnVFvj+FAOvqR5fJlIgLBqeMYpvnVBnR1kgVjTgh\r\n+zYpl9WvuDk0CdNdQGsHbNcUQiTyL5BGDBPvBY1DySpa/8vChswQAISuk1pH\r\n2jnLfdQW0uN3k7CNxtqONQr4Syb2d3SQPnJUhMhO5ioxHeQw5V7Fd5nAzrsZ\r\nhJZyCMrNxQ9cY42ElQGqDpN7tLA43+tHHwm0Dwj+X95/FDURNwmDWOeE5yeM\r\nX+rSjfuCxIQG9GMYOS23cF2DO24E1SHTlcQqrUPzg53ZErCLgF0CM4KMT+ih\r\nTiHq1mhzZbMvz4DKQ6B++3oC+KcchlAs+FgjLtUsHH+5yp4RpIf4CABaRo0f\r\nV9w57qbdwA0XOnR8vhHRd0LjRF9/tv7C7v4jEU5GYNuS9vbVXmXTLsX1xI+J\r\nKAAVc9LyBfqGaDvGrSxwu9j93M5/TZIedNLA9cFfacAawQaIpJd4UQnOhPzN\r\nXS/F+jwN7EoYIuZzZd1K6FvK+zO/0xVP55vYEgeLzIYwAFjX1vuculoDq99i\r\njI/Fvyfq53bbKC078AmmzWP7QvdUxOTHYfs=\r\n=NopS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1f99f3c50.0_1671114298699_0.18436672043832392","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/typography","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74682db4de82e5977e36e5ed183454568d24bec0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cfd69490f.0.tgz","fileCount":22,"integrity":"sha512-nCo/DbrTCMedlH63aIcJfrbSZamoMJw/51QzJwYCYVS/bg5F9TITDvu90Nt6bwDJiqJSykOb9Ns0fnfzOuZdpQ==","signatures":[{"sig":"MEQCIHquSIDZVLdYWfnGLNMUvuvvirHIcLM3AZPrBMYGL5U1AiBj0fic1tB0Z30X/b9jqIZ7IPurAD8Gpv22oaiTGyAk4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNAhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAsg/+OF7jnfMFb/VSNWchB85CVFSkITY0PIXbi8J9Q/yIyQwnY9II\r\nEBwpYJmpVdjzKeAiOqbvasjNRFONVWqQTsehdotNaNozXu+0ceW2cNcxBOiv\r\nlkfobIxSW9JqhtNyElGv4qzEE8yU7x7oQ90ToQOC4cu5L+yRqiBh5LXcEGrg\r\nJBlqNB0pDPEinM0e+wKgD3eyez3wj+88faOp+eh9mIuOtB3OrnEuE9uu0Qru\r\nIIfxx7v3WBdr8bl+lCx/Ms8saUYQ9AwwqlifaSlZHUdVseI00FIvSp/hwY/2\r\nlhGJSIW+DVZQQpzzaviCgkyE7fKJLqXIIcA6nx25IMk/WapgLbmRx80pqf3c\r\npqW+xuHDXNBg/o0zJ3zDHRL9rUV0aeVay2wxOJmcRBtKn3XILoJnQckBRRJy\r\nqPW1GWYg/EeSJqihS79zHp32dIHjtgt5SAIZaFN664o7VSIL5pj/oqvuc9lV\r\ng19icMCEG6vkoV7mxD4hx+RwRR4KxLF+d0YS6VcjmdAOVP8845URunlErtW2\r\n8eOlOcT10s9ZFRw6RBJ85NBYGQ1TszTXl3gzIR1qszJwDPx9m+Xq3mygZj7A\r\nJLAxkEoYwiRMJmbuyp2CLy1LaIb4pzDKkso7HhUSOgdTXrYkshKjUUz/9MOu\r\nHovn6lT3skwigEQsAyHbPkqfg6flv6l7Y18=\r\n=n73N\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cfd69490f.0_1671221281022_0.20630055647992296","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/typography","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b8ccbbb16fcf00b557c2a733ed511a8a1188af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.94ad8d986.0.tgz","fileCount":22,"integrity":"sha512-D9nX0Pln8Oz473s4WQp9jtXm2cLENwI+HjzFedn8AFtR1M3eqr/2j/PEv35xpvbTz1dbHTr6KV6X8/Pt6tk1sA==","signatures":[{"sig":"MEUCIQDgSS1YSlL+TlMeclxJhZcfoLGSsFbZHspgbcPrIREx1AIgBra8qKgx2PYk9i3KWnLiNzdg9K/Eqss1eg8fORv7TVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLrqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgHQ//QH6R73gvdD1qvBmCx/F3qUlcxstaE/qixi2G8U9EGAqOMpHb\r\nrF+CbOPATWdcwV/EgJbacUUuxPLs7OI5b5dVSDA91F7LY3e1Pki6U/hvyqld\r\nVos1CKSdWRL3b2RmGE8HUEiK11uuLTXkA0YHIPIiqvPSoEpNdiIkciHghVoY\r\n/PHoysSJNJD2WkPsDGid+qLQl3ygo1XgbMpXyQ8LvVVVjRuBGGxrBHHJXq/U\r\nKWe+a0Mz/SO+MS7/zJi6xn7K/R5nYz18POCuuYSRAdnVRK9QSusZA5MMjdJl\r\ngHWWXjOVaG3/PcXmRbQfewzjm1oHzp++4uhLB5ZhA+ZZ5fjQIa0tmkgRTlNK\r\n+oXmb08/v0OIVg6sbFBWDt2lHyA44evTcQBpfXvm3d6cd92+owgc46rL1dKO\r\nXuM6nGS4VUVmbvfY2D6zYzhPwv317Q995Kr1chh+Q5mZ3z+7dKwqTQ/EawG9\r\nQGPfs9fI90ufl7QqOyh0A+7KCeyrG7WWKFA5g8IEalsZe78r4f0wQ9kCKrcR\r\nbCqDorzKSmOtrEnlieMFWCxUL2/j7fkaZX5XsYpELcULkNJTSPX0K8gwQ0tk\r\nIVrNeTjlLU+VF1/7DPc8a0C12XtkIUrnpRyh4yHYycC7rfn6gXv3bW8GJrlq\r\newkRxLRCOpSN5URHUCKWfqaiK3RgMwoHmzI=\r\n=TuVJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.94ad8d986.0_1671477993885_0.7050085218804707","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/typography","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.604264203.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36dedf509c584967b36791f696c6f596dad693ac","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.604264203.0.tgz","fileCount":22,"integrity":"sha512-s23E/9yzh72T6Gtg+qvvMxeW00120HP05voI/C9Mpr7OUOeGqUnG/GkloZmVxm1aK4YFbS7I8YdBjHLOiniCNQ==","signatures":[{"sig":"MEQCIFGhtUaD4Hi/QevRqSHl4RLjWE6QhdbJl3Of7hoUcFhmAiB4ZSOQyYReGFgC7sLalOaYLMdMU9a7Wy+o5Dj4zTz4bA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo31BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4dA//WaSUvDfhXyrQJn2z2PSvnI/1ggbrpPrwcsAYlvdvfn2ohGyN\r\nBoletpyWskocY7xEum8gmIWEiotBRJF3W38rdnWfHbQ1+Fzk8Z4+eFsFNX/h\r\n2CyIsfHeb7Z0uQwBi1q3WPVC4svZ9b4M4DCqZimTvWqKvIBI408agzyPV4SW\r\nz7TqJp2X0redtKlwHOwZNhic47NU3WbeP5Tr7SKVD2B+euVQgouuZ7OWxi6B\r\n8f/lrIY52cv0QJGv6O+gwdBdkT2z2lJpqhlN5Sz3gA0i4jzk9Ge2Gh8LxdBy\r\n++jheXjsMiQucPFSK/peTRu5r2ntHclzoEUUvBVdpl3egAVVgnOZiEndH/x6\r\nYU1QHlJd1XZGmKxxXTEaTDajqZto9qkGcW+b0yTKo0H7r1MlJCGXs+EeoX62\r\nPdWKe29kqmtUIQ9QON5tr9i/XirbCv0PDrcVF5TkJgKbRjMV1wfqcZEDoq9v\r\nb+pJsOKlI0em7tuXkSeQ7hcMlyiVik5vqPs+oJjjRz253NKbIQerbDoV1cLC\r\ncW0zUekZ4zg+EmVNdB+8Y0zWrHn7/LAN2a9bgy0WDGol8NBd3otuSCzCD2y/\r\nOGHigWTJumvvrOOAsYgcJODxLgqSk5HznWWH/nRQLo1qB6QouXRJMtYbOItv\r\n+WrvsQMga9AKGkZcLsRRpisE/cNXCJpcRJs=\r\n=SN5d\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.604264203.0_1671658817681_0.6208635542122554","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/typography","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0169643fba2747ae5d116c0c04fd1f759ca9f3b1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.85bcff6af.0.tgz","fileCount":22,"integrity":"sha512-+AXW7SEIc50fTUynQVheMyEq/yV6yoeM+9tjuiDI0yymVdJUNhVNzwaBnMNdrBAVJSNqJKg6EldCCmdr7wajgw==","signatures":[{"sig":"MEUCIQCq09Yzen/9nShDcLiIY0bz6e2/P8nXL2jqoEnFsv9eKQIgHM5Sog+OQvRaaQz7uwr2j2UpCbQEmqCU06ygxItDBgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDBkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOqg//WiC5cozl5AqLmDTXltLszn3uAIGZkwM6ZokRuhm3xDnOKwqG\r\nrq8l8TMv2AZqlzzDYQ/8D3XRlHt8RcPJmtgSj36o7v2+/mjOocMDdI0UuJUT\r\nd04jVglW0yOZ00uzVM3C5NbdyWFry81/EUclZKGmkTdKrKrzLBWtwdVnpYr9\r\nsfMOLMJhB7wRw9rncf2TjpfTpHKZl3ls6pE3mTle8QIhqCLN8/Lb15kxmCvV\r\nsL0okSyFkAEg3GdU6hejxUDWBNJScJKO1pISm35VhBegBFP/j0Fu8GQyGL2+\r\njF9tHhmJwZpZhIE3Z2YkyxTxgh/e6WQl+mPfOgrLHtFRXLb9q2bK72R5/3eH\r\nxPlCIzwZlN3EKlKG8xMC3trS9UxqIMXsrno1cD8tsjAz8KKkrOTOyJkHOQwD\r\nkaEypZc2YEBXSwUBzYjqTJC29YjYJPBI91Pp1PGNbBCJoGIe3gUjaTRBUw8B\r\naaaaXHUhuTcHqbV/WZUNJ+0FYX5wU98A8gycj9LiIU7h+2EreZ2GbQBijsfc\r\nyJBDeknCezRpgDwIAfT9QE+w3H1/DsJzAfxftc5mFsCnHAZ6znw8CS4Py2cc\r\n7W46Jx7g6G+MTzXCQvUhZlFC56i3FH8eRRYA3BiC3bOuNLtQqPn9NpYHn/pf\r\nKZ0avCfSHHNfP/Hd0uZiqCcC6yEO00S8DBA=\r\n=EleL\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.85bcff6af.0_1671704676225_0.12047290980436798","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/typography","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"allanchen@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6197290ff1526f24f89f85ff4c2944605e50eeb1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ece3e8d21.0.tgz","fileCount":22,"integrity":"sha512-ZxxnZHW1PHjz/7Xi4jjNPtkR3vDUSb7rVgmm2Dii9ZNblPuqIxazu3iOxCjZWZq2Rw6ASrL3y5vbpaOaxVSwfw==","signatures":[{"sig":"MEQCIFx5y2iTOkzrTvfVZ+dQiAulNklb9JPxBG7R6rOY53voAiA/pYIyWEiqdI8doqy8yAcWfnaxQxhOifbr9G2f7hz/4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Dw//YZYa92UAGO7xSxHUfTDV/sDUTvxnte/Q/jLdH8+773L3+WY8\r\nrbe0pZ5PzPMVXztFkVqNVrwUDGB8JkfFy3mJqXCFs23if3N0ddgdkDq+G1kq\r\nACQgMjy7q4SXZUw7BsnlVyNGKtCi0Kx8uHK/3UE/zO7u4SsZUUMs8TcT3SWG\r\nJ5XyLGNvWtdC+BrQyiNENfsoedl5QHBz8SONVYma9fk4PJVGkm2lWhFXw7NI\r\nn3LguaMgJxNcJIajC/nSu1BnKZZeByYXgUzhjduvo//PlcbiGUxtwokhLWaJ\r\npENbcpvURzNCRu1w8l2Cz5pKqz6Eg9PUtde4ZJzJ3wH8p4KlePpRchKC4MiY\r\nbtu3I1KLIFfr8z9XBHFFt93eNnDqqYWHY2s4wTGbcufk80LqWGk6UCGLTLut\r\nQTSJRtK/Ohiqt5ar605irOySndb1+IwWb/9PKonFrZTqCZ0R4V5KKd+1uepQ\r\niope1JzGtBbmBkQONh81qJD65lnSk61ZiDubhEjmf7Iy+8p3n7tTrDLWiieZ\r\nQLSi/kcxKS69P8TB2q0BwicypjqPZzH04jjBG2EHERSqd2atGB83wLiFVcsE\r\ntZtxT4MjdPMhzy3oUP249Cj8LGuUPR0gvhBVqGYXbMMSoGpzdABqKdgkZh72\r\nIUhAtEBVJGTM0pSzv107CeC0vS2RkoWrgIw=\r\n=zFMo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ece3e8d21.0_1671729100682_0.5869382949946316","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/typography","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42b98a3c8af3a5eaddea4df39ea36b06d3f79f1a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.278ad53d1.0.tgz","fileCount":22,"integrity":"sha512-0FVS2Tp/HJD+qrRtybJqAAQl3jr2YV8u0+UIBCPvQBxitRwh1PyHn9eXtQxxi3MX4T0cI0m5gbFqlA9NB49eyQ==","signatures":[{"sig":"MEQCIDiA1NYM/PMMeVl3CWeDLfLn2dofC8RFYWrxzWAcBHoYAiArs5vzw9+ue01o7W4lZ54Sr/tYp2UuB55m8wJZZFtCUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyWaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuTRAAog+6UtCiU/F7o2qNO+ID9DGAoz+wz02q1ICAhBiYHqJScotR\r\nlpK1631WDb3A88qpGw72tHmpw/Q8mfb+uMIqdFInkT8QbjNDyZVdPPKq3esw\r\nVNgKJTVaQdzb2yDmiVohLScVZhtiYME0D7Fxt+/zxzFJcwDLp8sL31DmsIBh\r\n2WUJv5p6O9qkzaNJdL0xBEzKtFTPYQulSsE+372+Av0s3loLMYLf+YQpPvr/\r\naZRMmHh9+eGuVS3JVsghgIhciEN9JL6y0yRJcGqTixe2BMYn0McE4AtJHGuK\r\nBq92FIlg2lJMyeHXibXofrS/J0uA8yMLQba8//xB5ZU9vqjYO27F4vX6f0Sx\r\ngLtUVBM9iqRjqcDK9UgbWxUx+5elbRJX2NPjtKMrlKe69cj0sGJuhxemEK6a\r\n/3kPsIKWfxX52PiXXJCtnwVFkfoyoTVn/iMTDi7c6y5xbm/kHm0sTi4g2Kwb\r\n4EtAPzg8qeLGuveqwaD6+vAyzOeAfcq+wPC/qwIA5tkO5RUyZ/14vzvPB2yW\r\n8IxyheB5YfPLlGZpdM29KPKEgjDomIEDG/lIi7dcd757jBYYwn7IFiJ3MYnp\r\n6LXkJdvlTqKHARiZnvw7rboxzgzy96W1cjIkfE5LThFnqD/it+VNVP3/mXpW\r\nHSHSVaIEK4r129/dIkepTBdQeCs5JuWAgYk=\r\n=Ht8s\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.278ad53d1.0_1672160666037_0.7978736909455291","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/typography","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14940d233129ca4fbb6312f42b31247bcea02ecc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a7d8389e1.0.tgz","fileCount":22,"integrity":"sha512-NyQjvAfU3J1tRg5scPTHgXrX0ndXpRMwb6F6ii6FLBnsjBvgadHWmh0DcR2LKhGKO9p0q+cd2tIec1m/16wA9w==","signatures":[{"sig":"MEUCIQDrH7nt+feSEbv+DbNg3BJwiolOU4srFqKHsS5GYaIMzgIgC2WOkFTXXgSM9ioTYLGNAo9/RWR/nuhAhwu3YITTPJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0FyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbmQ//dM7Z9u/zKTbHCB9ANgW8HFhJ7LRFCtOmKGgGdj+lT0MwKq/U\r\nCHYEYhzcAgNeL1Ipzu2uOXp9y6nslWxYGE4sytJkgH1wrSUKylm3WO62Q65E\r\n/Md6w6P75JO0J/RfIyBGp/gvAWXi5Mz9sQBUzM/vUNMMPs4+1Wf9cohBgB2Z\r\nTkvyqHM1QMBWlfQCni7IQLDbjKoqYdN9XMFuISZXLjYBD9xLG2vq18D5EZoS\r\n6lmMqlwmj++qhp25AnM5Ip420awSCqbo0lBd1KAdvpEt0xOj6RR9RSI2U9G+\r\neJ9FSt5kpBIYrP7dEylr0eR/zV/Um4oOwh4NSS4/oSfxcCuPfkQbtU4qxU4x\r\nan3sR/gqzWTkJ0ulRddvI6/GchYavVyVFlw61sjiUVKJxWN/+XYH3B7xxH8v\r\nV2gF0Qvmrk6ymA/JhSlpm+ryTMj9ycmdz7WYtjEh/qhqWlXbwNWl0F2fd++e\r\nZcrUsJHZIW6NybjP20dwhHH4bpB/eFVhFL9FjYHlJEG+LNhkZQ1JjEAcilVv\r\n5YUK75GWMfNW7UPT96RJN5VoXMgvH0qyZUzMOYCOO4Y36RKVyo8nr74U9s1E\r\nEGRBQLpTJmTEwYGBarEqVHys0IKzDsxkwjLLw/7nsxdI9pTjBPU+raekQCeo\r\nQuTq36mLXrhOZRf/UXCp7HUSaPTo3LgUrcM=\r\n=CWQT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a7d8389e1.0_1672167794578_0.04600232216015776","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/typography","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a88c650fc272dccd5dd2636d0354f56fdb6b5f49","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8175d5eff.0.tgz","fileCount":22,"integrity":"sha512-3LlF8kkrYN53/ZxnvWWFOiLaZ0fjUjXtnQKYHVkMwXmnAVlITG3z34YA38D0zPVVisiCAuVbjwu20gv2Uc6/cg==","signatures":[{"sig":"MEYCIQC2OL55L5eNCtQ3+8bN1JsdBXF4enFXAdsxtJbL3bwtaQIhAIhAAz9CuuFX+zq8LEwpfJuAXimVBTvysmwd/zDRm2ky","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6EGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZvhAAl9GrkfG+TOAlxIeqMlHCMNEJWSOUXonF9cNinwQLKO79Tpv2\r\noa7/hW5jghvLaSpGWS9vcWA/nqy7g5P/jrfRjurl0aaZ2RQsrIXsCkX2p00Z\r\nt83qsZj+eonQWN5fRmxOb4+PeCZCCZg+3qhx2opDTUDDhA8i/AAYto3G/FaP\r\n1T9qTvy6VrjPw5m4xAsD3A2qZ8bbwK7SGPdHXwVqKczuBS8uR8xA48x2JJts\r\nmU5vMnnuaw8wji1sOM4OsIKcpQAKOP7viMxR3xriCHtRWx307KKVCtz8kAQd\r\nGHwBsT4THBYUuVIU7Vl+XEsuJOPPY0RZ7Sj3fDsna9ewaBVr3Itf1T4jEaog\r\nGEQ0rYrKhd12phWxn5ZQvYQcwtPFEk+BMu2O8S3L74mpyzB0wM7VyG6mBAiZ\r\n+cqft00xb+mw/yl7Tos7uBBNBPrVnz+JnRtufoeg4ThGBpHJ46L5SIC6DmW+\r\nnwDGl0CAHfonLjSkWECVea7oLzVv7B8o/V9mZCukILfx55A2i0GnlT+n++1Q\r\nX9dIZBwQSjaSvDwCjf9yS7HeRAvmqeQfdvav1wjEoV5WxE/4ngUgHT1VbPIn\r\nEu0pQw9KSiQO37SRmtmhdFCLk3Zi0Yf38RO4WMyOOBI89kKW9y6YCa7w3rOa\r\ns669284pVr8Bt/2IHueQl6yvTW3lXsHWhzE=\r\n=clyY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8175d5eff.0_1672192261879_0.07553981137672672","host":"s3://npm-registry-packages"}},"15.0.0-canary.16abb41ed.0":{"name":"@material/typography","version":"15.0.0-canary.16abb41ed.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.16abb41ed.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40c6af3e72be566deeb202508e3c145cff89a799","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.16abb41ed.0.tgz","fileCount":22,"integrity":"sha512-2PIdKwb0vGvNd7dMxSZeTs7yBMj9L+lIWzVkbWHZppjcJYHCj8O8yopuzRGMk21cA93/o/ENIOidVcM/wBhw6g==","signatures":[{"sig":"MEYCIQDsotGMRHz2II8Ag3ex+jQrNUwKTV6RXG4nqN78eliTgAIhAPLmkzv2VTZ9zHzX4Dk39KDyIzXO+Qx/cAY5z9ICQrT+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrJsRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp53Q/9FCDOqQ2jKlEMIoVuHLUkGSnM4Q8ovbfgPqyKdgxXCtTV+r6d\r\n4Ma7TfSXUAhUpDY+p6PS0OjF2YnDx65g2hA5V7io4JFIlMNjlhrpfvYNgoIL\r\nRxkpBNRMymGGtXsWwGWbyt/eLXuTzqmFB3g1tUeTrtJdQ3OIhjzi4yGteBrE\r\n0O9G0JGuDBRKHpr0f7kcqX3SIxK4CV3PXzFZEPHjWIGG1thc7Tdzd1/oHGtW\r\n62gMqjKxsLaqRIc878kMhmOvNGzNXVCNHRLxPnRVxh09W/IWu02VcTNUlHpT\r\nrqgarm+1nb1A5ZWaYzrYlbHZWfPxXTsQ3KtwcRt6ETsyQuGSM34jl1S7gi0j\r\nUL3n8IEGWH3wXZTZVKMtYT0bnE7UeUbCUivhvKHUGpYvz/RRdgwSHj8/htW2\r\nYZS2H7W0aEsLY7pxY2uXYO25HS6suD3TKyvCRsJg23OecObaA2mXekqY4ipf\r\nVvTV2lLQbd7CuO7BV7vd+NqWV/C8X4vlIOg8ChaBmrKUA0KmoXHm/GIIKeFk\r\n2Ku+2wetZG7IZQYYUWvKIQMS04SyP5p+qLfkB0EtlOefFm+d/HloaS0pnsGr\r\nNeV4EtiCRBjYTY2SJkXwZwFPQCcqQctAsr2E32PaDKJt9qO8L7LoYflVfIs6\r\n1dI2xQH/5E4BfkjtmYDMZ4soZ1lJC8C71Fo=\r\n=VrVr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d76b7c826f30ccda72f622ff722cc7585648dc34","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.16abb41ed.0","@material/feature-targeting":"15.0.0-canary.16abb41ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.16abb41ed.0_1672256273362_0.18557243369303622","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/typography","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e089f5b5b42b76390a6858aa421691d59afebd77","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e21dcb86d.0.tgz","fileCount":22,"integrity":"sha512-J1W5C8DcjKrsxul5CRzsNRfLKRTw0AenKvROx4+USTeoA60aOsuVc1u/MAwb57tAsbVC5x2AIK0TT66ZoVwCDQ==","signatures":[{"sig":"MEUCIQCbd4t1p/P6QRgYibQ13ePWFzMEBdlIInyvBgJJLFgtFgIgXBmKHbWfpw6Bdb1Dlal6FClEBIV09M5q4xxGpX4nX2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ3BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd1Q/9HDEPcIv8aSXx9NYdFtpY6018N/RCDHBpatqoBR3vDUDwXamD\r\nmrcaM4LcScVlqr9sloFq3EH3UIAT5RkRVYQT2sttlUZj8/fhhVT0WlZy97Tr\r\ndPpT1k79adGsPilYSGyMuj36R9mPidZKPUw7LAWxTXgBmO7os/VTXSEOPLTZ\r\n4DMiw8Ide2cpCKnhqwnGa0satOkH7ohCdfJhQL54x/xM6Py4g4mTdW6V3sFr\r\nZpSXMl+mhUcKJGohGJJZ9urhNrUuylhElmcB2gQ4+0oM4yLv/6BR5ufBXvHt\r\nmJ5MUlIG7SbEKIhg55TseZn9vTsHQGZqaU0h8r5XdA/f/f/1L/s2aKfGGjrr\r\nXaJG9xsKbh5wdfm8XSR3esC38hA8PHTjhj4bDldKPtKI5YO5D4Ls/+PN9/eu\r\nXa1rjQo2xGCkUM6WFBxRPjCgiacHMJhV2TgVSt9l8/no34hWIU3JpaMGVvRH\r\nYSJLEfcy2c9yHf87GAMF5hukk3pOue94qfd2TX/thtsyxuDeGT2NS90/tdSm\r\np1Xxfymnn/Zea+nL+eVJHf+c3dwLs3b+0lUVv3xH9BLXuaQTVXMv5X8rSd5P\r\nhY599LIW5FsPrYctYr25lSPVhxFOL0W77exxpwX2Mth2pszalo1jKyQ0ZgcG\r\nXj/hZ1ltyBehixoQCo03lWwzrtpLmucjSYY=\r\n=nbt6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e21dcb86d.0_1672322496870_0.3861844558061709","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/typography","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3137585ad1070e5487973d045a91fb024439707","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":22,"integrity":"sha512-EljUA82YqkYVPq4l9BLVTu/m83qbkZXStzpLlmEhWsIHOBWnSmMzMS1EDzB0Ak36LBWy7UPWweXiMz7FvEewWw==","signatures":[{"sig":"MEQCIDLWhfe4HAEOTx2NK7Nmv3Ac+FhI99SLA6mZuUyMQy4RAiAFaFDQx9gVArqtCNsJLZAHiFGLdi3vRBgTPOrGZFUdlg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre0qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBhw/9E0cLgPh9s0bWf7qDtBkqW4TKgwy5VBcCMzhJFqUab7+VtDBl\r\n2ifK2Cyx9bD3T1bNcnTfgP7MH419M6kJPlXHFFmmCFHBmWFDvlSedkTTBLk9\r\nsiSGWUpG+vk4y08WhiXp7v2QY6VHoToAkCXEKQUqSR34zD5oEGF6aU3njEdT\r\nBzKBZwA1TzqgxGiBo+b7mW++c7KM6P1GQpyGL0wTNdwGFcAQFe13eKEb/ePb\r\ndQ2ZC7WkdG9fT356Kx9NQ3SRldA2R9pN+6NtAl8Stv0VIpj/hq8r9otMhlTO\r\ngovRFUZgyPCvp8XB0Xg64DtUMj7hiOLgB0aGLeBtsdBN9tERUOy8dJPTHnhz\r\n0i7CR8k8xyf077M0TtCQsrx2YaVx5KR01OvsG4LkFDRXFciq7cJThUSCHBfI\r\n+5SSem9w9XB0tNJOb0ly+KbHE2iPFn3Qlf2SYQrpgGoCINiXrvhyWcXTVZEF\r\nUnVOYxwiOk1K8TtKljtjWYJzz6MmuX6NoAcbTgf/OKDuLDJsRpzQS/GlENSe\r\nRkCqwO67kD660iSBr5gaWlXgojTs7KjtppYUFf4IMPLcLrYqnxD/EK2mH9kV\r\nq4yGwRiuvgb4hGC0Gn02NbfNz+o8LjMHJFSSfe075+suJFxPg5Bx5ALk6zU6\r\n5ZAnvH64FUTRiWffJO5q1LU/mSoCyjSfJHM=\r\n=UiD3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.20ab6f5a8.0_1672342826677_0.8150921626080647","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/typography","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b9806f623.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03b381d7c0ea1a443691286015d4b754df13c2d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b9806f623.0.tgz","fileCount":22,"integrity":"sha512-uDSvzSmC71LX0jWt+HOHjxbusFsUIavu+3xjf6+2f134ZZj6FJzrwHTDYLInEqxiOT5j8u6wQ1NoRxbS7X/X4w==","signatures":[{"sig":"MEUCIC7RAfs8E0eU6sK97nej9pyaLmlpwvBdEdGisa5NR3MXAiEA3wU/oYydRXyx4AmAnwCBDET/zm5Naj54r7NBVjwcZvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh0uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTWg//TeOa4ufSynTg6dWHOrtXd9J9sk63cnc/iATgQ77351K2qBDN\r\nCN+Pct4drSD0O2ZcAbxO4fZBC44wwNP7eJSxYrloaCcqdsoTitpZMP7YGVsK\r\n+0MYbe2RbWfeSuc/MlJDqfjS2JJPjDJRrE9FVOTEwwFn4iGmn783YbZvPeJn\r\nEV2ypTW7I0o2VhopbfrUzYbKarzakwyquhPSgMREOgVtmoTwU6feVY64Xef2\r\ngM1LpO86EtwFVFGy2WVngKp9rvvb4XcbLy79A1p7j/ALmySS4aN+JG88g7Q4\r\njSMnaGRX0jT9lqLTgirgZ+hmaVZYje1/lsOkO8ZTLLylb5Y7sr/Rs1EclK1Q\r\nBTU4XmcRNWkas8jREJ8pHGnDVLDF96qws0DMfHXURnif/CfwqXGAc1TqKRbk\r\nCe+j9iRkEYaMT9fvSe116BPaQJ9npcluJRUoXHAcxzOCLMNC+hb/6C0mKD4h\r\n4PhThmJd8A4lGUYaVkvkPAfYAI0t9PMN9XLSOQ/X3XjnwS1XdASzszGZZSJU\r\nnslJxbOylBDTzC8YQjaKn5JmrbfZOXTty0ubwK6fyIgbZTAzPyP/BfHjckcC\r\nnhAnmJeBZwL1U56yO29EeGTGnu77NP8IpObxUXVllRlkxvLx36XBKuhhalCA\r\nR6Z8hu/5YZijqpEF64WzQoaEreAgxQXipIk=\r\n=y5ag\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b9806f623.0_1672355118652_0.2628820211595799","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/typography","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e33c9e82c3f8e396307f1d1ec14c2f7a595903d1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.50c9f550e.0.tgz","fileCount":22,"integrity":"sha512-jV4gCb9ZaMBCRN6eLjUb8Ry7J0ZPv9owrzC2AF9tv7N3/LgZ5P0jclKwQeWAZsGJUAakJP5rDFEWi8pNXNkv9Q==","signatures":[{"sig":"MEUCIFhZe1a7jaW1oabXKpdAwZZfR7nEg7lV3kBTi651TFDzAiEAsC1/zQ1NckpJTfyYiLi0nppUTR8YFHgcRiJRgl2yG/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE3/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2FxAAnoEvY4evUsScifHTqtMqfdmfgacVK5MwfNZI1vujvRNEMo49\r\nrG1Iux0Nd8IPbgFbCu7ovp5pulT9x1c9Fmt7rKsamG/qxHQkXwl1KPQ+p9ro\r\nOBfVBrly6ZelQpTqeEibK/RDaJ4rYpO3Zv0vH132VVq97wJXBb3xxf1xrbtB\r\nqojPVlDFpPGKaZ/3Ssp1EKM1opMLCDMwU3lb1zPkYB84S5UMbrcmBfKNMfLl\r\nju2JARHI44HHUk9w2/bjsBBZNCEDHzkC5V2nItB+g0irAYX6An+jr8E573al\r\nyhNA14D0V/GT1ujhHutepegMncEUF8LGyPYwKUIP1sT8rJRP4t5Ty4jZCSHK\r\nssGhBTsC9VtOMDcK/YJYHkAREpLRG1WXN6M+5udFFD5C9Slvjgf2aJ0toFCj\r\nP53IOCEwO1Nw8bTccg/wm+b+XKOLF+fCnIx9/XQz1I/+dYuSiGCh38sfbqtZ\r\nvzhUi82OJgug7jQirQfB1MmprnHO9HnIRyxpfijTbpC+qAaXdS24ABzRmzI1\r\nb8S8StAxTYc8pAeGfluZfEgbBTHZfoAmid9L843NksvhSVOsGBlZHl/CefyT\r\nf7TvA//Mb0ILpdnTkwBtDj/gxUT9d4LtjpQH9uAHquc/RKLRkFpb7CaH81Jj\r\nvvaI4FVpKltDHw+Y9JnsLvfhoL86OFQy9No=\r\n=s9PP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.50c9f550e.0_1672760831484_0.5904475761955559","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/typography","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.af490a848.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19e3b1b0d24c9cbd075ae15f33d86de67a951a78","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.af490a848.0.tgz","fileCount":22,"integrity":"sha512-25fh4uytm7NCYthyJup8nOxSo7D5HYAxh3e4gvw02e3eJECryqIS+Tkol/EL0x0ASvhEIq1D0Roii9eP4S2tmg==","signatures":[{"sig":"MEUCIGUK8oWYKUxu3rS7s4bVY4BqVr1MR/1+y1AFZhpf0+uAAiEApYOWh5YwqcskmX2rd4KaB9IzR7oKEk7MMhjkteKM8Lc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFApACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcFw/+PTBu5BhB8zLjQYhJKE1VWyQyIJw86tcKfpcuoMt+sDM2pjvg\r\nxnYVUhhAdsKJ2QtBnz3fFCl5lgBltQ6HeSM8B7BmqKKHXGJrxZrOvVtlJ71Y\r\ntBAudPGjzQqr4B1h+yuHiyxeaPPM+yHW0sh4ojZryzy753o5w4iIYYJPNPjP\r\numoBUZYlD0EfPag3f5GN5qmJgvg6lNlFUT60vSVduRla4UNLVvVgqLy3gb9y\r\n92japnzThN+6YJqDynIwE1B+2yzqLQwFZOKJbFGkMTgC+w+Noo61/B5+WRMI\r\nGbNQOdvXeriOrGYx4NLajwGxLzOdR7GzioDVFJi6u89NNkwjZ4izdNEmAniO\r\nlDkCqOS9exPIGYYJmpBy/EwtwZqq8K3cQp5KBqvef3W7X8Wq//7jhtg/Dpi4\r\nUR4O3RLnFZTDG8+VkqhUQkz2IEEQ7SGwQ/O9qSn2oMiEVdm0s5DN0IsT0m1a\r\nKNCUibY2syQGkxomCJA6lTabQMMLrma0YavmeOuS1phRKrJK+cImv2xQRJ4W\r\nR9OCkcL1zJe0QWuKfT0ut72Rt4iJpKvVn7G2FOpneTPHxgBEHN/n3sNrB9qE\r\ntPT3MVnlDIQ2fPBv0g2W4KydHY5kl5I+WwRV2/dg//MX47BUM/Gc8DUQrZgl\r\nhxEwq4OpYzIBiMH8O4gNm8avliV+SkmRMR4=\r\n=RUU/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.af490a848.0_1672761385686_0.6784261386645638","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/typography","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c41a12e6f78c63dec40d31993e99b0ceed5c57c0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7cf487c98.0.tgz","fileCount":22,"integrity":"sha512-QCTjkMQKUWyG1bLVd9oMQ6SXjiGu1pR3VHCRCpZhkY+BTcHb8al8qIGdFfWL3Mz4X/io/jGe+b37eXWbrkAL+A==","signatures":[{"sig":"MEUCIQCY2tp7skvWpg55otyeoeQpiWJOACyjr/g7KUJ7FTJvUAIgNmfCL81D0XU0t+a7SNHl3r8B8WHakvjsU01uUvb7UoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGgDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd4Q//VeRgyP9/tBw8lMaC0sAkCiS3oNV3evnnRHUzD/XnpSoQIcZm\r\nCtmkzteaah1hxTNVtxE3PxPeJTqJVPWc16IELLTI72qaV1Ffh+myzSSjj+MF\r\nW2/T5surMKz51yR563JY/j/PDBDrG7Y6Q2nHDKafg+Ugiox3zufnBHlv5Onr\r\nPT6lIA96daDaxBHAMXcUW1jV7DC8kYJYguW7pR6c/Gr9rYpP2fSEn/OsCWgZ\r\nua9kLWEleHWQPovtAHC/xNU6x6WcKRmytIfDa2UI3v6EmkHzNW64U+StOnuP\r\nPczAY8ZGGBwhSfV7P7ArCQuPAnEAKrygVk/+iJYk4doWOwaFCPRa1IDH3s8W\r\nB6f83gM8Jtkq9L8RGwnTIirq8i3/LdHY8G70brMj1BOSvy9cKSkdZCZV4iyW\r\nsKp7a9a9ZITehewlDeqEV/Pqv4lUVX1S8svePs01CCapzR7/JhD6JuR3/gKv\r\nITOKxfb26DCM5LLkcM4z9wmak8LupcybqynD1ib22GVz09PGQBSmO9VzbO6p\r\n6NzGOUmAg9XSLSgjnySPL551G09wosjMIT5RpHBzToM7tFkqkKrez4CeoQKX\r\n35v2iuUKyLC25qEWm2xW1LMIWLP9OrRG4PUiF2RFbApdslXRkBINKDiPeHQh\r\nU1fjyHDXmzu1SBKTM2M7+wqdhL0AtFywD4A=\r\n=yaSW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7cf487c98.0_1672767491706_0.3871449222499712","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/typography","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00762f353c1bd43c2a3c6a9032afafe93fa4de68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a52be2d5e.0.tgz","fileCount":22,"integrity":"sha512-BLdbq5ZOmdjUI3gxzDPLrs8uOUlNbjQpyM4VdqTkfqc/vRWG7MMmb05RIpGqZphkvD3DLhfRczsJpHNdxdBWDA==","signatures":[{"sig":"MEYCIQD6ijF86R9Q8GoCUkqBF9cbgdIBIjIoDL88Y7H8EDGRYwIhAJ+04tfaVlJzAT8wcmIgVSaJmqS+i9Fx/pDDdulRX0Lm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwsBAAknOoaXfwcclWW1teItFbXksIhaG0/mcKIVUTpWgMQgRso2yz\r\n+xOZ4+DPG2FGEN0gv0a1mbyuiJwP9t8u65bvmdPmpo3d7KIaIvEGlznwXFlB\r\nK0gKz6bB8nye/Bls8S3ZySV5oh+WX4C2iESRCtBnSui56IteUB0zKkmAgwAD\r\nlzqUbAuAdN0w5DLLgwTvujPhRO2cQg9ptPjzG3L3TLFV/6o3YKldx6+dMe5x\r\nQn8IETa2M6yb6vWBAsAPIyFiNP3dakPzMUZMCN4gvb+fu93c3sN0971tFepR\r\nsopEfMGNOwX1jdUt62uXWluIJ4PufXGnsV+JYoi7+3N59W7LBMztc/J4keap\r\nHEp9WOCSlaguSUxc5YVfcYW3JR2DYvNGy/YG0c10w1oV8rtdGK3xDi8/aDmb\r\nJWmatRud04qvVTCmOaoq91NH1K3V4C9Bdhtp5Hogdx9moyN9BguD3lIdAvfW\r\nhplB5txTN03qD39LqS9JTYvrIUXRzma5uaHVk9KBEJGO4cnkXnfkH6GCQkT9\r\nfVNBYNuasA6k7mT1hK4agATfBHsFgwBTuQ+Jx+JW4+FD+40mijWoH1eXyd2j\r\n8LEBPLW8PMy4ERaYCdAocAP84meRiPA1f7jidB8clLkvPDOEKU1gafdWBXgf\r\n/J8JIOIhWl1wv7PD3tt+6E64MqPnuf1/w5Q=\r\n=ltxY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a52be2d5e.0_1672773160099_0.8458769894495213","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/typography","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9af6b891e8092fbbaa793b596a5ba409a749f19","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e38ba17c5.0.tgz","fileCount":22,"integrity":"sha512-I2PGnE2wlGsoqwYMj1khH93d1kTvzV9OACf+I8Tiw8/g8gRZZkyZ0QBTvR4hCLyv43WE1cNUITw93jHW3Vs6VQ==","signatures":[{"sig":"MEQCICkt4/mHfXZc2FSKuqND63C0kMYcOAYmueRHYp8fTg3+AiBMnJSIMt8zlPGAyh2TtDU3zfyqz7RvcdS0PHlTvGVnnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtKzhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRjA//Ubq3dxI4M8OU95nYkw/pN7YxDa5gQ4olKcyFCFias1/FGXGn\r\nhq7ZGE/kb2HhpEhoSGOxBc8gTmG7HHs0k2veVsTSUk8YN6cM5rnoaiBAq/fx\r\nDRk6519VYoz1cSbg+NospIIFgbja/Qoa/HNokh9AbDHKcfrOJnGtBurj64Nt\r\n8HH9gDYnq/581qWOUyYgZQ/4N1RsMhFWhTZUbDA4aAt+8SS6aCd3pn2YYdrO\r\nsfHDfrOoX4Hy0IlSbcdBLENPppGDmiL4lvRMNKgeYH+3Wvifu0TgGNm6NDko\r\n2B+WuUPpCeFKZ7DujpJzvSDHyIXZVdQgMArO2YF6rs38FBFVs/Fa5mm3+DK3\r\ngB9Vg7ElxWqW2EJL8R4reymuCc4vfxdMD/Zvl8k7+FtK5/9I9Q0v/9yOw3Ki\r\nrdANmfdSEviUHYoIhe+6SNCSLYfAUhqhEOPRxtvY0vtt8OS1lyNyzPWzTZfi\r\nLPtk4yBTjweL+RwJ2V8l2Qzfn6oUTy0obTMSRnybNwxKVtCZh9wFpS8Uh1ly\r\nlBn/in06wImT2DoHPRoe3UKoqG//ExOCNtTV1c6KAH8WLzTC62KNeigqmmD5\r\n7r0TesZcIzXkbPLl5HmakA19X77mR60TtBozXJQklYgLy81Xf93+XhyPptoj\r\nT19ht2ecJgV1F3HbSa9gvDMje8h84LuyoWE=\r\n=QVbw\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e38ba17c5.0_1672785121104_0.8111444706919431","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/typography","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4e69f84484119cd793f2407257061b1cc2f4b8f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.49041a6c3.0.tgz","fileCount":22,"integrity":"sha512-2Hf/ufZEvsQPc1Iu6P3FI5MnbcHtfkMyeGDCvxAZWLoz37NtW01LTkoyISUhMZTNScs/dp2Ty0OHecJcMiqScg==","signatures":[{"sig":"MEUCIDCwGh1fUYA5kabo5VDd0zZo4/E4ZPjj9nHTueSimsxtAiEAmPO8WnpMe8Q1MkR7BBuuziLFlbyjqBGryI1+NPiThhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZh0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMUA//V+B9CqPqmHIS7gA8RjCo8J9GsLkhA0OUWVVr70DKAZzOV4oX\r\nCufduE8b7Ff8VJpPKQCD8YsTElztTUnHelfiPZUDrcg9sDRrNwoG67kiCkqz\r\nUwrfTQILa0824LV21IqBNbo5QRm1TGSUKp9sFBwh+S7dNiBPOERQO8zyNiEI\r\nbaYvgWNyw/NMN8zZim/YBD4upBCpJXYdvVTpjzSqJc555vAmR/OHUZ18gKJ2\r\nUpIlNErSwSMh1VctqFm9TZvcAjNj2KpJ2bJBciYwXnW9xALKWYlCD3eJoJhN\r\np5ierLWsrd7dRhqMSPzwfQvbNSVRiRMnnl9SYEJRgWkcBgzuwSHOTW1TXrMM\r\nQyqrl4C+stdHcPngsvlCnjO59XIcn3+0yaoC561c2bzoiFIl3MKDEeqpO4EV\r\ngJG/gGim8rglUhVy0ltbXM6YRIuXuYGmMJVfjKFSJrqy/VgkhPRwXTbax3Ms\r\n6m/UiTHhD3xTw0+yaMcfseT/CcBRSx5mEXe6v1An2R4scXueyHl8E52JTleD\r\n/fXuH0vvF05WR8DLqlAk5qfuckDlrkaDw/NjgeeHc4PGclXAJcew75ioM1pT\r\nUeymWWx5Or0Xsau96aD6wzmnd5yqE13tO2uF8ry/yLbq1lD+bE2/cywFuMIm\r\nRyjChxp8t8epm0R3v0gUxT5Pg2/VEg8QJi0=\r\n=ZaLd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.49041a6c3.0_1672845428189_0.0007400491403033449","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/typography","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c492898c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac571508204199419f829d272dca3d34dd2e4b70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c492898c2.0.tgz","fileCount":22,"integrity":"sha512-TDQ/GrbG/2crq4S9etNm/uJmPPkuJlNFKY2FTtX3OWID1BzEcsvx14AnG/JRVAXP3o+GSPPAZ7Q7vdvasgzqsg==","signatures":[{"sig":"MEUCIGiZFtc2y5p22XAlL5vhHjQLXWJcl+vJMO0XK9b3/+0iAiEAmB06qzYXR0kCcBsO7aLALgghyy0FJE2NFIIawVEnlos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbklACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnQg/+MYQ95Kx28d/g5uhXvZIwnXlwEADDbZjuePLPPt1UDHlmz5pC\r\n/+3glmwEwFVyRMv528mdHVfD2908XS9qgxq6pgYEHD7CzrcWnTJzpoJLnNT1\r\nEofdDs7DW450lo36N9SM5AKQNJQU+SYukvR/x3T2qKhle5sfzzOLmDK86df9\r\nC8qeLDEJ5Yh0+VItoNV/2dIeuXwY38LPl4hjIG8mcemLXs5uJLUy70PhTN71\r\nxWR8tW/SWbyg1l44cLqMfdcmDTFcQ9VM6GP9tYoxMxcCyZnaAtjLTBBB2T8b\r\n3Iyuv8ahIHVrgwGX1uQ/Eec2aixD51IYyKoOk0V9qpE9tG8n0xfn8ia0Lajl\r\nk3II9fHB8f7pzmsZUHNo7c4w/qflLSWQIOw4S7aOWdLrIRQGPL2zVd1q+F1e\r\nOzgYYPSsJtR8R3tUhzaojFCUpWv7Os6aBFGbjPU6PRATt8tGCGa9no1AH7YZ\r\nw4ukMN8Y9M5UJKPGQLz3eQEZK8S03XqpnfDcrD2/XBVVOjMjS6F17QHcHDHd\r\nFmItuIX6Ste88CWnL6fGrXJdu43OR0taG6xkzW0ypYwuMsILSqA589MSImy+\r\nhRg2p2U+o47GGjT/lm51zIen2L3gGcUSLUmhQ/siKXLKU9WF81tSVWfpcfPW\r\nFNipX4oPlPvKEbniPxdRV5gbc7vSpQvAd/E=\r\n=o8uV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c492898c2.0_1672853797729_0.01110934102027672","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/typography","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df4bc45908a201b1e82d95c754ee08c0541fd0c1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d7a2277de.0.tgz","fileCount":22,"integrity":"sha512-yp1kqNItppml8QA4uNxoAY7+YSSQCMETk6mA+NxdfigZGjZedVGVnqLBYxyA2EbBMNZL6EHyakvVmm0ezhT2eA==","signatures":[{"sig":"MEUCIQDmbcE3WP5bWoEUIYUFV6NrwYJx1iFWBWbJYJ7mJjQ90AIgZgGt0h+xQsQnO9YTr/nvBYxkRelabH9tPEXwy1eq16Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfEOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+XQ/+O93lwpQqAJeUiNSsmkF2r5VVAawmXKPLUvrEk2xvfVeLf5MF\r\nU69BxSy80NzO1UNt5YbZkgCGafaqbFThY1lKL/hRthM/ElUnOh9FVkXvi1zp\r\n/OR1U/cie7RKmiKZZt2nvmRYNP/xjzhipgPxXu90wykNzFRhBSvgmse4BmNt\r\nddRarxZIYN68aDPotYL3sTEzgCP0VAxEWebcS67z9kKBJpeYTiCNZrg+m4Ux\r\nK6qooD9NEm2EpV/Rdt4GWVzcEqXR5E11dS9ZoO49zzgOWwJZkYvtlR5iYIc6\r\nhdzkQ4yegiGgeNp8KIIWy72UzsgjetKcn/wBQdLxkI9+T/jb8dAbteBKmvn2\r\nFwddYj/vxkeB1tw1MOHvFcxnQvmvLiSh9wohnJYH0SWYFxEFchFHjA89vxao\r\nu35jYdvT3vxBc2WyFAbf4anh7Gc/7OxrXcy09WsaQ8ozk0F/g7DcrV8ReWsm\r\nwLFcnTNNGqBpOqrFLZulkNfseuaGp3dZO44PMwGEaXmJo03mKrYyB4HETAV+\r\n6Qsz+ijhy7NcNowPkYffjCVh6zqm9bJe58+/iTpWn38OYwGncdrACpcIbDR5\r\nPfKicmP+fOfMhOwrEk6b2QMCrXAy+pHODxwnTcZTFKw2Te+fB3kk4dogtcLe\r\nwdD7XB/3zhdECJyTq3MAa/7Ohckz87UZwKg=\r\n=NWWX\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d7a2277de.0_1672868110044_0.5213211610362598","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/typography","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2821d686018e26ae889df22074dfc6deee05e1e0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":22,"integrity":"sha512-OihvVBCvb3R9sg197ZLRSZSQaAE4wzGiIDzpajibuxbuaHzOwcSNt782Kqz27xy5uBQ0r/iQb4SdU877NQfUXw==","signatures":[{"sig":"MEUCIQDSab5aV3d9ODhEPkDyTovpSNr/6krb5syD9Qz7VX3ikAIgIUGWyWYqK8yhXIuOa9lx3pYweepqdH0MZMb+La/slGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiGbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmdw/+NzVsANpt7tW+piz++OA40acDFiKYdKxQFFHIgABYR3ClxZzQ\r\nmSEZwlpZjMgBHCz+JL5Hx7zjwd+lYj9eW1q6RCTJbTDuvUW4NMUFvD8sMr1t\r\n7S6qfaHuefGLoOIJ+TILoGcaoXrZDsL4brXg2V+vK2rieBd7dEKTnfiNpHkg\r\nWYgxqvktpip2O34x0HumrsuU2ZmT/LCqWqViXk9WF48+YF1c1hrfCNhFIyhv\r\np+TE2qdRU0jXdqewtKAixKsacytQ22rJaGU0veYakF10d6fona8g/a7cj3Ra\r\nia57gfL1EQqRCHeakhLOzeRJZbTFm1cXBDPVLu74gejqJZajC/AE0VsDQ9YY\r\nzX1SHZ6YgjdOa6+RGNBvF/BolJKZSjGKptQTNt0X7kVvM2Xc+Oi9aABsvte8\r\nuAxPMdvtmQvtbzwESqwgoaKkwmB+4lMQS8Sgd1Tj0me+2r7N0ew9ntbt1zJx\r\nChzF3E245mkbzuQc/uymE7UxmMY5BRfchUtaFzTQlVBFwXWlgzdTmlamFSir\r\nFssRe5ABkk6rWoaUVYjZQ/DinSp0Hwx3suFql9+Kre6UksdQRr0sz+ocr7NP\r\nuPSW6TyouoT5cbZIvqxvrX1ukiX8kg88srxxB/iP8J9jJx5rAOG3FxpnDS9N\r\nCv0655xFnR4mHbFR2b8pDY+fUpTGDg9UGNQ=\r\n=e7xJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fd95ca7ef.0_1672880538823_0.972384022832075","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/typography","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12fd384dbb4c519138ee5dfed2b45d9f86e6c5d4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1eb44faf9.0.tgz","fileCount":22,"integrity":"sha512-yM/jtd/VFVL0QMFnv5veq+iAb3jrf+jCv2OznrpEZlr52WXD2pxV1JR6GMCM8xTgDzNP8BJydLhdbi8lMYsGPg==","signatures":[{"sig":"MEYCIQDB6YmseiNaNEwWMYa/F9tSnBZRTLhctTHDmGvsqvLaLwIhANeegVn3VxqA6JyjT8RumXdp3QmtGUCmixIZ3746vkP/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpOjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkcQ//Tamrht8QbhGe4mr8m6JJm1B80vDOLt6LFHuuooRNORhKtuqn\r\n4xVc/Mz9jqt0xLfnk5tD76FRJU9NxVQop2RCGBpjPDOBj2TUzapHIjd+TnJ8\r\n/KDU978wV88eUPyDErUieKVHqGj7X0+lIi6tWM3jXaUdpYsWfQa2Iaz1aEuy\r\n/IJYB9RWQFOj941sscleuk24xP0u6NZAKmn20rAcvsnuN8AKt5bVwua6CL5n\r\nvxgk5PocukAEbAB0XuoluxAQt0wH7Q+cDGPIAZ3U8h6BT3TgSXKEdfsQUYIr\r\nSGUxSCJp+87SKYTBkJQbtc7KiT5FRPcbNnRaRxtnCBwnzrzQPlH3s0NbOr50\r\nBLQTDM/agJGVZ1gpSo+x7cwEfCrSzdJSmXKC94ZL8COeBelL7XOH/CIglNbh\r\nd/Hu/e/A1E5+TBt+bMIAs1Iz+HtwKPeUlL3SFC2yG54NoZldROuzh+xIMkSZ\r\nVN+IeW9n8qREymaH/OZQUpbCJt5eaX6/Y3xtgWl/5F+pcuYK774nXyisyC4B\r\neYNaurHOAUOaqonnoigv7b4uM/+gM8SLgWaYpazdiK6k/Og0ybJttFMuPyOZ\r\neBJkKgq2aJtfe8MXAmknTaIeakXVPsTTso4TjiTmCTvf5KFRzm/LBiR/oHE3\r\nVG80A/H62j7eNBPZN+jzFv4nrLd5E78pTN8=\r\n=44PY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1eb44faf9.0_1672909731249_0.9455501158616733","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/typography","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c7af76a6a96062873e0d7527173472589fe95dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.adcdb7db9.0.tgz","fileCount":22,"integrity":"sha512-Ig5UKx8TlXkLD6D2FPMwWaTlzQtgzRuWzBFLKIqFN6UCWPkTqAopMNdKeqdLKA0ldJjv+6xBzH3JE4yhdpF1iQ==","signatures":[{"sig":"MEQCIGyRcf1umIxPLX0efkBEJMH4Qo3WF9pctikOqlRJtHfxAiBDtRIl3eERzOtYVH64DNMUBkT+MQiAk1i3qAvXmZxjEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvjuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZqg/8DQDEOqvD9Z2dZk7+KZpfHRE+aJ+0RxOV9SiW9cE12Qyh+7WW\r\nqHT1WcsjDVTlU8En+cE/jIlo1lPWDPR2zDLjB8kTxcHo1NIn93BEx6x0P+SB\r\nt3Vsv3QCwpr77v7eusigjPL3n9nP313kukxOZ1YuqzQeKHZ2cTLe4y3WfQCu\r\nZb/2srEHquGoCUod+ywirPrTgTHe14WTCC7dB/HrupRmWFG6BY1z/gBrS6Ou\r\nqkk1XOKizek7gOnWeAyah4vy7RnqIJoXK0KkuCRrhDFS8FeKhJ9PpF1W26iI\r\nUYXypMdHWDBJcr/YYTQhczz+H0yN3Sp/p9oAzuFckP40/TUXKQbn9iFQhV5R\r\n4TDDBc+kUr3ifkQhVZzBvehpyROPlXYvgPPqIQ8LugNG8POtoaHt7tWCUDMp\r\nj+MFKhBIExTm1nrSYAEhF7621xc7IlQKqExu9Z1MOlRxxOF5SSZI4PLsgaiD\r\nam10flhryAbme80dsoRnGyXu/JjRVJpZPCI39vcmpybM/EQAKes9ak0Xkhct\r\nKc7PoKTMuLeYEdH17sXdk1fokaFgNPdOvdj8mQS4moXjXWhW0mII4WecdIMp\r\nDaQdhNCfMKvo3wQ43Z+1FY0WwoesacEK/nRPpuWrfq/tniHkvm1ljOZVLJpq\r\n08mFuPO7UoQuxY7nO1+ktX31isa9n28njp4=\r\n=Amhd\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.adcdb7db9.0_1672935661788_0.10575539182004912","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/typography","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.067af7eff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233cc6d9e4bffb2e010c42a788499c2dc0b4ee71","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.067af7eff.0.tgz","fileCount":22,"integrity":"sha512-YSlgJLI3j6BfxeOiPPGfUxjG5KijRjaZSlo7dkSvTp8l5SNXjdauhqlFftXAk3+9s/jjO4VPdA2GLDTMlI5/vw==","signatures":[{"sig":"MEYCIQDMvoDzktCxpraBhOIdtTDQUAvs1/7mqNADPvyMHOdVZgIhAP78LlYP0uVwqWzLzlrebkarMYJQJue4XZIbYLquwtJc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKudACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+NQ//bHnLwpsq7sEV1kOKSeErTMt9/mAA20F5TS2/shLRM1W9lHFx\r\n6fI2VGpr0fFUlfAkSEkrAAbTZflEMCWzSSnTaAzA3HKnp8RBIPIZcPDdFBuu\r\nlkL4ccOih/lfJN3EHZcZgeW18lAz4E2DxEPz1H7VTf6Aqdrp/nLo8ImudcMj\r\nAopm64+mPIThAGC2+HH5puHrWccNZHWKauN4LynhPMGKFLjq4rjZJpGPf+bF\r\nN6MCx1kb3tJzjITX719PyNGguPh/RvQeXdqY/BOCWo44wr0NVtmgqodGhbUr\r\n7gB603dZklA20eE6dLYZgzMz+nE/L2C+70DOXrEtDDAiZzGL0E6YeUT9u7Fs\r\ncvFfdOez6/Oe05IBTCXjXEBy97/UigGESB/q+KtZnIY6Bu2bnCt74EPC51eg\r\nafCkzSY0YRxnMMjF/mBNe8okVpiY5xTElK9u2vjMQRhRV7EjPOZHmY6GRZ2d\r\nXhEX4ArYx/YSKFmlvBgDaMtZg1Vp6NdeZjGlj2VJ/YkyM5/nRUH90ruskRnM\r\nVNjPykwm3cNIOOR2qg0ky8d+4ekOSkW9WyC3JyIBCVrzN3/kvMhFr+GL48qw\r\n16E0nQ5OhqzW/38B3XnGFlnGe3GbExet6qVhCd3pnbgxqLXc+Pc7p+1KKkWv\r\n2udAY35Vn/OQWPe9eI+7lN5GvG+vy1PX3e0=\r\n=7XwU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.067af7eff.0_1673046941087_0.2346290901460022","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/typography","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc5b17c69215ce0c73b978085b26f7226e46735e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.21d1196a7.0.tgz","fileCount":22,"integrity":"sha512-V6iaBbVDeIcDdHRFdai5mLwrKYIEcSpYQzqgR+bYVc7XdG1aROV1gw4Sx0e8k3WC61Fe+c3NZvo5AenRnNUZhA==","signatures":[{"sig":"MEUCIB0r2Lbs+2ErjB9bzbkNHDBMw51xV0RcG6Fx0DCpFk3wAiEA1eYzdz+aMEBMg9tYgLbqXPFUf36kVCb1n4yEOZvDPfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju++YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojTw/+NUHA88ibeN58gAP3iQROkzrXVeVujoVEY0w6B/kZ+xbYJriu\r\n/rOARr/5n0lgupNk2hZb+6UZGWjkheAYA8qNhno21DOnqDv3G0Up1qsC9yi1\r\npuFRAHjI50ZIi/FR7QrKqHR3NgYMky7J1F17CVoVSMHHoDcIoOE2x1xP45UW\r\nCbYw8IMOZiGT4oZKPxC8RSM3Ys31NHVQBImzkM2Rkr48Y16Mzb0tDQAJ3Unq\r\nB+IwbNzJHv9OKoeSuWfMjyboJy1ZvmDeph49+wB/b7gMjyf4pRgwBOjEuaus\r\nlQVCbXljoDgswDqSlwPE/QiJ/S+OoNJ7UQNEibkzdO6sZS6J6MVM/qvEArpq\r\nA1voV+zaZlMp+q2F7gK/qXH0iZyLWdtHe/WMaWz5PuGdxuqedG7f8FWBaH4E\r\ni4F+b10BBoTXhgHRwWR1gxrRrBY5Jr7YLHb9E6e+sUCbfMeFIsl5sgqru5JW\r\nClEgO+LhQPfAOR65ELzbwc2zkHipmlY+Hwz6GYeF8WPGe1SKJ/cdfV2I1W0F\r\nWAGebBKeU9BsG0mCeZPLvOaYJHmINAzcJTwQiAE6a8bhMIL1FdL4uJk7svjR\r\nY1ftQQct4yvY5XOsd3EO2/cV/5bGneki2GubIme2i2RARyah+dci04Jah23D\r\noNPK3n/0LYw1Vj0DJMpgv3EfqiUWuwAcQAs=\r\n=grz0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.21d1196a7.0_1673260952441_0.6430548484826892","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/typography","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dec06dc8fd7e458b8164eedc4c97fb19bd61bc32","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":22,"integrity":"sha512-Z6yABt84Sj9a5BS3fjgPHRTVk1+yLRz8vzWG5+4AYS+MiUt1nPyr8kOBxv7Iz391YWHODJ7djtngYevHEiOtQg==","signatures":[{"sig":"MEYCIQCdIPW/APtGGkOIh4ugNfGSKgSJSOqZmJHwKvfv4Og0LAIhAPl2R6BlpUrK9EvxpvgfcDRCki6AJ39RWMtYUnJU8DtG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJPeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Uw/+KAuuAZzTxNNLBMF40F+hEOQC1zgyn3pHvLAaChTO4J+ddbXH\r\nfZjxAmHbUER1I9ZgNkvTjOOZItBFjEh3DEGCQiKNmjh9ae1tE+dOuo56Qqg0\r\nZz0s6onH1W8gxhpGYCdiFOffHJo1t0O+N0dhBN16TgTJwgd/E42cvRE6XzI4\r\nex6+T3UoGEwNPVWRluOAYdq5udL63MAiEXBqPDWx8XxLmhNWrBrNOtJ8L4V0\r\nCXhDXiF67nszEd4huR0AHzq6cS7pQDw2lPfgU8UyoSRzecrP5lcvLyfFZku6\r\ngYpifBlWOuMsp7+T1Y/AAmXbmY7TEF/YIEtVm9qPLgj48F7M6vvAS4gA8FYP\r\nHw2DBDDDIcbUVWDGKFffvOGKo8CH9rEDSlhb4HbsWTTBaHd3jpI143NIbPzC\r\nWxxMF+rE8+Esqw5hSTuCsYDE/8adfHTQy4QjaHfQSg3xSk5ompj0re+Ys6fv\r\nn/ohR66eNA7n829xwaKYGWaWI6iLFMLYhOCM9Nz4Z9UVuGE5dD0W0x6bxG7r\r\nYv2eW/UzO35sOsacVZIKj50WE8NwBwvtKxy5MTtx30XTHUopYHYAei6NZJ0O\r\nwJR0MqjrAnVn0WptK+GSE/ZIwcgIJKZoJ0jq1OQmZKovS0jYjjfDoTlq5E3h\r\n9NhkW97asZGIdAzw1Xrp4/T7+JdHDQn16Qw=\r\n=CVUi\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8d2d8d3c4.0_1673303005944_0.7417382963380905","host":"s3://npm-registry-packages"}},"15.0.0-canary.f476fdece.0":{"name":"@material/typography","version":"15.0.0-canary.f476fdece.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f476fdece.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8ebfd9d29f64a9ee939bfd862555161cb013bc1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f476fdece.0.tgz","fileCount":22,"integrity":"sha512-Ut4Gs+cxiTrOACl/VVZrWxVBMGDGhA37M89h/QfnTa4NJ2s+UtmUj9MtMrl3TSiGOXYXDCjDJ35ZwiXAM9I3BQ==","signatures":[{"sig":"MEUCIQDaOd1GfPL9qnLmiHM92O6LQul+lh1HO7eiwyEyTjE0lwIgdYWyg51nzN6ruN9BbQAF/8ZQvlNhvIq9u4/0aznq3bY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvY7NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryTQ//UAj9Box7f1FaStpR0nIJRi8wxcieLx0dhBWCoi3maklMzouu\r\ni7VnOj0qnwkLwa/tLNVvjB2zh1QDG89jdfvfQpKdqLA8EsWRZT+Q1padN8Ly\r\nBvtvJJpnifhJxdUu/ruC5/r6imxrlIgf9+ertXNJCJ+TNeWpkK+lmYhUn7Qr\r\nqYJBHheZU47HhQlm8Jr3TFzmSjScCyhYRLn1rbLVlnQNe6ImxEms8fLrV76p\r\nEPPw+YbRhJN8M8rZ4pzeMRrkX73GEV7qdMABUA9nJkyis/Gg8HAqnCDq1jcz\r\nPQFfoSPpnzGrS2iaUGbKdL7+KBLOC1v3gu0S9f/pPUB9hGXalirFFrr55SkX\r\nLDMv0kNAXgrKYWERwbPfsfY2KzaEPYRlijJlnXwK0MPFs1PjKJ5sXZeqYkiK\r\nO1V/eEE5AZC+LAA1AbyOL9XGU+iJ8cSolx6X/3iXM56ncSf4UmXH6gmVMzBj\r\nlTECuR0WCRQeVtbZ2eVs+KiUVSMlC2NFccqRV4uEG/s8TpQNlNk+eIiZ421M\r\nGOMEhWSGYJdXOQNCcrpKJR+UyuaE4gauRnLlxFQTV1xwRZ1ugJwG2KYdqhF0\r\nE5d3dTWSm1yxtaK53eR04gQN8rSQZhCz3TkwQIFQYm5gbtEU9w1zg+xj0x3i\r\nUZCWA7fi6ACngp9PAB7rTkL1CUXAmh/VD+A=\r\n=C20n\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"672d5b55da7c88d57180edf75e7ce65ca2fefe0f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f476fdece.0","@material/feature-targeting":"15.0.0-canary.f476fdece.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f476fdece.0_1673367243813_0.6943212330874902","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/typography","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f083e94e1a94f67fdda786a2b85c2c2d01a2f5f4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":22,"integrity":"sha512-S5tbUjaEL/mg41lUcKujAS9LunL4hWBY+5QMeQ5jJeL/KUDMf55fS+6fUSUlx5LqHJHxFVmOItdjy+u2bAvOqQ==","signatures":[{"sig":"MEUCIQCOiXPI8rnw2qKhL3uHWWRT2AwOt2q3Pve6cxDARUjmjgIgFgKrYUll3nOMiJLUeBLx1QCMvVRfzXo2oEiFImX69RY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZHwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPYhAAhGeuGXfJRh1JgzpVMTcDVRgLSi9+YpK847s2WbsV/uDiK1FY\r\nuD2akpxEL+N9uygXfVIHUwGl+xMolfRDMzbWLXzX+SKY9+XUmeGKsaPPjDaT\r\nOiHsi+5olj+OTiapVQkHofwMt85E9tF9P7lPGIigHEBvhccE9F26+Axfp7/d\r\nVV+EDEw5rVo5T8YpVkcSSJGdtTHi4inSK/NRUezasVh+XJoDc3qQxRjQeW1R\r\nQZl2mjv9IrbQQkNaSBQ31jhF3f2yJ/S3vlANa8DDXWyAvvRmpfDZVeRnELf3\r\nwSJEY6V5uGqImRHfoFbkH0br27+LnIsqyMDzlUqW6UnUZ3PeddJ6+4mDF/jU\r\nqTcw9mg5H8yd/pCRJyv3w4RtoSr8SoPvhU1GYi/jnwtAP7L4ytRwgltWcuy8\r\n90pFOXd/n0WN/Tj+hQKFvmwlDwyQ0fTQedhkqoa9FGsgBBHNjINkoTF3tqnI\r\nPuF46wkgMerlPA76wqmaVPms2K2Dj3xBv5ui8DspZRzJICLxrOIZRuRFPudD\r\nWQS6AN+stPUehwuP8NOBw7OLneDZFDhW1knXIbfzfA8ecLKLDNLWlkPfafi3\r\nDstafmocDW7dKVnUFf91nLXIKjpaofWBkUZKTSb3L8ofexgVVVaVUeLGbKar\r\n+nJZbzM3T8WWXlyWxpXaBwldi0HfVo+ChpQ=\r\n=1JsR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fc6ee6c32.0_1673368047858_0.49459246953005853","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/typography","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8be80c1d6cb259e17cc23e7ab25a2c012ee292d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.73537ab0f.0.tgz","fileCount":22,"integrity":"sha512-t1bifmjv/RPwr0iGrk/K5CdVO5WLvp+urvUCcFGsBVmtxvwn4a20NV1ZZ7z+dkzbBZT1JpLhYwwAKh7KX32+dA==","signatures":[{"sig":"MEYCIQDCRuKQrYB8nZKhCOIxb+dZNxPhiKgcilmJ1RllERPpEQIhAJ3UQCgfXsWLc7v+ZnsC3/uEufGQ9TpKwqkmXkmnrzIP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvao1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9bA//b40BjKoHvNDjkTt4RbWpiVDxiH8I6rO3HCmXiQUEFy4kiBzk\r\njg2b2TRTLT2yOxYssM8gABL3zvESvlTQY/Q32jY2hnNoyTltGxGz01n94TIx\r\nkXuwr0wtTwBzCgsr9Aveg4fkHvRSDazIrXUVXS2TtbxdtgPap4NhN4zlxil2\r\nc2PNmRiO4LxZI/lD4IMvx+4iu8lUaveNRNMR5zQRvNIWtHPNiIp095EpRBpw\r\nVHc47Cu+3JCZo3e/ekbfPjU/ISv+kQKf6omvAfC1Ve2ZtC2xKRnTtq5KD+OP\r\nN6cII8/6RHTiI8AsfwQOEiMrkIgNOz4Ck2deLcC5UKyobGZ9nJ+/8K12zSku\r\nln69f3GemBwC31bxpvriD1+TRMcysddw1koDPzB5q4WLNwyjLhPGiC7d6tLT\r\nLqCchK2T4OOlGs+KQzgoUHDnelcW3tFb+8Q5NHDqOa9rVHT809sMbIK4fltq\r\nSD9NhecBxnmiqtFH9W0ZUQ4CzrcYreqvOcf0aQvw5koEVmR79y2vPY1jPhu2\r\ntV2OuxwtLoZwEDBW/MN6KLkwcPdxQjDKsFGugyEFGDH7HUPd178SlQoUGM2w\r\nOzKrJ0zdTQRsjbM1kLIrsYZFIj6r7TVi3iReXAHTcT5A4swaAbS9QwcXSSca\r\na1hRCinKf8rEPlZPw2jSNK8gIO+ncMfYon0=\r\n=qZdP\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.73537ab0f.0_1673374261461_0.5206585312438032","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/typography","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.684e33d25.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2bd2cf9054206337b0b59a633e0dce8f8e3563b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.684e33d25.0.tgz","fileCount":22,"integrity":"sha512-aVnvgMwcfNa/K4wujzpKDIxjGl2hbkEL+m+OKDSQqWYjKcP9QrbzCXJruJBqxrBoPRHLbqo47k5f9uT8raSgjw==","signatures":[{"sig":"MEUCIQDYhzXmy7O+UOGB7xyG49kukj4mzJ6GGyt3c+zficWHEgIgT87dJHXKdSiwyJQSKan/w65t9DlKJKP/RKHU64/Xjb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbnpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRbQ/8CpPTFh0Ob8VEGJTNJGc8k5ty+6+6CyLGuz7lciMmKV2xSFJS\r\n/QPFNJcR6B3agrCUQW7IG8ZyVrStvL53DlyaxFbWTwmR3uU/IianNK2kPBE/\r\nMXiJcMXtYCNaiFlpDlp+HJaFR4+VAq7XfS1eqw1OY7qREIqwaQKBoMw3UA1b\r\nqOaTSkX63k5a9DOj2BfmSbBCUyWjHk/hN3J1hhOjJ4pGRD/xUNHQ9cl5o4Gy\r\n0THEK21ca8YXOVQvo88lVk95sx4JTtqiA8q2siJTTCYd0l1iSbdUfELlLDPr\r\n1/CoiY4HeEQXD6FApc/qtTWJeOYjygWj9X5qU/ZXx5zrr8KF14lQty+lyHas\r\na/AlO7dngB44W7bb3u5/NVDz5pqu3BTQgQz70+OUK1jEOcyO0Ima9eGko1Mg\r\nbA55isIkVJoK3ll6E0yUAkXm/SqjS+6eKYn1MmJFMWdEjYkMssdTDVDwfEs4\r\nxMqRUv1CopbtxluyGwxISnb1hKynNhUvCE6XQkVtrxAjDw0qwAX0ga+MQLO5\r\nArLVKVWg8WOG/9W2iGtJjrQgf8MkAVhuHY2ntNT2M1Epwc8qLrPKO/LosRGX\r\nl81WSN3ITCxGE3ijBI3TilSAJC7CH8fko4Opat0uLVwbj36ID1ezh1AxjdWK\r\nRfoZ4npaFoOKaCHb+XXiuurJFfwMzc3G9Gg=\r\n=qKdv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.684e33d25.0_1673378281534_0.7613877208367335","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/typography","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ca0e01d20bee77f8d42e7db9e873ee6f32ab0f7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0e89aab6b.0.tgz","fileCount":22,"integrity":"sha512-xHGNs7VNgc3setHyv+desgbTsPHiQX5Dxs+5odKn3s4eI9Gbl4gPJsp3uV3WieMagFcAkQaXMkXUMs3cssNVhw==","signatures":[{"sig":"MEUCIB1mxJ5CgBiPayBH/snVtA4D2MCik51XFn/RmgRmzYWwAiEAiCUxmJhfuyCx9ObAdI+kOqdUYg7TdLnxgzYhVgupEQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuD0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5RAAklrcJk3D7ONKF+Bd9ow1UmTB/gH5RO4xJ/7cO2RbZprWBxYJ\r\nehOyZ7pqTX3nWM7xiGOP42SkihmP1tRe/Wc2IvWdX8TlKrHIiyfvdOwLS3YU\r\ntajANhgeOTey9hsFwPzllFbGiCmLE6PYJ0ARWrHOgEC/+nsYoKgmg30t12ZU\r\nsyuGLfb1CrtTgvVCRnJXc/VAa51lqKkBVbADJ3oX9E1bCigbsGXIrXKN1Dpy\r\ntbJxcwzDPhitJQGQ07LWszwJrs2/5CFRuRKkwMHhmXpydHMCpurbF0WWCuOH\r\n+IMKsGz9I9cFwfkehqUJhTJ43EWcUg6XTeUvztN3yVLWF0+ZpMovq4TCAY/t\r\n0F+ns575lHTEXWeRKqMPjkt4MZt7/qey4MqjkLAbShDvXB7qUhTGu31b7oWy\r\nqSwEzmXtfXf6tOhTo5+GmdNRaf2xqllZazM1Uh4SWMiN6Qdk9Rs4xTlMMUL8\r\nTaMjHCOfiGWYBmEvS8prq57T/WGo1+fIvENtBRE8vnr5nxCuGdpTcHcPm7CK\r\nVvkZIVIjz48zxBw0Skj8aF+OroZIDF7e/J4ZY1GCGxA9/+AeaMSuvHaZZfF/\r\nhEsHXtIo+fjCBzuxx9RrRJVUuaP0Rl0n6Xy/MMMJ/oiPlFZ2qL2z+Lhc1CRW\r\nv4dxbVDmQGvI1tFMZQFQCkTaRTH+pWtpBEA=\r\n=qi1X\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0e89aab6b.0_1673453812020_0.6747457630588973","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/typography","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86dc7bdf9c2cea9e81042560790ee1189b120843","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b0103d10a.0.tgz","fileCount":22,"integrity":"sha512-kspHc8zFwPDWTarmZIGWlZw1sRXxqdAOGf2lI8PszGcVpilyKDC1pA8LzB4H+me5HJXXv8IYJVmg8UNTTbQYbQ==","signatures":[{"sig":"MEUCIQDEgSywPmMDp+r1O/aB3PQduomTzu90uFGSJcuq9WqYLAIgTcy4Zx2woIlbxroYSqewbCTGnoyhZG/Q6Z0gsvPtWKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwn7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqepA/+L7LmvlDloYpV9s4y4lOXwa7gUvWgEIwMI5vgjvHYdsdGRqhY\r\n4E4AWdiK6wpjhnFGv/kOc9Np9SrsB5FVY1yjXei6rEcbkuiLlVrRIzdJQWdi\r\nheJEtwdZYGWi19XDpVijWx0PiBVceer4+F2kNWH5QngQtr8mfiEtcn6o6DmE\r\n7BgPmwNmrqFX6Xer/jsRllQ3B26eDlMZzvUrkfOZ9CyuUecGzXF4bKYendUI\r\nG+CVbSsF3kiKYNx9FcW6tdPehmslR4IhX9qfYJrRHw4mgvA1FfjOCvVCVLgJ\r\n4LlNayQrIDqp27zmVTupAwcn/J9+YgQmWUom5CgOe/FbihyRQpY0z0ermp1m\r\nqvmT9YY9M7ivSX3Q2xnm5ife6jhMLTftJnN6DOFUIulJJHnlU91pVpETxy79\r\n1RpdFMnQMtpqtW8xEutEQLurT13C31JWsbhi3gPAJZdTMUq6nixTq5ZPVnGt\r\nPS2Fv+s3Mik5Q2CzY6u8hMmA4lX4nvAKlnJAXuX3ePbHJPoB27eheyHo/2Z5\r\n0mmHS+0jbMMaC8oqOVcweqXOleF9sKz/H39N6CiCXEW5QNZSb+IZ+JsyBwsn\r\nsofLPIyYvKJPypiIKdWosoVmzeYZdzXtAPEMefcxRWdv0sT3pUJyBGJMgJia\r\nIdliQYK+98iHgriTLyG8ZLQBDXrr3wp3HqI=\r\n=9qVV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b0103d10a.0_1673464315103_0.04790247578489226","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/typography","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b36d37e08213870c995be6ca26420d0747813bc0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.50e7a5312.0.tgz","fileCount":22,"integrity":"sha512-FNr7WgZrQcQx2G6oYY4382KcUEKZoiQ2rbpz6Qecm28o8LGadpq1rtX0Mjc3d/nPpynmxI+EZ8MknwQpK2Ozmg==","signatures":[{"sig":"MEUCIQCnGs0LWJXb/ucfR002OkMQ+xppqLksxh6D5PlbZLTz4gIgGDA5EQkfwg1Cksfn1AR/jI3hpBqeLYg8hMPi80LwXbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyHPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8wQ/+IfvfVm1HiRmXgZPOrRNgZY09iJCPoC3e9WZK4ccSAfvArug3\r\nRGhIav8Dqigwmo44ICCmRKuwGNxE/w9sWsLRtaXRNvEbZv2/D0nohgQeTJDy\r\nGdKxbtXO93pgGKuHCYPgvUHL3Z3aN8CJMxysl0tmRs1P9rg5Bf1+OxB1tp4M\r\nf38UAtjYCioKQZhxNocnkingqOqAGfqy31FGCdAjzUBAv+47iiNN9npRP2I7\r\nrwTzRJewVt203R8rVg8UgYu6kJ8kKVhOEGLBrm2ef4tqU+4jxFDec1TLgFD1\r\njazEIq/95BKTxCKHU8gG9HshJZFtvXDCQeTldfovTnNS+oig5BbwugKzHW/l\r\nD7vahOMS4NgnkBTF0kuqkZ8NBU/CUBQI+yhIcH1/3LgOpPokxMy4fYKVFdSA\r\n/XWbFykIENy1Itx0T10ooWZzGouSKZ3pxmhP6OBjHs9Oy6e6bsGXkKSsqlI/\r\naom8zz+JiLElDLkO+J8bIN4B3usr+BiCLo+RofIsa4vwX0tEMiGJMIrRDApo\r\nQMVd4vxglyhfBAdntf/VlTSqGuE95dRC6zZysu6MJvbDAkOLX6oiqKIjEN6D\r\niDxHFmP7PH1s+XHE6hxL32C4px+7XhiremiVKpjoBnt8p8dkvMmcxOZWakz4\r\npo3MCIKmwPHep25IgpLeYTuI2rWUmTa4M5s=\r\n=MVGR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.50e7a5312.0_1673470415209_0.39393070929967977","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/typography","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.202823f54.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18d6f0607c4886a3f966e9b2a717ab9f6cdc9659","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.202823f54.0.tgz","fileCount":22,"integrity":"sha512-KOgWEzaKCD05VITKRtnLbknCC/6mSxDR1aRzWP5qqCM/0Lj0w4prWyBfublaAhnwdsH3J6cfwD4tdZVCJbUMtw==","signatures":[{"sig":"MEYCIQC2QuXFRR5pHR7YL4zv5OMktcX+zzSOZfXxszqrJ+6TRQIhAIlado5flIzCKqRQ9LF1PUZ42tRaXdqO+SYLZpi83mEi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyuPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgCw/+I52nZVorMX5lhoC3JZBgP9rM6l5GsnFIqUsHPR28JjkBbiQK\r\nxDgBOu1Kn/MEHLuAtchT/hPq0uGySa0VEe4ccqv7snsc9rdTewvYXvnAcMnI\r\nIeACHpvb4+5JC/+Ok1wx1ygoTIyENy6QEKs6HlTOZEbePTpiJWjONWHETDv/\r\n5RcEVCQ2K55nOTwbVzxSuOtCFOxeMaJ8/KLft+RFZEYH5gTyIfclQ7KhKqvd\r\nIgLf9gzKWdK/nw9eN4GrPVUSC7wVRgcAPHGko3qkKwKndFqOSXnk5NNSBPDq\r\ns+KgIyowNbY80M5C7ur1r3hLLKSNMPuIax1eFpi+f8faqo8fya0WF0g8OHkk\r\nSknckoXNO0ld3nvGUdzat5vo8uUDuwtJVt7fAitFR5vfTsM8KKj92tbfJDkQ\r\nwOC0b5n4w7uUMUwMMKJig07P+6fKCXk7N5VZ18IJw2iWwKtoKUn9CosmrBi0\r\n1fS0X2KyTVlv7Qa4A9198CjypGSxFP9SrNgjCs8L4cEj9SXo7kHmya5AiM/E\r\nMXTUbIcez5dVZlBmm4Anpm1yY4+Oy8eSO66alq5DX96G9eNRrx/0Wxr4X2dT\r\nKdvYOKbi7hdH6d+hhj4mY1Pv6gwU1kV4X9yA7UoYD01GUwozvZPs0Ea6qgeY\r\njvSlNTUt5RXzDohgR6BnYtiAySu5XcWfbnY=\r\n=MGjo\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.202823f54.0_1673472911146_0.6386815581339671","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/typography","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0646166c86de654b6314962cd65940c17556381","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.199fe2a2a.0.tgz","fileCount":22,"integrity":"sha512-IbIAnh990NULSuV1WGzm2OtIVjdhlwtIleXuoxoGksYD8OhLiQuuwxiytTb77/N2wbFnD6jLPTgV3CDreMgFdA==","signatures":[{"sig":"MEYCIQDfZwhcR/nZ9dXlpLZNvnUpTgzxGCwbFSTwM9SXjcjaXgIhAPZiGEVwM5MSFXoGV5YKRYOat9RAJzJIpbcekj2BRGJl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzA1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp+RAAo/elEfB4fA46Q4vI0GCceyaP+hTzwtqaZwdl3nzcSvDJQAmH\r\nGQn33Hvfx67iORJlmI6R7wGqKmMAN7hZNfeWjN2qwUUQuUVdWHEbDpKUtRi/\r\nMdczrkQ9vd15Jgkag5cd3yOlMm4No6JsjMvNYBN1jL8qvP/ct5X1MZSADxLV\r\n9evxBC6bWwR9gZk/NybjRgjFPsyxOCBMb7nTLN9yuTLZrK3aVjpBtQ4JCQll\r\nc+jsl4FkZZ5c0Uadu1Ye1mnuerVfpkq4YjGmz76WZUApA2GPaXW8z3xyhih+\r\nZCQVqo4LJ+aJePdPixN+O7rNiVHLKEID5dRXthwnP+P771kI9FGVU2pUaMsX\r\nJMuWQS7fAiZQoED5H/UQBpynw2P6jq5Lglo8HjGssc+DXHNTCOV1MsBSVVOX\r\n5tIeDhaLC3rzXPCLJrMzdHUNz56aWHLroWWSybsUK0GZleEldyAmw9+Y+xjj\r\n7WaEp1rgPxnrFRRbbAwkqVXSfLbDXVk+0eW4Nmqj3RFbZchK1fOpCHtmp2XV\r\nEe/AQdkoJGBeZnRYG0dP25eC24p9a+IT9x9XWwpcZp8Z1XvO78F6i2vQttwE\r\nDj3D21gV8uFO2JEW9XD4Y6aaKlv0pdLU1HuSUgfFvvOa94NQbnYxyuypu9RG\r\nILxk1mIYp+oi+HPnrjMowNRbdQYdKHSmqVo=\r\n=VCm8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.199fe2a2a.0_1673474101040_0.5259798046885666","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/typography","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e34b16ada7f450222dbd059034c0844848054ba7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8c0786d6f.0.tgz","fileCount":22,"integrity":"sha512-aCq2ibaU29/aRL8wTgYkZA7MhepUnP11QpKxkLfIOdOqibl7cWXe5yD5PQ5xYc0HmoIbmMFd5Idg68ayQBhj4Q==","signatures":[{"sig":"MEYCIQDbBduxHDzhoqBl0A0Mmzt5mhs/CTH3zGbKtJSsh5Gt9gIhAKZ1TnAgqLebl2ov84yWHp4wikoOpsMAYinyuiOviZ+S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBq9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwsA//S3hJRDQdEboYj/JcUHSKR2dmDF8DAYxH96lvnZ5HBFR4DVTo\r\n+EbiWR2AV/fY3FpnOp61UV0AxRz9ylJvFDuGVoS2v+AJHDq7RiAoQts8yW6x\r\nKZkcJMMlnPr+VM2+5IyXuJ+H7PwUanUMzBa2NYUd5ML0nD3KX6CoBEoBpKqe\r\niYf+A3RkOQo5Cp8104sszG2/UwZLmAa+wxkpfZeWWeFqK+ejWkxC3+EhjXB6\r\nJQ8Hugmkk5zbtgDWt/A93cDxo2RcwGxItyIh2jU7v+TQ5/FQjxdPtnjCkLmd\r\nDjW1N248cUeFKyn2cU9sUXNOZWJXt3HaENm+ir4SXW3e4O39HRBMKjQJCNeT\r\nT1AfZpkP+G/SxuTOr71IHOF4m1dTtbjWKVqECE45QSin4E7Vn2tRa1m/2cD6\r\nAWqOb/WuA/Svc6heVJTSXJ6m2GNUq9t5LqfGA6P5IYRFUGtfcvUJZWWwcJHV\r\nYjmg3i7YPXCoQ0alJmVmXgqS+9eNQk231Q/ymGnE/uQlx+trCxygJmgeh9UD\r\naJvqUtZf08CoE0yTYAmD9efbKQSVCnk6xm1iCn/xHutk/0iExBWhrrO1SiMj\r\nb2ZayOJRpwk1e+OJpGur8JZ72Fg738D0ZUFRmcnhc2odSLevvq3AmfJKKAgX\r\nQT+jd7f1H1J6mgpl8BBrpXcx2RoUu3of9AQ=\r\n=T2Ck\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8c0786d6f.0_1673534141744_0.10328182566517996","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/typography","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ec2762efb81008bd0095a8005303d3f0d983ba9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":22,"integrity":"sha512-1oex4kbX7VXymb6yS3+7BjYDdiuBhQc9fgCAPdub3Z4zxCagr7CQsKeKCb6THryQjUDk89a/AVD+kJpY1z/Mgg==","signatures":[{"sig":"MEUCIDDX2m7ACCEatv23BYTLryQsyfRQytIPgd3B+WbYyd9SAiEAxZcEnaPuBAXZBOEyvOrCwLkhnxAPVoRdHH/qa2C7Wf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvXPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWVA//QP8rxuI4t3zX7CqRniMT+sh5zuNDq0pRMxQ0q9pMoB3NcJsS\r\nt+M/CexufUIsqdF4dQbVR7wd5UKMAIdywC6TdwBxq2Kz7EoK96ykXWqvbWOm\r\nzQuVnbgFXlD9Opc9HAj4ZNrlAdtzOTTPUmckTxGgWCoHpEhroXyeQqB0OlI9\r\nGCbbNvUFWNIo5P85D4f4Bsjg3aBySumetTxRh1Eiiys3N2I1IA3lm3R7sFr4\r\nfMgQb29fsJgTq7kEqhzbsZmoZXW7fIN7/yGwmhAa0xlA3DRpTnx7zFjLdHvK\r\nt9gZcxOgqoaRkirW1kdWwI6cwycYiqr2vipJ9HzUAk7LZFKN19BYfpNSoxGb\r\nCfyigAEo6Yh2q+f7v54Ut+hn/zfN7ichNSAV08tyWEnkWk2s8W5fqCmBAUYA\r\nwikkmjU7DB4rgDQyMMk0bMCcxjq9kDau67lhhyXwhXPNFY8CYfh5qVQ36kTd\r\nc8Tn+3vGq2LwjiC7gthKc24AyuGE9VlR8XpwK8/X+omvnEemUcyPAl2Odq5t\r\nkkeJJfSSKYmwEFv16oYCIZI6Uw6bRhkSeK81sEQvKZJydN5XZD2LYB55DbUi\r\nB5UL8Al/6RYhE8LgTe83Xn7OS+Yz1KKpmCd6w0ruu4r7hmgTKmGsVclzBJRE\r\ntQ/L1xuuGlzq2upHPi/AIfi3A9ii7KYnKis=\r\n=TWnk\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8a74f7c6d.0_1673983439583_0.8751948484531518","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/typography","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9b62ee43a330b0d1ed902b6ee2d49c26a7c7497","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b4687fdc1.0.tgz","fileCount":22,"integrity":"sha512-2Izp1MQufpVpuG9K5TEHqsLfSV1Jd5KjgfhRTPxinHO1TulIa1t4kwMH2GlPNCGCdvB3+/EH3Qj8t9WG76BsrQ==","signatures":[{"sig":"MEUCIQCvBBs/DnMbeMVT16v6zMGNQw3N985DnDIDOvQ6s87KVAIgWnSo7w9eWNlGJmFU3Xd9mokjw25iD0oOcogBDouw6Ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ6cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4tw//XMHeI38mpUQN3EGe6jkGKR9hzWA2pR8f3Rzrwbho8P4+NmdS\r\nG8P5tQsfFR4geuOlK7ghy6OSKu2b+9gWgmVl8PvhHaTlgPN0VS3EJwt2M84p\r\nXUXue806amautvyndv9DK9tKI4R7sBz3YlSNa0qgvLwYIegK205kf52U4AZJ\r\nN+Zq6ybi9uHp1dhA4DK++6PsHLFCvU8vYRhjrMP9IYpTqDygTfvl50kMiqlR\r\n+UAXFu4CNX2ERt2dbgbtx/E0XMTGmjMJ33awuefzhtvGELft55WMf19HlgSD\r\nEwiUo6ORQETvHGqwqxW9k/bhzFhK9Gtho9WadsI7+v+PWcnC52SX3eLRuA7G\r\nyiBt4wdj4YIWvHtqqT/0/rI8CYGR4gP8qf7dm+1PmZJzvZ/ao2JSMIfbaaIq\r\ndFTf9uuR6zL2V6Rk3FCdxQdZq7Mvq27Pgp1hfpAN+BiaqdNQQtujb7Q+YHza\r\nhT46SOQTZlTiL4Ok+gYubJsDf18n14urlwx/0EJKyhhd8vujAh6UyGr+UOO/\r\nk8cbOlYAlN6MVnkPf2vfM5TWnlffCcUShAvdSa347l/osV2G6b07alK4EJUW\r\n0JyC+M8bkds+y9WFjP5ILidpW/v4/RyM32II6V8Ozx82p5edLhDHldaySg21\r\nrAMQ0Ov5TQU2tfyVgY/IPnztO/AE75jUVNQ=\r\n=51/6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b4687fdc1.0_1674157724409_0.41355913506920294","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/typography","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b836b9892.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1232a9eb24fce6d7db557ac05d62245fbc2eed15","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b836b9892.0.tgz","fileCount":22,"integrity":"sha512-FiDkBviG/DiYB6hJ9UUlQJdItBkKdpvtoR68hAqpNAFA7+JPc4SvO9haWIcqxz6yZ7UfcMag9o2CtYr0GHbQBQ==","signatures":[{"sig":"MEUCIBSCDG2k/0SOBuXEo1dtocm8jRNCsxw2DcokWVNXe1KfAiEA/nkV8Nk65jc2Xq0a7L1bFOpN1dNIage9/MKL64uahik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F3vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO2xAAi0NkN1My5ILfULG7HhVoCOIz9sCGsxLZnJ0ud7+Sw/z99bao\r\nmMZgMCjt1/6Q0N3uc39mLQy9bLZqT3VSu4J9pDuC62SepKIjnxcTYRbeGpP3\r\n77sJwY3zqvG8kLBjsIvdzouLZ9Gup4JWiFeBFMRP7rRcY0AtVspvRNOWdd4E\r\nRUpqB36oP91iFGQyDSyOxfmF0h+62IerpS7t7/gfS/2GfuZPXcNl6YVzo4s5\r\n4Tg3/4bxPCkQ19ePifpjnWadRswmPDMINGO+6vckxpQ3lw6SXPL130EqJbuL\r\nNclHe1nT9mxslo2kRgBpFTQ0IHAq5+FF7MFlO7DCG9PsFcKOtveOPg7VHsPg\r\n1O8i1HvJdt47ZT4Ma7eCPl1tyOCnpVSVrVOGKOYxppgnciBl29+k9+Xs/s2J\r\nN4davfZKUESQGxkwxPqjb0x+Xr74YZG5hb9ywyUhlJTahv3I6GQqgRIJ/tCJ\r\n+DSa1j2OB8UtdvSUUFnMkiyUALzjQwF/p7X4AEuxrdNpbrQKPoYterastl6E\r\nKCcqEACrsTJaUpVPRe+P6VBMOymQVco9HFBb1pn81EBrPrfT34KaE9s5axZf\r\nIjqKtAFdSg9+3JwoZ9rqKMwBW0GFKsy4oeoFxWhpiiV0Cu5l26Qs4b4X5bYm\r\n6o5nExkLyR9hSq6yPY/VampGmmzhLD7WShM=\r\n=uMop\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b836b9892.0_1674599919504_0.16424028460189644","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/typography","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"436adc6362dc9a079a9aa813b8d5eb987b9b84eb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e8912fd37.0.tgz","fileCount":22,"integrity":"sha512-xIHq9P+5CVIDYo2x/jcylPYMxHMMycRX9uy1FqarM+etgrX41jpWNiEcEFUdaXglNgLhS+56t2hnLanLpRKd0w==","signatures":[{"sig":"MEUCIGjjYmYt3YgC6kpxVxraJwn3cuzqD9indFidpIHwfNVMAiEA4mWdmDMBusuodj9dAZVF8tcsUeJcfXb9Bx/QXOk+9FI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sZ4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreCg/+KnpVRYEEpBWxJozpb6pcF9Wd50Pg6UWZl/o1ylFfywmpex5G\r\nW2JD/0O/BDc8YljuvvWmUQsdowK11lqMJyJ6BsQ+Y1fnxSlZT/rV6BFRZMJ0\r\n4f91pwQ3bSS0dLRQ2HZg7NyjHxPpB7tE+0XCuuYE3M0MwBC2HoowGhW7udbO\r\nE199XNprVC+k0fUHWb9RIKgtR06IHD1mT9o3DTQ6fv+1y9Pvy+qUohNGx4Zt\r\nQqdTFZfJSgoPR1UpAM8Xp0vRv7KH/AQJ/NkLloInK9A9kZILoM4acEFZJUhO\r\nJbogoLXovpBbqrNAQ/8yTZrvM2QB/0R+WLajGk2DHHXM8jDEpnDqRT4TtXhK\r\nwiU/LUaKEM0kHzQMSHlRCsHwQas001xr0hEESbH++p9eZO8nQ7EF/dN/MEEr\r\nmo4kxpA+yV8a2/IBod39+FsmMkIR17aUMFWRjuoQZB9UDGbqusYPbfAM+nQs\r\nGTJJ7jvP/oXk5pDxrzfsQJXRxgwovn4W4IvXL9LNGQ5sFZrEJKvV9A59GnLw\r\nsS5ycIXfTkRSFv63o3zEJb33i6A4bMvYk9FAI+W9Djvjv5hHF5G7pmMW4Hds\r\n1w+oeeoOiRIRessbofuzi6we1wInUugWwvb3DzY2O3DJcvT7c1sxEWI6XYWg\r\n4h3vQdFmi3JEYt+19k6tPENBb5w63O0X9f4=\r\n=19md\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e8912fd37.0_1674757751965_0.02737917324700878","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/typography","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa0529e20bd3748e3b639af229705f570ca5f26a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.16fbd30ff.0.tgz","fileCount":22,"integrity":"sha512-SRn9LztUFdAR4JXTY3S3qFofiL3kxDhFRxFZl4Ko/928w1p/55/hopHDsJglBkMaEb7g7arwRX0V5aNgVQivSw==","signatures":[{"sig":"MEUCIQD57v+DqLmSUqjmBfpmG1hn38bwmiJZzTHUpgqD/8q04AIgWnGPqfCMWi/nK+V9jDEC4JrB1p9liXtVPQnZJKJafIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0seqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRPRAAmLU2YoY9MdBDQRh/pSwweIaxJwTJ6yfjAmsYKZWzGcaou46Q\r\nw4Hm2aEz6A8HpDCOSZ9ouXHZJE7GGmDrsX8L2jmlUlOiJrKCwsmNqhqXAxcQ\r\nNEm4ot5mJxnmtHGEvAK+w/7SBJkFCc9VABUt/gXjSKi/H7ugHwuIGlFoW24q\r\nqOqV/MrNmRD32aR+scQNqROK9CUdn2Zd5BGrdXSkJRS9ctV8nEZJW1itLlaJ\r\nMMRHHGNHUCYC2CC3D+I2CqltJR+xyI6E314UiZT0eRtRGlAveRtItPrJuTAf\r\neLuOYeZcJ63M0iPpDK7vf6yK88ksAtNFMFrvCk9Jn/n/ZBeU18DsSDxo/TXQ\r\n27WYXM1fqTeNtiWJiT04ex6wxVFG/zvi60wDZwwL29PhVcb7EKpSfX/jlivN\r\nuj/zkuM+ZgT9sRp6j7VkXTR6NMR9GMtJpz3jvMHv5t7I7avUqkdTXJVvaDsB\r\nCinGKHw0WzUCgpni69p6a5BIy90OW2t9N2TRPmhyQipwbW2CozWMxyJWnkFw\r\nOdr5wBSz7moeM4OIPUUGufB0FxbrjeNQ69tVmwb0BoY55PIugjDKVz8miU0c\r\nXcF4Xe/qurYRpGq3lH3uZhafqvjjtAobyJy5iQoVBwtiGRXmFIEgvCOGsgRi\r\nFAXxiNEskGitzjpJWqE8F71+gRjLr2/pTEY=\r\n=JCew\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.16fbd30ff.0_1674758058476_0.830484764989365","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/typography","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.033ae083a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c321532ce1fbd56c3dddc7d54a1bd084ab113c0e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.033ae083a.0.tgz","fileCount":22,"integrity":"sha512-Ac/59rU7bIFyWSHg2MA7IvpNaRsuawPXojbyoE2z+ZnymGSDfE0fovo5q27pc2n/SeCqHxyxnvIdFy2lzkDIzg==","signatures":[{"sig":"MEUCIAskVvfg9Ef7huaHMSWtq32miw/mOIAtkWfPd7eWUZjsAiEAmWjNjwI8aVnCkl6kfLNGmBLoSgJhH+dj3O6iaB0WZxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tPZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN8g//dounkitjkMcyfw1g9f6fWQULdGrvhmWrr8rnqGSVAIbG2sb9\r\nuv/Ma0XTtW+LeAx8fa2+fjq1T4/CCDawmlM9jZkP7l7FaVY4bBRj3jRboE3f\r\ntnT9jF9afUlQL0w8S1Kc8ISqjjBGUT7fCOuyJOjd+Fxs4VVcMPaIav8bH9+U\r\nuIH/AWwyRB6gNjB+ok1x5+EuVlNadn+7M88ZKdpCYXqubx5wuBHjp6regx4P\r\nNEdWg2m7cp3yRk6xynJtzMVdIrWp6zNw/ZpA5j75y8g1MkFIPoUaa9tSI0wa\r\nEsHA2xRntLdQcJYdpm7DJkgJwMH1lKFXJQaKQGZV/MaWC2tfTZ1ZsLJmesvz\r\nWqtfjVKv8WCCmdWoKncmkxsHX6uw3jrMqVMTR/PUy0TT95RYlzbrWHK1rxQL\r\nfFapA7cUQd2nEYhVoMXm8KJyY4UUP7AJAFMtAsYaUs4GCjMXKPzpwK+A9pb1\r\nugDYO07f6mtNal/HOXowBPKOhRKGFbWBUEfD5xqWKvucELw27iCj3/Ln7l0K\r\nij1ZDerFZfG8h9Fi63xvQorSXGhv/Gs56AL8OMvlrtRWG911wEVC8kX2lhns\r\n13SDReRgTU9fMh4B5Ta1DhkypnmM740lV5j8MwIvzpvKQMtt5Le2uDhPvI/a\r\nkUJQm34menWvpzQaMeslrOI7xtNJq6THdT8=\r\n=Dn7C\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.033ae083a.0_1674761177638_0.4166316946879205","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/typography","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5536a8351e03261deb1fc4c68c3263df50baa2c5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3a705fa1d.0.tgz","fileCount":22,"integrity":"sha512-hn/0JqVfeZz9GSDHKHXf/T83BUlm/xiuQw9Tpzi/fg25IFrAEY1//JcKSixQEihROpRaMdrhVtK5lL5YYuGsxA==","signatures":[{"sig":"MEQCIDKVCy9Ic77mejQcUqM2+dNqjw24XL5CMG98yxFX+sp6AiAQLcOPuynoRyYU33Gr/zZ7LGfiXrmujMr6DH2b8nmbUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FN4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpI7A//dRGk6GzZRqa24JNs9hrsS5ZpE2E+LFnAIE2nWp/HrlKmAzDn\r\nHbOmOPySoEntnOKAKenToIxKgb63CRj05qSyykXhP7xbBgqVzpUPBprfOD+D\r\n+btqxK1TSrjDspx4EYUTvwaCGm949SGjdeJnQMk0mv8ERJwlHhSRJ8Ir3qJ8\r\ne3Sk2DLy002iVECw+s0GLdGPBsHLjlUYh5/myPm5Z5E+CRFVcPk6R1N5Xj1i\r\nZdOHvvAAbnP0TwiZu/kK70A8U2Oj5lpZ73lfVxF5/CP843lBQTHqrPR9XU3j\r\nYDe9sh6SGqbwjyTJJa7yT4NT/VWmI+FX+eoaLhlB87foLotEsHd3GcuX4DVG\r\nNOu6ZR9U8uMa4RW2Yz4lSbPe6/AFkGUwWS3qldfLwu9qRVJv2LS3eZdXxGex\r\nxNVjSFXA3+c6s6HrCTXbZ9BP37s6wdH0ZuZh053WRMVfV7AHJo8P0BdhcFQe\r\nPbqE//nH1azkb4YcB6MWKwJ+/C8+AfZFVSdZVDcwJROu8ULV79LPZuTX2/Mc\r\nht2i+rjHVGCRA1IGGnqwSnh8iODy/yUaNh/iNHVCXABXddkIWJzdNeGODxTS\r\nqCiLGvkap0mnOOvTK+5SmMgYls4ToD3wd8XBIs6R5/u0HvGvZQkz8ENSbaT/\r\npKECGMM4BRcifFoJ9zihwUPLvzvcIWv4uQo=\r\n=l0+h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3a705fa1d.0_1674859384456_0.4613980011938854","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/typography","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6b730968cc923ccd9ce1f01e87e80cea94a1b50","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":22,"integrity":"sha512-ZMqSyD/6upcWhZakm0qjO+vjItKwp64+JILJpabIj56DSwnQeCBZBSz2r45yerdd9A+p6T1Mmmn1/cWqNRLtiQ==","signatures":[{"sig":"MEYCIQC4h9gurjhqpcmDtS1dxc0x3KJMhTNkWshcvZRhVnKNuQIhANo8m0qpq9mrwq4kxmBCey26weXyJE2Tqtex1UqylZY2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TPWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN6hAAljZM/ZKUDqiScNDcfV9jQwaYoJb2OZ+fzBxlXjw38F++ygU6\r\neAIF9hZly3uTzwKzbM9QsXEnuPTN4pNCnaHp0Tj0PvbACs2r7vs1aylQ3nMs\r\neHJh7I801Uqtwb1g2eXUH7qxrHqHlN8KkZYPA1Br0X3069z3msaMa5cDfRDW\r\n8MhY7mwpxxEKIruagQgnPxlwRrgYEijoz+w9JCp1iSpAz2B+qde5HCXsrOv9\r\nF5H8xmMEaVVfmsMGgq7Idd88DTjRclgPc8bTf1UFXeAoLxRIvv/XS12baH5l\r\nXOJoUweDPUwXQEWgesQQS1AAtNS9Gf89TPFzduv0PY71BCdXvMrOvqdSrFn9\r\nzz4/theLd0GGZYmaUb+3q1YweLLCUSscaIzJxPP9taHC4jBotJC9PJPMxT4H\r\nN/+wcwaGkoeBepATb0wL7v2yHtkBLSYlY0Epn19l9/xkLZMuueGATZQBF8d4\r\nTXgdljBpvCO5lxhfi9ZI3latEzUyBKld4O7qA+NcxtFLXr7sKLsQGAEAO3Kl\r\n5eT+d+0Cp5R6eiKGW7xgB+W5yO4DBhLrVb7tJhBw7QOMNZenz6B8LWo8ahOJ\r\n+ARZBa5xdjMm1VhpnAnWH6poo009DAI6S7/Nagho8isNnQQR4k0mTdwmmBnr\r\nDutTgTALJX9kDhmWHP/jJbFySLl61d7XA3Y=\r\n=skr2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d6bea2ff2.0_1675178966160_0.8792709099573088","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/typography","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a66ce5608b58dbd58427657be15e2ea76cc03dc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0c94182c8.0.tgz","fileCount":22,"integrity":"sha512-MFvhdaV9Uvdlxw7uMNLDQkRfM80VTJpApwifYvYArwsrl0l6QxeFV7meKjLNS1LWDwqaeL9AZogAYiANVuiNpw==","signatures":[{"sig":"MEQCIHZhNRDtHDjka1/8gL7i1d4eVQb3+8qch6D24W6WM7MnAiBMTtq6WaXjoGNsuaM8smVWwEAurFvCX4PWNlhUwLWuVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qTFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJeBAAltCSt5OkhrrRjYjy2EP7XjYWxzCB37bbdtImBHf317QY+nSK\r\ni9zNqha70DL+m1kMZyhgX1SqBrdr0goRYJH/6hBUf4KiORPLkGfWzXTU3ljP\r\nfRuz6Y5EzWd5D8nnnshdS3x2JZyaP5DhAqq/cAiLbF/1KrFmtpprlbRRPwno\r\nmcJzWA2OhuNUdJNA0Q2vL82dZpmWOWIJQcSjFO/u2TAUU9VqrTEZRxuXC+mg\r\ndzPvEB+W1EFfrWNlFMTMQkzaei7LJGd3sH4MOWGVtWif9/6CZIbLRhtlfNFV\r\nxsoSmGQqhOfHmrFNNnfJSgcm/TdIpG6ldtsx5oPEvObrwsTMTkqFnMEIMLLT\r\nnfbgP8Brar6a+sBL1FLhVvXLlJDBt2YdBRpXlw8+8AjZVtCkBD4El4YUD0Qm\r\nrlMMWEU7momnKE+u4alIfGluk1sTlv7N7WGyhVrPDK2Zrjgs9iQNCieP2YPU\r\nhB/3+3RHZJ+Cr8HHK/Yz3dse+r3QDlvlYAQ6hmplYLiyw9x5Gf02HJ7bd4IA\r\nCfxbMx7pCfLFVAxuWx7D+9ffDzBVvOZ0WrAGAyLGpqS46WHQTBmz7LSGewQz\r\niJyyPumRW7y4SATChqkWi4cyhgmLxn6ZIp1Md6QG1DKwvYE0qZzZqpj+UQUb\r\nD076merJbJC4ZBXUb5OD4mcTKWDF7rJFm+s=\r\n=3g1M\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0c94182c8.0_1675273413629_0.6528227359572136","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/typography","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.15b221540.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"878354fec48fbe755944630aa6f6800a419f40cb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.15b221540.0.tgz","fileCount":22,"integrity":"sha512-4fmjCdk3lhufIrV/uYH3vIVlU2cO/XkBJybq5x2/0m5V+GcV6ti1Clzcd7XhpLvxeCCYTI5FsiNdIvBI8a3xSQ==","signatures":[{"sig":"MEQCICOujD/wDCO+kWCJDyjYlPb6VKZJddbShS7t4ZYlEAUvAiBuK8CFxV7UDpPczDr0ABrvIf60onirrA4YlTtpMhncEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qa7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyGw/+IPwovOy4+ID/dboscV5cmU1fnrEUFoPohLR9kew2AsV2Sgha\r\nPJQyT+RRX3Y7mwr9AAMvsCAHbNTQWnxoirn+tDbJOeztgsp+Q+ehzE8T0sEc\r\nGf8+gYPCZQM+L9Wv9mJQlZ3ry6rPdpLvQxgaVszWhAPq2uZ3pWxWYNqBljPj\r\nHb5lwAW/uX3/gynB2qT/MX/5B32AISEG3hGFCPeDs4+bE5fq8PXECXY/0UzF\r\nQ/2pf7RbiVvoBof2LymbNKa0pwOZUo9kGyFnuDJNMfgeuxUDmqCahpeYdOQF\r\nHA8AS/v9Mtba1u4CAVQpNNkn4fNeeqdws6am4VXewbr5wgUEFgzqaI0iq3oN\r\nsTO5/mOH7oiBLybLtwP5JfmNRAH42DS2j5eqhn7Yfg1pJH88+FZQey9pXXWT\r\nfRaor82PkKS2/BprVGB8cIpZx8NkA7QPqfb5fU6a1rhSRfuR2/yWDLCqjyw1\r\n4RJDlm0tDTuf6A8qpGvucHuJbDDi/rybipY2n/A4HTUEl0+SpOsyjX/Gm/rV\r\n2ZzO4OxZFuVkYPnDFbzfZkpGtHeG1VFwjaeC6ytpqruEr9xitRBHSCcaK/4K\r\nG6CF1Myn6orsGKXR6sqrrQZSsnDpXUwiWBSellIXe9RKzgorVASwCBjPSoL+\r\nioutUSRQJQMFy+4nnrx8WV9gxyDUCe5cqbM=\r\n=++2q\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.15b221540.0_1675273914860_0.884648718560409","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/typography","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3801aba76e05ba538fe8733e9c22c0c85f897b6e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.eeebb8bba.0.tgz","fileCount":22,"integrity":"sha512-inaftsrBgPeF0/EKR7APFMBuP2LpNRot4XpHLVJmkeHZ5syHeA13YE6uOpXlouXqMOfzXyA5wT4RYmgJHTW3vQ==","signatures":[{"sig":"MEUCIQCGUMqvYhmHH/mhjHNhHIDRFhKG5Hggx9zzGy1dgyOxnAIgGkXGyk9TdgSNeUTbOxGD/ac/BJhJyP4TeJ9caHIAG+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q2yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5VA/+JaGj2EIy8PDAnQJzoPeQefktek1PnW2dOc2XUWbA+YJFXaJH\r\npINNBENDuAzukxvUQmvW9cpTG1cI4/YoX+2YPZUPgxIOdwqQsqo2CsH6eggB\r\nSItD4omL48fznUd9LgkcPIRndwABRAHeUtWaRgrU5Or74rr5SZAz1MX3mZWq\r\noLLgCK2hCfXi3aYuWnkKhSOqKG8dW5mJFTPgdmeezETLWxcAxtXZbFqTBjyQ\r\nPc2vQpfFLlw0pQN4HUGwDdRvDRmdxxggykVrT089oY7IxOQMvxs/6zBBqFLM\r\njrOM24rx0XbRIxbBzLiKJGNFlbzfVCERDk2h0AeK6jYw0qrzk4YU88UCjG4v\r\nh4yYKSfyev9QJLV3e20BILo6Ns0YqrDL5fJOWso92SGpneDSJYJyQ+kRVsx9\r\nrsZCPKvjOLX5mbGNIEx6iyCG1MfkHwIFKKlYaQ8KSsPFDkZulB/1iGctfKH+\r\nz0X26H7zqezThxfPUUMPyRrzzvIkoznUq66FihQwHjTfHpFAeQtms0qN0llU\r\n7FcCo37EdzvJtpWTQmN1j3frvxQ7g4fQkt/2zfSDJPrQaIUc1cMKsaiteY6d\r\npgvY8gt7Wik6xKtSY0mmXtB18UujBzI6M14g/2bQb5kp6fLElrUo8OlcBmPT\r\nAt0T5ZiZ7gHpH0hYdtToZbErpAr4Xua38Qo=\r\n=N72Z\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.eeebb8bba.0_1675275698562_0.4762598446353494","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/typography","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66fef7bec98567a6507155519c2d12600294592f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6a4b3f834.0.tgz","fileCount":22,"integrity":"sha512-NFfL1NdgVEunXtjUE80NGcJcMYcJK5RfXNVl/ULUaWUmJPpz7+yxrTlTtQuGDCdunVqbUXBAS6BCiwqBJlXh6Q==","signatures":[{"sig":"MEUCIHmiM3HrJSIFHFHczVlNjRNnwuXVAnfc9K4l/EsPSGvTAiEAl6JLRP2KIQcHE873tcdr7AQU1d9SlojObjw3pJln814=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rYlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJHw//TjHgO9lQe7TYsV2Te7FR96CSHYqesIaV04gPZULITmCOJI/i\r\nzIs10Fl6UZcNs9c6GH+B7SUliFhZfd6k2319XV095lFvL1jtCP5NyyyT8DaW\r\nnQr+PNrBcZ58aZq12D7Jjyll3v9fPm0bs+irs9SD/TUdBKvgOmNZiT8njCqs\r\n/3jh4iECawHY4Kmq3Z0g7C+jkpMXuiN6YkH1CmPhssJ37HJU5vNCyfyoJniH\r\ncckvc0BJeWz6E8f4FrPHWPcmgltLM1f9KicOwIS44yOd1TfjynRUany6k08H\r\nwDLYhlHTUl9xUXCcq53rtKB0CWs0cnxGcX7IRAywifp9iIzPpB+VtP5HaOGr\r\nbjQDwP4ME0ZjNQHAZcT9YIdtmbL2gxJyU83nbjfZHtkA8ZhM0zuTFLLqaVjc\r\n00b1MiFVNjlmOBxJHw4mKNkXUY3MmUFgloJd6C2SozrSsPRq5GOGe2MOvz8a\r\noZQQtXPLa/a630b1SvfoVG8vEiXYTss2ORernuAwghgwXv4hN8X/GRtJdcri\r\njqXAcNTZduAzy/w8EpxZpB+LSc/okdzTti0/QCTR5JCszCOkKo9+cQIvYYwM\r\nqsjc4gK/9xKFId4KsKmwoaN16TuJsVe9zuEVmdyJuqULqro0uQxTnR8LTa7h\r\ndXXvzvfiIaCJJ3mZnUU+j2wYIFrrOO6kNGo=\r\n=GGkU\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6a4b3f834.0_1675277861546_0.12176918167155115","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/typography","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a76d1597a067731049a48a8cffadafb51547614","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b177b40e2.0.tgz","fileCount":22,"integrity":"sha512-llXqbZP1Mtixit9xuG943BUY9cMYB8QHkEV9fV64z5IP9Xs7496gVE/VIh1GXJ1OnCILy4mXpGpXGPiUSTSdGg==","signatures":[{"sig":"MEUCIGeNNArOU6Fvin/uXpispZu/HzwpQydj8VMb6r5b/HsPAiEAnP5kQbyU4u7iZXvnMKnQqKuONI/kLtNk2RYL+pmYgQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y8EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ3Q/+L4FN2xltbnJ8bI1LqVLHq/v2PwMa/YzY0ebyaWAKE9G1Beg0\r\nrDkCaZVaKJfpI6PpnqZHwJ/QC6XQ66mE4J/YOz8wqYMjEHakz9PUoeu38j0m\r\n4aAnkBUG4xV2jJSl6fRLTwB0SecT1T6WpBQYGeTOcpnRVi4CTLnq4S4KMnZt\r\nEwe7/bCherPndoJNZQZl50+EtEWXTwC0oHW82Z0SaxsAlUri9LHIzEaZvAqt\r\nT9wS686JI8eCp1va+chpO4tBcAtKe1vspWC7BdZkgd3bb5DyNJ6fsQrWLD9y\r\nqo3Zdmy0Yz2gJx17OxlFXCsNKit92dz/NYdeDskBA2vtrp/m5aC9bMm57waH\r\nqYWekltA4xAHhwQyESEciBHr0AtTeU7TX660VhnH7+mhdiOSEf6zZMaFQwUw\r\nWTIzBUR8jnMDDPXmafiHCA5dGBeY4ovY3OLwJAUfJV7+yBSN7Kl15AmHzU+f\r\nWN7oLGnHSkgZJIvEwW3FIVXLDRMIOiExswBCLRUvTYn3mI/sJ8/ub8nZNcPz\r\nUK+zUMN7Lq2LYlC4x0jAhbBZvvhJHNC1jt/y3dSHrM5WPPflp0zfZdIIBwi/\r\nxtBHcB81Ca9ZDTH5TTWgfASQkDJCE0PHcZh6eL4hPqNQDUb0qkE71jLBAsuq\r\n0Z8+Gq1v/BHDa/hIhPSKafytZKNwwglZziY=\r\n=iAi9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b177b40e2.0_1675308804677_0.18455773978990986","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/typography","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d9f821042.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e2c06a8154013b0b3269e9f4837a5ee1ef3503e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d9f821042.0.tgz","fileCount":22,"integrity":"sha512-YfCaWPzlSLe1b1r1dRe+Y3s3V40deTlUKJ1yhPGG/DonY6O1ifzZ+qLLSoYh8piCbQJxFPekT78DHB8WlbNvqA==","signatures":[{"sig":"MEYCIQDBK8+3WXdXQUdz3uFZ682eFb3bMkIHfzmQS7NtsSM0FQIhALltJgqLKVCASV5ygU0fczR/8lMGS0pjHZZNS/n/NKkY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/S/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKGw//TpFcbhfjbFH2krUyW9xdWdUrBAIiPS6e6M1pSdm78ZEmeZZo\r\nu1h9p8r3dQzleidEn+8XeeRaCpG7deqkC25BShrgrD1CJSW3RyJJCGPd/7QD\r\nC4v0dbTNtwZZrVnugQV7Hntlm035dvSa9uTQEmBMgigPDFzXRJprAGX6vbh4\r\n7sWn/oaC/HV869thkGnFzCYTIO1GZSgegVgIaEpb3xOICetij4nvvYcrem09\r\nUgygtdYzBdJ9/nzzzNXLTW+TwSPAKdLPINgIxUMPPKDPJWRPykhXcQ/EXVGV\r\nyQVR3+fCVrjtmHh5cYGz7R6yymDehCG+awPBdBlPGy+MeB9GEUp+uGixdAiH\r\nsiMrR0dnUSjkONOQraqcgH7+KScZMHV26+kzeqvDjKKm3hPi2tX7vUDKSxUF\r\naZfUWlJjC4wL+6vNumYf7Bskpia9KePMFMJp1B1q8sHrtUq0W7s2OPsP0SLm\r\n8BVN3KQL1Cmjqrlh4bAuXpTeDqrHsCJmzj35gz9Oa5ROeiCmgewst/lxHAp1\r\nmKlTEPhHGdV+RO7gXjnJ6NL44MvA3NaBuAIB1ZJvPAVkIZg/jUEBmHiAMwBA\r\nKXqBUzjYwHwnMo/eKjSeOdDWNrqfCjFse6jodAzcP9mDC7x6AhnYwd2w5pRo\r\nc2yJB4sSZ7ZKbSSvN/iuypugB/zQBTBluiU=\r\n=9JVD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d9f821042.0_1675359423235_0.28726718268262963","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/typography","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5bcba0708f404461982471b89bdfc2a46ecb066","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.47c7deb19.0.tgz","fileCount":22,"integrity":"sha512-OGmvxlrKcsnM91Wh1CFAMOY9msrIxBh+2jt2HN+szLct+IYa9dlUX4PShVbPn2rlP227yBIIE+f1d5dr1FfrEA==","signatures":[{"sig":"MEYCIQCT3A1wO6KhYMRMNRYxf3hW1mUbiKWtKvb5a0nrRXhhQAIhAMTAQT+KKQFglXfWvoJ1la8gF/5OoOW70MYr/6NiQN8J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M8FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhEQ/+LRfd9zg67kIuYoeVRhBCuEiZvnhLoJkK3jaKiIJOESLfjSWr\r\nkRv23TpVAANBzeclOZ6Ed1SuPyAuK4Oi2+vHcAb0kxCU70OnHNdDJS7NqYoO\r\nuCxQLWiiMnzs+6mrZ2KE+2PxekBIKiP0cfJsAytkK6C+bg6CagQsKgFUPnsw\r\nwaTBf0LvQsk2MBPjqggM6b+WORI6mXdWw5azeUJ1xAF+1ECadXVARsml78Q7\r\nBioz3o3UDEQLvO2dfO7DDK/30kIDqUxBL9OI5M5gJUEJ3rxVhn7EKLzDyHKI\r\nB9CTQXVGTIW4ltVjiCbTGE5YoqgeuTa8o9sw0TFIf4L4A51zYvPte50Xxs9b\r\nsMRgne4QMdIjGVLfHj/r0iEFVirAUwVpprGM/VnafUR46Rs4VWzy+gHBGRyH\r\nSALjv1wPmaupTq9xFQ/h/Q5gsdjgXevVg00EUFdVqRbri1UmP+hOSgs7pPZl\r\nCrnaryWOr7jAVigi2GiDIoAeCVq/U43zlDPzqeg+mphqZuBd55GBGmgRkMAt\r\nwNZRVJdYHtjwFBiCfzSlIEheFJxzUD33Y2rLBQMaQF6U79XQ8VCJhW0JXNWs\r\n4VKVZ168Vvk5y7Hgpgbt5W+k8kKYcfbw3yXacQGECvqx03ywOdShpOWywDDd\r\nKe4JhoSDYRG/tdwJK4R6j+zKC65whSR1Rrc=\r\n=3hB5\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.47c7deb19.0_1675415300810_0.27057325422731116","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/typography","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e00e50768ed72e8a95b08b36ecbf2b57ffa34be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":22,"integrity":"sha512-eR4iA/YOXXa7krIqfC/zVhLzjxVbrQKKZf8/JUwI48SUDHdp9zk203HuBQ5cB+mep73e4t0BNUZphTf/yWp1ew==","signatures":[{"sig":"MEQCIGj6+FC7Gp5BrtO2CeJzo+DjQUfjGznjNAd5wxhccJUdAiBU9EluxgZyr21h7cTz9aaYTbKEh/ZilECFNJp8H6ND8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3felACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojKw/+NAd6zV2Ukb8lIk4tJtBPZtGtqiEYC0PmOS4cEZxM7h+s5kfc\r\nWk+xMCH3RXN3jrkr5iElj/5tf2NeU8sZd6xLls8/YjkWOylKNlBulNejh6yB\r\npRgx5Y6KTOPF/o//JN22EmzXWyUKBkGb1lwmlvQQwe8hllYGkeQ/X3HaDAlK\r\nBAxBQJwjng+O5pe26KAiG7+xWgILUSyjLewZKqZtMz12V3Zy2Yd/NWZg0bC+\r\nBgsDPwbVgHuR871BiM/qGUhXQ8lX6HtvBDeUF9x70fuNukLJrgVO8VOAjhcF\r\nxahQg3wMlPtkx3nhNsh4k+dOJ5FQjT29RDza9OQ6AMhhbraGGW8K6GL2RkXF\r\niWi5hBu1DNPFIZrARdSiDdzRjf1n6RvrsdtFg1YTsNpqvp2ad0k5sdVhYr6E\r\ngg9OfPTcDkmnKmI4u301PcjS8NMgn6SMzLyBEg3/q2u9AlN0t6pBidlfm5HU\r\nLVGwwXV/4NIsoebHZ4OOlVAAApDNEY+QBD8PQOVAo/mcX5jU5aMgyts0y1Fn\r\nsXBaZq7x9CKPXT80+AE/oBOeJgI3ODB+zEXVJfj0yajWjCHleS849RQ6lYwX\r\n11QMjqpUU9VqrdEKbFx2n2hnBFiJzZd2FXaBKupSCh2inn1A/6znoNZfXzRF\r\nwhUYtZvpQASqc4wxTYIpDEYE2zJ/ZyiWsnc=\r\n=9su+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a16dbd1a6.0_1675491237708_0.9966964748310652","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/typography","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.93416f87a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a5583ca854eb678418363ba72417106d443c025","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.93416f87a.0.tgz","fileCount":22,"integrity":"sha512-qhXCJjldD9kC3C0TNx08FGT2LRvPzcHcRUpXtKj5sSz3PVRAfd7Mij2oSw666byvWOnxObSyrUgUKFfokV4G/Q==","signatures":[{"sig":"MEUCIQD/Ql3KDcpIRtMwEVTQqaMsnouD4+isvn9Yb3aBzmsqJwIgBPnX1XrAZcOSKoSWNCc+x0fOpiTX2kRoUtR7vj3Ufy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMmxAAn0duKoYuD5wvdjipqfGtYM4v9mT/NVI0d/FmGeoOurU4D9yj\r\n8iI0RwZA1GiS6Lfe0oQ3EBk0MslgmQ5ZlDFH10JO81JOFqSVWTCXILMNatJg\r\n7cZhN2aead7TOmVTqp3WiNF+Ud14VOsd9wV36n6SAPANYv1Tmk2oaaDk+V2z\r\ngFy0nx9EyVathmmLpTQDvjhNWTFZBndRk+vy4iaqiOUlO6Gh4iQ88m5O0E25\r\n1mPbLnc6CJvneZ+vZ3Bw3OIMk7V0LyUMIdIkfuD+RdVxU4Uo3IoZ/D06GDwL\r\nET2hSq6z9ZD4ZnhExERsZDdE68P8pE+SRRCk4fd8MVo0DLeZTDleZsdmusSd\r\nlnEEC48H+JGUQoTiTMGDpjWmAPMucgb8uojEa7cx5yfrAkftvtCCsSaips9s\r\n4w/wMNfkUsUDHMNzNcQjXUuKUOk7bomjGn+sRoP/Re2k2wPxIHZsbPDET+JC\r\n9CM/3TS50lthouxAS0tGb5Olkv7MAcoZJ/pwHBYfZNESmZSLUw7zVIYfpw5w\r\nLUzhHqpyrtHYrFFaTp8ZiO4do1w+TrtokRT5a9dyIcqKCQKqdvjtf67SYiwk\r\nuWdeP7IqPxn3pjQFlf/QQjMgdtqbG+rM8l9kihsaWIXj7izcnZ9RSrKlUxMa\r\na8s0JeD8qqJ62OjzMYcej3a7yHHRu+thtT4=\r\n=Ifyl\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.93416f87a.0_1675776208246_0.7499131143766762","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/typography","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9df1ac52b4b3f9d89d7477d81ceb506c8a5bbc91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.49b8e7442.0.tgz","fileCount":22,"integrity":"sha512-0qaVEw8AsjjAyBj6FJaX/PE+DO/9gqrNpL7KGAWvEzAN5fsW8hxjCmWI4zO1C+C9dR9ylU9NNXB6MxV87t6BWQ==","signatures":[{"sig":"MEUCIB2ZBr13YWZQ1wLYmudMBdqqBcid1vILmLvyhiz4i381AiEAkB3rsUQaGF38VxKROuU9K8twjjPqqqBNUwrompFsL7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4toDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfIQ/8D4vTalBwmYHisC+9yurZqIP4R1vKK5p6ZexpPCjFRYlE/tBT\r\ngqp+WXcYbpkM5zWXVgfU+vnD/uTeSTE9Rrv6Bv7O/fC3e1205itKZXAKT1Dr\r\nzFUwY76cWJOz72pZXHX9+KcgXYni23IcqFtDpHAYedeNBRtbBw+ZyoEVjxpe\r\n6xQQlcvWKBzJYB3RZuFJKyrKzXot6177jGcwv2iu9Nl1vDqynk2woJ4NPhmy\r\nxSV4rz8HVs9yTUO3iqhhLPLAeoPsJn0wZs8s+j971BlmbiU+D3WK0XLX+sPm\r\neNMd+GpYEZBaxiFJ+Loe9AGE1I5SjDHyRzlPXY9kWWA4NKMCfHGe0ur/t3A5\r\n+9+vSFcgLdCAkaupnye2GSGIbb6MuE2LgcZgEpNsQobo06lWs0RMUg7FkqAt\r\n5v8DkElQae2QtCgkqYOOaenINEeT60cFYK5AySAakaak237TjDSPuRo2Ngo0\r\npimQGDAqw663DL/Gw5pGQnTV0Us/xBt3RIWQNwrB3TBA3afS2JpMU9roYrBM\r\nkOEI3YKx7NFOb1oNEcdQxPnvYH6iXMq9Y2vxbkzm2z7PAcx648kRIg0LExf9\r\nWvUQMZtMncg7rDC8KQUUhysxTatcMtM8Z2KUPTrsv+LSw2hKjik/CBajzuds\r\npgLUfzizoDkCqeq2jUyRQvSAtFrt2kAW1+s=\r\n=yfsJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.49b8e7442.0_1675811330833_0.9620567543533025","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/typography","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.de38de758.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d307ce790c286b403ed7de996221ed63438b58c4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.de38de758.0.tgz","fileCount":22,"integrity":"sha512-nguo+FAOtGR7Qx/7OTUiq3E6yIaMsn8W7M4or3qo0CIoT+52NAq4N30AJd9L/VPwpnR17PsPaAOridtUGDBnzA==","signatures":[{"sig":"MEUCIQD7IyKIfhjEKLYUAei4HDeIZY3/rR7yuUcgo4+v16SuKwIgVVLR+q2DJVu97sU2kQEOoHCQwxNtRsvDqUjmgN3K7Fc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RQ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2vw/+LqQk3Ch2VYJMilJQ+jSxWkUVAV+569INYKBJPLb40SC0NfRN\r\n514Fx9rjrQOkWwB/3ZFKh7i96kzZEqDaAqXPbvKoRcVslwKDsI5eVifAHcsN\r\nlUdNm0XjiPfyAsaBOfm3QTT+kElS9cZBCqM7mRTyfsIGmLpN0nQFkgg6IZHa\r\nEOltZPHtAItMXb+fQOoVLQjLdcEohP1gPMLZkEPMpJ+Zi+Jikl5rxZQaCXpO\r\nTwkNMV+gR9Apyt8EKM6a7dqQAvxAty4m+VFbHEozdHH3iMOhUKpnE0B+OHjF\r\nYmPztMs6RMl1k8fvyC+D2QS0C/HI/iTdfgUrhlpfr13nKhHD/zujbJ7HcssU\r\nGobMaTDB1nNK2mi1m6jbCkz3KxzChk0rvhxCI0tBHp8itPJrrcbDq+uC615t\r\nJeod5MC7gZwHKCmL9sTbcRhwMWWyBavka6QWfTm7R2t+0rBkI/9Rnvo56JGP\r\ntYirszmui1hJ45dmaob1j/HvQYOyhsWM2bZYf0TQfOuX0cylqMSHGffomu8a\r\n4fH8aYU+6pxZfHGIYh8VQGvtmbGaUk3He73rEtjDEfr0kj3u+pVfqsQVxITh\r\nt//kjbTTQSUvYtlDNQqM5YdJtEUM9rv3zRHqtIw9Fdo03AyvgWgPNlDR+c31\r\n42NTRtDvhAK9jbptCXHb1rNCyHOHmS2wo40=\r\n=c9+U\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.de38de758.0_1675957300372_0.3234422693536425","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/typography","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94e385515198b8cfddf69c910cd867d8151df636","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4d62de70c.0.tgz","fileCount":22,"integrity":"sha512-BsNKT1JfUAIztsPLvIdwme5fQUPq8Cp3Q/5EcV5E8C0iPWIhqG+Wvx1nlIxmd9vu0/CA1uoRFwzmJlQwQSuWyg==","signatures":[{"sig":"MEUCICZVVUbTt9zdFyO2fPdr83KisdHWKIGvuPZpTRI4WQN1AiEAz95tqmibxLv79E6N0AXGCj6bvja+/6THplqnKaL62/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W1qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqCw/+Ih4twiucPfmWP+17TE3DhVvDr0U/I5aeEVMznxRtipDKgq/z\r\nCSsmUKyrh96lmEi7pyE1VicFS/pg6Xp20KLZuTCRQuWl3Gd1t0lmIgC1CpvG\r\nSTT4g+NZTIiXf/zun8SCSFUAaEqb2Nho5khUepDh2ycIAT/JtnswX2+2RlMD\r\nhqSkLPZWKDTr65CXlR5gZ9aSjgsMYuWY3EJ1LIiDSivoSMmSw/wQ9kAtMe74\r\nlS3dwUjImuTQoUn0zIu//+wrAcmm0wHft2nsyDoY4InJSosTmBR+b+BCmgA8\r\nA3LASjnB/mnC7uqghIqjObVWIW/E4vx3sWadgotzsxDhxxnYJNI8P1ojUAQX\r\njmjjBWKS4eacQ1Je5jJlNixxJHoHvtBwAkRl2EaHV2y32/GI+9Ln0Y6n/k7O\r\nQCRpIt3OIzYXA82Hug9VI8X1LzpcRBCqCirlEt/0URHEWVu+BYwk6BCgk55E\r\n24iWEzbGncU2xuATdXPPx8T/wIgUhKzCgW/Cka29YkM6AFCBVi7IhiWq3YaY\r\n/kQw3xPksRq4gFmPz9AvAKfOWKKIC/XTnd/coIAGnF715KS0K7DI7c4OM11+\r\nXFJnQmNsvf1RSyjyUQ64Q23/2QpPxvIGV5xbzC+7+IzPH9raY225v0MYKrGi\r\nFfN6nvtKURnoXwA6wfi4reLAItwIFSU9kOs=\r\n=BTXV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4d62de70c.0_1675980138356_0.27757790892049217","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/typography","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a00e330319596fa78d9d2f5b93d3675652bd2e5e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6fcd8d418.0.tgz","fileCount":22,"integrity":"sha512-8+qW35LrbIc+hCG4nVjSlxhXxA/U0uvnecTPE/oo+CyHJuIqSBki3TbKoVMTmnEbZA9nXrvgrMQr0A8lij+m1Q==","signatures":[{"sig":"MEYCIQDUIEpJJw0CXdCX0ZIXyKuLxJGPRaaICeIlZMJoxgEvsAIhAOScSPJnU42vrC/VYIdWf1Mq3iQSZG+AHF2rZAnE41TF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iO+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqNA/9GhH6CCmSH9zyBF0Stf6P9OcYh5kpzrPnFjGuhhShSxgMMjbk\r\n97f7zLmSwUoUJnXENxY5pY6LdJmew1hdnTUR9thA52u2SldQYqzuGfcDIKcw\r\nfMiV6wFqgqiVv9v2itBQhjQsJ0N7nWZzF3iMtGPLMCZ4GteFrCy6j1FNxLy2\r\nLWDjjhNHcmUleVjwUcxwnAvHHex/umHpltV3ehmPS5TFAvFCnf0d6KQrr/fc\r\noLi6qD7bdY0cjFA1TsSsx0a1UDx4REZsZVd052F+isC9TS9ON9LWlFHjf0ui\r\nKz8mZIyGf/L5suhv02pPF3osYMGWNv9/3qfcl39ZXWxnuyJPiB7wcxbrItf1\r\nvjt3GhH2xvbl7lDUAGF1hh1wR0QMi32hKHM8Fikp8KDH1mTHxsZOZoyamejg\r\n4+CrnrcF2dduVM7OCjB6W9Bh65dCMwItxHmkbfZI774RQB8yZ/dhA0rBqea0\r\ntUTZi8Yz1i8uXG/+DJfUEOpwYkQ97xYs0jUvtxNb2uWaV60iKAl+LHFI9VQM\r\nf0WYVMEQNiB9Ybim7kHmY3qwkXTPf6pITpdoKkehjibXqHv1/teQw5Jmj+nZ\r\nbOEJsIBJktLIbFnfI/3oJoZ0xAap74hg/9qqCTWwXstWU6oXlMsWkwXg+emV\r\n3qTp1AxHDDK65OUk8sITPFLo36M0iz8A+Ec=\r\n=yqgp\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6fcd8d418.0_1676288958184_0.07463014570660187","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/typography","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.066d9439b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea3062f88d9ca07018956864f750570f1b343afb","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.066d9439b.0.tgz","fileCount":22,"integrity":"sha512-9BaKEmVOfggrmKhLuvNXjOXv9asY9ebObDiVQ0A1BEUTgTf5Gt2Dy7v1jOoVCTtiYCXCaE8xlnzXhjILBmJdWA==","signatures":[{"sig":"MEYCIQDqYGsOtfPlh6FKCjobM5xdwbHj7J7t4WtYex0lkvRHtAIhAMbjjRFjSsQ7qZFPq3b4fnfTKTlavCgZMGJGkVkeVshu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TkPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh0w//XSoyd2RwYGPbtr5lrOLFwA+fJQy9Ah7cTohxPWc2/kz94Xtt\r\nGCzAFNoXcbVofJrSZsaT3yWO5jPoEPTFHMrkBCkJPsfc8Pfx9d18toltPlpR\r\nW84sIHGjDu7pHDzSYZKTKemGrXx4PTUZkuUvbfEf66NtQL1EeB7wVPXJQtn4\r\n2W9N2Y8eI5Kv4k62YLnFCYljX9eTrhC5ITid9lW2Ypi23xl2TEmyzqfZP+9u\r\ni3NLRokNqy+NBx9jbA0CcyuC4oUfU0bJMCXtVOiNruSRKtLjpLuqaP1wlsfi\r\nfUJIqxUHVhkn+W0pPKU/Kn2zdJYrwqt2t7ZmjocEtZnoTmB7Hc3cjvONoKvP\r\n2+52oJloQd6olJHhnzuyhA0mhQLcToHmb1svhrzJU8MAQnbdYEUl3UpTm2hg\r\n+isuOvDHn6BoLV3WIeeIi6g9sPy/cfpUIDCef4k7HuEdkW3p+UU3lHczpQYt\r\nJgi4vAHaY8w6YSBwpLG59QoIzXEWOG1C27jVc1EegGm6fQO6QQz4XaYjHNc+\r\nBUR1MdnoBQbbZN7/H5LUEYdpD0TLSFVb58yEKQMUuez995huHcy6q2m7xRkq\r\nJUMGXHZnM845YbsFmyVCQAtsDtEtbcuiRPz31d14iYx8fQOh5OACep6TnhoN\r\nT7fefEF1b34tiUIvm1z1z1n3g+zWm7WqnAc=\r\n=Q15g\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.066d9439b.0_1676491023162_0.42269369152623204","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/typography","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3142561e8abc1785dcfff082c0cd8df2d15e0fbc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7ab32468c.0.tgz","fileCount":22,"integrity":"sha512-FZsRX4BJRGeezZNFMW4w4gB3rUEmCxQinh6L2zSLT1HlUfkkACvIDnrUiHNGyxVyqd2eTH1OR9nHEwIluKsjIg==","signatures":[{"sig":"MEUCIHxAkE375RNXRfEHxfgjsiEZ1yYbaOYvbSH73GEEBcpIAiEA0rbA+h29NtDG+UvhqmZt+cWRXo04ohhGD6IC/wolCfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q5tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEqw/7BMeB7peUhtcchXrrPfGasrtsWFdwgsRiZK+8xZsMRWpjwKKP\r\nysopPh692QQQYF2xKaSD/yCGqpKjhPXHjwc+YL2NTIYfKqlC6Z+Vm5GDB/WX\r\nLw333UVmCswx+dEMzekefK7zUAAnWfEB2RSmLVSvle8AZWSUy93xSbNs6ybt\r\n7pxLKrpvqEIaYzBNIdWhqDmt1pCZQKDFpqFBJNuB4AjCR2lkQPmoTC0mW3fb\r\nwlZvdDFc1o55SFbC4wIyMROEnXGxbkOmxSpjCWNPmsjDECG3apSYDdAIhc60\r\nztK+LHZUhDfJaTYfVSDH0ZljRfglTGiYtPGX7vx+mm8g2NtgB+CigYVaM6vb\r\n16TAGxqnME67Au7ygjYeLG1vVFcbPYrZwMaGayTpBuHg+ydkUcq9eF9NkZ5r\r\nZwG2Kv4UCuEjyzJx/ov9prJizecvfAmN1NQRSSmcud1w7pDAeajw4Rn4EIBX\r\nAZ4+dIgDancLyTW9pMGYqA+dqfn9B4BfpBL53eWlIS/9wfrVlRAS+L+n03P4\r\nWhWacXcDh/Rdw6ir7ZLBD+DQdwXYSsnQVoTtoFngEKlXtki1fIQjYPtc4cSO\r\n22Xlh9a2t+Ndvt9Bm5GgrwPPmcsHRqyGLGCPMEqqx00PkWygA76feu7kD+oU\r\nVyJJWpX9d0ONCfdzN/SVZ4ICrzRaJEM+ttY=\r\n=DMd9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7ab32468c.0_1677004396870_0.2003838581173576","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/typography","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4226069bc4e6548605fe56432f5eed9c9e011c6d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fa27ba61d.0.tgz","fileCount":22,"integrity":"sha512-hI+ivQzNCRANIRF0oW2qxJ/MKoGvCdUWC+42icmlAiKgut+Jq6oF8khhyparvc9HU/56gkVoHpdnpYWK5hpYcw==","signatures":[{"sig":"MEUCIDB+uXFXQkVJVBNjqtmLWvukbNtWvKRwe/v1uAwD3wRkAiEAmw1pzIEPSVO/ykxEOE5Frz/tqoaU6il+t5VxyFNx7rY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NfdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBeg/+I5zYc3SnJuxSUqmNim6iRXWKkQoLorp0Dw9qwlA9mWeRhUvV\r\n1buJ4CFkLSbInPtjcUGKzpkaLYW+n6QiEUhTsynYc6uZf/AP2c3k1IXQlls6\r\nUhp0hM4/BB8kF7AQ3WwnS96QU2+DPNpk4j1NgRv5dRKpeuCgojzmUC6DTEgN\r\nZbH89OufXpSJM9z+2NwfD+2Ee7uBN7xj8/jnbY9gaDRlGncqUVQkz0VnBKFO\r\ndqSxPYFIWd5v8nXe63xQdfg3MxktgzlOOVePMGwEcoLb7/PbPdOniwXi0jsW\r\nmjfyRkPVlhQRgAz82STiDRVxx9W02x6uiiMhHs2UVpze3DM5HcboKIAQS+eM\r\n7y8/kOwoE/rp6sdlBikvpoFBk3Thl+6HXFTgfYdXML5QWzp8qHb2MbCVMb4s\r\nlZOwUFT/jDnUhLPlGSEUmHpfN/5EiQGkqEO16yfApZvBfPLNwgXSLJwYMPy+\r\nMp+nGzYr//yRteDOShKqPvi8qymcpHGa4MMNePpw8LNna0GB9G//GsPJk6+t\r\n56VpfGKDczmitwNrfcEHTG1t8r7Q6Dv2QVFqbLInxpSopyCPV9A8hPwPsyQ7\r\nL9FgacA0j0Jg6U2883syQpsIZ4iXi37D+b2ZEV+63QNOAYAnWQbpDYjJCh46\r\nnZKWvidj5giqe4BABZ/fseqF763DlnRbNE8=\r\n=RxZa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fa27ba61d.0_1677514717051_0.6554043835097942","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/typography","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eec970f923eb02b1a7020d0fe4163a48858fca59","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.311ab4d4a.0.tgz","fileCount":22,"integrity":"sha512-Jn/naltTYBkNgeLNtMeSL6MuVhSVXYtVE34gVsbAKk0S7qopBpnG+DY9i0SSqU7fMsobDKEpEKI/PFtdLZg8Pw==","signatures":[{"sig":"MEUCIDA2MDp91mpuma/u+BRZzOF1VnoiidI6U0R9nk50hR2HAiEAwMg4+xGKcgan5IY0fGerZ2iL90ItA1SpOa0jptuRcoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N0EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1KRAAk1YU252eENGEpy25BRFiin3hQ76k9K2d6SYQD3c+4tBJN+og\r\nugq2u9IEn7AQMM0u7DkLuBamHiE07qv2/3Qyi9BGKWc8niFIzrN7DRwhOCn0\r\ns2l36ulUoo7AQVcoqZgw60JcicLW2uXC66dZ/qETVE5d0Oey01ore3YeyG3i\r\nWVGfytsEFUYDzPSJAos5bRCfcQac8W57mb3i9nLjUOd3MaFZoXs7dQjyCR+X\r\nP9EnpfO/sUBvgSYRbHKio26XtvgAiL2eAMLf8xJsiHittFP5VokJ5WyPao/1\r\ni99xJnfDfXuz6zXxrXK1b5E/t+tQwqiYt1cPz0WvIB2TfaFx8hgP+I6usfoO\r\nZBxsNLzxQb41KLEAPYXAWKjgCE8Gq+e6luCHyJkkRy8s0aizFgrsrMd/9nMR\r\njIwAVza9wFj6PwbUwI+pCap9KadEqfyA6v3vVAc4z0KS0BIc6/tewhUgSSzg\r\nB0IdER746Js7H+DVZjz3xDsAp/D/xqUsreR9gd/I15Tng1ehJvc7Ivrs5uC0\r\nXlfyoPXid0dW9P6xb1yKFQTtBsQeD1Fyh+w7ySaYEQ8aa9r+w5Tixdkhbxsk\r\nA15nMf1mIt8FJ0TZz86GFNf7yVNxBFlhR3KLowPBPYRKIEGlhAJFMtadwe8z\r\nneV0br3a4lHvVwnGTnlnkiQtgw7q7X0EMME=\r\n=kHHv\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.311ab4d4a.0_1677516036689_0.8833761617997122","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/typography","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.901c83e77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98a94746485d3fe6c1df184ad5a0d4ccdb6fa626","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.901c83e77.0.tgz","fileCount":22,"integrity":"sha512-+ayNeFRIGWOgFz74AI9ifZKxYYkqDFzTV+O1eEwWdTUccWMkNgYDyL99GOBTFIV+JnHWjMm/qweAGUHdvduixw==","signatures":[{"sig":"MEQCIGr7OfhzFVM05AW9/2CygtWh2qvwrXN5FRb+ERyel+PMAiBWvxHstU8LJeDG+7h4fCa2XhqvRR6mDm4F9cCczyzXaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PDnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnWg//RR4RfRKoE2fvD/HY6JJu+j0rlLKJuxu10fyR2NKI3RkoVxqO\r\njpsYLsU+aAeRJxCKUldB9C4zvMypolixZvf/KoJ99dCTCQK3DcFQm3a8t0JR\r\n6ZgYwMFPWwVso1W9Ui5Na3u2qhz6qC9OXGDFb5uBIdnjEQQ93xZVYfRqwWBE\r\n1ZUdI6CQCOHdtuVwVct1WuTm2MKpJUs8mmTuw/0WhkS696Q0W0WKEO+x94vV\r\nlCtDS9UkgwagmQUTgo4YPcpECk17VyEUXAo2VsoFvamNggq9ARIVFMoLKheG\r\noWtU0dbKbk0fFcZrYEngRpbLmhU9HqC29UwSbs1b0Ledm7QuN3nJmOp4ZNGM\r\nUO7PoEe5NiH1+/ja5FdDVvkBT+Q3dlkMBU/aHDx60zrNoxJjkGOMsygAIe57\r\nqR1QKVkMBcDjm0JA2nZoLfyMTjCpp2xCVxajTZoSQeNFMwRVhpT3HUhUpQkn\r\n5Vayvt6uIG1gnSQxPsLhlT9XIhLK6P3n/DaHxBzTV/Sym+vIbluyElluLWKv\r\nzii8fm2VWxM8vtGyj7leABftFHa++9XGDCfLm7J0NhvhIweVSd8thJpxmsTx\r\naqp9kh5iC7yip6wwmafQ+oaoMtyOtFly57XYm7fqmemPaBBgX7d4jkdT13Fq\r\n2Krpp1fXJjgTnaf1hAIXNJDKdJF6vw/98wI=\r\n=P2U6\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.901c83e77.0_1677521126873_0.17014573055939963","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/typography","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f999e9fea516dd41ceb856e159ee2c745aac0df0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5cb8e2174.0.tgz","fileCount":22,"integrity":"sha512-1duavRBfkrtFvsU4sgsJ5tqurM0mFq+7lB+JQusytAaGw+1yVE7G/+K/Pr1MRYft6P8rBuIv0bV6lb2i9yvNxA==","signatures":[{"sig":"MEYCIQDCbdCzZEPXjujSq8bdkS0AwthWcveY5rQXwJF/lsm8PQIhAK7+O1LJ59nKFMwnhZxcYLc3IodmUGVOOMLnzO7FvWOp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/36yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoUA//XByj1yhuWZGm+hhJNwR0eQF8hqU3BCKpNvcblqV+OSw+rF/J\r\nhTTzI1qKGqMu9+BfTWEZjztZT9qh9eydQx947KiyvyTo+qrwU+2rD4fPsaRM\r\n6GIXjnsNz9Md3lhBjWtLZpTUFrR1i7ucm6bY+0AxCo6JVmL3t5gPUwm38R8/\r\nmrH/HXqUYhZY09BAQJP2DdSfR+luudhIlNO44STjV9aGP3SCY/L34dlmQvJZ\r\nd3oBOJCjRSEQHkjEh9Qz+G4lN/8Td8t6+PdvZYO64gwqtVIrULXhquAtQW/d\r\nQ+5xoqUuGjcwxRVMlt2pnmFBnK/MTtW9mRM989VVlk+vcRNFnmgQBxDy4IDW\r\nv48UUDWpCLx1Y81iQ342um5odHm2W/I5VoFhXHoLaeCkTsAgHI3/qn8C/9F/\r\n6HLVR9bMRTrBbKHzNeNK9rJQzm0atrR1OyvFF87UrUY4q+6A1b9gqpf1q+Mt\r\n0QQ/fRB2QRunyMISeuZ6osgMB/SPUWqvcaWjjRDLaPL9DOOEfQ0W+TGoStBx\r\nhKqIs1YFbKJf1xYve0Ze3abHHxURkGCjj4iDjn9IG3z+zDemU68SfzDI2l6p\r\nByJJiLpZntlcTFnjMJFGwLmBdIa2F8mIbHFkA633ebDy0TsJd1y0b1+G6xf0\r\nIMpND91rgc2ZUKNC7fDC/sDyDC4TiJx1FV4=\r\n=CX9A\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5cb8e2174.0_1677688498036_0.30762532648918484","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/typography","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f32339937.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f655043a2a1abed9e2b2924f7dfae92824b183f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f32339937.0.tgz","fileCount":22,"integrity":"sha512-crHPOpntWrHmL17NcQeDN7CY67pFmLsppZY7KLr2prP7ShF4PGh6zc5hGimUgTypNjmYw7XPfDziClzdHVLDDA==","signatures":[{"sig":"MEYCIQDbS1Y31VHbaIuTWR4Ok39GJgZPPqy8Z0oZDgFE93eKXgIhAPvNAOo+KsgAelRn3KMJJlC4bdcP0lkoPtA2mKLOHg6z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgNuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrChhAAls1DI4URFyXuN+3Hiuo441gFVq2Q2/Twszx8Bk0yaz20ej3g\r\noD9CVwdSzzdh+vI/T5ILFBIpp5PRyKNi82uNcrsPzPhF/fwSruq5wo5udKLO\r\nYSRNeSNQhk2BiUHSF9+bf0tb7g/WX/lr4TPsDaeVVs80FosL4X3OPZrmXyTu\r\n8aDz9DzDpQJ40OwcRbBz4UnxIifBbVQ//DG/zV4xPpYwj2i7+MUUryYAyEFn\r\naTKOZ9OXMGEkfh5URZYEm+3Wyr/LFrnfOvQYTeu5KkmJlpuYs1HV9fpr7mI/\r\nOpLSYfBYGGdCHs97ssVjDpkxZFWtcz8+V3DMqw8CnDc8zAD5F46jPCffrRN2\r\nKZL/63nd5uQkqOG11laPcki/RjFGuauDPpmtYCiMZGJkxKKtFnaYypa6JEbe\r\nJqsAy2X/QTQnJwKNZqyQwuoUBJ7fly+VdH4MpSQKMrNDazdUUjkSk6vEBAsX\r\np85WmPkQIYSTNELqtoOVvmJnfPbZ1QN2UthmNGQ5Q46Euq7qw1QgHD8kJlFb\r\n07Od6tSOrZxPq6mp8WRESrOKyO8mrFxJpaOQcK+UiU8xXXTTmDnFYfIv4Gdh\r\nfDOgS4mEFn2QlSa6qzT7bODBr0r4fbEP5DDYeGA9pMrvrBtrvBs/jlQdRCiC\r\ntgPeA2s6wvylTI8ijlCYJZqlKfSGm3AobYU=\r\n=Buik\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f32339937.0_1678115694580_0.8249938813253654","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/typography","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e67bb1c199f62d74980cf0dc9a4b20614e530422","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7644d63d5.0.tgz","fileCount":22,"integrity":"sha512-HmJrBWGPndIlfJ2h2SQXgPZnUmKi5lYcPmeDCKSBKt7ZfQjFs142S81V2vzHCgs9AD5u7v0CVcH6y7oRQF86JA==","signatures":[{"sig":"MEYCIQDM6AaJ4yGYDuZrSJ0WnUFEwR/ZNHfRqi25fW3jEDKsQgIhAMIyS0Q+4LriSwqXQR2uYwelZyaSITGidOFNosxskNBC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBminACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmostQ/+MHUrlLx7Wl5TqajsB5MwtbOQ5rK0g8Lpie0vZXnnHYYlE/Q6\r\nnMqD9fnbZ5eJ97wTSGCJjEXiJyROK3hpnmPNgFCRJrT/0+I9KDlagyPoV7Ik\r\nZCuffgLbcmyL3MbL5z5xTbEilcWF2elbWBcF9Ek5pFOZV5dcS5f9ryzlH3V+\r\npVixeNVuUfflOW5lmOUtuzPC+TXQhTH/Q4N4qozdore+LeYvKcXTCEPARNDd\r\nDX82qQLQpecjPq0fh2bwzpERmJt+ieY4GHd0qd1dypkzAaBdkKp2JcJhhlQg\r\nKZrSo3h6mzpv8jPfT/mWtEpl1O4mB7bIUoDfltNdovd3Y2+M62PsT05wna7H\r\nUVgHSkrd+G+PG6QZqKVWTM3rEr8LJ9n/2enlDCVLWtHwsVaKQShunfkCyvx5\r\n4JPjNbSSFKAucI5IWLuW18YxodOKDcNdXHpvni+pqUs5DPclKxlwMuC6u6rc\r\nbhsafKrZPWf6gFfzvmtLr61VLoPaBf321UA2bccHTuZ3dp/CYZfseljQqoxP\r\nZpwaRjwDGAb3Y7w9CYzMxkvgqsBIdJsBG1IHvfU6TWxsiIIreaeO7d1Z6tSK\r\nK5t3RmnPYI6l2AdB3CugwctKUYSwhhYJnykxbYMOxBN/IUvyNaq5RjKo62Np\r\n2RrpqKF4P/udOXE5oSwj18I8OXLL4eF0Tr4=\r\n=jwLJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7644d63d5.0_1678141607260_0.06706614014059964","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/typography","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d96330c08.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2676fb55f024403d5ea6eb00847c5b081d86a5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d96330c08.0.tgz","fileCount":22,"integrity":"sha512-lUPU6X1fv4srsZ964VgzI2fGVE67/vaiItVNvWN/l0pS9Ro+4R4ClemVWL39++mC+gn7WxTmYeFbULIVWRD8sg==","signatures":[{"sig":"MEYCIQC2Z9ECjIh1Cp06o/mP+taVB859X8vUpxruIAxSPQbGAgIhAMxtGPEvmKXBFFyW2Cwh+Dw4cJ5O0zDNbi1e8w0oAr+b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHRUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbKg/+LL/9ph24qvi2k+fcTFewxBo5jSM9KK8FctJvOgAzoW4h5npm\r\n9n/Y67VsqVKvVcOkQpFz1nLQLSoUIc01Oh179I3Wor5TyGazMqChXhSNxxqT\r\nJdofdciHFXyKmyJfxjrM6mEv9fvjwuTu1JdmEPXTLr+VGTo/mx/EEjKH53BF\r\nzBNmka9PC0lw80/85SiM3BMsCXh0proDcsBxcvqo3KsCP38HOQJXlDIO3MFG\r\ndINJ8ZoUMJmD9TlyyBjiJrIfY+KxNyhp58dWG0pO2sxef9ekVdxlgnxpPLTO\r\n39Gq533TfQt7HFCB5BYx1z/sF8tItVTsYsoKK60JTPvM/sLO/71FCSdWgX7O\r\ne7IfMX+vuFXMkp47m0Fv6pOwhtm+Dl27OPusIojA25D36r3aNREhqIRSrz4t\r\n023IkI2vlwAbSJYPa3ydbm3d8adf/oaCYr/wviETiQXA/Y32ptR7CsA24MQu\r\nZX9D8Bp4HgBW9pwBxrWqmAT8IeAphXD473zipOFamPK/8lipr5wQWnltGS3u\r\n2mIflpvu6RKEg6DdGRgfgx4691yDUvrcT/RPIHBWJuXQMLYAscbgWm8LbjH3\r\n+2+g7FU4eC7v9/SVsRcXS0Ig06It0WpSGUDAnVR5vK2eljvZGGfPOYkHV3eA\r\nu+pVrf8Jo6gYn7r0JNR6G9RYUvII6xsrdJw=\r\n=CTRI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d96330c08.0_1678275667906_0.6989979195755052","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/typography","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34b22d2530cab83bd75d096603a930b67e70e102","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c99cae77c.0.tgz","fileCount":22,"integrity":"sha512-MEKFpzucj8xieXRxrOFTfMd/7I3p83WUiePGewi2fMdQx6cUi5ullgmoYXKOMmU9MXy0hUPeN2yYJOFJHabwEQ==","signatures":[{"sig":"MEYCIQD7ATavZYw+V1fOpJCNhl2yTuCjeWBSekeozMEyDPQp8wIhANUF2fZA5wBFfbbANgOZoXc64+vzSzhZGhpD+OofmEbb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR1WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS8w/8CIvs8dgdjg+O8hLdF0HIkkUEN3krnnOlo3kCIc+HIu/6FXEz\r\nW1181EdfH9mzAZiLmWSsbS3fioJr19vFLuV26JU/D1NnzaadU+W0odsHQh1K\r\njXJHWCcnR7mEMUpp6uvok1b7CLlhTLKYqpIL0NmuU2Otap/mFrtwUSMdk2zq\r\ncjuxgLp+nypEgkp5VcL/6FghSJKYoo1frCO11p5AT+BCa2n0dLmMmzPNGcpw\r\nKAHzLzKN/XOdXEXCGCLMnEVPzq0EfvQr76wyo3DPxObxgZ8QScb8Ax9xrbLF\r\nltuz4E+IESMtl4KFeHuRQ5sbJTsCCpQzsfKGwYqcAie/vqHCGs+C+oXIYlVW\r\n/V4kkVMaS35RNbHjjde6xyYYMFx2y7bChZDSyuDRrETcM0buHYiy4VD/lSjL\r\nnkMqlz9NUsjB77SzYgMuLWvEKuJYoTk7JbGR4E2lzCfC8YFAJlFjsCwlJjVW\r\nlzNKVtbjPyqHzL3gKHLPtsvCrXYGECEqJV+MGKsQEP3pv00pSOWJH5D2jbYJ\r\nRS1wHe9dt7D6s9zxDyUQX0NwAoXTu8HbBE9GmbI3OmgVXp3RhFP10LkCWFvQ\r\nG2GobMV+l9CV2qgLp6EmbrabLoniojPzxMMF3MTXD1bekoj11EAKUaT0fO9R\r\nOGt05V4SfjqoLLAAdJImJLyjiDBgPCDcHi8=\r\n=HKgR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c99cae77c.0_1678318933950_0.29113496640233727","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/typography","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04ea424a8df5efc4409118004b172dba0c1c3b05","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6023b1cd3.0.tgz","fileCount":22,"integrity":"sha512-i6PiBubreQF4OZREyope8K7Yc4DUrDy+h8FtPKqnuLpbftBYFS4B0NdT7/7QKhKEQGLD/hRwMOXP4l7r495i9g==","signatures":[{"sig":"MEYCIQDAOIm4xVhpkguc5+pRAbRrvgtBTFDZQ0OmHAg3FmAq3QIhAISAOzRBVPuV5CJ02KI4Klpsva1HxzPoZlRTPBEk+t80","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCexqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8sg/+In7LWX7X+GATp6jc3aooALFR47BnbOSe6oco/gbPYiD6yRfi\r\n4ANUUT8GV8oXSpHj9UqAKgimlfs3BK3FK92zC5U6dXgX4bbgrrRgIPgLBXT0\r\nTV10WZGNmfLhMFpnaD9LhKUghu9HuQaUQ15KH8KU9o/EpVpWS3cBX+ti+7mp\r\nOM4xTzHG5oiTEShKMFHts5lu6UgPvTUkavXzHpNqIv7SrEqtSf3NwMUn1N2Q\r\nhhP94YJtbSCzbs7KeIsN6kWA6hMEjIXnakBNbBWQdmgl+NQQ40/8KcnX/zuq\r\n6GIgJINGuKIDhip+qEdY7wb/hLmd6XuOiz3PCiJdhhMGWHAWdBT6BOiXMU8x\r\nMyEBElxAmfMtFZV3gZfDuoVA3FRHXFSWZBnPx4tpnj84YTuffzJsZnc8nluY\r\n1aqOmL86kyOX1tfy3R6NLfZgzPmaS/1fMELQzhWsjbxJXzAjTRCrPM8u+lJA\r\ne9L7NlTo3vh9hVjwG/OCBDnzVFjWC/yPc5IYU+oHj+nX2E6WgqdukcdGWJMj\r\nFwzna0jucYwaxkBMxSnU9tTzRgjpmnQfjDfY7zXbUCBAoWds5mEK/GXObs9n\r\ncBI+eQ7mhexekwLgE841RLOnlc4a5lQsVHKWnqMKsW2kGciDu//I7HO7TPHh\r\nA+VNBVsE0IpoCoCsWDaX0X8W+vQ3iJuL1B4=\r\n=5nfZ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6023b1cd3.0_1678371946241_0.592446003627692","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/typography","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.274610c77.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e807603e3c23f3da44f8cf33aaff1e84c7167631","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.274610c77.0.tgz","fileCount":22,"integrity":"sha512-govZPWBjAZ1TDj2mv3xfoI1kXUdrIe+zHGU65m0fmVvxh+qv+aPwkuU9JenlbeogoD9gsnYiOb3bFQ/QKl8Shw==","signatures":[{"sig":"MEUCIQDob2WdR51/TxZrsRq7z8nOs/bXs0zr5kyXMlm+/PkcYQIgMKiG2JKRJEp6GRGC19OP1pPmy42aZ6hRl4ogXPJnE4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfPzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokCg/9GXp7aRZF6fAf0RcOkYy/oQHWyszaXcsEsaCLrmFlK6mX5OJ/\r\nCswv895ukNKpWdotktF0416gFtuyLweNaUZaHQb8KxysQ/04hf4QozxIH8Wv\r\nYgZha/tQW+V1BaiCAPaCRdOPDX0OV1aUQtw6+BCnsTTgCBlbv0txqRuZnGL7\r\nARybfX45kzTBjQ4n6WrFm6+lFWqpKtEzPwqCFKsddqoZVeVfe+dp78n71/JE\r\nBMtG7xGWRnZYiVNcqenTanV9gtpOIbjE6DwXOUioRMCbRksnCCqnPUZIfrGj\r\n4OFqoEoToyxbHMbGdPeeHZhAwAdOxbPiHjA75d4IB8y+1qAL70RI/Rp9tqr0\r\nn3QmIw9+9kr7Lg723598pjhlLTa86OTSnBRcmP7XdJUFsNGwv9XjlhWWmzdM\r\nXPiNhaZW9BwzJWqta5Kd63h0OzFgklJF5MtVuA1/WriXTcuxG8olOFrBUbHj\r\nRNiZf0T/kxGrZ3+czOD3Ji+9+W944eIVh6TDq5eFu9Ka26a38g5M7hyZPzgl\r\n2vQfdNmh17t8XaD9ySFdV5uq16O4bH3KrWzYn9sspsU7o8x88KizkJpWYZRE\r\n6BdztTmD/NY3myzLV5lXeqVFtof9XwAJh+4MJNVh0JYZfqMCIi5BaFD58XFX\r\neYljpY3LPpmXRSYLoKNtYE0YzJhDsgrcAng=\r\n=NZf/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.274610c77.0_1678373875357_0.9549034466497384","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/typography","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a274583b9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5365bba6bb741a21f62ce4d2ec638c2ad20e3c2","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a274583b9.0.tgz","fileCount":22,"integrity":"sha512-keAnYdx+62DfhlXIj0/ji+KlnnoHVel0jgJpXk4aoovUiddHDBz94hZ+zh7QOHeRhniqB22xV/lNNYkxkv6qdw==","signatures":[{"sig":"MEQCICs10gOkxfjcbCaolu3kPKwj+DSg9uAO21gGwnCp6V8+AiBkOxkEt/z+/AUA6ruRbm0c2waf4kqXd+vFFxBOCBRt2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjjfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphkg//aw0kkQpWLpqd1hqEj1375papKyyOsT148+5rQ4/kCfYCDaEA\r\nJGUSiQIi/gwqg0kVzASbCNY7CI/eAOnVhnZIP/7ItI56zMEHRBTxSmU0owof\r\nIp2RRPPDoqg5i+ShwlZ8rFoOU/vMUUEbi1ua4humxFIeY6JpKCBwZlljHFOg\r\nCRFQYO1PACHJXg7Fe/fHwNF5m8MQd70OGkORL2jV5SjCf6kbbgd5/M1daxaD\r\nr5Sy7/F8zaf9P6P1843EePjQL3bnQK+lYM7odQ18Wqv5htnFkS1lfYek5c58\r\nu7x3sJNF0VM8aKATV9MrRJl9GQkeZpy3mO7vOeugNfyo2B/+dPDg+X6x5mo8\r\nIYKmPz5BJRUnzlf3x9u1G1hvOIydkARSmVBl41GStCk31/AKvog94Ml3AKa3\r\nzHofC83eS4aW6G3rjmumjNq3YbDkT9gpnM4uA9ddVEZCvdmu9q0AoZ7ePnKb\r\n/w6ofNuVmWLejDChlksPE/SYTyxrWJRvSxGN/zbaVReT7jXG2yr4fg39Q6re\r\nTzaAnoaiDaHX3jbBhW0iYgZvZYwQBhIGvdHHqeHoT9wVJvo6YbPl4CU2TunH\r\nhw5kQdIwZ69CRjoicBil9CQg8d+Sz9E/BUOXcTucYJrybDcSp2UpxnkaV2ie\r\nQfr97CkX2noapey18DT/FO+Ictx0osF2P7Q=\r\n=djM0\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a274583b9.0_1678391518763_0.5665700657418138","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/typography","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.da22ca960.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17330df9822c9fee4ce5870fca1fce048aebabe0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.da22ca960.0.tgz","fileCount":22,"integrity":"sha512-rVJxBUv8SO829rpz+sh7qnl6mRaaAHuJ/1INlbxEFm/Z3H/odyS3zeoh88iCTijJdDQbeQ+waq4B8A/nZd2ALw==","signatures":[{"sig":"MEQCIBB4sYlZvk345LaHabsOhDRITwR73LUu1juNlWz8N+ruAiA3bHKyTHM1ItCzX6TSmdcXxf2pDFj65gpKScUHsvZoYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj7YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp//hAAoATaeghDbVfhQGPxBMgWuWi5t9utSexow7xbD8ksJHMQDYQY\r\n6IkvYQkXws+8215vhGWFTD81LPDrlspZPmlqc3mpqJL/wC9ia/BDJxIyIHRS\r\nk6+PMQQkzCFUZ+jJSz7CYrFqHYX192GsA6K2Nz5hBO9xaQvr1r6zWzkg9Mq/\r\nNFEdIvaeb1RRA8KftisGPwNN1ZecH5rw9/b2242o/mSyTQjxb31ChaeI5lAx\r\na0JZFmZG4zcSQgMVAnZVcw6opTE0cFAf2FmJYT0MKT9xOjefdniN5FhaZUuJ\r\nkOuQtjpdHZeOmYpd48/NKE6e0i5GsexvUWI7KNAi1oXdjvsYged6iOwQZU9r\r\nMLcSf3q/9JkjuzZ44wmgifwADO1Ceaiujy9pMOmfCXWAU4FbT7d8bT1nHlbs\r\n2J0yipfVz+SU8WVK0uVAPkkQZVtLTTtBJbCQFB4cxc/jVWZFZB2qsudSkruz\r\nao4IfshQQ5lZOJmWoegeAbUbL2O6xEug9VacOcksKESsX1SJEpkQHzMTjDXb\r\n+XtRgvdNPnWER7+Ycs2gWCwb1gRCkIRLjG93ruxkM18NYqgyjhUEiiElAjbI\r\nLG4JzlCDpSaL5x0mO+q0BJZTshvMbfHVR4uv6reB2eoF9zT9L19zHRahy4jJ\r\naP/YCigNaneL/7n3vd05p6ngmlmjZPnnEuY=\r\n=pzjH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.da22ca960.0_1678393048009_0.07412812432798477","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/typography","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d05bf96fe94df1e69e33e3af54577357061a3188","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.304a94e8b.0.tgz","fileCount":22,"integrity":"sha512-7cSMHv0erPJ8/ugFNFneNnTz8of0bwvuP6B1V2sLejhn4oSmpbrRlNxz1z0dM8wbTTrOuiXzgBcNl9WBzlrTtQ==","signatures":[{"sig":"MEUCIQDldrzNIoCbijheLha2XhCIfpEH76tKFBpn6neybGpDRQIgM+i1gyIXOUWRzYd3TR9nStmXXobeR3F4hEbSGxrQ2Ps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkUkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1FA/8CfD+9paIg0HP1Azr/IeWBlqXofAaWZBTBckCn+w+cXrkadYI\r\nfx0PJxw++8KR54WWheZeiS2SWBASTYgBQ5aX2YnPzI7E3tSkcWhRxnjMvYYJ\r\nTbtsGojp/BeGqhKLR/Jl90Trbg35kvn12Co0nYleivfrxDW/Mpv+jI6L79os\r\nlHzgKY/rUF6fFXzisRZgp1KS2/OLMwQrbx9Rlfwdi/eCpAj2vYLaPdyZCY9I\r\nqGzaWLi1IJgqBQ3AYZKidl8C4Z/OmPK86FgT2yOFQIUtpvp6mAuXWPx7JSpO\r\nj+kNPwDfE3+HAVXgE36R2twBWfnMNCkGspAi9a54QN0+yOQTPukT5fNF8pAy\r\nhiKsLQULAXtYnWS8pn2aJb3rA4TMU0OuXbie9fREd/fuMsO9kMlGAMnvr3Pe\r\ng/Mrinbp+Q4e0zjOByjHvSYTYZ//S9aETt93zHNxlUKQaKfnEaNYLuAnVzUb\r\nG8CoPVYHASv5+Cdm1aN3jgS3Nzd4Dzto0ufOp4yH0d8ycVcCjBTzKT248T9E\r\neyMcsT3tYJ47gb/xS+Hpqo0mJBozEcEU3Lj8gnjH5l/Y4MFPlzYVqC2PXoDK\r\nTO9Dqy5j3fnPUuDSQhq5PN61K0lkhNtHr5pNAdDqYKuKzW9cpe/sjRR3NyyL\r\n3TN3NOU0DSzSoJQ4V9ohlCQ7S1vmbPliAFI=\r\n=68j8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.304a94e8b.0_1678394660580_0.3769644972517252","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/typography","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6c265915c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df2d1701159f168ce60fca2bd473577bb7705165","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6c265915c.0.tgz","fileCount":22,"integrity":"sha512-rYCTzYXregGcVxLacuENVCV40CWOBZ8LQgVPOpn4IBo5yP/fByBhdWistzYaElTUZ07xYr4MLVcLBwhFPD/JcQ==","signatures":[{"sig":"MEYCIQCSOGv0phc65Awrf3NCusWJbzIlRvFDmP302SFJWui0hQIhAI+wAiks+mPi0ADNo+Dj8us5KgJugComXeTHEXdHPb6p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClO+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6pw//bGxey6ELzxj4yk0T/3hprNSPHnGz7FYfjFQpwiTFDG3X9oY/\r\nQSj/oajZFmB3bfSgifQfXKV8sgE73hQuOsJzxYS6uTOKNi8sDV+rs6NDGQoV\r\n9QnJRwhprgACapPI5DC4i0wcgK8pAqlg5rJfirk/GR1umhFDT2AxL9u6Hhs3\r\nk3/kbrhLAwFHp7/HFVnGIahbYw2VAANPDAtPE272Ix7Zqbrws2w++BhrYgEf\r\nLeIcAHhtcokeSfM13KjIhQBKol9fpv8N8Fg9rED1qN9VznG++xSNhYuIHS9m\r\njG6q9a9B6urz0BDk2EJJayAi30FmFU1LA1iag3KJdbRi3b391rEfoIE6HKcW\r\n+U6xp7xw4mEmBw/ub1gVtiS9lsapjf0SgPUFpCmeyjqFfAhTpMBb+bamR1OD\r\nnVgVzXXhZTa4ak+BH8E/LubIXOAOHpjAd0xTVtoox0VJIDuG/ytyh+b3UYt3\r\n63Duei+rKUEuTJ4xmoK14qq+q1O4rn/IHOVUy/vb+V4kNA01Msnt2OZbB6vU\r\n/uVSeNf2XBkTfKYpU0EbVI+FrX+2mqfLphIuodQF+DJoRegCFChHheWXX1Ug\r\n99a9jJLpFWt5WVbNTOSWrXgr1QchThBBnDFP+AibrcwuqSaX/V0QhytnYAbe\r\nE+ePWUMDp5SosO9quEepS5SCn1qVvmiXq9w=\r\n=0DQS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6c265915c.0_1678398398369_0.2483901018501522","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/typography","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.de5224633.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34c0a2a286876a28a32c76448db71be8d905f8fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.de5224633.0.tgz","fileCount":22,"integrity":"sha512-sfyQOR0HyPg023zMrVws2kzf+s8S3+ekOLBq3pinvPbOFPxcwVOxlNdoxlg86qbCV9BRak/4es67sEenChC2yg==","signatures":[{"sig":"MEUCIQCHEhJxBzVBtAD7ARYABhhS4Egeto2PcFfOl99V53wtgQIgKPTfc/hlpYf0/k9dqO36Uus7HJSU6R3zElR+WeQ66W8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnHbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdnhAAluVn4ZuDnBl6xuIZI+GgDYdid2nxysyLfw9JVYPtiuxMylyl\r\nORr8dVW8h9Y3ooL4Tq//mdFk7hTO6jRwjsvIPSMzRoLwLW6rUT5w/yvm3SyO\r\nrj2mPxvNlNQ1PCZVGyQpmtI2DYw0OrJcyHcHNSQNyN+RBIRhM8AqrZC1xWwK\r\n3dLno3Ol2FB5uiS4iYt6grk3LK/Lr3uUZr7/p+a1VP1HTgSWNtp5u70VE586\r\njANNrKu2sGE/8hly80AwtEVRPhyc6L0gWB57lhvetfMHwejMPjJLK+mZ/Dtd\r\n1XIw6tumO9YH2QM+98TjmZvX+aDfK5SQughIXz/rIG1+vYxJqfU3/LddGMBy\r\nbxzxBPQxT+2U0Twt12pFpmDGAFYTu+nukgVQxA2xCb1kiPpkrC6xi9hZZ8hU\r\nhMwBxSZSb/OlcIF13S82c4o4tPXkY7ZN5PIal/u/DUJ2dF3X8Gz+Zzakrg/u\r\n9BKWCz96xc+EJuv0ZUpimNjQTqVM7q5RlZx3+8XtPTR25PPVl4ZNr2xbiA4J\r\nU4Z9+cMBfDywaUTqmRTCMyf+v2878aLV787TMd4CQbdCKP3rxbtG1AgHphst\r\nKOML6KZF61fMrSuKtB3kL+lhTeR93HlElma+WglON9yPIH2vQCd5gJgIY2kt\r\nNoJyeNV1Z2iMpVCUR6quzcd3ZTlsl/kbTus=\r\n=UM4t\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.de5224633.0_1678406107256_0.11881318318607081","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/typography","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8879557e6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f273b72188561756dc53273bd9ba02c855a7a9c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8879557e6.0.tgz","fileCount":22,"integrity":"sha512-7w/zPGKIdWUY9lLdy6quXYYd68IN+sG3Qn3ZBSgcKNew44Gq5BaUZHXXofMRnA4qNRQ9FA1j5KTgVmCdL0aLhw==","signatures":[{"sig":"MEUCIQCmRPSQG4xxFE7FF6wof7XgJwonz2R73MjSBxkQNu57dQIgUh4YhdIHBkADQOKJGsKLZA93k9HYKhzJ9LCio1UljI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzmTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrdfw//ZnbzuPi3MLuuxWbAPGO34XPkOgvOAXS1jKos0yDXOeRmrFlA\r\nGutcXzYK33pfxxs9hA8IYSvF3xe4Ls4ztjp+0eLQISEcJ6ZYN/EqTJddGxdx\r\nTriBU0/461kSxgcXrIL0Er3NBhx47Dyuq/JDwCfU2xc3i9W9BPEFcFqV5SW4\r\nvKvjFcgh6THRtsuMY9k8wyL5OSMfTf8IUqqPEu2g+eneA0icmCH+nyXjuj5B\r\neirACZivzmVqZ5HoCMjwEs72cvu5kWewyiiM3hsOXaTFpNvvUmXUxYzUQLmq\r\nTHXKiJ0WoMGY3azqj4pyIR0ACnY+aqDh/LlwHOdBfsmm4SSJWLCz3YTKUlh6\r\nHdiEJSdhrZhiU6lIk3aDjs7Tf//BkZ1cqNqeNwWKnvHmYPNtp+spMQAPJPwJ\r\ngkWT7/upuW5GaypfSxfXk0WQHc1JxK07HVcp8DX2qTGz0Vy7ZFycHkve70xs\r\nEzJm3wRXFMnLZfL1YJz2q4+MetpCCcl0yIwosXNt69VXV2yTpSaypUwQ2m4e\r\niBLMFNH6ujU0Be8BsjjgtO2LW0Xzp4TPWxWcvoMA4NoZh9OjrykoFtydMWC8\r\ngA6WqJfjGLC8tLeLBS2hm47XgWGEoJGdG/jrgvsgbjfViqeFPOv4npi9y5rp\r\no+AfjMmj/JAaE6cY6R9ZLBrhwiQvIQxZYi8=\r\n=YfLM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8879557e6.0_1678457235259_0.3394446658633028","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/typography","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.23073a303.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ed7f55c888fed56a6954fe440810f9dc66b094f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.23073a303.0.tgz","fileCount":22,"integrity":"sha512-SO3/tyvnRxZyl0SYyZ7QNgM5/BpefVyPSL5vqbTbSgjHSBkwFBS75r/6CB0eihNot7CdUKgIISFT73ao7NRbFA==","signatures":[{"sig":"MEYCIQDGCk2H5yOCUa2bTcqm0h237a1dgmbhMuIPOoWKAib3XwIhAIxI7cykyeRVBB0GHy5fMl4oWBuKos+OoATcDf6zcxYB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzsvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaRRAAlFC6nCZlSq75tpLnBUM7+GbdwogJyVCsgTC3gR3iVLmPsfQE\r\na2NkVvybr1JXyfccvZsL4NBXI2yEYss8xMDM6OrGSkaWShU6ANQmTcdbzYeQ\r\njaKMAOH45UQPRbGQd6gRiCPLB2yYheL5dZ8XHuuSb4vtTYbkX1rVDOl/dNut\r\nJZ2YvnLAkUluJ7kgScYR0/+LcE6tBdsfvfszIf2jSHjJsLe5Ox6MB7KvbrCZ\r\nCIdKxNeqXB3BsVHwL7oRY1vMcggeaVHFXqXQjy2fZHQ/qBp4GjeBY1X0GE1j\r\n7EGkChSskOPtuXQnVLRT5Ma8XBsGscKvdbxj6lclYMk5vtnv6XZk8+FOuW5R\r\nJyNt2lHpbZEMjVGBLCBGkcXFg8oQeYrE9FhNJ6pUGLrRM6nYal2vss2RoMOj\r\nhVZ7JBbvq6fmej1EeaJuc4sW0AgqIyTtmAtsLwN8d18rPJoyzwb+lZNnOCrR\r\nkfPH7H+SOAqXvV8dUKCiI6YQUCfUnStrn7DqIQwBKORHFPN6jW3NTd9naC/+\r\n/glvppVRWhaPrNL05RNl8q6AqK3792lkiF1QCp9S2N0S/RBpjhiiFj0xvg3/\r\n27XeZC5UhcQ79jrUCeMq2GKK9nDcHYsfrX0T80R66HWl3hmBXLd3yIKgNdkc\r\nYYirvBLg1dcx1KWe6sVYiT7pyrO7X6m4DLo=\r\n=ypU1\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.23073a303.0_1678457647517_0.777482230009847","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/typography","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd2f4f950f53e5d3cfd5983f54d3879cb8c89a8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.51c7d4014.0.tgz","fileCount":22,"integrity":"sha512-RrALrEMsfbT1MHFbu/o6uh16L3LYfQnBNIqs+yh/4aYoSxEMjC9zaSPGQdKgG/rTlQom9iq7PfNcYp4DYQyQBg==","signatures":[{"sig":"MEUCIAcXQps2R1S4PQgBKjVvKyD3JcxJCdYu6Iye1BSm2SfhAiEAkVT6f5VNp6xkEGZCkbFyRRg29dMfgnyWQv2taxTm4GA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC170ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDpg/+J1Csqdqq/YLo0s7Hk1Lm2HKnO3eC1ParZRcCEug4ogHmOvZb\r\nZ69YlHqd05OEGH1Ft/X18V4UvFnI+Ul2joa8dDkyXP3gcL1cCfNl33iGuCLy\r\nSWNxQ7koYoSqjI0HlY02DpgKrjwUGck4devyp8OUi/xm+PUP/np3LRgCLmvj\r\n7ZOf+2i8RwGPoxzmTgsUnsHBzStOhXce9pOLrjt+/UvszOHr3nsDLkO1w4EY\r\n4NC8rcinmCYki1MCOgUes3TGTvzTgX4oqrtY4SFQKkPWY241btxOSpyN53yf\r\nacwirtKQz+P/3ma1of1bAtUqvuuGCx4rJBR3jl+aTVnJpQKpyovmMHusQ3Ji\r\n6yfwb/pXYMJ/RdpBKQ/pooC4B1CmM6WWdfTFSlvXeGHxnnmRCaWrKKKKs9+9\r\n+HNU8/3sewxO3tgusD6ByBaJX4XPl47GlFDbpESCMDTnmpMWrcS9t8Y/SfDx\r\ncyYOzvIYTngNrPIRs3slEiPTARqaLzZKTR9Wd/bntPzn/TKG+HYPUtiOhiMc\r\nPpwgqZwwRSTqK+Ybeu69DkIHP5fMM0rNGO0qk3/DslYQyHqKgBa+Qk49GJhZ\r\nNXlwA8Kn4ptqaQ3pErppkLH4EqVc/QFOIqC9hZpTUdvULS26ylN/2JTweDbc\r\nt3WiiN6/GU+JEOTr6WcmvYc2jAvY2NDxbpo=\r\n=GBTh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.51c7d4014.0_1678466803801_0.6320592102222358","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/typography","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b2073c30bdea3502bb2f6807f7fee4a6ef7f6ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1175a5be0.0.tgz","fileCount":22,"integrity":"sha512-r3iY1v2NlpgG9i9BwFymZVRz0seJl7GdO0BxHHplNb4PZUyi5wuvKKVdMo6JJufhY2u+vtzZbftOhcgweiczXw==","signatures":[{"sig":"MEQCICa2eVq8nj1j2iinkcS4sZNCgMsQLI2LeJ0TTd4dVFclAiBAMl0XocLw7rPPdoh+xLf/aWgeEEhkUkBO+7BTg0W4Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5dbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+nA//Ys7bLfsbKQsYNPdeZOJvyPWM8NryU7/6XZM7kZko2JtnO6Nk\r\nEKpuhj0mZYGyYGNF/0rL/JKkTO/279RwhpenzV83ECwtktRlf4iWZIkMMhHS\r\n0mX/NBTJL7yMvnaOh9igeCdaVjBsh2pcQs0HOYRSDbzN1lE2q2tUgjIWYXtn\r\nGXjEIos6YlFpOFrFide1XvwhTwWel+1D9FfX6irYfkh8mhScU/UDOr4iDfhp\r\nAel+YKf4wSy9iI9oAJP1ee8Tjnj+Yt61UUMqGcn+znksJxCwjTNk5jEaYI5w\r\npidVEJuqtibmFRi9G0TCMAh/IgZwIytNqFIxKx3IMzs/ZDudP3gXI4L7A0E7\r\nxFmjbUXc0m99/s3BHsfMr8kfsUS705DtpUGu6QanIeDeGR7MZt49ZAmEHrt9\r\n/zcDSLU1ziY3dUpS2MzHjs5aYIPhPdrT6m6MmeyGL8IdszBIhx+GU3RSycJu\r\nhmJcNMTkQdAQO3Uvz6xF3B3GKDK3/lmTg0D0XRDYIxIag/pk1G0W9Ca/C02g\r\nDSQfqzEFLtHkSmGbiqNoEsKwCVyzHd5pw3WSL8ZBaza9oNu3fJf4kAH4tF/Q\r\nL1SIiYK7CUMvpj+oo3IPgMwDYs5A5naq/HSPN//9v3BJkbvJ/gnpoGZBWwRu\r\nAq7R/SJmuwZ7urJVI4pXitHCnbXqEbthvIY=\r\n=ar/V\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1175a5be0.0_1678481243399_0.7303233165777625","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/typography","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c02a37c03677b8abe6a0ff8f0374b83852daae21","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7adf3af80.0.tgz","fileCount":22,"integrity":"sha512-3aAukANTFJR+vHC6+cB6u6xemGyLAzmMnUe/OVKjEAklpjOOWBTU2hncXccZRGaCtxRSeLBx12Htq/VDM5v5eQ==","signatures":[{"sig":"MEYCIQCHJpZO12b2JbDi7fuFME/KCa/GdPz2cFvoMG/Ef5bm1gIhAOzxr5WLxGY+PZvyBtiMueCO7CeE9RBOnATAs1Bhd+Wo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9hBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo/A/+LgQX6PuEFJ5X5UVsZZlo97HA119tyxlZPSpe3MrbPao+QANj\r\n3rGA0nBmfzpxuVUUSVH00YOo1n2Ptz8Fap4aS4K18+7Gj51WdhkjwoQFIKvF\r\nOlUK5w9uPaINBOWx2wYyeokDTFsp2L1Ost88q6dwYtWFZ4FAdi3VOv/cPl0H\r\nRMUUvQVy29bqDv/zo/sHOQ6kBoMr1gqxFI1vbwwhkhea2rEATUApUUWzDGQF\r\nCN68ePDMyone9ISbMAtSzZXC5UliGmNcAuPYpxHTonXiyGSVOpKUI4vb9Nfv\r\n6BzVHtwvf3bcnit2lOTKQwKqTjvdBVoeYRa/v9PMmPIzf52/+P0XGDCA2suQ\r\neG4jc+MG4WCf8P6C7XIIo0WbG7del8J14v+jFoBPQlvkM+dm5OgxeGqoLnNj\r\nRHvgPa94gzq+NRHNfGYYH0a03eC29TiJ1WxNHVm/EVGSlox2rz5F0Tt/HdoG\r\nsZYTCLmRes2tYbl9I6XCjsFc81ib6IMP52v4qTYeCZaU6rwH07NGhWIAZqSL\r\nYwbTLYaFz/hZZjOdGpqpgJiuULFdC0Rft6Zg6ZKG1TMZm6rLrQosmquHeirr\r\nUgJ6HIg8skE7kYvb+Se62aWEA+L/+2q1BGvpFSCVcjiu8HtFT27gqfETmR0X\r\nPtfp6v1EM5D76v0SUV/fZeUz5loGRY/Jnxw=\r\n=b7QD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7adf3af80.0_1678497856802_0.6165839624143827","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/typography","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.82554d770.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"432eeb674d0e6255c985d3f2a282922a6748042a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.82554d770.0.tgz","fileCount":22,"integrity":"sha512-6a9lclQARxixVa2CVsuj9zc/qZus3RIYAwpmIOJQOpyayIQxXv7DzNOR801v+isxWk4SJho0q/TC4e6VAn66qg==","signatures":[{"sig":"MEUCIELpaelDIVWoxFkDiRHY/04NRJc1Preut9Ty0tbSWSGoAiEA8CzjEaAgaYsM/9bpfHfN11ufpqiK2P33GgQiyYgjJ5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9smACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou0hAAifVf1aI1urYoVKX6kuxceomJ7cAjnkoPCuwBxXyrw4MmIjvp\r\nmiYnYsQUfooJDeOuUrorWoAkxH2QRKUjQE4nDVyUaiWrxBI6QGJXt1afnyT5\r\nOHR/SlArzZc3DND3dbSdXLiB7bceINz5WNgJBf4A7kzDl+WbQ4lkS23rwKwK\r\nrK/GQD3l/zrZQacNYdkrMW6db1miA17Rh9qKw1LV5pExiV4vaSKItgqNSkeU\r\nhHIUvFgEhGytZ6+eXS+H9+3IjXOXwMOSUmLR4k7Jd5OWhFHe92pvr7Gb2kgz\r\nrk8bKWso1tgmwhXoh6K/wP+NPDd/qUxkFVbaedrZyNmQRIPX/Ymv7++PU0C8\r\nw7E5R24u5R86hYwV6tl3GOrzzpZM+2rYdgrtjTqPcV6zhre5sup5uHVGxFPc\r\n88m7oslZt5/jCX7IxlMZ+YA5m6bbLun+BU3qa3kaIOOotaTzp6YK494avRqw\r\nDFHbos35LL54X7/j7O6hwaRY/IJ0SjQ3uRVTOz2XntgGo38hBYTl6c0lr38J\r\nKcb70Y2gmz73lKXvZApR49HMeqbssBI0VYN8NXMQkrpZNW5PfzSeyBuPS1+A\r\nOeKeTKGX1tKM8qVqW13Q+4C0b2EIDHbJwzLgYOv+VC4nAYc6F5hGRhZC5bOW\r\nBPWSjCyLy7hdt/X4W+3/6xGuHdMlD6o566c=\r\n=KbqH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.82554d770.0_1678498598133_0.172663958150582","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/typography","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5089cdef0d11a4a7a6090089414757680c819140","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.93fc524b7.0.tgz","fileCount":22,"integrity":"sha512-uqTQ0bCLBkAWlGsij1hATM7t9Q33NgoLKRO/sXCKXoxvVKBpalhVejx46qbpMRrzohi/tB/mkZzUifLtOA6Yyg==","signatures":[{"sig":"MEYCIQDv9wyKnWQIK/OsqlCr5TebKhAPtfG3ePxxA/yA0A/OQgIhAMc9WaKNKgg92M4bqmwBum6d/ahUr2FHLI/y9xPldjVR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuDjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4DA//VVMVGhtwKq5iK3XcekAKLhdjmaM6/2dzFq8qoNxfmNWwq4Ov\r\nAXPcp0tYDh4lfswT40zsM+fLlgyUaUSEzWO7KILfXpRO04Ve/8FCzSq+7V89\r\nMRA4ZfvMrKmYtUmEfO2czsSIzXsxDVKzb+GKBJL+Z/AjErlDyHRSVCKe1kPb\r\nXy8bgUHUOCXrBJHPFamHKk84hODOMra43fFR6YKTY2gAYcD+OMo6o00XZb0O\r\nIPCCu2ExzpqRESpPMWSjiSkCt9HzpUy0COzRfnhoXOEF5SBDKT/lidX3mujB\r\nbGEcocNzgFGXaRUNSi71ik86Q25vFLqe1VD74sjjmZBozzSeR6wvDjiz63W2\r\n6x6oytV19PeDKbTs/41RYle1iNLFz/i/qaQJXCm5rC+ihs3UwJDLgxXmqZpE\r\nWLACAYIrzWv78nFpyLL/kx5T+N5Hw4g3L/dC/nFyDLW3ozoR0K1/hEql7PSI\r\nWG/8ZxYLf8BT26w+XovIRKkoznkMo5mM2+uO+Yq47oG1wSGuRYX68e2gohar\r\nSQNUyHaOTg7HiCObNy11EQsV49orcD44J1OKjgY7SDymH0LiR49J2ssSl8s8\r\ny0A0l4D+MdWSNbh/BF15xmgVPBh1MlJqa+CKTRaDpM+1GnyUPjV/O2gl/+vJ\r\n0Le2AXuqgWZCljclNSgSIKFHBAdI/qJ4XpA=\r\n=ODNh\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.93fc524b7.0_1678696674863_0.48042742794656745","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/typography","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfe90a690b7178e2cf14244d0811a95fc226567e","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.50be0fbae.0.tgz","fileCount":22,"integrity":"sha512-ofWXPky4NFFCKStlnNPmlYdmyDtKCsNiZhunSPCv/unBGr/R/zBulgnsD7TK4HFoKmE0ZnZa3lI9c+5mkQdX7w==","signatures":[{"sig":"MEUCIQDP+jwItN0+2fwIZSMlPdS8Q1LrQQVECFJDiEK/YHjsDQIgbDQmUYLYaE6E28M+j+D5kDYhgvsCsopxgoDrn7zj5mk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2DDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMlA/+KY3fX2h7FuSszXlCcKxhPOpTbIVpaSAezO6FGi3jzqDNHqP/\r\n4xjqKc/Sx2DRmqlGqcPy7ly676SsCidfvLt1sw5ECh8xX/vj4DPTOf2ofXJ6\r\nR78Z60i8A6pCtoT5RUshk5k53yXuG8ZHlG4GJABfFOBN+3+3LWtXr94kDgSm\r\n773Us9f3j3SuoOcVH6As3k0s6Yp44+yGnmC0xfxB27CXUyTohEm66QhGkiHn\r\nCsnNOdc0w2W3eQfZrFpcBjO5UFoxEZrsHNm3/pJLG2h0yVCbqC7VYFN+e823\r\nlkCttxzcYH+jH8patGYMQr+dSZ9sun9/OJcF1B87FYr20s4cKHhSmeibjUX2\r\nQBDWFHoMt2Sqpim3Xoj4CgnW6Ud8RHjch/Zs1YalDGJx9WWczsnjn4bwnYep\r\neJHEWbYb4xA5munHJhMUMb46x5DAsX/Yt57sRFdF4exgc0sO5NZgeefEzflJ\r\n+/1eQM/+IjL5gcEQQ1U/YIGwBGYBmIpYxind7GJKBEqN04YJFlWpqDFzV4MG\r\nqj8xi0QU1ypAq+UT1d3pcWutuxTlL1+Zkem3YJvFcjBkGNVe6gETTq1Dzkfv\r\niiJjdy8+HQ2aavWSeIwtCFNcVo+hh2OBEL8ZIkJNMk7iPbnumLiyvSmc9o3u\r\nSTludaXYQg4rwMBgsHVbHKZrKBsQO2u6+BQ=\r\n=80VJ\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.50be0fbae.0_1678729411019_0.6360077624965985","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/typography","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c4475ef3977aab501482cfa1a9ea34912198677","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":22,"integrity":"sha512-Y70NzlWQ0UqMrcOQ0rLUyfZxl29wgOOMmgFUtBgAIOmXPsD0DAr1Bld1yqXFy5xB2r4x7jyOKE32wfDBWKnxoA==","signatures":[{"sig":"MEUCIQC2iFsMq7Ww+0MWB6bWiM8v0dNemhqxwJMkVG3DBCizdQIgPVIaUkfFFmsD2N2/U15Z1SFGJyJJosXqvihh/kwcchs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2GJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKCQ/8CAcTJE4h1ID4ckN6R8CwYO4RSaknu44J3OspTzOt16jg2maP\r\nejMb2KyMaZ5gVFU0zwJssQ8yKy6jc9wbpmTziCvfJ2iwJxOeiShlMWiRpBuM\r\nw4EoQdTWXnNI7+HwDfHQH222Fx3a7eTo2rbu8YCusyI5hW0qc+0cb7Zusv5Z\r\n5YoO7VG+s42NkwT+fQLUBbhIgVGQH/rKJjYi3NoBHcxzwcm6UHJdtQqP9PG3\r\njF+NMZEIe+b/hlQF8bCAjgQNza7TKSvsvNkh9xxfj2ZWjrqc35AyuW6b9Xsc\r\nfjJ74+pG5sjnun+eMuyUw2nTed/1/yw4JTW3Zz2b+K4tI71FQx1abPeLa70n\r\n+YWR1A3ZRAxrSjVc+RA2Z+Dm1M9BEskAsTmsduIk/g/s5oCxvPciID2KCeB/\r\n+puyP1VWBs+TJ2sGrl/cxrdf1/K6z7BSsaBSPwotEefYwAjYVwjJmY3cKU1z\r\nsuVqxb1x4Ug/Uqp95HXimHq8iyMMpYfmeKpRN+QmKtDWFmRUfuPIdC4Mh7Kd\r\nExqhIOK0YB5YnC2ADK0L5hOFUjIzKQpO00h+lx96zp/jxpRraRUiTqLIP8w+\r\nPU0og9TLSY/qGG05/PrEZr6brY0SdK65gvLDCk56cNRfYJHgCIWD5MJRZBtF\r\noKLIoRaHe0rYQqBc7GnMT+5I66i/94tC51o=\r\n=Pggc\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6b5ffccd9.0_1678729608927_0.7573486630058368","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/typography","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d449bed49e8aba5f9d3527730cb793200f105411","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1c8013f4e.0.tgz","fileCount":22,"integrity":"sha512-whbzjoGqXmQVNxQI3H/uDF3igNWuy19azW0DaaE/pX9ZqApdwxXWQcd+43ZDtGc1uOgAPnhhhrCxFbRNUQjqXw==","signatures":[{"sig":"MEUCIQDq8NNTfY4MLhPiTPtzVp+jRT19LLeg4rxrYbFhk+JjDQIgD6NwMbZ1dzpjc13M9sReaIwoC4MKAcy13DHyTUWw/jU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2T0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqyA/9EkBd9VKDanoQdSA8rTB9P1eI7AGVAm4VVMZBVdGE0Vp9AUuU\r\nKblU0l8P2ZeEx4ewP1EoNMzPd7wYYOfojpSB4XhthSHlRmWPEBq3/2IpuBa+\r\nzGZgtqnjVDk+EJ4/QkGK4XRHukCTExBy/mKuIcjoHJgIJVfzDY6WFezs/CU5\r\n9TXZH3nRbOU0NWEO1D0cZPcOdvnQZr7CRY44Tm+z8QjUA5e5PuH0QGFPILoR\r\nGtF6uxgOYME9vWQ8dMGEGmZpR+OoTidGN+YJq++U22ZY2fqBQ3TGyxM1jMQG\r\nuA2xpWtSbtgV8G/s3LoB1yQqEThYkwVnLxHu9xGxbeVjYiyHtrmI+XhV4wfz\r\n71AFK207W6F8d22nVn79abWT2I79iEOMmbo/jGdaVafzwC393XSRbBCU8LOa\r\ndKsEZ46p6DPkFoOdrPopl9wGa5UzL9PFrOaa3XTIaxX3zT3dmSGrMDFBAnH9\r\nYF+7EUvRX4bxZ1MnOeC+a/Muzv3i+/Eg62lJwJmzEZkwS/eg/XYs9MdEs0uI\r\n4yV0RI2Z2ypSq+fQGGJX7bt2dRK1Brbs/Okk6Wlq3P06tvf314yC7xIzbU4Z\r\nI86XR5LuRfo+QPnx1dHoRXc68IYznSMhsKB87G5fbCCuc5ALDtAS6+iyV0dD\r\n8H6wl7PVrxEPrhvkvCeK5w4gP35qpUvD1/g=\r\n=S+/3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1c8013f4e.0_1678730483993_0.8037613288609751","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/typography","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.112715df5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64eb62ffc80999bbe8b65f035b4bef5deb0241cc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.112715df5.0.tgz","fileCount":22,"integrity":"sha512-bHNxdGfTprb5QayX+6jyhMsUA9JgqrYxzVPc9v7Bb8xKYuEyMALb0+i4ptRSTwSY9mtAECZ8qf9EP0j1er15iw==","signatures":[{"sig":"MEYCIQDtKywGrwoIM+/45AyaDYLeGwJ1nr3xZgfm4LMUmkt+VwIhAJqVTqqooymN/myMK8jW5mXKKQK3o9z4ADgc/MmBNZoi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD22lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprHQ//d6MVQF32AOiyZ+p67kNA8ns7zrKcG5WjfF8/F61gOa1XYs3V\r\njO7noxbC4yijQ8/K39mFleg04aFnTch57OZq/9udqV23XQpVLmXTkEtxvsZ5\r\nQHPzYNpBBg+/pvbbR6nbMhlf7N2wSennYCZ9+j5ogp+Drg+2nnigbjb+mZwF\r\niS+T/O5u4RR2dTMScOkiUqkmrBYsWE7JruB5G9SmCZtTTK2ySKDxECnjoSbL\r\nKGmzqNx822zbiUkXOJ1tAdKM9syzMrnZ5nmvvSs1qdj6uGPDyAGV28Dbdaac\r\noVUP7irNtF/asIjSFz7wopJVAYmxpOXRI8OROiEuc6lstr5WoNEb6ekAanHv\r\nDz7vjeYT6sEyL90Vwkl1bvba/XJ/qisWfNu6J5sVE9B0gpURsi3ZJOXmYAb3\r\ndEsQvts66tHRuqhpFFeehy8nmSXka992GFVF1192BVBZeztjMiQbWVsvne1z\r\n6L8i/Qrv4nYo41/gWqvWa2rv9l85OzxINuuckqUCtosQ4u07ZteWVmgtzuuH\r\nRr9XLK98YerGoAHjVPnmJN/vjUbmW3CR2Ir4CeloSXcue3JzIvY7MWixI8HA\r\nLa0+Y4b+TWSfPOeEcnuip/70UuDAzeeOw+0CdYDMSIsTZ/bgylK0LTveFAPc\r\nR1fRWoFthFbimi8NPkQkFiGBID6mBFnwHco=\r\n=Zn3u\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.112715df5.0_1678732708958_0.4241565388615651","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/typography","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d250911f2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5804f8da325b5b843ac19ab1bcd1cf905d686cd8","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d250911f2.0.tgz","fileCount":22,"integrity":"sha512-A2j4SX5SWwrUiDyn0DaXvU3/qUdqofy2fy96wuGGPoIptKT2ZrAdOwnJr4TBW5uKu/Ry2PIii5xtaYgmVKpLAA==","signatures":[{"sig":"MEYCIQCAWKVJ1cKoTN2IkxTz5usgalKfQ2RrlcPVIdHWL8xAKgIhAKmxSzeX9LTDyyRwngGKH0p5+ITQ8gn7HcxngXIDIOdL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3nnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjtg//aVo/xu0ERS6ujuLrTwYB/oZEfRgUTrssWY9EWGn1+Ti3Cslo\r\nVWHEK69OFd8MQP6s2J3Oql7Q/QiKT+YVIUgoo41BpPjLc9pNtNpevF7QEH+u\r\nB5t268/VMhF+onmPorbHeAUv+y1jklCf5jrnIcMDCZj2kVIOsUcoBNjzP2sT\r\ntgg/NQY0eMIwtQ8ncc0sfQZLvtLeeSEuCz9PPeB9M6sRHAViIkMbtcffr5dS\r\n8dMRe12/FPLe1CvxzePmkSLOJc0f9r/F6id9WMEPtj/miihcQAfYRkjN7ezy\r\nNKMNU6WyTOvFha3VqSzYSGk3EM+BXrBbclP20a8AmIic9DHdbzbOGYZznpG5\r\nYyR9CopNfsBYc4JUipHRnyWuBUpWTzS2WSyeqZQfN2ntwrHgZFHqZU9hT4CT\r\nE14GLoYusBINDPRkpHZYKi3KWGH2yK8zZ6ACpud+OPihelZFFwx15dAdAqMp\r\nEkIxplb66lH0fg2+4w5df+Wn39h/HpqIsLwq2VeSowjgjEzF+/unG0CeWnek\r\nEKu57cSA7UDLWU0p0DLwEmkPEFMNDhi2NQLEh9XVrMbZlEo2MkPl5iiTxVcI\r\nghdVQ3aKpHzYWqoFB1w+lx8ioIl+pKiJjmGF6YfOS7otnqlcq5zSxwP7oKBE\r\nAXYsE0mxF69f0+8BzrPMpW0o/1RIbETpbAE=\r\n=orOa\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d250911f2.0_1678735847325_0.8947524124619362","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/typography","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f02ab7e94570d88f17359cf00a272ed177eec15c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7cd925c12.0.tgz","fileCount":22,"integrity":"sha512-iM1+CFRnIerSzjkc285IJedsRCXkmBQx49J/OyRuvbN59oR2Ud5za7Gr+PdZCOSf5fVhZYY96XPRFi/9uu+SEg==","signatures":[{"sig":"MEUCIQDHfdrmfD66uDybVjxmRZiRe+RznTYDn5SX84cYxBz7twIgIfDXIjJAQlFQaeyee8zOSgQHnXv5P3j7DlrAq5Q3c7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3unACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjTBAAjbpp25yqUYctKFm8L4km7WDrDQ990H8NtqCR7BCRVyQtQa6O\r\nMxoqA0tea1x+t9pOa+XTew65jBPkFbL3lLzMJm0XTV8f29rskH/qYBspmiMf\r\ndlPtRBAqVaEpX0qp/KmdlJg5MBhDe+dGr1nfEGk8FIfIHYd4uzkzSfCMF3cd\r\n41EoXoeautGq+KnvshIC+IzeskG4YpMrIB9osZlgwd6tH43y9vroSy4vaJ8t\r\nLLhk+e1ysMhem1XUs+fwB1wECDoKxdiilru0BLIQkUr/Fx2dTixEd6Mo/hoK\r\nEGe9jjSI7uniQPr9rlEys7TN23sEHcIpHP5ZfvqYoLQhU88nGgADxngPEuek\r\naJAJ5j/AqeyhXF0RHSequSYHIMe2IN29mN3VtYZeedx7ZgUBO5s9HeAjbmwu\r\nn4RWz2QUt8GQoDw+zLBIXuGRVoXWp6bUe5Pps49XSOjYg4a+roOMEpMGrLcl\r\nn1ux76K7i9F2/NSGzTtgE6bEa44n2il1Bv1e72mXP2X0uL2whLo0OWp/WzCr\r\nNljycLeW8b7x0pyRBFrxTFeXDROE53BphN97ZWVugUIMEWlBz4b2WxxT4G8/\r\ng0LBZxhuBGYMm+FAG8Jbyob0g71koD0ZTQ7CMBqc3bZgHa93YROyNHkxepZ0\r\nIXboXIYVKVq847QISBrONIXhWUDgEzfi+Mw=\r\n=3O0b\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7cd925c12.0_1678736295530_0.2869626553026252","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/typography","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0e4d269db52added792f76127072b6f3bff86e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b2ddacf73.0.tgz","fileCount":22,"integrity":"sha512-8uDIL2b++upJF1GYlNVszdg5n5SEBMFF7H3fr/Jgudc3d1D5xhLhT8YEN2N8b0PGdm2DGwcSkmfQ52SAtFFCrw==","signatures":[{"sig":"MEYCIQCSQMKb+rebiG8GFOwGRPPmlqlunjKQrxeMjwrAWgTeEQIhAOLlk2w6WZtU8Cx7hJmNladd8Hm5jjj/rz4RUlQw+uZA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3yyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXCxAAjF3kr7R8AqqHv09uG07yFiJPY6OPAbUYv2N9cDxakmi7VeCo\r\nW6GsRuiiOwttHW3mEhmllKsdD6Y2UBoBz2HhugoZ+MG+ShLBKnoME5Kzkvj3\r\nQDBKmW9KSA99mPi+3Me38E6wAmKUoFizCwo8+oHIBoOj0/Mgwn4mFgj6YFEv\r\nUGfCsOkWnoxvNWKpzCeQaxsI3Xl83fRkwhizIfWqJtdfzW+KvnqeMK4upJiB\r\nLCeh2Ar70sXpskBpUpIQ1NYp0dzjohoQU/UzGVUEyYL/PkXPLX3ltO12UMyU\r\n5b6YHZFQKhyLhNdMzJ8ssYymNkUjS/l7anm5pHlwhFsYbamGYiAZS4+ltAxh\r\noHy0hdhXdfF+INiRKZa195qjriBxO+EY0BjwqgiLE0Rl1kC8jVMbTjTYUu1A\r\nXu2/QczH6bVbiGmuova8V4jnz6kUXNZj7duRevxa05aBV/T81IfHfA3pHcU2\r\niBJBqf59412LWs8J7rk6kKqBakcsvS6sGTrqPV8cJnA1kPsPk812cIh4PXY/\r\nCrg/loROJiJyemeeIOIPQ8OJoZj6aJ/xCsdVnsUTcg5AjmOwYTMXiWdKfhuM\r\nSjmFcltiMCJG0qOCH+1DgtP9EflM9Opx6JIBBHVH6P5VM7iwd/4hx3r11kXB\r\nl8fAMhy0cWwGMdKik4mRKO27u9qIxe30lwQ=\r\n=GALe\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b2ddacf73.0_1678736562566_0.18679207326213643","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/typography","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2686c02b22cc68d0d3088fd659378bc0d2ee7c91","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.989ae2ecc.0.tgz","fileCount":22,"integrity":"sha512-cb63lv3lp7qTDMgm1FsQMx/gWvGGYdkfU3y/dpn5ECx7tZBHyFVjHjDrNzz99i4EcFxWhd7RwGI7ktSaM2vtSw==","signatures":[{"sig":"MEUCIBDePuOaKEAPvayegv8rFqr1TuhBKf9YkBilcsLu6/rHAiEA7+vtggxUuG9kL3ISZJj2Ej6+ZunOCMCb4B2yQNu1Zt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD37dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4XA/9H41XerLMnuIZ3BXigVhA/Sin6hNuxwPzRM/hEeuHEvRkn+tJ\r\nHxopf0CJnW9UzVJvtDyDjAi0Gyr8UhpXlBXdjgiXZDg0lkIAI7Y/xfw1dwS/\r\n/iZ8YtQjFZuHv+NEnNq+SaE0ifyWaGCWVGC4y9ft0ntJfFYTJDbCbacWSrnD\r\nYGVlib3vp2Mh4MY47xxTSyUzp7SLi/gM6Po/0jOL4+e3ASAIivSyMHjXYROo\r\nXv3776Ersg3te9wI4i2ctp3ufp95YGW2p4iyxAsFeFR5XsHrj4J350/4w1C1\r\nNbWcs946TJTSkWfDJK3Fbi3+Bc+RRMCEU1eiwBSn88Y+5glF221EbilEC4LJ\r\nmXv4qefp+1Vjjvb59oQ9+cDuwr+18NRvF7qwCnl41ZT7XuaCKe+j6cmUjgYp\r\nO8BwMKAtblkDI8CM5pHg1EOUe9FHiQaBueND5Rz27H3EnCfzCq0rV/vSpXQ9\r\ngTIvqLJBdgAhPB8sXzM+H6gnKVEomD159onqLWmoNAQBcqf2ZAD7HZd1Vil4\r\nL9+tHgqJOhDwvC254tS+Rat1DrhZzeeOAVVSHZy0nwre1jjEEsndJZucWmz1\r\nVBvH1OUpRP7Qm2g1nqpldjuvtkg6L1Hem74T9krECAt1VB873fo7F0f3/1Bz\r\nJTLSKUVrH9If+OWbjzEiZvN3229Haq6Y/YE=\r\n=a6MW\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.989ae2ecc.0_1678737117432_0.6671761838676873","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/typography","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.89c66483a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde69f7012dbf0132341173bdb2f6145727f416f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.89c66483a.0.tgz","fileCount":22,"integrity":"sha512-JEpKm135v7xDbhN3qwD8ECkfvZK4whq3qQVvNnCCbZkm3W5wcATy1u6z4ES65+PXEs3aLNjcI8g76EM6ycwzRA==","signatures":[{"sig":"MEUCIENclY6PuKm8SDihsI7Nauaxqs2SohoX3i+lVSwpjcL9AiEA1NdfGYzJj2IakqlnoZ/LttrZ+xlZ3h/2tgHhdKNAhWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4RwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoMw/+Ls/i2+Ch9kJ+bBiObSCtRGSqpvgSuKG4PGIrlNSnlpuntnRQ\r\ncWoQwCtplKn8V3KezWaUmufzACIVDC6mIpTLwUMuYGgym+rqp4UzMgb/jx6S\r\nlyMHV0/qMjEcrZ37+GqEDktr+UiMWz8Y9IfAu7N4RKdxohFqVIduR2NIjiP7\r\nEBJtcEW2H36Q84yrxQNgu922qW+M/JzQBKeOFNorXYnAQhHAGp7ZKJC/EoGu\r\nxJjoRs6ygDM//4QVd3OqLy9W5b89aL2/kGygMKkaemLr4feDc3JExrTsne6U\r\n/jUo3Adhfn7MLnGCXkX9se2ezylt4i0FmRd6DTrgu+cBIriC4c81/5w7/PVG\r\nacf3CmyH1Z/cVUctfbCIgUaIHt5OvVLeVgRHOC42gFKGNoOMFiUD/jxR3I9n\r\nhwFeTyVKrD91Z9HyWbW3GEGf5MvFxJx/Yb8S5wZXDUSAbN7bycn67LDpWv4+\r\nIh1qZVK17CAAZmT0Kw5XEsRMr0NChc2P25d2atd6dpCqCeIqStYzGlNOHCBR\r\nWXM/+LPpfzmMmgfM8+uOQ+bEPV30fdkGUc3nS8XaX4a95DLZDxjt/Er+rQGH\r\nw/g6pcxTmo7SvZQMXiyR66WEWlefJ+ffcuOR8YeGWa3//z6M2zB8D9/pnV/W\r\nBxH1ePKrMyAboaZm2xrVpotYD9m1DojaPII=\r\n=4KKy\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.89c66483a.0_1678738544107_0.6081718460567078","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/typography","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d222200d6a6dffe0325d9e545e9f0fbb3f2644","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6a85742c2.0.tgz","fileCount":22,"integrity":"sha512-H2fqv8PKSkrdNs0JJrDckD9FvD8mqODSnawQLnpfr6GF+Eqb2pjaRUADdHLC+nTZx2r/ZlEC2VLbvVZX0zhD5w==","signatures":[{"sig":"MEUCIQD4mSn++WQkZUxmQLawZOP3Mx7L5U7agq/Z2C8AsphPdwIgZ+qrJiEg21VGpBeDGDv3Jekn0QBVDdcP691sDAPbb6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+ASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9+xAAmHvQx1K2aC+oxRWfbAPSe0jP5hslHjy0hCA4LxARNLMghd/6\r\nZBF7IMx2goQ9yqyWCeG1ZhrZ+rsPBIBFBuivULJiO48dCt3aWYe2SqSjtD7+\r\nF6Lj4EVwCIB2TKyk1LztaFyYZS5H/cSHxXZb6BbymHdu8XnzR+lExBdDAaJU\r\nc1GSK0yaEOhl74ZfyF1vB2NaVeJOKrATphyA/xolkzzMaOFat5w/5IZJJfRw\r\nqPFJLHvOqhSgiLeOTPHlcqSCvd4x/65Ql8vvO6wL2aDSZFUNjXhiGYA3/XnM\r\nM6geVuAOR8jyM1pqaAIH78wJd6x+UsxJ+F+57og169bINgD3stx9Seg3Ng5D\r\nYi/rgyBNmSQLKFzmSyuzGbkUrvWzcN8irteZzEEON4WeC/6Iezknd+WUrZ86\r\nF2IL44UblVj2XItsREymPGqTOOp0FDe+aTZx6o17KWTpME2cVyYakAqw8epF\r\nkepym7wWCGBtESdlR/v7oegZreZm9nibFW6jUxbLOUHMCO7pAznMXmTD9cKX\r\nC6eqLvC+bZicCFsUpPBnqNJ38hGCUIBPRytAWxLYD/g5jjTPMGEdd5qCZWAG\r\nNg1rJztSz7CfcF8XJrEt8ECe9AGfdg030D7XrVyhFc4SsbJppOveQGYteAhJ\r\ncQNVtfSUo/sjIEcKQpF4LToxnrzA5Nvftbg=\r\n=+xsC\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6a85742c2.0_1678762002083_0.7881947445655897","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/typography","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c185ca8a30782f274103660508a266ec7cfa7f1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":22,"integrity":"sha512-OU1l3hMpefQZf2Y/vfZKhIYdv93pgR6hhoZn+Ub2CyELaKffXICnX1FJSLVBwZK74q8kbBIhPVb6sheWbOy6yA==","signatures":[{"sig":"MEUCIQDwTQvmjeEV17R+I/yXNrrKB1ABSJ1ZzjdH7KUHP4lWJwIgQrrDWtQ3GEGEuhgcplT4KnJeK32//y8pwgvcuqh42Fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELnjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMAA/9H8xT+8PE2KY8cQZM3A4ASHPK2o4unrwGDC2bPdtqCArq1Ypp\r\nGF4vhzQjuv6Rkrfd4jdJzAho5gviL4jKnBeLUqJb7X5Pq5ZHr1X/YQru7pCQ\r\nr0c90fJYPn2LHj4K5jfu8SIo4Sfkg++sy0IBnOcUd811VLbV7HHa9hRRh49n\r\nHHzXa1bT/OCEudGeasp8BYHwBsfhzn85/1ie4IThc3L4d0VaDLaYGQzAwko2\r\n2B5qkgC+G7tbI6VZVnmzYfKiOMUXButnWfb+vSv+PdT//YslqmuG13QEI2OG\r\npZHBhdkP7Y64W+xPDESC91gf0BSi8vrE8fklJ11ZfG/IN9K58NxRY4kvsJwr\r\nOFTvwG1QkrwVbVA08p1zlMlY3xZ6IJL81MvxaR8BpSKUZvVApB1LcEBkToJN\r\nftlD0Te7TJtsZbeW3pDd33cnLLHEtqOy9HwlaVCAjGsiw3RjbIdtn5uqWfJ7\r\nZ1Q+6LJ3PDHApZegBfMKeRoLK+jvKISMG/DOf44aTG0A+bjjTkH2pllpUBET\r\n4rIIYqpKTzEOJ1hDNhL+j7ZOVPNWqRd8PZW+n+WPG9L50N7xhXSo5qcrEmtW\r\nYC2LbPtB0ndWIUX2bFRbY3HQrN6L6yDqQoOqAWaeJL+alRGllUqHRgPgIptO\r\nv0ef7w9Ky0lJ6awd90Ga+W9743Zb/AqWD4s=\r\n=YBW+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bb6cd78d5.0_1678817763090_0.40733945077503697","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/typography","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26ee6918c3360849d70d6a09ddfb984ac5a82e68","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5f94aa37d.0.tgz","fileCount":22,"integrity":"sha512-3/xHH/WAa6C21jdRyln9mUCRhh1enNjs/QuOYNvcFo4G3cUcJb8aJ9pNnwFsTWlVbP9Uf3Qzf+4Dky8zVeiFtA==","signatures":[{"sig":"MEUCIQCIF2vP7fKLJ+s+KD81AVp6CdgQzVG8l8kKW/a3pzqkIwIgPWzSLVFSw35j0sgwepdct+YE2MGRWiPVvP1Z5pkVdFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5/g//e4VfPNnHc+oIOfC9LSuUeA1qV/T59dB01qQEvJKDFZ1+8ojL\r\n3KVuidEEHP9+fEIa8J5x7KAR46pq+4S9wLojyP/W+yiW0a0tpcmCVzzAuaqV\r\n0H3UMuNHeRhywmLvKVUS9ths0ZCl0yBAXVlXgv31QmtihVxBqALlcNoAmRmV\r\n+JW0EceR+ZUxHb6gbMO34cuYuBuuyL1HucSoP7p7VmqgKpayDCNPXzO0oGu/\r\nW+ISU+L69tkZ1TA6ODflJH7wf9/LV7E3rXrfErvXMrVfuD7J2y+ibLtfwaHx\r\n/6I84YQ/j8b4I6+42om6Zb2qimMI61rCS+Q2dxhFwHr4xSFksi6NEkuCYqLG\r\nL9cSKhy8bDlVvnDCMMtvV/6cN9GVu6ttKhRL+ikK9KvzSJOAKaJZQd+8k/EL\r\nrED/ViwNkLuA4o1dBwVMhZkL8JJbx0YN1dhatjYLrv62XN6Oowf8mztkZ0Do\r\nqF0ennYYdmCe0Ar7oeKUDwERi23P0lx/8xJklXrhElML/OfniBvZ3wBtfUbS\r\n4VG8OTn4QIuFgX6YeY/WfycJzy7ssJ+/pyKBCLAOBscmSRvfHIeU2aNDG+uf\r\nlebW4e+khOoW3jYM6wSc8A4YTQTjDzp6KM6+n0Oi+lXk9W2SCFnaNQJUFZEc\r\nuzPODmoH9kkNFhdN3GTwgR1YcAVjNGZhe1k=\r\n=/wTr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5f94aa37d.0_1678817968346_0.6498415744426962","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/typography","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1bd317240.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70965863a388fd3062d5a8d3f586979b98aca58a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1bd317240.0.tgz","fileCount":22,"integrity":"sha512-q/9GD0oPmDxqsbsJ0a00xHClhlHYHMPBH7yCtamrInOD/dI+iYvnO3sDoGEf7RcO9AIVathDj0L1mrp6L3/BwQ==","signatures":[{"sig":"MEYCIQCJUXc/u9xHN1LDTKwSzy1eUqJ4NdvtY1dAyGy0zfiyBAIhAKYzOyZeiE4vdr+fWRb4nMDDsYz2qGpRHGA9RaukIlIV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELuUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+CA/+OFRwqLmU4CJDypEUJ+Ezxu+bPyHIYTFq4XNx7fhxRfPGsD26\r\nWJbe4+44yw59XPnRjIMuwcj6vydhveBZzhAdGbRM1P2sdOMxoP3BVKnZYd4P\r\nnIVhF0WDrRUngROizCdFY21HOoDTqajejLSn+2VCJg+cfPf21V/UCVf8PjgV\r\nsloILBXfXxeEbMKN9CZ/qZE7DCpnV2TZg4P+mWPTwZWRdCwPu0HqnpuoeWJS\r\n+/0B76awzc+ALqlry45G2rc48GwFWZWth9rMAOXC0MyEP8mEhFDocbQc1T45\r\ncvFyuwIBHULBi/zLb1rHyjhcXcw90ukYkSivIbJgMOp87CJwU8/QHgMksLDR\r\nLjf+Q7bPoa8X1hwwx4QIF51C/zvZYE08wHfDK9RCG+C0SRxYyI93U3xMLq9O\r\nD6DBoTjdsIP/HnCqQsJiA6o5g47omDr0FUFmACtRvkLVvEm8TZ5Z9/5m6bIL\r\nBkdecGYMBBmhL+w585cMVY7CHQaNI2hgPwNxh1C1AP1zrBlYb8qTHuFlZ71p\r\n0pd9iGnnNohFZe8x6Ta2HSdgv8YgPv4JimzHX8lJPoKkoZf/x0jIUirIHpDZ\r\nYDjRXvW3xgQuNpZXlp0OFn0U/j4KF3h++8PG8UaJNuFGSBwYI7rWTEZGxoJz\r\noYg8vbQ2kWTs/7nIaIdkwHiJrGWU+JTVHk4=\r\n=bAJD\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1bd317240.0_1678818196026_0.44089295053642075","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/typography","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aebded2e5024309c7c00036543ec2f4154ab0d58","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d441d2a2a.0.tgz","fileCount":22,"integrity":"sha512-HWfQb0kT/FqyMinfhIpoTS+3x/hFb3HOHgL3TpOdP+SAZ3+86DkWazICY+sUzXBzQ5pB/FJ0zP8QhFQuiM1bMg==","signatures":[{"sig":"MEUCIHUNghR1taklNJQJO4QRu5gWpFRHYyvIfKulwMtZVgiwAiEAkIAt6XogqFU61z/AxyZENogyeVaS0UzcXhAVYuJZoQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6VQ/9GIeQJbY6a4WkzBnEW8qKxp5XNGSQ52IDGJcZoO9ilYCzivB9\r\nQpCtODJ6VF9oy0AzWkJ8/wLPuE/Nrabk0EKRUdhPE7vWVTstS+uQi+hu8Xae\r\n3p5QSgugPttgorpk8/c4rNeCh2pVdhLFbx2zul1e8kck5J7z6oYNVjDb8H9H\r\nhQpnj9Sk3bzMmt59hiBWZ3pJdM+AylBs/BkU1EnsZUmKJjhAvc0xWfEu36Sj\r\neQ49+YxyH7eHkXDHLPz1px2TOCd4lIKj1OeB22HOM4WO/rYFbm1oFj0htpsA\r\nuMf+d1bZySiT+igAwGU50f78FcYuP4IU6F5KUkoZfktS8c90/X8gu3XXc403\r\njnB2d54PkwBPB9/aQe0A3YJamSsdCMojvBv365ujr7DQC6zitRIFWzXq5sii\r\nVfMsIjW95iXCv0Lklxa8n6c/eZQsapq7DiVWgl4Dw/i+v6FSzIMaiQHKSTAQ\r\nHs1usNA434AvhBa3xUPPhbXuerpslxOrWBHkxtE//y0hxVuh7tCUnCO5u7LJ\r\nXiph8763VkbyNixHYvbh7u87XNiVIA8EQrFFC9tJ4A5++yxVULtv2dk/NQWW\r\n/wlV4XAtLeJNWJBq5cSXztaxXM2/KDBvyrqMd5x1LKAFyEc4I8KT5fvFA6kD\r\nE+gy+zdDSfB0bE2PZAPRpsY/FhcZVovRGhw=\r\n=26gH\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d441d2a2a.0_1678818351151_0.5802968276288814","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/typography","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d3a977fa3d66bd8fb498a3cc5d9815b2a5173fe","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.fff4066c6.0.tgz","fileCount":22,"integrity":"sha512-tejy76VJfRB6o2mV5so13JE8+ym1I4gyYpvtT2pzWZVaXBH3ggpwXjBjuVPJr+2aChNuSE9kgsL6BK/Fka2M1Q==","signatures":[{"sig":"MEUCIAjMVFZhrsopUck4vL40BCDQwoRDc5L+8d+4ivdtcgvdAiEAkzBKkZrRKFMv3mem5uJMAnPMol62NHtIRC+Qng7mnZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVgQ//d9Jivmf/bBqKJ9nZAoirAD81so1cx3Fb2Rm8Dy1FZTrjkD9i\r\nuhUAd8l1c7a6VtftPgAsczfarOlBZpQ+znCQ6cIhE9v5fnrb8g19PbJcLrLt\r\ndNmV5RqmcYLS3kM/6/yQzwnCWrG/lUgHtMVVpU3n1Pp1DqKqNQ0T7AzfDE4D\r\n+iLPjRRmRsUUnF7kz8hp1bO/3UAHnNzAbF4iE6MFSsVUg6Z2jukkrwvW/QJW\r\nv+fcob0Hf6rqo9sCVyb2d65eTHy40+fhJM+S8IWf5Q6stnUcpVc6XDhLuAxv\r\nQWjBKvgeQn8a4xBGFJnj1lnir447FkQp/AMtK6ERG6z1wOj4364F4aZ9qStJ\r\n2Wou6pfenHHl2qyupr0LJQl6W+U67SwD/q7K/PgELzyxg/lT2dwr0RetLMKU\r\nnk3lk5mNDdxnvrE7YQ8C789ogh60Mbvj73oQd7kvYQBvnTKDx2/FLd8MvWTU\r\nUxMdN8jrjrtnwt181L/qA5aCIYH2oePl+hnQ7dKiKfrSDlS4QuHsbrc+XLWK\r\nlzOlnJThPPqv3qYJx1MWhlxNXy1I+ok7nRO5Ys53n+ja1C4BhmFoimLGVzV6\r\n5wZuSXTw9fX1Tku1VPqAtcC13on0P9jgAV9Fadv9vtxqzovhwz+zCfGx2zEa\r\nPA2yMdt1IPVNmW1+OsZtX394+WEEhuDnZsI=\r\n=YiTO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.fff4066c6.0_1678818386600_0.09743173017306983","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/typography","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.87809c710.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1f5fc81f59d5bff23cf76dd65c94d9bb4509d9d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.87809c710.0.tgz","fileCount":22,"integrity":"sha512-eNWwSs40n/WJHWtw9hNCa7M8rlGWc8+r1Z+h6d15/LDi40+ssymgNoTeIEWkX+0hI8RgnQ6jCqjEr+7tWZ9w/Q==","signatures":[{"sig":"MEYCIQCBXAtrRweiRLEYDp6oKbq1/Y1+8l4y9jlqk0n+pkIaSwIhAMBe7wtdJ7z38uqyXp3bKZuz1lMS5hhcA5+c7KWaebHe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMAiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvLg//Yoih6bXMxNQS2z2L5acvC2myrcfU7NlEwrqNwDPajaza1yXg\r\nqUVDqqDONqavmqcy9j5sJ0BBzVL68j3N29/ez1K0QbmfFZmtIU7MhQSbdBLZ\r\nrwlWU8wa7iyhOykqgR4qymPdwC66bDNd1/ZOywT91w82SagW8rtt4VckoNnK\r\n2E5oU0EoUSWRyxgvIr2/EadjP1e2MJn97KLEbX2aAeua+7XAyEF1pZhcgvm5\r\n7Q/kmdI2ypH/9a67KPCE8XQg8BmkMkQpnVNv7lWkaa1lkDmMTui9IOn14pQh\r\nnpNaOZLe6DOi0l+VLrNv9C/7LSNOt/G1JguAcTw/qYmjr9AkfxcaKAdju80Z\r\n4Y2t/sDYhaDFOt/ZwPIfSGjJ2EVWd7VYU278Wzexfcl5FFlcg9D3DPSaoirD\r\nPbLItmBWzpwTYt5nljelsWOYdzPYr+EKsYmvY0dioFaHLi0myVgtUt1HundV\r\n/DHyffLiPfXCy6n1g/uySoilTCQ1SSBq7QJNdmswdGiK9thhv0SMNcM+ZFfX\r\n7rytxQsNfPC/yM7GZbJREemo8viFp7GWX5Uu7NNZTwbvmsnkxpxSTg6jvlKV\r\nsfDS0B8Rl2tAuQUbjbKIq1hSQXFp8soWUPbjbdxSZplEDYHy3KdRRanVVhzb\r\n5d9ui3wdjz8FcfI5L05QpwiSp9dm+AfAILI=\r\n=0Mob\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.87809c710.0_1678819362618_0.3564367327525033","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/typography","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.48d30012d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e613f746d63459fb419d54100da9531c54214b1b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.48d30012d.0.tgz","fileCount":22,"integrity":"sha512-GIm5Ok5SgcGRx25m5T/cCssLp9OuUmYDzm9eKiNRlffGo1wuotv4dyQpKBfOAd9+wo7NSlwQS1DpIBsU+8iP6w==","signatures":[{"sig":"MEUCIQCOxPK0JJxjccpuJgz3rntTLw6LTND0EgyS8g/zKflJzQIgRe1meSa5HeVGCTqhDQpHnMzK9HD+O0vUiawNlyONrKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMEpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9hA//dHkRNPK6O0ASDRqVcmr8VSo/8TcsSbR6oPPCxksN/F4uZyGY\r\nCmPo/8gJK8C0x60no2jJmXdSDtxI5ucMs26KX1oKvexOMHxpdR4BVKWWTvhp\r\ndhAJ9JkWkpSWQORkpxZ/+l1yYWI162dWyMJHcESn5KNbl8JdxNmOqhBhGLA6\r\nsb7N+dCVRRF5odXMQfHRPhg9DIpHGvCj/KwVUH388WSKwWEWbN6XqJMQdsC2\r\nUp0H7GxZ9dt6XSuEZ7PgUnBnvJSBoJR4Me+Bo65EzXdNIDuZFyk46ySWywP4\r\nPpfyrhC9kJKsnYjse7fua/DMIaX4FRG88fEmREA7RxSTIIb16QaDTZHeUhWP\r\nnye3I07CkeYtZr5GJXoOlIbZU+UhPTG+YwarXFwG6jZLjpqvtmgUR5O3XBFA\r\nT16Oow+nmAHAWyAA+bN8L5xAgeayMc+IiF5as7juIj9Hl6o3nf81DNegnzpl\r\nm88VJBByzuWlSH6xHOioLvCjF9qmrciyHzLkWgesXXSAGAzVO2SiiL9GEs9r\r\nz45bPeELjtGbkTmnKxSi1oLadN1JG3mqxw9UBqI1Emf7vf2uymds+VFMgjV1\r\nvS13cPgRnYX69DX37gu02+AmD22VbSzDdlRbpyn2usKgEqXy9c1uBJe0O+Qd\r\n239ZlE4u6XdKBcntB8ElUP2JoydK/Zg4n64=\r\n=xcq8\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.48d30012d.0_1678819625124_0.9397039433066283","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/typography","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f68e3ac9fba08c27572bddd0918744648fa817","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.419b23cc6.0.tgz","fileCount":22,"integrity":"sha512-e55ApPzs3M6M5BJcJJG5Sd29N7eSnLJBbzqzt/mndi2jnQylpZUc0KeKkYmEH7E1FqalrSfISDymWQpEshzisw==","signatures":[{"sig":"MEQCIHrmd80qkewMzVS69D3OV1M9wv1mjeuZhRxzD0B6iJ1yAiAGT0DCKUt/9wf28LMCdU3rcwXElxVFCKNuA6VuOHzQrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMO6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaIA/9GbmB6W2QIpyXXKNeOJsiIaqtfeVntCUeJrSQbaBzCqtD5G0n\r\nwiu87crij5iXLIFRR8gOPbE0mYEj37e+jE4QkOFh0O7l9azWC7m18XB4wmdY\r\nNjwFcqN/fePa/aAA9u9j5O9H8dGLyE+V0JMh3uNb9e8oSUZCCGqPoyHD1xUN\r\nm68WPQ4Qa4j8cKSGojFXWv2keoFGJRdG4UYD5QS8wmZlRdrTCicgECwvnJh1\r\n0oBCo9ANKBHFP91bVfVSA+NA/+eZ77OcV3nn9uwxN/hO/xayBYWtEBDrcFh0\r\nP3bUPBqKpmqkGXX8EIAEdxjeyB0b0PaS/+hiMT3HYF56G73aB9YUzLVjR7D1\r\nturjxRXcnRXH5QG1BKFCynmnst5PEKer1WhRk+AjuW6soR0/eVLcVBNLC90r\r\nCbpLBepTn1LYYBxIuTHMtHSJq2/fU7CnaZp1Hh5Y1bK2esB1zYytIVP4+7Gn\r\nkDkt4GgM7KvDUetRaSYjnWfyvINVYFEm3NeCySCoKEh5N6YHA6a74BPzkjzf\r\nZwC5PxmQR43yLbOQm0rVhYCG813IpHpON0g6f+tZ3MjaSUAZZmmNX4b+HxEG\r\nYefU+BPmyFrRnwfvUFRs3JfrRFMu3uJTq1DSEpAwA8uNq4pACuvKLDzm029R\r\nc11Oq2kEODPLNbYLW7cTpeemFqP71nTGG9E=\r\n=EJAM\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.419b23cc6.0_1678820282716_0.21730460551761244","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/typography","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6062b2e2b5f414eef451e4e9b21261b5a61e8ec7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bf86521f4.0.tgz","fileCount":22,"integrity":"sha512-pAmIRjS0SiiA/KsTOUrWvvSFXiyeVelASRYsNYctWujwK2Nj1xMjeGVM180CNUTmQCnu2wMMuCJox67V2ck4IA==","signatures":[{"sig":"MEUCIQCwB7p+2gxnZ9DEkZsfNOi0TjwZbEEbF7r37phyTWtITQIgE64ayQ4hS7285kaSDImVHhla3RSpOQbQ0S1Se3ZOXpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP9sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2VRAAo0FTUhgSg1fm9S2O3RyUyPWr5uDipFUjKTwuowDJfxZjU4Qt\r\nKb67jRSG2aSEsJPAAaAEhl0nJdhAYZ7B053msn3q4obPpMHjW8yRtGht+LQW\r\ntf2FMyE1Z7L3AGdacw6iWwZ8h0GOKp0kee36OAUtieoN0KE72diMYVBMcYie\r\nKVGMRbbTzowFRJT7P9/wgsu2j4hRYyKM1Q0/FCjeqjE0R7/Uaslrsji/lxKO\r\nbx6YpPRKlVoHADLhQybJNJ0aln3m6w1LpVGP4ZOYWJT0hbp0qh/TrDrJrH4k\r\nG5Jqh4sscMWt4TunNBJebqX8JWo2BZnKBCrAUd67x8pdHuMlk9+SQ7i/fPiV\r\nDumY9OMW45hxwfxsuEgT2hzIcD6BcakQ9r3t5ya3D9CQUtYmFf1ltdc5vXk4\r\n7CRmyVi4MSNiRQbr6sna7zVrrTWdS7+X83jeHGTsVQmXeNl0gDz+hSrxpACn\r\nuMaSb5MCXX/uySzku69VfqRPEdqE3hw5Qm63pqcvnG0ORCDpZXJVz6a2rRS1\r\nTERwyebzlOtWPu2Tnos9H9WHxxsnisqZJuGDFedDbs81mrNFOitZ5anJrQoV\r\n3uf2rWSbM5r8fHLcoi6VAPioUdELCbqQp4b1n9BHyRn/gi7HbXrnJzgKhbDM\r\nGU8j9fX/p7X5VkPd0SvsSG2EpQPrwFFz134=\r\n=mVCS\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bf86521f4.0_1678835564328_0.7142742761867378","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/typography","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fce19ff1373e9a9938201c20b0f2b44bd359ce73","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.11f3d280e.0.tgz","fileCount":22,"integrity":"sha512-VCScC3Kb9GEvd7z+8AKurhnq2azuTMomDNVkfZEKzfZrTOppaIYhmN+DMG10g3ImzCC6cDLMmF4+szBt/xIQzw==","signatures":[{"sig":"MEUCIQCSpX/WvgMQ7zMloztqT+2ekLbPQMbCaIc128kWac7n/AIgTAVM1pmMhf0QqGCQ5pEXvu/UzOaB2YFMsPos0LvFH+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQz7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvcxAAiqca62l/AyW+DFT6E0ThvKdsi30Vq4bomZrqOUR6NxvqtC3a\r\nnOsl5rjq4wBx4Xfu8h/6km/PnZaKQhofm5W13aBqF/3Hx8kscOUDiRfwT3FG\r\ngZftl+gBm6g7kuL4M2BihGbuKxukK9cyYFMHgA0oZZiyS3/7ItGmyGapMVFG\r\n+HeJWdPnAESJXRAwv8xFFeJVFUkzBn1kG2Iem1gn5UpUmJQ9YIdJV55YYbSc\r\nz1PJS93Ztf4DE0ykD8V70WrWjwAfIKMEhy9t1MiDLb8RhGPHPkpCXgZvFuIb\r\n4J2i01T+QiWoJyMvJN4AQpLpcSJNI1osiJUaWJnvdF3TJdRFo5RqGjZRrJP1\r\nqRGpnXU5d9M+Bg0ygSint3x8Pv2hKxDSzg5x+tS2evvgdO6TOHSs/gbblpRh\r\nbzXd4kD6jSdQKikkEIe+YXNG74x/YCXrChMkqhr1tBa282XzDrs7q6Z7vp5y\r\nNkk4EQ1bCaT4YxDoXZpgorLhUZP1vAraE3cNbnbj7gwFvTvNfQF4HrRHqwo8\r\nuA4cbQp+NG8VgR2usemXAEg7EbJrJ86a4ZaHc/M3VcTPbv7gXyB61XQIlvRM\r\nF2ghW+1809TLH/Pe8YMQswaKWN0B/tvFhR+w7pUuNAZkjb6gNoJn+G9EPbAI\r\nj+m0pHF4sQzngr7WaSxlpSVB5fB8Wac8xuk=\r\n=AO6L\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.11f3d280e.0_1678839035149_0.5251450668998865","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/typography","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b281a409a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59b1c7ffb6a790bf912d2024a3f16b501b436656","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b281a409a.0.tgz","fileCount":22,"integrity":"sha512-W0mecGlJ4iXAvGzzaIt+i0FyInB0YpKhLLKBc0M4M2yN0zQ1GSrM8pHoSv8K7A2c4a0viK/I+eSnqUTqatsG0w==","signatures":[{"sig":"MEYCIQDnFQbA9xDyl7+Ts5MZfct+4ALZFcEtcoosTBh+tRAk5QIhAOjVJz1ldG6dJ1nXCmWuV1MZgLtoqiaaetHWN3P4Sr4v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc/aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpUA/+MrRTA7qR5BS8iaxgSAq/Oewcxga8xkW7a1JZwVGdJ258hVNa\r\nItgmidRHi6U187T0bSbLfc87++eECxFgXACsOKCrBSy/brrfcuyGAoqDrdWR\r\n4r8Lfd/pJNw82nsWolNfZFGeEW3ZrQ9Ihmy9kpdguyXnT7U+SxDPLCna93e8\r\nkYrwryZ0OjrwU3t2YthCbKZNjo7J+WmM0OEZdl8Zm+w3vifNpYuvPeUzcsxR\r\nTpiEDm36e5reUtt2CssITrbbW6uQzdPTxdIkjqxqekIxq2wiE2Rywd0I1zh/\r\nIP8ICa61p2BE3rVqtyHCJc5F37cYkz5cI71dwYn0tZP/OBzTCfJ51wOKRu2p\r\nP0zwR35KJ44NvXEx7o6eNH/91u1u9kzlOan4EV55XdlGu5/7ceMZmkDYKQV+\r\noWFnCO031Ds5HmdK1LDxymt3iadZKuNhuXEISr2jhM+2DZNslIQygoOm6quR\r\nwmwibR2Fx3KOz3utcFftgK2N+djx4SA8rGS07Df59XocD2MTps2MTedPMiPF\r\nGI1Y8DP9jiWVSAtZ519bQf8gzstAK0Z3KYP2vu+bZUR9+Qk7M3Jnhi5ZUL77\r\nYJn6/24sMAeaKWiOTv6M4flUiYg/nOFA1l7hVtEekR4Fkx88Bqozjt+bIC7F\r\ntXLmyUkERzOwuGtxDfxYWINVf2c0TdfKN2Y=\r\n=MgIb\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b281a409a.0_1679413210622_0.8837478991108769","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/typography","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.39e473690.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"455e20086b3b32b629cb54eed4dc029bbc61b11f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.39e473690.0.tgz","fileCount":22,"integrity":"sha512-299VOZ+ZI/oeUM25I5h0d1MuJQrEWK5TklU6kXjcht7k2pMlm2iFOj4O7Zjabnk/rqZI9GtLjlugrbSy8F7ttQ==","signatures":[{"sig":"MEYCIQDMVtVEcojDhqoRhaX3HXUC7N2crq0BcEhy190W91TqrgIhAMnX27aMyYplZr2Vsxm8Rj/zH3631N3J0DJ0jYUZcTym","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe5pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw8A//SOHLjKlV34M7uZi//9HBhwZQW7iByJnZr6AHMs+Zj5b7bLiJ\r\nqnRfxpqOxHsoUhEPXPV8+PQVxn8+OC90DaoabIecHO8PAjYeYDYEyEA3Di3h\r\nulcE50R6Xg8Zk66DVTWx9kRC2qlBM9ReJneSkJyVtOLwaw/oMuE4XkvIOmqP\r\nSGZh49VKmgS1oz5wmxA3gV9jqdvoYf88mUCKiFdsnYfl+a3XlDzkE2e+mQpx\r\nC31O76AR2y/kOO1KNfEsTbK7R6jMneZrI1f5QYmdIYyquopjO8Seeo67arnf\r\nDLNf0oTa1cDxIP85bhGR9rltHaUBgtpIHHWnfg2LkJ32vfPyvbgtwmok59Lm\r\n5w6tQk0Cu1KBMhOJ3fkDpf0hk/Bt5Xa7d3dPOo5g3c7ANwZglzHfUMm5yhkD\r\nMBIHYuBWp7AXdHOknZVFFQxjpctqieNhsdJdGmkY4MtZDvuI6YaCVsgTgVs/\r\nIEyO8bDKgH1sKRJ5WDaPsjzZLXb68XQp9aXcRkSrPca4DUztdRMGrOMncpZP\r\n9SMoXTNt2Omzq1xjIfaxYt4epahMOKCBnyMxDtnrYCrfdb53ZhD2hzJycsUH\r\n8NThW0v4/k9WuhLJ2cxwedEA09Uq9OSug5wPS5avhaz9hwqECKliepXoYO2f\r\nQ6+c/q7AAbIAQie/CsqZdeekfBUT4TPwZPg=\r\n=Ud4a\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.39e473690.0_1679421032912_0.13929089764873193","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/typography","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bca722a47d5e21dcd4e91b130918fd1b78fbf3c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cedffb44c.0.tgz","fileCount":22,"integrity":"sha512-HhQ+asOS0leC4M0JjHdF+8yfP10TGVBxquMJInXiR92+kI1abWsegFhjQGn+A4sonnyk4ZXllIGSyhthCQlzZw==","signatures":[{"sig":"MEYCIQDIL1Qo1kr8tRcRDc4m++jmPv3EEbmWJ2FnCMpmy6gaOQIhANR9w4oQJ2fHn0XlmQ+CsVlpbFxUqIFC7Hb5elboGDKt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfAOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoadA/9F4IBZHNGDyo4uGLwfRNTdwMc4Q6YziJnSGMRPrE7q2lLlPuJ\r\npIctsZnby1F+IhCZaKFqp5aWgXhv6S2ug7HtPgX9x5xZ1tVLvP41h2GAsVhG\r\n1X+BwRJIcf6tQOUKM3qqZGEBehqXRqBpz7D0pON2VImlIy2g7+ZFwubcK85u\r\nZH8Wi3qDNEkGTZ98Eoq0Ybax6jfzRPfpbaTkQXALK6iNJvS8apRryTl+cjFd\r\n9hHrOjosRGJoBXW2OjqI4E06SBFH/qnEe6UlxwhoJLpsF4S4gbu/C2Tfsd+p\r\nhtwmmZriCrpRwcXN57ntk2bBuVqhZ4sGP6KHZta/7IB/NRNzwBBuDLA6DZX1\r\neyCokfK46AOl1/jDnikIpmcc9s49U1jhZLX2nHbf+zwCy6FsFoKBxhVb9kTk\r\n1rQ6lsweKIEfXvksii6wW7S1qg+gg+xEsdjMPdBSOKVM4vx+c1goX8WDq9zJ\r\n31Vf9ol8HAF9VuRFNFunx2n5bUPY54ctHxqS3/Uhss2Mks8HRlB9RzIHArYf\r\nnGJ0dsxgnyzDMlAzfCK6u7azGeOjvD28Wqa3tfALcBBxiHtz51pbgwKL7BCZ\r\nBW80cuY/XvlF7tbssXyWOiXJux0wE1wBRepTz3QDt1mPq1c/Di+L62sBukH/\r\ngGKBCXfcpUKQWEpl65yhwYNmCczb28FVYXc=\r\n=8KSV\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cedffb44c.0_1679421453826_0.0027728504306816504","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/typography","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebc51180936d994adc0fef3a533460c7555ae911","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.36a4cba99.0.tgz","fileCount":22,"integrity":"sha512-qPEZrF5IdhhenIJZ4L/3n1lCAXwDl89o2E36ma+71B60C3p1yZgueSy+ePL/KPt0VYChKWPQaYAB5u5mICkWJQ==","signatures":[{"sig":"MEUCIQDfvSf0SfHnT3i75f3oUhRUQECqsi/3Ectl3JoRj6/SrQIgH6SGRooD7VXSqoPbA02eq2XJc+B1I4J6tK6QLR1RHYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyigACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnjA/9H39kzXacSawHsyTMkPE6T3pq69txsM0I0ZPyImJ9Owp5GZYL\r\n2KlvDfPeS8IDobz5Zh/LoMxb5dlPFd/2iqldKD61/Z7OxwQsjIZGC2YDBgtx\r\n6CyWxLtewHBn8wHj1VfiV3pZBbvYtacnLzzDZ4N2Jfyf0/fySvfV4Ydwae5y\r\nMBwR2cttOTWcOWLBlX6cEW+fTtBOkrPyQw1FJ5J6EtsAkLVpE9L50nQz8wc6\r\nmxo2Jp2oV79ln3zPPjUG5W1KKZpDm8Rc5RMGvNJDGifbrqLwIIILu+9SYNSU\r\nnrGQMVeD/yDYUfVpdrgLQRvIyWqu7iBj9dzy4b1QAeI00+sr7NVqs6kJG1Qw\r\nCs7limMnI4aK1IDvLlhmYFBz7ZZnD7t0ULHmC8isTrKsltaK1h/Fkh97nOOe\r\nULNoCrUd2yUaB6qg0u2fvkglDCBSuNNZu8WwcsMghj2Ox6NxB/Sx/CcHJgM0\r\nVgoN7z50Eym9WRZOSL4eIJadRkUjmsqKL8LJljYvI5cpl5NxaUSsJ1FGqmBi\r\n+KJJcOZrjmkPy63+ZIqSt+tIKkkS55tAdqZE9PIpeX9AKKJ/FoPd3g81+g9d\r\nHMwgxRsTS66vHGEIt+unENXTOvtgStfQVF8RzPSRGWvuVWg2s1G4OrbjdLaV\r\n7eBi7VJeBHEzcalxI9WHneuh79QyESpMeEo=\r\n=OcJI\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.36a4cba99.0_1680025760053_0.11953520692643482","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/typography","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0a527801d21786e5b7fe687a16d9122586581e3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ed7e82ded.0.tgz","fileCount":22,"integrity":"sha512-4qNpcB6LXa5fHk+Yd//kuO7kFR4LK0c53F83QJCgtR82lnbGNnb8pc6AzqpZ5srd2CgG+WETsCqrLaBklmjT9g==","signatures":[{"sig":"MEYCIQDZkYjpW+7iudT417ATQ5R9jxZ1y1lMzDbrOYNGEDgbzQIhAOJtV1SZNN7dUxuZEVOWRlkvu8SQrKcfILvmdhsLqogO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI08wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn1xAAnzL+G/hk3PowXAvvuOIEBSDfh8FuEzVwg8wXJ1RvaCcUgV7Q\r\naCtzIqbKSoMt1qqgYG0DloOXHuczpn2XDbJGKsQ26Lyb2Zn+ZUyF0j31/H70\r\na//enafPkqQbF1zSWxYmbSXt045xn1iUBzjdnl6DD6G9uR8hESRWDVR1hoBy\r\n7Ra8M7qwlvu+zngLgjoTm1EJWP7TfJqAExXXcQwb1EPRINlpRgDsbUmBUaJ4\r\n2ds1PcYKFp5f/d/t8HB6m7Dd6x5+I5AE9T0NTFB1GqP+jMXtGa7iwUqNoW/J\r\ne6vhkmtnEc/dLRtv+T0qbp4hlr2zavNgDQK3h/x9LXsyWUwduVr7l5o1IvvZ\r\nPKBPmBYXqZ/g5ws8AoCwrOXf1QTG51s7X/O9u/6UVRyTyQy3ey6g/NR8Fxws\r\nPdNHBCFjmk+QLkSugWCRskTPIJcvYMzAtTGJbC9uM9SrJHH86Y8vuF1+SdqU\r\nFlqJ3cUxHiCLsj3tiF+8KkiiUjuKFtG9+JL741ogcs9jf310a52P236I3GYX\r\nV0dh+icWVUNRBQDuFBCLP7HQyba+6Cae2n+2llB0fB/iNkehcKRYaKUK24yy\r\nDdJW/jaJg/IGpegb3vFbEiuAf/HGXscO5Al1/O1qVwe444bt6Sd25GpzNO1v\r\nZ5shHLCbtiHL6wOPnphcDOGPll+2/rdKS/Y=\r\n=gjs2\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ed7e82ded.0_1680035632366_0.6130884265827852","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/typography","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2e7dec5557d563c63d7c71e4b38ae2bfb717b38","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.55093ee1e.0.tgz","fileCount":22,"integrity":"sha512-7L0Pt8ThRFDVA4JpgXTNoh8UIl9FWwSlgBjQ53+tYPCT1rec7gzWqBUWyJf7sNqOWPbFu0v+SVR8XWpC9KvFvQ==","signatures":[{"sig":"MEQCIAOWs5qRzNhnQqN7tAJAhBIQgxm/sI/RQ08geOWp5lcWAiAg0KcA7ljdvgSaptM1JFNs7wFIU6WTa5M9nBMAvr+NvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIe4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrShA/+IDCO3U60NYnRvzHsG967tyYeZ6peIqkWOKVkLCRp8nKQksg4\r\n30v0c6cRlEK3OHPEzs8mS+eA5SRBchRLgzQHNXAcdvnM3uEkm+iqq6fK/19N\r\nL1LX/lbpadjf1h5ZtwS81mOyOQMCmQ/DiA49Fl79N7MUU8u4ks/J+/B77PQh\r\nprP0lb1y9rhD9SXqWssSud1njABLszuMZut9VGq0axcgj+T+4PXxPJOWvROT\r\nlxnsL8t+rUtW1pEOpKrLNpVB17VidUsoDbGS2voaXmPZyQgTeikiEqQD00nM\r\n9CIFlxVNxekU/t+ycldhYZLyoWfoKht7nzegNnf23m70QyUEITNrbX2FX9dG\r\nsVIhgYkOJazNIkIO36FZ7ln/O10/JPFd8wUYkrunA7AxQOaTqw0kGjL9CTQ1\r\n+/kpSsA5iswl7BdDPQ1SAuGceEfLKWT7TOypFVxHGqExFIyDYdWzMJ5LEXcr\r\npHaHNUk9I7hVMqgnHuUekG+9O0GoYT/h9sixx1dznIVvgojMP/wgsGrvKtEt\r\nS7e5ABwMuy0EvNtP5HNSXH0Ulfb1guZI6Ux2Z1naw+KqqWRs+bOBMWVoYXAr\r\no6sJ7VkI8Jx0f/VZ1gfmy2PIozCVCwiDOZlBIh1R9GeopLTaOg1hU5KzXd6x\r\nDdA801fAuCUDsHDiGQ5LUp90BXdFUXYqF98=\r\n=2a5T\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.55093ee1e.0_1680115640707_0.8746335943862444","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/typography","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0302b8ac4840a02bbb791e0741bc2596c02114c6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0c53abc81.0.tgz","fileCount":22,"integrity":"sha512-yIsLcWrMTQk4dm77bH5H+3GZ56QjD02poKhVDTL2wnZ318AK09r0TWWC8SEJYyG/I/n19iDueab9gCCclsHeCg==","signatures":[{"sig":"MEYCIQDlM3hNtUSKZy+l7N6sy30TJ/eodKql7iQFoh3jCtNWXAIhAKqMp1Uef2TKJ+//UYlL7jj0nKO4INNW68lXt6w880Gk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3SLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTfQ//coCOHztqxw9wGwis47tNhHUqjBj125dIFqUaaRjkP8KRwm4b\r\nrzSAQZoqFkVD8v8lcEPHJywxUeZJPE/hxMVAKv8SRxxjBSqur8cWhJMWXYp4\r\n6em8z+Yx7c5wsbZjUA4+/IE2k2BfbsFzQkxWjI/dPwyBOzjhSSnSdTdSnwKs\r\nzuXjiQZvsNOWRG8Qiz3arRHSOETbw5OM8ayEcWRuf9T8M7l83Rud5Uhb+xFq\r\nx34D5bzNtqw3+A/6XmCLlmRMgdRPKzqDjp50mftCdu+N+0mkhfcopcGNE+uw\r\n1/UbVcS+9BZWR8U/qFQjaQKfidKjD7w/k1amKR+MHgWVWyu6u1Ue4iG8lnLi\r\nTEyPjR24upGwrgCW+5v0Vs1ziX/wnDPr5i0ZPzDQIAZI3ESx4fjwsvM8MjyD\r\nygHXbeMwTXRO4FhGlKnyEkocbcyDmG8qP4o3tHVwjEXqBy1fcwU4SiIDAfD9\r\nIeWlRkm5P9SEkDQU6Al3Xx8ssJ+NDMcnZk0s560ZvTQgNbpLIT7gbUiVuiyy\r\nQO2jXAWUQBZHPId4fiK+WToKJ9JBetGoA9hVX3G8RmYNdBbRwnal6O1QEcJi\r\n41/cgyc0+4sAtDjm7rhkz11PCNBPDR87wnjKFtuvBRdT0wW3glo8PlxDgnfG\r\npoMJn48oHHihc60uQ8pjLpMXpi18ov3EggE=\r\n=aLnj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0c53abc81.0_1680831627699_0.3523045968749643","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/typography","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.51311e69e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b59c7351ec945406a7060278fcc7b46b9709de","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.51311e69e.0.tgz","fileCount":22,"integrity":"sha512-DP41XRRbF6XTYWasS7Kt2A+aW3p0pLq20SFsEFpX5VupYuRgeENHsnY2sgWRBpiLgTMEKphQyCb6TQQc6pJhZA==","signatures":[{"sig":"MEUCIEU6tD0nXwkv44o8QydLkVyqxqJvMnJvjdJClTTs9gEvAiEA/fWwpBIvHF6108S+ejNGBb7ywWIvDMKQbdRYOCxJqUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFvOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOgQ/9GVJABGMbrsLAIZsG6fHCmZ9n4HJWVJ+TL/1T26Z9/V4qHAnx\r\nKkwT5NGDMKBr870qFbFT+6UI16u1RmPXhEOVXyHj7ZUPFGzz7E6g+TRv8w0H\r\nhWNsMcohb5+Fr7UD+9MTTvsLeUNxL663+h8mzAe/0Slqo+U5C2EgTxmsQB6M\r\nEvWLnf8C25VS02wY5Bfg5vIP3ZBDee3mify//r75VZTdu3jHB98Ch4rJLIU3\r\nvXks6ov8VMhlNRn3nnC7Abo9MfNBd1fFyW3n9QVJnCGPCIB8pagd3EHA16Gd\r\n+9Vi9nHDpj3upm1PUQW0y0TVM2G0U+aNBbiL6t+6CLV1rYXIZHWqmsN9yl94\r\nRu0Fd0I/gbFKeC0MgUUZRmLHnc1k8lUcc1w9pwGyiMnOKmHkEdA/4csS7tiv\r\nh2l4R/VmUVZ9i1yhqKmfNpjkvZ+u34SKe4/Odmnl1mls8i29oRmdvzr+z2vx\r\n07lj3G7KTA6qSietdLjOdaGVhYYFAjSAd/mH/hvDWDfhD7O2tMo+PFh6YAhG\r\nWllzrO7tDf1XbEzIBz2bt/JJszrHhY7MP1bR6Qp/Uad6r8se9yWHJvzzxTIV\r\nsx6mwSLoocG66jp6jE5nNd1YuCyRlmjRkyTnHjD6/2odw4xZXBw8Yxzx3Jk2\r\npA8uIYzD4nEt/z0u/db9BZzB5SKoaM7+FzM=\r\n=gP9/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.51311e69e.0_1680890830248_0.8683212006828667","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/typography","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5158f25eec70472d52f52973a71020f1bfe26467","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.113b1a38e.0.tgz","fileCount":22,"integrity":"sha512-amBkKddqrdflO5OqKWE8xgrdA2OBddgejsnA3W7diSHFkOeuD+REDJgo5s1tL2ua3OL3LMBttyOPsDvq1Oe3/Q==","signatures":[{"sig":"MEUCIANtw35Rs7RWgSoepaoQ3CpWJsAvP6XW7YV02oOaa57vAiEApFGo0L7FxP0q+CFMWHkFldThjqLZNT2A2iph8bJihGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIVBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJlw/5ALaI/SsJ+YFkrCj+kDpAj9nPd0xKqrXh2uD5ChGbR4mgLS4n\r\nmiVQQkHlQjErBg+D95zz7BpTornLSE6Y7h13/KPJXL+xOw9/8J6US8Kr7B8p\r\nIor2nfDPSz9ROwgjOFOeXYb/9KruuH2kSDRFwo5yoUp1JH+F2a7PflP9uQIG\r\nUMzhh/TA2MmB7ciJlvnF6vynCtBLZhyCW3+Kb/TiK+Y5NEBqQZZRLDqkUCPO\r\nLxrTmERHqfnUoyDtiKFglj83VRk5+vPA+QbgFHESsmDX3UMvE3FOhk/kr3NJ\r\ndloThfGS6o8YIa2RThciKaS+3vQ251X8N3yxenpQRDrTzV/9uyT1UwNP9YUc\r\n708y4cD6QvP49vtoMpS4vzUDyH5tK5u2pJHEeju2+CNIYC3FOem9PmH/rX0K\r\n/I14cUAFCh40iSuMN/TqVCvhzzaR4uKQaNQYBkNjSyWMtkgxayaawMtmpMpE\r\nuLJ5RRIKgniW2MYVuEVRjfBDeusw6KjSu9dBeYSK4nTWpBAPWFL1xTenZhO7\r\nQWdPGt5wn6Xnoc9qXT7fzVOoQPVoNvskQQ7mCW2I9vSnQPBh9J3siLYBTZS3\r\nbBKZ/HAZrw4lNrGPMoZjDxaUiaYPebUbqe1pJJeSjPSA+jWnU4ns0btljVAE\r\nfsPVZJX6ef44aN8pRHefuUqbz/iarVhY7ls=\r\n=OLNR\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.113b1a38e.0_1681163585222_0.6150326158958666","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/typography","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ea2191426.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e52daee80b6a416346d6e8fa00c0a67f460a445","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ea2191426.0.tgz","fileCount":22,"integrity":"sha512-DD6bD1HluAp+pHy2LmVts66oeiWUPibbB6pSqLVCr4rtTaXOCs0pGZxj9mQoqJeO1bVSDoXD6gq5yMduDO/TqA==","signatures":[{"sig":"MEYCIQC+Nb239UfhxBWoGgHVkBD68LAySlZQ1a4hsZb5cvlhmAIhANrZS8l554VylW/kM28m+3IsJgrLKDmihSpF5rYvLjgt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdcvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1+A//TmV+g7kBmvD0iJMP3DHM1zrpHEp8PHteOTH4FaSl3UgP0p5U\r\nS5zT5hWrFUM2syDIJR46yoBHafC62hvGVNdGwUkUZExEB1yHxIfgfrfrBdL/\r\nycjzaO0kFjU9Da4rQ0WuPJeF+dOqf95lxdGVR8doqm4569ctd3rveffM5PSx\r\nThk2JFRVtOCQwt97PvNIDrL1FXFWArlRphnclSB6TRzVDSyaWJeZQUnGjF4o\r\n3bIp6IHPii+ostYvgNVNoBVUfElz/6yiaOZqyBU9vDIOzRMRuTyvrXqua5c4\r\npdksE4C5aYs/V6Qtd/iCSqNvRudwplb37jcXODOlWwcNPFILWSTddmEroCmR\r\n7+mbHAhKKG/aVSZQMQfixL6eL5ZLIVqY5cJDhHQiLs31KsoMU8DS8TMIDkAP\r\n0+eoOuyoYdq6DCiRtldQmc6W7e2rv77fG81J4x1kHeeXbRnYYPDCuNExz0fe\r\nhC2XgwHELs0TFZOCmV/wdWdj+HXJuPdjiUDJgAnMK+HmvHGRxuhRVN98++ln\r\n8RdB4+9OikYCgIhOxlP7LVxI2/tfa0YfWrLp6AhzaXaTzndmevjOzO3iCaA6\r\nCh5VSW5Vzqxx0d1wnn4Vd6+2WfcA1An7sF8c9XsfDIh0CgRFssQ+hXy2j4ew\r\nqQCSBzGrux7mEkPFWBO0qqWipgv21MOZXYU=\r\n=guw3\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ea2191426.0_1681250095179_0.8328821822344712","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/typography","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b0891c0c42ade207ffcfe15b06b5b5bab7d89b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5a5c38538.0.tgz","fileCount":22,"integrity":"sha512-NydNRrelPER7oYOn9xyuQzOQvlz+qF/dXzo0EXUtbiBU/0MMCuUCFPrneApoxwbbn32V9JobnKjCWs6MIaANcw==","signatures":[{"sig":"MEYCIQC2N/op50QF4MlpD5zxpa0mqi6AFvMCl215e1rL5yXjcgIhAMxVUudpMTZHphSiNTMExS5QL8hJYpYJEGFJ9TBs8WGM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd9SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS1hAAgbUMumoL2pf1Vz9f6/c2+UKboFm3Fy2xXUGsYkTEPTei1p2L\r\nkdGqbpInS4v5iSQXM4cL5EAJO7QlA7IbbtIcBlE4tzDmG7jr0NzttUd9LdGP\r\nlhvUdScO1POuwahmU/ICUhhNPlswXXmkcKwY8xRI5h0Xv1CEBsgj9MilNDno\r\nsZE9EUf2AoS8HkOUSWDNSjsT2v9fl705wyJ1ItYwjj6o425JebTwmZ2iyQkf\r\nrsamCz5KDwdtgEMthZRIaRMi+eqvx/A7ZxINKd2J3AY/OSYvTjzCEQzYcdKV\r\nQdsekzTEwdV6BR3VxrmxK2hiq5DPkbLVXRWiHUXxgLtvNtXw/Uxbnd/2cPNl\r\nolDDJbACCj9ot0dO7k7sPQAghV9kFl6sgyLurNVHJ3QmvTqV8Gtd5jrg1oce\r\nol/WmZBshc3iwI5FQ6z2kbPNnZKfvVAT5YcpRqham7Pxopc+vW6ctzXH5/NF\r\nsFhkhAHxBGiDfnpuCrG6r1ICJOkQkU7z8AN5xXnjMLSkv50npnLFnUXAot9T\r\nlIK5RoB8cecsajSInt7mmyVSTrZY3nyGxphyfOVNGviHFXWlOEgZ17PHuZ01\r\nUXe6WYpfJpb1riLJyUJTs3cCt1Rda4HJ9nNlkkFIhhCEVEarm4FhfwK4pUB8\r\nqXCu7JAl3QPOpCFfAxVi8a2NeObBPVcNHvQ=\r\n=1qjr\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5a5c38538.0_1681252178715_0.9853451575938064","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/typography","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c67f53fd7cd8549d4a7a7a9f1d9948e80ef2d97f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":22,"integrity":"sha512-GiBQQGp157dBMZ5EKkYMNhhutK9F6WJx2AtdagR3TE40eDojJqhMvd5GWkQGzXdNhBiXTL62xeuhNxUBVNpOBA==","signatures":[{"sig":"MEYCIQDF5M6TDle+j8Ua/kTol52OeMK9SBZVlro9nYq1QufqBgIhANeeme31hCyrgAJzzUhY5ihFdkjapqiivjX8NhMi41hF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNedCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlgQ//cnhLVWnJKYqHItu2qeLON3/0qR6tjT1JfC73SDr+UExcf19V\r\ngGxyQXdZSIq7IzG5gUUR0y6IKUWuThUE5D+nopp5yBKY+gUHQC5V9Pig3rtd\r\nFoqGUDF1te0sS89ESO4PmjyWtiBXXIn4bWDuAgg2N3Ki6IHTEGadLnsV/oPv\r\ntUnKQlFpM5gLX8Tjuiqc0pI7t+w7lFQZNc0CRaQZXZ6mvDFFHlJZqJqilblJ\r\nEhrw09ykB/kJMVlJIuWI8SlPMMy4Qw82OWhtfwJXcRkI/qENQGZSzum5rCQb\r\nklxrqgSbN2qqY/wKfkA2XSH/W3huICzpifwT0UdLpGKS/xvNo/BRU805AoQH\r\nwBzUjzeSKRCP2GLWoq42+8la4oOXVkrq9KVBRzTYvQEDMja92P4WNx/6UpMg\r\nn9J1KIuEWGb+386G5ONCB/UYvrAi4AfFmWU+ZVtQXzx64CGoCNTzo83ERzLg\r\n7ZY0/drQipknohCdmG2Y0lkMRSbhJAsn3LqEfqq2XgFPszSqi2j/0bqeb8GL\r\nNlLvfHzsxT45TZKofIiEzDS0mBcQseT6enKZ8ygLTyWaJFxKlWgZQ+xdtyCl\r\nbcpr9PCJDosb4UPzRKOYhGfQNH9xj3zP28KCy+MCOEf5QQUrD5YovnjYRB0Z\r\nclCLp5moFaO9hh5fAEkbTNE+aqdez9002CU=\r\n=amI9\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e4b5ea7eb.0_1681254210384_0.6992678031121338","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/typography","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"055dd87943ecffa6b0d2ab1a05eadcb284ccd6be","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a094dd9c1.0.tgz","fileCount":22,"integrity":"sha512-+6kiuqupcIcE9Akr1J/eHSMlxF23YdVWKJkFQO/GycEZsRcb8mxEoK+G3hQDUyIAgiobK90g8O5x4YH+JxUEbg==","signatures":[{"sig":"MEUCIQDBGiYAnMpOnSMlxtImQZ7sG49SLRlTjcb3G2SBvfyMsgIgfizJ7ta6hqO79UFsaTPktpzvZj7rY2VdMa6aaeXKFHQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdarACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6sA//TdxWsQsihr+KUbOGdJ7+9RZxB+6mFSxdeLmc1phiFEa7nvBF\r\nezuwhFtrIW8NuBnB7XtYRE67uBzjmCMFrweI15znTvOyYq3ttQgh2HXAzjC+\r\nHTd9J5WaGaly+nwq4QO5pkvIrn/h62IfbOzAagOUqR4/wc0MktefzqflikSC\r\nbhJjTeVRdfdYIaSegl3v+yRSOS9zpcQ5fH2b/yWwZP2Tw7aSOSFv94N206YL\r\nYyFpVYFLProhprMQ48QliAq5mlu3FAbv1sdglApElBo7Vgu7feq2JLrGVilD\r\n45kCbV8JrH8bf5VfDMwS3FEEs6ceco/1fbfAxDF/rVUrCDYsE6qdaqCfeteB\r\nQT7udnwJJfz8fkWk7oYUvR7xNhL/S3mMEMXLFNffppZ+BH8IQjB1NqUUgq40\r\nMJ41FSWPSIgAytTcCTZzWeIMXEPTavsVQO5M8aXilgmbX3o8t8lpnXcVudPg\r\nKoi4OcOgCrAi9Gs+Uzhj0sT8ZX+rbeRDOKy7w9gyFV+/zMSW9eK6OeytFchz\r\nPkZHyLWsYsPKUWb4inv6JVZxSmk/DDofKhwq9YD4eNP8iCZzbgxy2ycab25b\r\nQ7T6SLWOynQPW2KOC8h0ChEwKUTTIbtIg9lh8SEAF8XRWTdTiPAEhNP85fG+\r\nlt874MyaZRxs+qAPPR4UUs/kHI8V3mzBw30=\r\n=p2x/\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a094dd9c1.0_1681512107350_0.6079271948953118","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/typography","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f771b091c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da23a01c2253bba70d2d2b4a06c0e7fc6877ef34","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f771b091c.0.tgz","fileCount":22,"integrity":"sha512-GRxrWUOx5nfGbFeVo4dBI2tGqnQ2WWy1TQzTRNLvpYi9jepC09dpyCfbDnY6tZi4ij/cEWOFfEgDVJ99rRjSWg==","signatures":[{"sig":"MEQCICLLdWxXQfnTt5KVHb0FORBJ//RRuYo9xmLzAtNu2Ts6AiB0Jdism60zEjyvryUfRSgI2HwHvMGG7Z16La9sokGBgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWetACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUORAAjMFOd9cMeXzKv4wEXFoyQjoVGCpZiwuEWI9Knw1HxQYJKuXN\r\ntHL3sjJx8fBg7etixXX6+VyWhav/PkHGjCAsihc2INz6Uq3DXGjrbL/P8kR/\r\nQFmn6x4d8BdwkZSDbUrLc5Wk5AF1P9tFRQ6qLbo++NuvokBOkmWoHjY7ogeB\r\n9RWLfhtWCTHRwh8UNA0jA0dnqFzgvwUcrga1jZo5HiKzcGw96C5RjqSuS8oz\r\noRb/LsmkxnNPPjTKjHhh3AmsafKkwSeIk+SWwHJ8Sd1vp4wgL8HtfTJYD5vQ\r\nQdfOeXIHi1Y9AV+i1SUdnUrkymTCgUJiu9D1J74utQlXS4g6Z1bcHlmmaovb\r\neMbrIF8GSpqwv6l+tQUQYVxwp7n0cji51i/4OE02VySLmwl45CEIx4OdMQfN\r\n+myYyOSuxkR3T8WQcxzIhDYdNcAl1oVsUWLQxDv5fGhU80ozRggZj+8jcS7d\r\n7srWRhHFA8xMt3ZoGjc/m6siFCheLln/mdInxn+Rs8iklxjjRIWJIHkFAp4D\r\nRGVcN/ABb+WFScKHVkr81YEdFdgQifaKJ93yQlQiUaIv6RvPnlC7cabLWu77\r\nyljruBe33nyDwa1Sb5gf+wFJsq9O0h2LhqrUaFxWtl+yV0nFJaDpWZzxVwaU\r\n+TKPEcn0wlEN/gU7hosMFJ0MFuNXdRTuCxs=\r\n=nanz\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f771b091c.0_1681745836969_0.44026317504713597","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/typography","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ee859efde2746df945e2238d79d7bdfa08a768","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.79b1b612b.0.tgz","fileCount":22,"integrity":"sha512-imfzQjmneQLxtrKBT6DOxYbxH9kKCSlbjG64lVQ3LwbMXimMjP/euY7bUJumjynTM8xtH0itErINcGpZB8wKYA==","signatures":[{"sig":"MEUCIQC4vVbNWv/efz63Ydoe4e9OWOjq/Yop5X/y3QOzhhhAJwIgMyXDc/8+MRP6+HgqCeMnQiw58BGWpHUHgFWspTjAuFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHunACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmDw/9Eb+ZdtLswPpCEKNKDG1YVIfLJHRbkjujdLez0nMsEpWU3dLH\r\nKGRIOGPVXVDs4DTt7eV2lx3HZTTS/h9E+ZqpT3ZU+OJjV3sVdy4HXC5bwcl+\r\n+aVpxJU2Bvtx2M3SLXqt9nTNyNdFj41x/iPz1VfmtV5SHA/5husttl8YtTJ4\r\n6/tH9YcCNSU8IMMf6Unl/PiiGW2Fwi7FInotJsl5O8RnLd+d+p96VqPlVWh9\r\n3e950YP401sSJXb2f64A+xsywbdWMmac8Zf1umXPAL0OZ7RGqDLGQlfCUCUR\r\no91+dBU9AMH94wgM0YVz/emIGTSF6gWBFux/edYEBmOJ065q99q1Z6wxXC5s\r\nlmt1BjR5TiapFpzlmRzRYZwT9XRolEIz4+1AWX26LIZIsTm0AQJT82gO5Abs\r\n+hZkxN1SEFr4v8pewDn5/m3Cxt/c/fuS86GheVDsw1eeu3RSwfgpbedu7wFh\r\neOhg16Qojzkq+ScPF3kn2/pxhA6FwofyVyTabHuZmPc+0+sA8MRylXgVsq3u\r\nWDB221M0ifBPkMxA3eiRfTSWrlXHyZcuC/hnlswvKvKWmrOfM68h+xO9QC+a\r\n8Nz4z/JLu/5o1WFYZk1LtVmU36ggwp7HCMNSQsskQwgDXpUI/HFswUC5JBVG\r\n12a54davDsz2AdovTcxgx43DEBaZGC1QM5Y=\r\n=BmbT\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.79b1b612b.0_1681947559501_0.969847726806786","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/typography","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1df1d5ad065bc07f2634b8bd197e2503057d7126","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6f50071e5.0.tgz","fileCount":22,"integrity":"sha512-kO7C5TyTnjrJDizbfvDZGJSLQ6EnL9U1KZz2R/m6S5lnKM22cZluckWY6lO3vqowyw0M7Zaf60x4bWrxppg+KA==","signatures":[{"sig":"MEQCIHvnc+9QBD46/yTZFfubAlEiYn090Bb8JDS70xbfTINUAiAVov+NPh1kf+J1z4u55v99W42JSn16d8A7sNmQa87tpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX2qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjtQ//ZABhmFMmYLu0x0jkewNu2Whf6mPZT3fhpDi7D+FDQ2bU0J6r\r\nOyybO4elIfJPcH6kL3vSo5bVjy9g7wKgQqxU4iBtUPDKENqwi9Cudc9KrOtD\r\nKEanyCYOwBKYOtBUTws31XEzxKG+hHEh3UIBNlsd/eyQ0KM5DK5Fr1caj9n7\r\not9/s8+W3Zk7WBe9x7dnxV9SWe4z3DZ953ICgIdBsr0bAvfKQ1nsZa/3/q+d\r\nTrYfz10vFdoFYyUIysyIDcz1lpiGkUM52QhGWxAeT6UMTz8CACGLY6ltM9G7\r\nE/99k+82qVgZg/OygTzl34Dr7tEHPWf/uY6tNGljQE3QnfXB0PTDW21w3Y0g\r\nPJhdN8MnxN0LD4xI1LN6bl89uuRCDVvLBUQI/NIbs/Ho67iDoGOZepJN/i1T\r\nQ3PBWBF2d3ug6TUW94UHWO14eOGaFDGpaDFekWA9mTCpEWXdioANKHJSf+R0\r\n5jopUdq4d/T/pGJAoWRnPkXDQxFydpLjthnXdiJZI+T2544n116yar1nRATR\r\ny1aL0FfgYuWenqkVyilsSysMDHpKoZmN8bFXBS2KD7nrZ1cdYX2W1mjjer1E\r\n7MV0VahlX15AYs6CCUNZ1ccj15VGRx4PIpDffKF+GSrqPMAMO6EBAEw/6Utb\r\n9NOQqT+HePtVnvjIjYHQ/GF6hdvIp+452+s=\r\n=paY+\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6f50071e5.0_1682013610048_0.12403217414554057","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/typography","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ef754381c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3199e86ce231803a09b930c9a5d13015304011e1","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ef754381c.0.tgz","fileCount":21,"integrity":"sha512-U0LJUeZVkVO9NVsOoA2bjXj9O2OgK1TvyhRrcv1pE/9cW7TUrwyuv6r5K5LDEsq/zhduc4WYNgP/jNKMGOeGMw==","signatures":[{"sig":"MEYCIQCkRnChr8+WDm0/YEemfd8kSSemMOKvoXCy1c3o3Lu+3wIhAMWp61L/gNoYQNhNKMZNMnNSMGPDnrY+rsXCiWh880E4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuuFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX4Q//STW+iQizdrRXqDX3kzyULbDdawV9NHoT94fBne3aJElBGxSt\r\nOi2Fv7EZH1AEkwa8E5oUXIppD1cJyANhjZyccWAQF5IuFqLmmWtheHGHsSM/\r\nZxLm7JooxZjipF/CKBdsbeDcewdKsFBg4c+9XTFLwCUgTlMVybhaSECKNdbd\r\nhAKu1oJuXGMgSSZKAXwaOJ0XL5CwEh2mTUQ4IDu61oP0FMFNZo+JScM+bcUu\r\nwhBQNNC/QHHRmuC8xMyffjeZZfNOrUfPbqTHQgo46l9FeFt4QW44l14V/5Uw\r\ny5oruNlMLX4lM4BaO0HyRWz7ig33bUDweoAnB6puXCGYvJ9Z4zgc3ukIL+FN\r\nhiwEdaJZ6i3XVlLLxatWC94D5UJrpjPJjoH34uoxcBVufN/X/zjXTuabzjhj\r\nhKwSveLiXDufEh0QTZcwlcc4tVe4d8svduhBs9sAhIE+EEVneUawHdLj3l96\r\nIE+7Rsd4ahe6lPgHQZohaUZ3rNrVX0Vg2zRSg0p5Bg5MguXVmjJ0S+kxb4O/\r\nnkOuI3rGEo9x05v2fAxt7V/qtI+ZGDU1UxYtxpJNokrgi2inSl51LCuOJPTk\r\n9fxLGLbskU8butdO2BL4XZt49hlQuy8XFrnaj5WShyxzNo8Py0gj/IG86KEQ\r\nAmRhcWLVIiKZsZtO+RsFGZx2GAzhmP8O4xo=\r\n=on6h\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ef754381c.0_1682369413563_0.4259337505337799","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/typography","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dacea9a8ef9dbb339499d0959cce2683cb1c8aff","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.69ebf61ea.0.tgz","fileCount":21,"integrity":"sha512-tKj8Y5OBEG739eQiZOQjCFvHTYJbMfuzolaI84B5ceEk1LARfWJYmLUQqDfMucgCYn4rtdN5Cbo6G40BwcIKsg==","signatures":[{"sig":"MEUCICCIpMfEFirO3i5KG/Wx6YUGWK2myqD1UcUozz+Z4DbIAiEAlTLzKJ+RgkOS8S1aX6LRuJTlcaY1LUVVttNhPfCJRUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmok0Q/9FOdFlwLPqviqRefeSIvcoT9bh1fvgZnK/6au2kDoP8uiJbIJ\r\n30Uh6OLIPDGmyqzO2xSc9w/fO8jaZ/IH8Soj8kg9WyNEv4KYCvtOpAK6wQXb\r\nNhMtWeWjfDZdUOa/R8FSAG+tOc/C1zttTz9O3T0zeQ8oYXA4tf73/Ml9x0Jt\r\nN1OJTfOTpxDCyJdo97vRIdiXfjzmAjft74jXVP9gvTjs824AElWv7BI5bRli\r\n7W6JCB90wXKkv/gvXX6y+fYNfUtsjBtG0CJctth+/r/rYE1jvXbGaqaphmoe\r\nypKNw4HOn3fiGO80a/T0k0POybae21ZbDnmlLjkg/OnC6xIdhPGdffuX2ElF\r\nHiBySD2TFmM/cMFGbfi+2k9pSXasNmrS/uxXkBhDLMdeMJOsERN13YXgr0nj\r\neiS2zu/WtsJh8RNLYoMPDdSZaeCQSu73FkPoFV7mdAfeQ4HVBtYqpfiZHmC8\r\nSxUbJK9RKMQTxV/TmTviubK9x8oJM/of2sZGYb40liznQ0te7pT+zE+MIpiH\r\nqqdg5CqtEvTfzMGrIFzbofQtmPvuztOUZP0p4X4i5/IBKUgE0mx3+5Vj4X+A\r\n4dXoBEoBkP8AfqEz+lK/uCLovOUSPCzR+qFUY36ANcjAoUIV45zaw8dwFNQm\r\n6OSAbQ/wI/oYACh7K/TCo1X9JWZx0VAAnLU=\r\n=tbfg\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.69ebf61ea.0_1682616025147_0.7783312305239842","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/typography","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b90be86de.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb3492d20b9c73401d49587f0becba29e8ec592b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b90be86de.0.tgz","fileCount":21,"integrity":"sha512-8ythnNAGK63MIFsAT13hdPHcC7QmRnQWsJv1ySd7eep5SYt8FGEpSL7AcCD/GPIhvFZV53jZPwbcOYe1J6RUgA==","signatures":[{"sig":"MEUCIGGlmOLJiTshBz/nivCwiO1FgQ8jvi4HXwALibf2imDDAiEA4mR+MFvsslvCuBpPbZv+ZgiXgcpQqe4UFzskMYoCrws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGLmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpetQ//UESPzyzZhO1RX7WtIHHlQtKDb1/p5IE5yE9gCbBxQDqmChPi\r\n5sOUFxJMdv4CGfYD1JES+zIET5GvmBr5ggmMymZassGAI4GAKFiE3Q6LNGPd\r\nbxwZR51sRxR5nHF02gAPJ8RbyztqMcX6rgRMF+Qaw6i+gGttuwHXCCYRk7Gg\r\nyiz053WwDwvZIjkRZhh86FWJsokUPTZz3/+NoQ4VmHSnHbQj3SpMxXZ9iOt8\r\nYWxsdqi1M+PfePj716+BZR+KwC1RZX/kjNhQYwwZQRxXp8JKPdvGYW0YS9kH\r\nTbAUygPkrQUqMXY5hhvZWLjWssalr0QzOQ+8GHWjchh3hOoRpb9esHZoqnbV\r\n6BpdAodhzkquzmdsOBOFRvDgaj2F37XX6TqbdUpUqgu9Oh5ek47xC9OJt6uM\r\nLXXsEtRXujPAh1X0uwUDkph/8pm7enDvikoYvIt8hWdvkduvUf2cFIk39Uoi\r\nYbwd/iBO1Ggy5V/HtBxXWYKPuUGoUuLjVbrNXoL2oKF2RzMJv8kv3vIKkv3H\r\ngB39h+tofgpRATI3Ygw1cdr5sjYF58hpVeJLq5eqDYeW1SKLB5VGPe9YFbf/\r\nJwXmekwR1VDSxpJVHwfAw/SkmOPeL+kUwegK5Y8f9YU+e6REAdO7rfe9x4nY\r\nD7E0mrj78cbB6zsF2w8iP19ReghNzvmjT7I=\r\n=czBY\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b90be86de.0_1682727653813_0.765325776779509","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/typography","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5d06fce897f87882cc6857fe254646448603c70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.51f9c0c28.0.tgz","fileCount":21,"integrity":"sha512-54B9LQe1ueFwcjrh58C8FII/O9bflTWNMv3eZSaLwAFz4csNPXHkoLryFmMGbO99p04SsQ/xCjqLJedJCrpN3A==","signatures":[{"sig":"MEUCIQDDdS2+tFr5KbMg/dEOIqtVPAiEIFDlta4zyDPfdX8nQAIgB1nGIvaj3MaVNJYxQWlaCsHcBVk83NB0jt8e9af1bCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGUxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocEg//VZvCN1uyKf2CAmu5ayX97cwr0qHoODet+rcp46Ih0HDT4UKY\r\neZqxxakT4j0tlOwRKYEUoqFpEBgqp5e0UwkdoKWqgwpxerPE8YPBny/rxL7M\r\n3msSH607ntXKFHVBxeAw0sUy4o29nyfFr5OayS/4UAkJBb58AmiAb89RKGcg\r\nNS/QhLW/uRRuT+Lftw9IHwvfX0pHNgnR6vvCKCB5CCDxKSKksgZYYkA0BYxu\r\n0OBF0GcLwJfOAnsZz13kzWyW/9HHrAq1uWI8F6WQx1Tx9XSYvRDYdYKjtx4i\r\nzRlH3Z52pR7SFXDZs95Sf48nLAaRWWwiuY9rExz5Hz/aNYkFtFCwL1JbEpat\r\nlfgrNrtydazqapN5QNxY5nN2Zw/40Bfrprq8PWi1j8rNa43t9VjVBEjCLXlP\r\nfxfcvBJRzsVgMsEG2Gq3sL+WinvccpdvuEcFJ/bZhRARMGvYjfctFeXKzRI3\r\nSUySwmcMOvzvSDfdwaXGOLvByAEsUIy6XjeQVTKfuU5qjAt1QSYq78bVgeCV\r\nTrsqxLahXNC2fqyTwvNq3oK8fRPPo5maqk6FVgxQ0Zr4GxZkCp94r3VHt09h\r\n0Cf4iZczZd9zxrsnfcYGVAztcgbFjWemOHokCgJ2XaMSGsDaQnnnZo/YGtul\r\n6ANalYFLbmBrvX9kqYkqNb9hPGUMQQXQwLI=\r\n=cm6c\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.51f9c0c28.0_1682728241312_0.24711205611481124","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/typography","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4e840d685.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1939850d707c0259340f7ac451bac0702c54a2dd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4e840d685.0.tgz","fileCount":21,"integrity":"sha512-wqCmJe0ADqtcVevYfscXpKzz/Vg8GVdjvMLgA7bR6IIpMqlbZMDon3BImqi3XNjB3sl4T1ogwHOO1ttN206p/Q==","signatures":[{"sig":"MEQCIBJXz+o5WtGpz9yWZL+a0XVBfh9vL7p7MSLxiczXYPM/AiA4RreDk1prx1PPKNE4Pbtjpuw7hpp1gcPJkGpz9Fa0Ww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4e840d685.0_1683041563209_0.21505226763802598","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/typography","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e4c450d96726821a5b23b240ebaa5235b21135c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.10b8563e4.0.tgz","fileCount":21,"integrity":"sha512-Z7w+sPXzLlQkF5OvdNmWXplxphukFrfPh9bmy7TYpzDqw4XqavmhxhDB+U7YwQ8rpVZbTKKYXOdwTDrSwLUSnA==","signatures":[{"sig":"MEYCIQDkR1Njis1uOVVTBMcUASsoxR0ZDCmPm7t6UgmEj2gj3QIhAJavWqrRNnF3coBqf2zMEuUDGc/WodPpWWKvEVA+uA/r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ+WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp73Q/8Cvl2Qg1wO8jxJMmwbHXMZEQPkla2QhBVwA79fiDBMSxe03vr\r\nn/o84R0rGESAaMwC/kQTIFFyh5UPOHYbYs5abfgNrv1jp9bOE2+4OQ9gKLxU\r\nprzdrmMkbf91LrZg7845CNNz+QShLtG8e8ivIqVKCu2P4L+ntMX/sC1Q09i3\r\nZ8GroNMSW8/4usgtWOWnzr6zTyJUH70FkM414jQfdwZj/kejzyT30JvqInh+\r\n8HP/wMliyfhv+PrSrpnrPd/0n/pRpp66QdppM/pSei3WOFBWN2yWjSv0Qti4\r\nTRiGuRqqG8r6AiISSnX7GBWp14jfl5cOGTCDqttS88bYqJHqTYmaCdpUDJTF\r\noXU8EDxO1s48b+DWST372vmAyPnCJ+eMtjluSeqKo2zOghoMg+/eDM0b3PTU\r\nUTRKGPbIS498SZzbjCdKpd+IuzazDfbTwaMJsK6PRJKsNIwEmaQ6qRaTgI/w\r\nntIMaxiNZzMESysszQYuSkuTP3QVD9l4D8Z4CGk4o+znDnKUgyZ4ZsBhRp4P\r\nSjyg1ZCylsRFF77Fs2GB4a4mRtAgs6swKy1eo3FxWYvN2KUl2XHRkStnEbPE\r\nkuCYqLmH4RtP9hdvxVRodCQZDNA+L8en2NbpPI44B8iwGFvwzXr3HIMpwL6w\r\nBrVzn2oZhRMbF5KDzXeu6vE3d4RFX0b9LDY=\r\n=NByj\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.10b8563e4.0_1683070870307_0.5763360467034353","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/typography","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87dde5d69166468a26d4888f0bd6ebeb7ae6063d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.736b7fda4.0.tgz","fileCount":21,"integrity":"sha512-wbN4L1eQy648L81pEw9iDUy4UtTaVYYAJFfRevMTvDaRFRc13T6Bg9lGr9e5GT+VoVUJqG5hhLN1ZyVvgrgVWg==","signatures":[{"sig":"MEUCIFHWboWOomj8bpsBTuOD7FSArB+qtcqD2XL9AB44Hjt8AiEA4+IKPl8A5Pas4m4TlE+lQ6DkoyGH3+SB02ICSQ1B+Sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnj2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPdQ//TWoHTsiyPYZtdz2X0E47IIv6PHqSmbT/s6SiEslQBXVBon1Q\r\nri1jTfnoxZUoFv4sRotIkNjnrhs3D6KZc3BvO1LGH0PZI5Yt0hqJ8JYuzJBH\r\n3jNXp1svWTktWh6jvlxiskQ6mTGXv5KJpv9lquTh73vTD8nrjNZC4sOreoLY\r\nyXTL9jCBeePIhviZ1PUXBaDwCsJXQsMlKjCUKEJTcTy2/x8/KukQG8rSI1bs\r\nXZanvUYQPVqp1zdFfbvdKf56oXNY2szFymj+4ObOWYu9TH/4LDJp/nH0qIZw\r\nvXgWv9cmxHdJZ5a02PP++nXH17ANBKZLZOZdfZZzwBQljr06YQwrnZVLEZRo\r\n7ncCGlI7Zqp7kCr+WNrkexBW9CPSidwcQ3PeFVGf96TVMg7RM03pXz+gX7fy\r\nWMaJleKe1bMeOykBHJrdcPtkjyZ/NHkcmDDyslEzu4pt5bLuAoVfvOvG/rum\r\nV+PHId3R43AmIvKKb/Fm2ao/sgwkWIz6zACCbDAQzFVU772AX7uHs+FZOPWB\r\n0S5xqNeEDtqGZJ6OeZtHGIV/2GLgSND/gp/4qOBFa0btgx/nPX9Rz1VmPFX9\r\nUjxiBxnTJ1UOR1inDItY1vyWjR/+MicUBWi1IElo5+eOzCQJXJ63khPTLra6\r\nufVcijgXl3UEAXihcX+sVss3TFGoo3sGmXw=\r\n=a7lO\r\n-----END PGP SIGNATURE-----\r\n"},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.736b7fda4.0_1683126518434_0.43912662973762684","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/typography","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10121276fda6856c7b2e60cb72cbcf68e462aa4c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0e533c5a1.0.tgz","fileCount":21,"integrity":"sha512-XxHqwFHKvKgzQk43mRsU0OlqRc/hu+EvlSFZkdcrNe/sD4ffk7BHozt0NYpoJ3GQ4UegLx17NDag+xoLt0Oclg==","signatures":[{"sig":"MEUCIQD6ed6HcULqxhooZxHfhE6JeHYP+sLYyxQWz4wCQ3Yv5QIgfPfEXrz5dJqmo1aRglwUfy5wkP1ZBMuhW4XhMv8A2MI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0e533c5a1.0_1683305728034_0.805884465657233","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/typography","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bd67e6cebb85016132e4f4b0a46e351976b1df5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5f01c15a2.0.tgz","fileCount":21,"integrity":"sha512-z/SaK+7lfyQKk3O9Hsaq+ae9R0YiLwju2zNwFnE0NLPCKViWC1RY8dkQBjwn1Qw/4Ds0VI7aTtRpQP5qJq6FgA==","signatures":[{"sig":"MEYCIQC29TkgdGlo5or9AsoH2xzqOrffFIglTD/GAhdjVJ29IgIhAPivbpIPm9yp1sBMxbmzgNTbpIq4F+opKz1or6ImJlgN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5f01c15a2.0_1683307534273_0.1710692123985622","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/typography","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e07423c0dd35aded26227d88381e0fb23928e09c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3b5b55e31.0.tgz","fileCount":21,"integrity":"sha512-F52n/Mirtkj7kYOxwkP3rMs8WFsMo2qFuA+dFgcyMxvsqPoNU9oZ3AqR+0Lo3VKai3BSVrdukDm+JhvkHB/Smw==","signatures":[{"sig":"MEUCIQD7bQ+mI8I0t95Jk1hdhDsJasQBFPFizJ20Po3phpurfAIgfwPRC2obRTQjrRthkIrOwgON97ZOkV9DWeLT465rht4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3b5b55e31.0_1683311891280_0.1342731217264519","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/typography","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d0788120f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0b3da51d22450b58298902a46774f62880733ea","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d0788120f.0.tgz","fileCount":21,"integrity":"sha512-K5Xv3ib5I5clhkId491NmKIob1y4hyoEM+Z/XJ6P1i42mCPW5jJhBoJzMtZJ93bxhEvyAm4U9KRASrOcOGJOwg==","signatures":[{"sig":"MEYCIQDc2adzbDU4IVOs9p70IbNQMxhVYjC+ToLkomfjXz8+jQIhAO6z4aR58HH++3yJqHvwmPRaEqPkp/b2eOJ88bR1F6Sw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d0788120f.0_1683620538313_0.05899360586146796","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/typography","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa22baca0d38a88f32fe354875020d83ae6619c9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f52358dd0.0.tgz","fileCount":21,"integrity":"sha512-SnvvrFXZMMDDlTc1sL1Gu/xfQaDY9qcVjl6I0Yv36EOvY95p16Sgid+cq1l7F5WLnu2pHvon3fVZ6taPc91eyA==","signatures":[{"sig":"MEYCIQDqsYKwPbkxYJwtv9hhvNC7nzSf4mIIt3paiYAxe58FMQIhAIBvExYHAdyeo0mMIf9pLpICzT7GUUb8EQZ+Thjm7GvT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f52358dd0.0_1683901778283_0.2122543812512856","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/typography","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea6f28d987f6a3d36d1a9785cf415134757c83c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":21,"integrity":"sha512-Ti+W365dbauqR9nZZBkS3oJcDGmv3J5LzQ8NbTAwJTBidFngLVZIjoCiHxeVTLEgGZdZLyhDsx8xam45DjIrNQ==","signatures":[{"sig":"MEQCIG5d7E2tGIFVzCUvoRkinibU/irO4ejWd3nu5h91zJuvAiBMku5UDMD6MVLbcoGzKGv4qt1ZSnFHklgx8n/yMsk+Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d3c3fbaa3.0_1683914380175_0.3699204059203669","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/typography","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9d543c61da65da7de469b5e9671796b2518edec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.576d3d2c8.0.tgz","fileCount":21,"integrity":"sha512-hScFlyRZ8Qv/jL5rihhs1SR/wt7yGIq8KLYObi45LhMHHEl3s+otGcg8JmWrD+xZufVz/pemRlNJ9wlM+yO4rQ==","signatures":[{"sig":"MEUCIDZoCiN5Pw1ZTpKJr9POrSJTplm71mIN93WvXiujgA9KAiEAgZJ74N4I0FbOTVpzXtf3gfPzfDVSrdn3KriivHbdkMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.576d3d2c8.0_1684202356758_0.27520413641581354","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/typography","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d3d2b8c9fec4173132f01f2c035de44d838bd06","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.19bb36a46.0.tgz","fileCount":21,"integrity":"sha512-Uv4TuecuwMIGncPDsH1lsPSfJdbV+KXcsxhdl5SwLoKjfejkpQUVV703Vw27IFZv3ETIQBQ7UiucyIV/wbGm+Q==","signatures":[{"sig":"MEYCIQC2pmjPD72O9iSuKR1wFWQNNQoYP5Tegkcq+pbjcj6E9wIhALV+Ju2yglo1/mVFaPCts9h7EG+iCJw0L/vV1H8K6Fzw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.19bb36a46.0_1684266798342_0.9040177564792757","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/typography","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0d7b9f4abf0017b2023e3bdb23d4c75be2200c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":21,"integrity":"sha512-VfHxneXcTxXP0VHlm1VkB0Soun//QG3Xq5LXvodv2ALuumpHBeNODCtzRvNOLjDlqux2Vfx8cy05mxboKUWXdA==","signatures":[{"sig":"MEUCID1zCNJP/J+oTiH0UiLxOFLt+cIHyqa57HeOO5mhmWUtAiEA7Ar3iFnDInt4TvQBn630o5gUnVvJUQ3q8RkxHAgMyrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.aa5ac7fe5.0_1684776280572_0.40307659980946875","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/typography","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75009a06b90ca8c15ade21b8f4dfcbcd27c1cc31","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.90291f2e2.0.tgz","fileCount":21,"integrity":"sha512-tv1HWkJYi5T0470k8vbBb+nefdPgsaIO04ocWMf7luvmfE+MZIaR13RxdupLJ4k5otrdydL3/wEaCNhQ+Ipnvw==","signatures":[{"sig":"MEUCIQCc+kB95+ek6+MHzWB/y1sGMWI1OO5FdxCTY2bzeQxa8QIgbxmJj8x5bFuOPkLH6l/Nw0gyQrFaROdPjO1G0BTbwa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.90291f2e2.0_1684863714283_0.155543183078799","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/typography","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.446734f27.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72e2e53becc640d186f546c7b26ff26d8eb8bf99","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.446734f27.0.tgz","fileCount":21,"integrity":"sha512-uNm9mfdpm79nNlOLHkXBXtbjF9sNOv2SUZMRN/vIJbTZ3J1IwEvodEuP2s5cxZstAz5XMzMaqXudgpE34risvg==","signatures":[{"sig":"MEUCIQDt2O2a/Hq2j0BPggR9D6T09UI9AtHHg1bhlXH1/o3wvAIgGMEhq3ElzE02q3GtWcbSWZALncef2iZFmeUE3cgDY/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.446734f27.0_1685483247484_0.17441463847508043","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/typography","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.19de312d8.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3e80feb9632e541dce7d1cfe17a162c753574aa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.19de312d8.0.tgz","fileCount":21,"integrity":"sha512-fz1nz8n1z9+HYK7XEw0GSXD37FBzIEle2e6jmHuZwh5HtbXQsVhzHH0fqPKTbQNnCd/WqP5vqCsV23UhhhIwlA==","signatures":[{"sig":"MEQCIAsish6x0btB0COyDWdDQWmm+VBGxDlf8L8qMzjoqCy0AiAhooFkvlMb8tZvUX8U0xn3/tdFztkTAF4rMTDbt5z94Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.19de312d8.0_1686071838726_0.7399846908007528","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/typography","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6081d829b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc40d4b3341dc1698b03766c6896abf36fea78e6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6081d829b.0.tgz","fileCount":21,"integrity":"sha512-KJNXkerRDorgdLNoyy4/ENQWiKMitvObqTgxlrk0LjdTDHXK3fSC60S9yOEqaA+XDvXeJvuNDMX5H0sZQJv9tg==","signatures":[{"sig":"MEYCIQDev2gCl46ennKcCaKAqCvq9b3DOHC4jGwvxNlUypdX0QIhAOjAdbaB3CBdWztbdkyisy/FpgLj4pbPttvuVRS+7NWi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6081d829b.0_1686100396831_0.1098350155739114","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/typography","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4d79cd722e021e65b2d6c25d02f7ee16dc65e47","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b26c34a68.0.tgz","fileCount":21,"integrity":"sha512-GkRUHySiKV5YeOLCSTnTJHySCeXVxcG9ho3apQNhX8tZvwcxItI4ivCWMppAsOZ5juUMNuTPoGl5cu9NshsZjA==","signatures":[{"sig":"MEQCIF6CRNIoIMFYYP4pkQJO+2f1DsrPDl2Z2nN5VXbhVZ0hAiAQ9zY61/00EQRAgLG8Zgp1C5EtVLcbIBmY9Q2WQZLRCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b26c34a68.0_1686168986312_0.43755329221938233","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/typography","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4fe911371.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfbf2968a62309c86f5e06212eeff119e98dcee3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4fe911371.0.tgz","fileCount":21,"integrity":"sha512-ndJ3m2z93VxiD3S2ZxAIIQkt+pMiLIVhA7SNiVUzTHZATGoKyvJadpsJuErdpPG7N5Y1SKampSLUrk+qWfY9RQ==","signatures":[{"sig":"MEYCIQCjeMGUQEhemeDFS61hfJFHvaCldXg8ql8tQxP3+TJf1AIhAO9TDaDz8c3ijPKvmMQt5NQL7adOsHBj2QWaGRXtcY87","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4fe911371.0_1686179108383_0.7321658039267827","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/typography","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c2b1deef6a1f5de728f7b03e9d75b482ad0765","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a9ff9866f.0.tgz","fileCount":21,"integrity":"sha512-ToqLpyntYtuV5XF9I+Hr3NcjItJZ7l5nZxQI820NHPpHdwA/cCnPmRovawlW0k/gE6w+GHr+pXdLQ0TB6//Nyg==","signatures":[{"sig":"MEUCIQC3f9aybuxezF0ZlyvgHIur8eGF5J2uQ5uet36RB3GfPgIgKFG0+ebXIsYgY7BaWlEMO6FuEuTDf/O376+EBkYQjdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a9ff9866f.0_1686656249584_0.4444017210212039","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/typography","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b994146f6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3c4cfb6c9249af34ce8e334f2824ded156accc9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b994146f6.0.tgz","fileCount":21,"integrity":"sha512-sWU5W30WWqdw5P6bsRx9AbvMNcz/QvQg56Syr06V6nfgSztpeuo7TfPk2J+N0ArRALo1mUrkAPk66iWYQ2p/QA==","signatures":[{"sig":"MEUCID+L8ys014MItE/+tMXcjAY8Fs3i6qqq905RF4nzT4p1AiEAnlQ6qD6dFusI+L1zzX649lPPGYHJXNgQMDwSVGrgCbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b994146f6.0_1686776567048_0.004440145342974322","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/typography","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f005fce94246f63e033300d5b58245420e7d8e8d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":21,"integrity":"sha512-VCL9QqinRYcmmUOgcm48+HwhR6tvK7Yssjm7B87QDE1kWpI7/iqIFV4UTfZ5QhpcECJ+v+MK6u/UkRaASgWWJA==","signatures":[{"sig":"MEUCIQCQLRdafxSQMKmjWjk4qkIMsj4OI8RRXV8vPPvVkV8M6wIgH3Y8jw0eqp2BYgw/PU6TVFd/KCEew8AW0+QbzZoOM0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1fb4b1a06.0_1687892178893_0.2320431027376879","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/typography","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"830cb62937978cbd960a42799fae49bcdc563dcd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c64a2776e.0.tgz","fileCount":21,"integrity":"sha512-y9AgCiaGTpu4CN6yftOflTmfLELtXVY39EZ+eo8KgdJpWD/v6BqY4O7p3CqdpHRRm5CdYZJg/ZlJsMFOvkwyzQ==","signatures":[{"sig":"MEQCIFdfJxZFkMRMdbbkDuF4Arxyeybzg6MfGopn1KTKK6OeAiBXsOuNBEif2qbSuEDHlPcQGqPCcaarbfPILl/xpZ5JHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c64a2776e.0_1687896939666_0.22783802120471308","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/typography","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f88ff84fc41351f8fbe54f0ac37f49ba4e46e9fc","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":21,"integrity":"sha512-6eMS2D3xcDvE9/nPaScVHvPBEzeMqxatskWIcbfKm+ttKGPLJjLA88S0gK2Rv5HDRcWZg/iKLEfkfWZjVOpGbQ==","signatures":[{"sig":"MEUCIBAZ62Dbn0GOe3GzmVzBvpjfI3jsrEwRsDSXizu/qB4fAiEAu7CTDDL/Y1k9lekaLs0MmmjTQ2Mtloe52q2sBQN8hJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.b05d9eb7c.0_1688055776094_0.0805653005536835","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/typography","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cf9e1791f264ec8f8922e2e01b3ff1bca7844ec","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2a9697dc5.0.tgz","fileCount":21,"integrity":"sha512-ffb0sVp6iY32PTK3Dna5pT6oqmfTCh9tfF2hVZKIp2bMouGDXQRIl41RAIiakysPT819etoeTZQAC8Cm11nCjg==","signatures":[{"sig":"MEYCIQCETdo9O5GVYmgZSC47zhZ+04Gt6R/m5iuebelxovU7QwIhALViEqxmabZY+Aq25u1RLe40MjSH0lkj8uhDP9+y1glT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2a9697dc5.0_1688163190447_0.4829011932466194","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/typography","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10ac3772a3b051d6382fcc56d8c425292d40a48d","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0c52adeab.0.tgz","fileCount":21,"integrity":"sha512-JFdL/yiLmbjKoYYxSAMfsaFg5dMLAYbTqexoxsf2xDi1XQ+0C2uHytOr8Fgf+phf6C7Lg4wkGeoGv45hCK8vsg==","signatures":[{"sig":"MEYCIQCSO8NhQw8eh9f26eaVzGXsjZfYlsOPkUtIgQKExIWGygIhAI0imovHUihNDkmGZKftZfBsAo/kEDVaBw0KmLfnKDcx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0c52adeab.0_1688574300253_0.0537647579241991","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/typography","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.83355c322.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1621064f307e084915629aa43856947a6ccce880","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.83355c322.0.tgz","fileCount":21,"integrity":"sha512-Ba5zcZeJ3qgj4ngSdKROWXhxPsMEmqKiMsnhz4b8dGBJjyro2bBTiW1KTNw0SaTDd2Ma1L0FEVxygJ/rggmuHQ==","signatures":[{"sig":"MEQCIGlMfEHfjlZI5RNVBnoG+GWeb2hBKk4Wg+mNOcgqNm6sAiB074kbuIy4RNtS+o16n2TCl1Bl5Q5RMgyHmzKZCwFvIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.83355c322.0_1689001464026_0.09961249194323818","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/typography","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ca0641ef8a91945ca01a1aa6651db434741b37b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":21,"integrity":"sha512-CKsG1zyv34AKPNyZC8olER2OdPII64iR2SzQjpqh1UUvmIFiMPk23LvQ1OnC5aCB14pOXzmVgvJt31r9eNdZ6Q==","signatures":[{"sig":"MEYCIQDgznThMW2AzMJUPfLFV+vVEXc291Msky8HOySsy3o6vgIhAJyyjpbY49w74sUuTE0uH4R1QlWM3pbzG0r0DYb8ltY9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.bc9ae6c9c.0_1691097581892_0.9817637080840891","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/typography","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0758225c470d95c5b444fb8f27defbfdd7a0bcdf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.3c44cd956.0.tgz","fileCount":21,"integrity":"sha512-9v6y7v3PumAv6Pqe+Jt/sdOzSPYMC6ZUHAwzpt/LRFmge1ef4B47EyTi2QMkMI/ZV+4VTHQcCjMeGcQxcjyJ8A==","signatures":[{"sig":"MEQCICM7m7phRG/gGVNMVq6XQZIJOgBe+RVOOjatd1n8Vb1WAiBdS/6uRitbLPfJRxrKw9D+d7el8bi7QpcYKlz3BWg53g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.3c44cd956.0_1691430380045_0.021168728535244652","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/typography","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.02702296e.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7f9c82fed1a13dd613cc82b228251a40fbb06d7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.02702296e.0.tgz","fileCount":21,"integrity":"sha512-KEgYr9IkB/JH0iZVS7hGQkyCLhT1FtIu9NtmOrNCghyAzEkT24rk++yhYrfa/fbgf7nrU+nVuHLqcOoaGcsgwA==","signatures":[{"sig":"MEQCIHbT8PXnLOdyCHczXVVHt6yZNoAoLHqvxkD6AeiXAXG3AiA0qRwcn07JGwKnmtIUklnjwd5CNkdvO86kNtcjtc0HiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.02702296e.0_1692965047313_0.881726962786451","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/typography","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.872b65832.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87dcc990c733e64c357e708d14f21ca120f02631","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.872b65832.0.tgz","fileCount":21,"integrity":"sha512-Jhm4ChJ48QOg3xJfafmq3vKgIIcsXuyplKUGBeDtoEEon3qMeZp51oTHk+1ecBemLquOlOH3xnsnk67iCd0wQw==","signatures":[{"sig":"MEYCIQDJv8tcJGkx0u67edM08jYXvA4RkaMKxBCfUOpwCfRc6QIhAObZvDB64GIY3UoIyrN/c6PmY1HVt7anKt+E3NQBn4ZF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.872b65832.0_1693397532033_0.5614235402241461","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/typography","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e77008f6cc0bfd4948c6c72ad73289510b4a3113","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.89b2e4122.0.tgz","fileCount":21,"integrity":"sha512-LKG6OyoTgOKrCdlB1EjpwlgwrMLH39LAd53YqNQ9G1xM09PoH+/D4+kvGnHSiCdequQ80ycc0ZBaFsZUm8GI0Q==","signatures":[{"sig":"MEUCIQDO0uLmBave+SxTeDrtufguZNj9DSgL3h7iZ20/3gdAUgIgHwXwqCfnJ6uBltA2DRJm02d94lCOYFYOZrF5fbUsOx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.89b2e4122.0_1693497953760_0.7577031798269211","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/typography","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40aa64e268941331d1fa452893e305d85b5269af","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7a3942e7a.0.tgz","fileCount":21,"integrity":"sha512-lk5RkU69nHBHdnJ1LqltPk799oljC8m57PEmKuCACtzLkY5I2OKMrVUC5g6OueZqDhKwyHcb/ODRUs9L3cLBaQ==","signatures":[{"sig":"MEUCICf5jXpAISTUMc7l7G1tVgjJYBOFspexkC7kmtcnrLjaAiEAopSMe1L0HDvWIb2+fIhc1b3nd+qqwaREzyZ4EToOV2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7a3942e7a.0_1693507110622_0.884835032827032","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/typography","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.54feb3020.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"338c60476ffb8bb9a3e8961057488d3610f4d267","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.54feb3020.0.tgz","fileCount":21,"integrity":"sha512-TZv68fjQUlpWZE9Z4M1GLm9Aj76IBcAElhh+UkMUjiC0hdFMvUqoKa4kc+bZxQ+i/VOHLAPb9C7yBYs0dgoauw==","signatures":[{"sig":"MEQCIEFS9wctYj90yrZ7jbaVCKXz9GHx2OW2DI5TznQ4qx83AiBv2gJraRQmRTpIuRsdJc6ZCiCs04avRsso9UBMQo6/Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.54feb3020.0_1694466248512_0.18536848061936584","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/typography","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7a5d939c36fdee197038146d15abe80dca4a7e4","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":21,"integrity":"sha512-WaeoGWrsFLgj1ccSqTSTVbFlbq/zXGQSxO2Wrw7OSsBnamI1ITXEwmemK5aZcexIfuVbLHoWJlS/8H0jHvReog==","signatures":[{"sig":"MEQCIB5pXxbpKtG6F70KNOqGA+yRfDT5WD3q60CdTgXmJnKeAiByEjmq7bnR5ygWXLNd8FGeb0M3L4O7wUTer78UDLYEuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.6cda3ce8d.0_1694483049904_0.9787625076206132","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/typography","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.205b20b36.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9faabeca7a116a4f442f42ec2c80f65184299110","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.205b20b36.0.tgz","fileCount":21,"integrity":"sha512-1kJIVubhB8KJxRDFvUrZrSMHRRc33bdVxMXkTGXpLnVsEylYBpz76ZWVy33l5pkzpap5AwMbkResRlItFffc4A==","signatures":[{"sig":"MEUCIQCFL4M+AScsiHV60vfCXxCl94LRVzITc/6BlRcm3zpt9QIgSInESvgtNlQcUci667b0/fM7uGNAzviscw8fEMMb5WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.205b20b36.0_1694625339797_0.770061322979402","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/typography","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.22bf82024.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a03e3031a8734618aca52368f2d264552cd3c6e7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.22bf82024.0.tgz","fileCount":21,"integrity":"sha512-aF9MVMB2NQohPYgO050XYfH2+fNc8Xz/CvQS0dt/qhsC1sLMMgnu+4r0sPMuXxwtFYwW9L37t475aWTtgc+YzA==","signatures":[{"sig":"MEUCIFqgeNlNB8/Apaq1yc0PNxkKofKPXwS0iZrPUn/ccmTDAiEA87nHM++2hh4v8iSEN9ragjQGTTosbG6MunQfWCJ7TpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.22bf82024.0_1695028265582_0.8485048956067607","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/typography","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a246a4439.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d1387bc273511534d37cc6784b4ae1c4f70aeaf","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a246a4439.0.tgz","fileCount":21,"integrity":"sha512-eXzBl9ROzWZ+41nan5pCrn1C/Zq3o/VsrLFaGv8fdRmhRR6/wHMeuvCCwGf5VtEmWdAE9FpJzRU/4ZPiJCJUyg==","signatures":[{"sig":"MEYCIQDHLv0fRuyIRAq7Al1yRUzi4gGcra8SMZc4TGmH/HDXgQIhANYJlpag9hZe2UUgyghIKkOflibYpm6XRUIhKaBJr11J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a246a4439.0_1695059091128_0.2033522766067002","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/typography","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d153db62b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a7a92a05fcc4ac9318d1afff71a28681318753f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d153db62b.0.tgz","fileCount":21,"integrity":"sha512-5fDFdGyn/rpv7BXTVDoShWfx82BM46u3ay/ODaSKNhM1a3R44y5f5I5YqUroqf2RYu7jZtBGnHwkKsyI2u9X5A==","signatures":[{"sig":"MEUCIHECgjo4BXDUunMI8R5FuZzhBwiXEnJ+lAhtVGGAstuqAiEArz3I8G1tktMAzoq/UJQ9QVGECNaXnpUobXywg1Z2DEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d153db62b.0_1695150847407_0.3717403168584681","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/typography","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8165287b888e1a699bffd35ffd012649ae0d0cdd","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2528c1c3b.0.tgz","fileCount":21,"integrity":"sha512-6L/glGvE56BPpBD5AyzbgB4HswNLWMxooRUxjahAzD41Q42t5doIat0YT8oaQt6FeTCbhf5/8HLVnkX+A7IGEQ==","signatures":[{"sig":"MEUCICbzJzJqImcC+IF9qN2qLEPlvQ7vleQdB/2Y04nalgsEAiEAnyROWGQHDM0oCKZHMilq8noycAcuf5+AwJpxBo2YXqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2528c1c3b.0_1695233125570_0.4883694979219999","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/typography","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1c296ae7e94beefd96eb7a7057c76af09533907","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.1728a6dcf.0.tgz","fileCount":21,"integrity":"sha512-5bYyt+HJU2JoohrY0/8PrEFA9bMI4u1Umlh7zq+L7NWRk4fCMc9NaieKvOptugdhI5CikQ+df+hauJ27+ciF0A==","signatures":[{"sig":"MEQCIEExVDBeRKbZFoEQ7q9T0b0fzU8dFUc8MqxHt9PgEf1fAiBwrD/iGeLMAbpQKvU3JyKUXkM53PRQ/k9VCEhRb0BkdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.1728a6dcf.0_1695691328240_0.1185685424911338","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/typography","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a2ad172e5a193e50d305989ed81a34dbfa8f812","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.ebb636f3d.0.tgz","fileCount":21,"integrity":"sha512-BoDRoxvC+CAAf2gBMtHt+TwSiOqrjv18e26w13+QDbJYcF2xtb+OyeQllyZ+djE6DOJHDQ/7xCDh5KKZWF7+Jg==","signatures":[{"sig":"MEUCIQCrz3bR/qvR1RIfrIzpJIOnXawcYBRo87Tvadl8AbyCFgIgJIix/BoWwlhSX3tUEhC5p3gvpboC367yxk31h+mf8Ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.ebb636f3d.0_1696016617791_0.1329261574990075","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/typography","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ca2f08a6a6f1aba21ff1fbc78d6a117a2ff6f6","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":21,"integrity":"sha512-lAevHwJcnlN20lu6PsactHbeqRPBh63cYKiUgQIz/1TnWF0ikyyww8RZ9i5SvgDtYFb6e+XM+IstH+G7k018RQ==","signatures":[{"sig":"MEUCIQDK3w0QC7GkrDOJGTrFEKN+4vu6/YrtmKi9X3wxI2kwvAIgN3MBU9ix9kfmtia17gVCIabq1BBk6sxZYrLhCnu3OcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c0d21ecc9.0_1696880157378_0.707237003674577","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/typography","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.127a44b28.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"209eedd1ce23fe520eadfbb8f8d0d583d2b473d3","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.127a44b28.0.tgz","fileCount":21,"integrity":"sha512-awfTFvqCUHdY3734KjdGhCgvicRQzS6u7MaahoMchFTAm53ggT8oBRg3zE/zrqaX4DkdfU0MqQ/GmflkZ93t6A==","signatures":[{"sig":"MEUCIQD45KloiIG2pPwmzfCayHcabE+AXgU58vxxgY6DjvHfdAIgO0K2Vt5R21cqbt6znr8QXgyUalSyxKqLin+kCpwe0oY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.127a44b28.0_1697140745898_0.5284630171243576","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/typography","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.0ad128337.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5585b00a49e15db16fd328149a56fdc5a4cbad8c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.0ad128337.0.tgz","fileCount":21,"integrity":"sha512-LX3i4O13iiP3gMJxo1SaVI87wMhB75UWaOCd52dltJrSC29Uy1R7U5y6mev2WmUclReiUotiKzLhM/kfkS0p2Q==","signatures":[{"sig":"MEYCIQD5q49SVxZHxpPTQi05V3swIN+JwiHA9VLoZbs2H0cc9wIhAJrGuRK8A0wJrFHy9D7C2s4hAJYq/kfKNGK4DbLpmKMR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.0ad128337.0_1697741452577_0.9606441024945149","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/typography","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.9cec94097.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c709dbfd4ced03f5bb76ac457c4dbd5a2c18feb0","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.9cec94097.0.tgz","fileCount":21,"integrity":"sha512-WZNWy6tlaVyY64C08deddhx4la4jUEAc8YEqeGNDypypOEfCo29QApfYHGIZ9F4FM4VoOHA6W6vCUG2aGCOHnA==","signatures":[{"sig":"MEYCIQD7LC536a6/k/8t+moVACALyM5yaFoYaJ2j/lvHFJ7r1AIhAJuQjuamWRmYP0aqJvArzi970g5T/oKHqHAizf0VRUwY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.9cec94097.0_1697756911756_0.0999785890773448","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/typography","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01891bbf8ef58377da619b921edf4b1cee58df14","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":21,"integrity":"sha512-q9ab4DYbKoRblEsbczc41JbZkVNVtomFjtiMsC/mTovwIMtiabLRMHS7Uum/hVxQe3oohmW4l3MY308PfS5NgQ==","signatures":[{"sig":"MEYCIQDnsJha5khJkgsgNAT6gtJsNhXsELAa9twCjMLLLTU+owIhAOQHd4aZ3EXlEK7Jl4sGd5FSXz1kC67Aj/Dx6qss86qQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c51a0bbcc.0_1700081890853_0.022567751974884587","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/typography","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37a30247e4e2bc01ac8bbc266391e0dce3304ab5","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.d76666ad4.0.tgz","fileCount":21,"integrity":"sha512-CJsjiaKqZkZuPjrBIxjvfkfONCmbVAKOsi57rkLK6PnnK4LojwaAv7wR8w27KkxQXPqMc5a74AeUsPbWXYEHng==","signatures":[{"sig":"MEYCIQDiu+IZte7dqqcRFYGgcgn/GNqbSt+TycM3bAQG+HwkZAIhAIIntFCjeyWsALyA+H8vIuCU7tU6hn5FDAr4M1RtEm7U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.d76666ad4.0_1701123153779_0.44132609222997843","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/typography","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83ebfaa069b3f6c6ed91e5e56b8a3cd9b1855d9b","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.8656bf0e0.0.tgz","fileCount":21,"integrity":"sha512-sbzIvDRbom7NFUidqNkwNf22fqIadQ7KDQgMSmwyZEineNCXC/HfmFpXew24AUKkBegY61BwcbNvGBGp/K6pFg==","signatures":[{"sig":"MEUCIQDZ/MXrY0Jtul/vJsD1d2ereUND+n1ChLihO3EMX1oajQIgF3genrvf9qU8MaqItEan4F8Wk4fdq3cQa/OoKQsNsbY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.8656bf0e0.0_1702415883824_0.7892089544316088","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/typography","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1191633c70ad0ee0e162feacb5e6efaf42a52cef","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.7f224ddd4.0.tgz","fileCount":21,"integrity":"sha512-kBaZeCGD50iq1DeRRH5OM5Jl7Gdk+/NOfKArkY4ksBZvJiStJ7ACAhpvb8MEGm4s3jvDInQFLsDq3hL+SA79sQ==","signatures":[{"sig":"MEYCIQCPIRNw4OWC/Oodi+qI8loK89091N1EQPcPQFWEgu0YfgIhANOYpcidqM1WW6R25HkCv5b6AfBX6vrE/uOL5Lvo5k2k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.7f224ddd4.0_1703743712863_0.6130802761067831","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/typography","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db7837aef58ba216f29ac6b560158fc2e9dcb29a","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":21,"integrity":"sha512-tVjHmUXqpdjCaEK2Mw/hpyu8x9i97o23PB0dJv6LtSzjWJ7enUKZ6LJcJVs3WRRgyHigC556H/HNED0uOAOonA==","signatures":[{"sig":"MEQCIECEhYITWm3HYC4oycirr+SxSCSg8YyZmk1GoKm/lMtQAiBVddmURbZZNF9z8wmOOt663z72b/XhasnOLfCS+qa/wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.a0b8a90c0.0_1707333534367_0.8049778095298474","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/typography","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a641763a4c9ab6587e4f11fa10ad01da0b29afa9","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.e50b478eb.0.tgz","fileCount":21,"integrity":"sha512-ZETSo5k7HsoPBuA+d2wQ6qtEJWsYQzDgDpfWrfnHDF+kARS9azEc/fIUpt1RXmiGgMhRmEXOOLEzWuE3iOcOTA==","signatures":[{"sig":"MEUCIQD3WfcFYhBPsQD5gCA6Mplu6eO2NJ30J7bq3wGFpoklXwIgcv7LsCf3Nb1lJLB8w0FK2JOCdkppZyUT46Me2vSTHjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.e50b478eb.0_1707415643779_0.6582295116446653","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/typography","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48b227e699d813224507d0f6ea775877d6fa0357","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.c43b3438b.0.tgz","fileCount":21,"integrity":"sha512-9/ZjnCnwSThQEU8gy9xSWEvX8j0DbDVCNFldR0E/4Yrlp2h6Y6HEp4Egt1a0eLcwEP9JB1NpjUQRhWPf6bUZxw==","signatures":[{"sig":"MEYCIQC8+F8/HiBiWG3mWjh+aa4jpdRlM3xn5DyiV7/XVTcmTgIhAKH5k7fmPqN+/DJNnTlvGRZcILk8rpf1BOyTVsowgE5t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.c43b3438b.0_1708719415631_0.9853862509673474","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/typography","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.819498d8c.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4481a98b78799d13d64a497b56d1334d0175e44c","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.819498d8c.0.tgz","fileCount":21,"integrity":"sha512-LyBEJQMCoScNF/YW0yx3rf3Sctd/ABN5QHb+XxLvU/CpbGUwKkt9S/RNXQTlt6g9GJZGr1fsezqJRw6PJPPTQw==","signatures":[{"sig":"MEYCIQDTa9bOJcVrO6VazlqI05yF6OM18rrdQl1VxKIdDrBjtAIhAMSqyYBA3xa5/0qQO7SJtlL4kOe4b3DQQVcoq7Dt8v/S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.819498d8c.0_1710515643295_0.5746324426515708","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/typography","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.453a6248a.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd94a6d8ce418754d77f622085eb6a95e8416988","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.453a6248a.0.tgz","fileCount":21,"integrity":"sha512-tcgHBaFKFK4NHZHuc6cqJL09aDxnlsIVm3Lcy4ye4OqA7ki9lYB60rqlwCSDbu8GWkab2somhmHHCy2Uw9h7Ow==","signatures":[{"sig":"MEQCICA/wItWrBZj+o4XmxDpWQePeiOE2osrjwJoqjLkfT/YAiAkfQVxlxbCvLOJHXuWL1diKwzrIKGXX7pZq4kH4qplMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.453a6248a.0_1711386776447_0.9760261879521708","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/typography","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21946b17bad5eed471a7f772cdeef179d6d9855f","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.68edc03c6.0.tgz","fileCount":21,"integrity":"sha512-9Vjq6f7ZbN+8h44DAhMnPsawJmK3PAvgECG/9Yi34/1jk7v6q7ilg24Mf1/6llyqXN+/a6cF8hPFPd81dIP3Hw==","signatures":[{"sig":"MEUCIGr4Oj8bZf2DleqmaHqOcXkYIpNDSb8LaJwIXkSYgC7fAiEAj28Pu6hA/4ma74PnudU29T+kFoLxFGar/hNYqUZHgA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.68edc03c6.0_1712603104997_0.9531581069525101","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/typography","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb8b136b3eaa075338f74b3e258dab75cfce2fce","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.5bebc0064.0.tgz","fileCount":21,"integrity":"sha512-seibx0dc/cORANMCAi23dAUG0ax73IsOWkzqdtazTTTNEr5Ul0tqWzp2kqK+hM4PAAE8YFuXCkGlHwXAs+7N8A==","signatures":[{"sig":"MEYCIQD+PuZNipUjs+RLySCaFt/wpXgnZU7+6yBebbNjvENSrAIhAPuw/gyk71OoL3aiouLrcUJC+pAuHaQqh7fAnJzHdMaN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.5bebc0064.0_1712871568975_0.19144409107406246","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/typography","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.311f29a60.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"249219c836ac6ea497757b2cba3158073f2741fa","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.311f29a60.0.tgz","fileCount":21,"integrity":"sha512-sRZniR/1iklgBM4AXGab1ErGj8JnnCIU3P2gm3LNCk25of1xbFkZ39zg+dFGMnnKbr/MOxK3iYy+jaShD4EHwQ==","signatures":[{"sig":"MEYCIQDY/QMIviF4l6oEWspp3mVXmbi2tpZY6ldQH1B3TmnJ2wIhAKWNSYNAzVM1TkEturTkg6WU7CxLa1SfmAAz0ZpajDi8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.311f29a60.0_1713895135626_0.13202393724671757","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/typography","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.65c10a622.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58dd37a52e076810a24238021943f62d98f14eb7","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.65c10a622.0.tgz","fileCount":21,"integrity":"sha512-TmFenBp1Du8hgRFHjpamIG8uhWIw954cZ5psR40ehHJfZqTx7FGeHzcp2NIu+Zm6BB1pXqu59IePGtAeDSy7Iw==","signatures":[{"sig":"MEQCIBf5yyxVOGDcLpAsmyT8iedt+AnmTDI3QHaajCZgWBiiAiAKaRLmeQbd0h6FOPFmtpZE9ypZV0JV5roazt6oCVcMPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.65c10a622.0_1714070880156_0.885948426176016","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/typography","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1be7c9eb2992f7f4356255966ee5c7e890ae9f45","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":21,"integrity":"sha512-VgvBZfw6Q7mGuthuJBMKgJ/Y51B9Zq2FWv31V7TCmZdwsooxeB733DrIjFpXubJq3WUfnKTwTgWt76NnX7SEUg==","signatures":[{"sig":"MEQCIBijltKa4j4596pixpuNyZ4Z243/2QOfPBizzh4eOf9kAiBLuySLjGxVI0bEa3YpYzQO2NzkCZAee/5OmzWuBP5uEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.4b35cb7d0.0_1714651333459_0.9885449738474195","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/typography","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c621a52f00f9211a2bf703d0e3318c2df2fd0365","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.f80ac92b0.0.tgz","fileCount":21,"integrity":"sha512-dlIEoI1rbHbMTjlC6/s7dXvZ7oCa0c1BTqHnRp8ktgi3K8VAZcRyfH25lRw1EkKkBytlu5UhJPJ22Tf6PAqxjQ==","signatures":[{"sig":"MEYCIQDJ8FvYtj+9dIUQqbyF2YkK77LmTTD29KVUNVpLjXDB9wIhAJKWuZiybkH7i3fjdqWobfgF0OMv2aA91cfGM4KFFY37","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.f80ac92b0.0_1714651951256_0.21826011751831098","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/typography","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb7960259ff6b9bd4b5198b5d133a9688bfb6f61","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.2f5b899bc.0.tgz","fileCount":21,"integrity":"sha512-NXLeUf+zN3CF7dzBjxNLwi2VdDqIj3zoUNfufpwQ1pABom1hUnXI8WOYC+BkL3TcPH2qqnAamVW6f+b9UiIp/w==","signatures":[{"sig":"MEUCIQD6nZl4Z8a74NphuSw5JkxHhIkRYZOs4Y13OJs4xSpEbwIgGeA3ibrh+bCbrMfz45oV++hqzfO5nsIU7Vy5qIGXZSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.2f5b899bc.0_1716213244810_0.4953766913269029","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/typography","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","typography","font"],"license":"MIT","_id":"@material/typography@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"anonymous","email":"aprigogin+npm@google.com"},{"name":"anonymous","email":"hi@yef.im"},{"name":"anonymous","email":"abhiomkar@gmail.com"},{"name":"anonymous","email":"dfreedm2@gmail.com"},{"name":"anonymous","email":"bicknellr@gmail.com"},{"name":"anonymous","email":"andrey.prigogin@gmail.com"},{"name":"anonymous","email":"prodee@google.com"},{"name":"anonymous","email":"aomarks@gmail.com"},{"name":"anonymous","email":"emarquez@google.com"},{"name":"anonymous","email":"esgonzalez@google.com"},{"name":"anonymous","email":"asyncliz@gmail.com"},{"name":"anonymous","email":"wangchan518@gmail.com"},{"name":"anonymous","email":"sayrisuarez@google.com"},{"name":"anonymous","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a94ff58a3fb580d09c6a7493e51a8d80a00dc90","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.cfec83c74.0.tgz","fileCount":21,"integrity":"sha512-gnEVvOqGfbvIjyuZAUDqOxIB5yYN3oZj35rMEakHiBoh2bsv0gjaQcd2woBNjjSJbJC0jnsJlgODDs2joZmLjA==","signatures":[{"sig":"MEQCIFhsd7JwmSPFXz3Ta8zf161HqPe8mf/+jfEVv6/IhgKUAiAFGCk9ZAYScbB8JOQwJhouGTVNSoWJfe1/Ag4T+jqYiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130345},"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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-typography"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Typography classes, mixins, and variables for Material Components for the web","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/typography_15.0.0-canary.cfec83c74.0_1716231368416_0.2663532535521669","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/typography","description":"Typography classes, mixins, and variables for Material Components for the web","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","typography","font"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-typography"},"sideEffects":false,"dependencies":{"@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","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@use \"@material/typography/mdc-typography\";\n```\n\n## Style Customization\n\n### Typography styles\n\nThe typography styles (referred to as `<STYLE>` below) used in the type system:\n\nScale | Description\n--- | ---\n`headline1` | The largest text on the screen, reserved for short, important text or numerals\n`headline2` | Headline variant 2\n`headline3` | Headline variant 3\n`headline4` | Headline variant 4\n`headline5` | Headline variant 5\n`headline6` | Headline variant 6\n`subtitle1` | Smaller than headline, reserved for medium-emphasis text that is shorter in length\n`subtitle2` | Subtitle variant 2\n`body1` | Used for long-form writing\n`body2` | Body variant 2\n`caption` | Used sparingly to annotate imagery\n`button` | A call to action used by different types of buttons\n`overline` | Used sparingly to introduce a headline\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--<STYLE>` | Sets font properties as STYLE. Please see [Typography styles section](#typography-styles)\n\nFor example, the `headline1` style as a CSS class would be `mdc-typography--headline1`.\n\n### CSS Custom Properties\n\nCSS Custom property | Description\n--- | ---\n`--mdc-typography-font-family` | The base font-family\n`--mdc-typography-<STYLE>-font-family` | The font-family for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-size` | The font-size for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-line-height` | The line-height for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-font-weight` | The font-weight for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-letter-spacing` | The letter-spacing for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-decoration` | The text-decoration for STYLE. Please see [Typography styles section](#typography-styles)\n`--mdc-typography-<STYLE>-text-transform` | The text-transform for STYLE. Please see [Typography styles section](#typography-styles)\n\n### Sass Variables and Mixins\n\nMixin | Description\n--- | ---\n`base` | Sets the font to Roboto\n`typography($style)` | Applies one of the typography styles, including setting the font to Roboto\n`smooth-font` | Adds antialiasing for typography\n`overflow-ellipsis` | Truncates overflow text to one line with an ellipsis\n`baseline($top, $bottom, $display)`| Sets a container's baseline that text content will align to.\n`zero-width-prefix` | Adds an invisible, zero-width prefix to a container's text. This ensures that the baseline is always where the text would be, instead of defaulting to the container bottom when text is empty. Do not use this mixin if the `baseline` mixin is already applied.\n`text-baseline($top, $bottom, $display)`| Sets the baseline of flow text content.\n\n> **A note about `overflow-ellipsis`**, `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 CSS custom properties or Sass module/global variables.\n\nWhen using Sass **module** variables, the module must be configured _before_ any other `@use` \nstatements with a variable named `$styles-{style}`. The variable should be assigned to a map \nthat contains all the properties you want to override for a particular style.\n\nWhen using Sass **global** variables, they must be defined _before_ the component is imported by setting a global \nvariable named `$mdc-typography-styles-{style}`.\n\n**Example:** Overriding the button `font-size` and `text-transform` properties.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-button-font-size: 16px;\n  --mdc-typography-button-text-transform: none;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-button: (\n    font-size: 16px,\n    text-transform: none,\n  )\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\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\n**Example:** Overriding the global `font-family` property.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-font-family: Arial, Helvetica, sans-serif;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $font-family: unquote(\"Arial, Helvetica, sans-serif\")\n);\n\n@use \"@material/button\";\n@include button.core-styles;\n```\n\nSass global variables:\n\n```scss\n$mdc-typography-font-family: unquote(\"Arial, Helvetica, sans-serif\");\n\n@import \"@material/button/mdc-button\";\n```\n\n**Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.\n\nCSS custom properties:\n\n```css\nhtml {\n  --mdc-typography-headline1-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-family: Arial, Helvetica, sans-serif;\n  --mdc-typography-headline2-font-size: 3.25rem;\n}\n```\n\nSass module variables:\n\n```scss\n@use \"@material/typography\" with (\n  $styles-headline1: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\")\n  ),\n  $styles-headline2: (\n    font-family: unquote(\"Arial, Helvetica, sans-serif\"),\n    font-size: 3.25rem\n  )\n);\n\n@use ...\n```\n\nSass global variables:\n\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@import ...\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/typography@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-75RBQ97aGAvcUSdVyDeIdM61UhWohhHN3w6HtGOKsUFzYmwpxQWeHYbOv6WyLO+0fV3mi1PFtOPlRabZENytxw==","shasum":"750e5b0a78e34b1a0290ed43a9a1817fefe81a70","tarball":"http://repository.ncinga.com/nexus/content/repositories/npm-js-registry/@material/typography/-/typography-15.0.0-canary.423edc3dc.0.tgz","fileCount":21,"unpackedSize":130345,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLr9SqnXRObyEazKuvE75KxikdB7dhUor+EiYaKOKlEQIgLWmdrF9sQlTj8EcHcK9Fl111PimUrRtHp6mPXcD8xiQ="}]},"_npmUser":{"name":"anonymous","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typography_15.0.0-canary.423edc3dc.0_1719425499509_0.8807593904787812"},"_hasShrinkwrap":false}},"name":"@material/typography","time":{"created":"2016-12-15T17:54:01.641Z","modified":"2024-06-26T18:11:40.101Z","0.1.0":"2016-12-15T17:54:01.641Z","0.1.1":"2017-01-23T16:49:47.333Z","0.2.0":"2017-02-21T17:27:46.572Z","0.2.1":"2017-04-18T14:51:34.066Z","0.2.2":"2017-05-15T16:26:17.410Z","0.2.3":"2017-07-24T15:49:34.101Z","0.3.0":"2017-08-07T20:48:36.665Z","0.28.0":"2018-01-08T18:55:20.077Z","0.34.0":"2018-04-02T21:52:10.559Z","0.35.0":"2018-04-23T22:41:00.872Z","0.37.1":"2018-07-16T21:18:58.888Z","0.38.0":"2018-07-30T17:06:05.285Z","0.39.0-0":"2018-08-16T15:15:52.206Z","0.39.0":"2018-08-27T17:40:05.451Z","0.40.1":"2018-10-08T20:53:57.692Z","0.41.0":"2018-10-29T20:21:38.016Z","0.42.0":"2018-12-04T22:54:36.748Z","0.43.0":"2019-01-07T19:48:46.510Z","0.44.0":"2019-02-04T18:23:24.786Z","0.44.1":"2019-02-19T23:02:41.378Z","1.0.0-0":"2019-02-27T23:59:10.218Z","1.0.0-1":"2019-03-04T23:33:04.199Z","1.0.0":"2019-03-06T21:07:46.402Z","2.3.0":"2019-05-28T21:23:42.052Z","3.0.0-alpha.0":"2019-06-12T04:06:36.805Z","3.0.0-alpha.1":"2019-06-12T19:02:01.061Z","3.0.0":"2019-06-25T22:27:47.850Z","3.1.0":"2019-07-22T22:02:25.178Z","4.0.0-alpha.0":"2019-08-07T21:09:09.073Z","4.0.0-canary.0":"2019-09-05T04:37:42.464Z","4.0.0-canary.1":"2019-09-09T20:20:33.300Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:24.269Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:08.198Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:00.490Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:37.478Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:06.187Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:22.665Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:25.056Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:16.955Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:24.801Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:04.414Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:30.713Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:34:57.452Z","4.0.0-canary.01628efa.0":"2019-10-29T00:02:48.678Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:32.024Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:40.272Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:20.732Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:28:59.666Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:01.057Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:35.005Z","4.0.0":"2019-11-02T18:11:35.184Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:29.844Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:32.328Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:31.282Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:01.743Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:03.050Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:13.959Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:32.470Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:18.991Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:38.603Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:44.387Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:37.978Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:19.943Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:09.823Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:34.191Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:22.108Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:35.638Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:39.513Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:35.258Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:10.709Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:17:50.179Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:19:00.932Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:19:59.434Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:54:48.718Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:31.953Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:58:57.076Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:43.841Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:24.719Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:08.850Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:05.907Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:05.224Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:31.651Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:33.487Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:32.307Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:07.659Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:24.006Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:31.698Z","5.0.0-canary.391674a26.0":"2019-12-18T19:16:45.890Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:34:41.327Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:19:56.011Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:23:47.353Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:35.089Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:34.047Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:04.778Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:26:56.611Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:23:59.093Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:27.836Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:33.469Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:23.803Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:49:45.996Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:27.977Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:21.546Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:02:51.179Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:53:51.088Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:09.341Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:11.345Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:11.129Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:36:47.997Z","5.0.0-canary.7be9e4a04.0":"2020-01-06T17:04:11.881Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:02.865Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:15.358Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:18.323Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:15:28.029Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:09:47.524Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:17.904Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:00.300Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:43.790Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:26.293Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:16:39.565Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:03.929Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:40.084Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:21:58.321Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:30.155Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:28.010Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:17.919Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:01.856Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:28.444Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:21:43.805Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:23.524Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:57:43.765Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:15:58.202Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:22:58.104Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:39:43.427Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:43.651Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:34.521Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:09:52.463Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:02.242Z","5.0.0-canary.426913342.0":"2020-01-10T01:43:55.879Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:01.874Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:29.429Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:22.395Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:31.105Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:31:20.396Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:10.593Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:07.071Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:24.006Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:40.889Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:15.861Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:42:47.387Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:09:59.133Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:47:09.935Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:47:27.682Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:03.962Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:34.433Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:43.693Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:37.446Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:24.995Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T00:59:57.059Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:16:58.537Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:28.644Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:40.331Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:28.422Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:27.016Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:10.248Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:20.459Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:03.474Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:45:29.890Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:44:32.826Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:21:57.765Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:01.168Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:19.370Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:16:34.829Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:09.914Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:07.575Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:54:57.463Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:54:57.681Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:16.072Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:27.796Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:28.869Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:31:44.676Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:55:22.177Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:23:42.630Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:04.907Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:42:59.972Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:48:31.835Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:11.180Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:15.390Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:25.777Z","5.0.0-canary.45985457b.0":"2020-01-29T23:32:27.923Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:36:48.743Z","5.0.0-canary.181486643.0":"2020-01-30T20:55:47.387Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:22:49.391Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:02:40.779Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:09:39.535Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:23.121Z","5.0.0-canary.535398572.0":"2020-02-03T18:10:56.753Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:27.935Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:02.556Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:02:20.584Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:32:45.247Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:28.706Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:20:54.966Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:03.211Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:58:52.385Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:12.582Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:24:19.062Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:02.001Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:03.604Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:42:48.636Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:26.768Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:02.712Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:15.280Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:05:49.156Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:06.600Z","5.0.0":"2020-02-14T00:08:29.480Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:47:40.206Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:28.789Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:25.072Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:15:57.254Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:49.805Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:33.542Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:57:54.588Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:34.891Z","5.1.0":"2020-02-25T21:37:50.387Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:32.527Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:48.708Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:21.107Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:57.043Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:39.151Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:35.313Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:00.719Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:54.360Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:08.896Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:25.421Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:48.895Z","6.0.0-canary.9ebee4ceb.0":"2020-03-09T21:13:26.812Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:13.662Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:34.339Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:12.743Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:18.589Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:06.195Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:21.603Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:54.280Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:04.904Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:36.381Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:06.156Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:48.199Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:34.874Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:46.861Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:20.241Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:58:57.112Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:02.750Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:17.929Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:56.845Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:14.861Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:49.609Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:20.993Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:25.520Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:09.837Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:50.420Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:20.896Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:40.256Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:47.097Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:33.781Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:00.651Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:37.374Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:22.666Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:48.592Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:11.754Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:34.708Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:22.000Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:53.533Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:37.601Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:50.901Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:54.923Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:19.084Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:18.972Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:16.148Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:43.244Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:36.277Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:04.967Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:21.147Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:56.336Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:52.105Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:02.692Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:53.116Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:27.599Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:55.715Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:17.822Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:50.217Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:10.165Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:46.981Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:24.143Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:53.619Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:10.499Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:58.205Z","6.0.0":"2020-04-23T17:26:26.830Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:38.413Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:05.666Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:01.605Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:48.075Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:53.494Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:09.405Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:48.848Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:26.657Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:43:54.305Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:32.697Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:48.165Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:37.609Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:14.374Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:42.377Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:29.310Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:47.117Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:31.955Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:18:59.058Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:00.848Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:50.555Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:58:59.413Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:19.837Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:24.051Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:47.929Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:03.736Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:38.446Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:23.452Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:18.163Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:21.800Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:14.425Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:30.173Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:02.751Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:52.163Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:24.145Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:08.168Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:00.255Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:01.042Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:09.158Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:40.612Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:23.462Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:32.468Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:43:58.031Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:56.502Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:41.359Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:11.592Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:02.088Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:26.200Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:27.466Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:42.497Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:36.623Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:06.421Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:58.553Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:27.027Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:05.487Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:53.296Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:37.267Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:37.999Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:28:57.662Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:37.161Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:00.589Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:56.634Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:56.633Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:44.306Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:49.145Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:31.670Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:52.039Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:49.795Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:17.179Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:11.381Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:24.389Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:31.351Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:34:52.451Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:36.842Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:49.834Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:13.553Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:14.543Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:45.409Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:52.142Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:07.700Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:44.035Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:12.626Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:12.023Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:13.691Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:14:59.656Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:04:55.129Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:34.616Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:26.090Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:08.706Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:56.398Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:43.873Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:25:56.079Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:36.717Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:28.193Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:09.248Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:30.737Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:02.357Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:30.766Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:08:57.967Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:15.909Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:13:56.566Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:20.616Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:27.882Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:12.231Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:48.591Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:49.705Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:52.223Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:10.275Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:20.714Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:31.001Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:00.664Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:13.008Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:37.138Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:16.230Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:20:59.808Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:36.671Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:08.466Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:10.863Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:12.072Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:36.658Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:04.307Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:26.284Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:48.112Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:16.541Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:28.202Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:43.870Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:38.778Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:20.740Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:39.968Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:47.195Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:48.483Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:12.859Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:11.158Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:33:57.078Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:33.425Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:15.937Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:34.763Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:06.630Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:13.559Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:18.251Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:12.350Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:27:54.979Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:19.764Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:47.987Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:01.626Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:30.301Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:50.527Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:24:49.276Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:45.799Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:15.514Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:51.240Z","7.0.0":"2020-06-23T19:10:32.376Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:25.045Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:40:57.477Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:47.121Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:29.937Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:20.168Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:05.911Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:31.826Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:37.214Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:22.683Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:35.537Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:34.965Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:06.430Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:26.928Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:08.924Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:23.746Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:31.738Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:19.925Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:12.739Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:48.075Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:55:56.186Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:00.108Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:46.168Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:05.029Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:50.998Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:36.267Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:53.490Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:18.646Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:06.689Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:02.448Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:39.190Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:30.319Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:12.957Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:32.444Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:04.729Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:09.995Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:57.082Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:21.775Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:56.035Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:55.860Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:08.412Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:11.939Z","8.0.0-canary.01db89053.0":"2020-07-16T16:38:59.661Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:51.295Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:29.398Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:00.524Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:00.296Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:03.621Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:37.257Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:21.110Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:47.596Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:28.308Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:44.290Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:13.318Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:33.701Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:23.256Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:31.605Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:52.305Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:29.033Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:39.982Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:43.782Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:02.555Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:17.975Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:16.444Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:50.660Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:46:56.339Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:03.588Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:14.994Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:24.246Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:50:39.733Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:57:54.240Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:08.022Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:53:58.030Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:09.136Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:06.856Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:06.567Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:46.744Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:15.239Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:05.880Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:33.228Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:50.472Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:35.655Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:40.361Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:15.305Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:12.170Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:10.410Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:09.397Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:29.184Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:05.198Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:20.484Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:45:59.351Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:43.689Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:39.495Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:15.422Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:10.077Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:22.370Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:17.536Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:53.090Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:42.702Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:28.265Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:53:45.048Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:09.527Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:09.399Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:02.009Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:02.756Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:40.510Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:42.347Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:33.292Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:18.601Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:30.500Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:46.996Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:33.807Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:18.610Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:12.386Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:14.424Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:27.699Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:24.201Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:36.171Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:37.874Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:00.376Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:03:58.234Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:05.463Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:00.278Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:32.282Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:30.359Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:13.653Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:47.566Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:31.013Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:09.081Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:47.085Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:02.673Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:24.973Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:19.553Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:15.476Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:05.605Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:39.800Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:36.950Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:49.237Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:42.358Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:46.005Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:45.646Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:25.201Z","8.0.0-canary.546277d32.0":"2020-08-20T16:42:54.389Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:41.469Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:12.636Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:14:58.830Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:35.998Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:12.678Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:26.606Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:38.424Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:34.918Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:10.223Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:38.513Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:41.156Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:12.185Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:08.270Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:49.230Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:54:51.700Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:55:12.916Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:05.911Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:36.178Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:51.807Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:17.404Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:35.719Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:18.111Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:00.314Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:04.053Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:28.307Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:29:43.585Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:36.702Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:10.054Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:39.557Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:29.900Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:28.959Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:42:47.645Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:23.881Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:46.402Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:02.449Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:13:58.602Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:02.766Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:06.855Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:19.950Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:07.490Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:20.794Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:53:58.501Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:09:57.268Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:32.399Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:53:49.462Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:13.375Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:40.434Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:38.674Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:26.125Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:09.169Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:07:56.404Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:28.900Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:05.815Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:26.004Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:11:56.993Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:44:51.073Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:35.855Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:08.409Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:32.035Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:23.097Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:10.197Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:45.681Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:58:51.784Z","8.0.0":"2020-11-02T22:59:17.260Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:22.409Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:27:43.356Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:36:58.981Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:08:47.769Z","9.0.0-canary.419e03572.0":"2020-11-04T01:32:55.045Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:48.442Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:10.729Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:21.839Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:15:52.198Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:33.515Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:33.403Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:49:48.376Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:34.761Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:06.863Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:24:57.812Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:27:20.458Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:57:53.836Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:33.631Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:43.687Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:53.209Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:11.881Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:09.578Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:11.126Z","9.0.0-canary.a41527604.0":"2020-11-19T19:59:57.095Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:27.761Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:16.725Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:37.468Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:30.638Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:30:50.730Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:35.643Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:14.931Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:14.855Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:20.280Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:24.616Z","9.0.0-canary.977585650.0":"2020-12-02T14:41:47.014Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:30.078Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:25.621Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:18.125Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:13.148Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:29.378Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:21.100Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:57:59.334Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:01:14.457Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:33.536Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:45.893Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:28:51.616Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:42.746Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:18.863Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:18.166Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:05.953Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:06.445Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:01.583Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:26.549Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:08.332Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:10:46.925Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:34.182Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:07:38.185Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:44:14.037Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:27:56.431Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:12.149Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:03.820Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:38.541Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:23.487Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:18.087Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:47.816Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:04:49.655Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:28.747Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:16.864Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:47:48.489Z","9.0.0":"2020-12-29T19:45:50.502Z","10.0.0-canary.776c18681.0":"2020-12-30T00:39:57.531Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:37.830Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:15.339Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:06.210Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:31.606Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:02.233Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:18.054Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:01.713Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:48.936Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:27.330Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:43:58.105Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:04.178Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:00.633Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:36.781Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:16.179Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:28.554Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:05.570Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:03.220Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:03.319Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:54:53.240Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:44.682Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:09.132Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:33:46.827Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:18.794Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:35.642Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:18:50.304Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:46.050Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:36.413Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:20.278Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:27.646Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:03.243Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:51:57.025Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:12.316Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:35:13.279Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:28.509Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:09:41.985Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:42.165Z","10.0.0-canary.623af861e.0":"2021-01-26T03:44:57.496Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:32:23.023Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:35.758Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:43.136Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:26:53.791Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:44.073Z","10.0.0-canary.994873795.0":"2021-01-27T14:50:40.673Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:01:54.569Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:31:59.385Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:13.226Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:10.049Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:19.471Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:07.714Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:48:54.914Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:42:33.825Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:15.356Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:40.010Z","10.0.0-canary.05f249666.0":"2021-02-04T17:49:51.078Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:42:46.365Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:26.952Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:22.511Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:29.134Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:16:59.733Z","10.0.0":"2021-02-05T16:18:25.411Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:41.601Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:20.599Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:33.588Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:03.605Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:33:49.434Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:16:56.361Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T17:59:59.177Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:01.679Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:17.932Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:35.009Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:26.234Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:36.499Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:33.434Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:02.859Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:28.779Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:22.778Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:15:49.038Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:32.664Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:24:45.414Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:57:48.872Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:21.891Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:34:42.802Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:04:52.612Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:17.349Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:22:52.061Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:09.919Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:14.907Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:33.371Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:12:52.037Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:12.146Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:19.980Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:19.633Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:00.141Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:35.298Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:17.557Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:24.573Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:26.508Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:33:48.241Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:23.822Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:13.347Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:08.400Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:27.959Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:21:59.884Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:48.443Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:06:56.536Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:25.904Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:52:48.234Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:31.395Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:24.361Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:23:48.661Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:41:53.815Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:22.842Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:36.715Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:48:58.736Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:44:57.143Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:26.643Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:45.367Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:10.470Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:51:55.176Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:56:52.082Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:33.359Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:28.966Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:15.594Z","11.0.0-canary.81911b707.0":"2021-03-11T18:22:51.962Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:22.168Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:00:58.934Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:16.313Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:39.136Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:39:59.604Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:43:47.212Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:28.705Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:25.520Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:22.882Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:34.926Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:15.508Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:11:48.142Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:38:59.774Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:40:54.487Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:14.007Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:58:58.302Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:25.339Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:38.899Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:36.413Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:16.943Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:19.916Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:50:37.457Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:14.186Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:11:35.702Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:18.034Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:30.935Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:31.563Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:10.379Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:05.181Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:21.007Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:23.409Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:05.640Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:00.509Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:15:42.963Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:00.508Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:55:26.118Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:56:52.761Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:06.485Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:21.278Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:14.165Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:13.277Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:38.486Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:32.372Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:19.758Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:46:52.873Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:28.682Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:37.425Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:06.261Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:41:51.690Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:09.459Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:27.230Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:23.245Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:15.853Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:10.633Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:34:58.262Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:36.702Z","11.0.0-canary.24255c408.0":"2021-04-09T20:11:54.280Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:10.694Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:11.112Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:03.386Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:40.719Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:44.980Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:30:56.848Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:45.598Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:53:53.525Z","11.0.0":"2021-04-15T22:57:55.457Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:33.230Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:27.735Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:40:57.043Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:29.861Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:08.556Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:56:50.902Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:27.928Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:06.164Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:07.581Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:02.802Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:12:48.153Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:46.291Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:04.502Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:19.538Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:28.825Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:14.037Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:35:55.646Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:22.111Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:43.804Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:12.936Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:29.244Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:32.798Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:12.093Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:23.644Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:48:56.837Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:43.492Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:32.363Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:14.348Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:33.616Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:25.087Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:21:58.230Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:10.176Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:12.736Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:28.649Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:35.783Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:21.609Z","12.0.0-canary.de997644b.0":"2021-05-04T17:27:54.116Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:41.884Z","12.0.0-canary.be999eb08.0":"2021-05-04T17:59:51.888Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:09:58.363Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:26.118Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:06.442Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:29.611Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:15.478Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:45.829Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:02:49.835Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:12.114Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:18.827Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:15:58.131Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:26:52.438Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:41.829Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:35.588Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:02.500Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:43.652Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:02.087Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:03.127Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:05.469Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:42.873Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:28.720Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:14.453Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:44:54.960Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:27.046Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:36.327Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:23.322Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:18.165Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:08.003Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:01.744Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:18.764Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:31.976Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:22:52.546Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:22.200Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:39.898Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:43.487Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:25.407Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:21.803Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:34.278Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:51.730Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:00.611Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:32.673Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:43.579Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:17.508Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:26.933Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:07.873Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:07.800Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:34.520Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:18.703Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:08.248Z","12.0.0-canary.464a00286.0":"2021-06-03T14:45:41.114Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:01.181Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:05.382Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:52.347Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:24.906Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:01.983Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:21:54.651Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:31.740Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:40.742Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:06:45.541Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:32.975Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:32.711Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:30.614Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:08.384Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:38:53.234Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:47.768Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:41.570Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:29:50.417Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:20.389Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:47.216Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:52:15.318Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:05:53.099Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:06.152Z","12.0.0-canary.940550232.0":"2021-06-17T19:39:54.498Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:08.838Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:22.726Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:07.143Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:36:36.520Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:11:45.064Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:16.144Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:06.874Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:34.338Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:10.937Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:33.290Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:03.803Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:13.430Z","12.0.0-canary.435866d32.0":"2021-07-02T18:20:56.487Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:42.686Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:08:55.355Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:17.880Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:03:55.029Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:09.417Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:50:57.071Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:48:59.427Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:08:59.966Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:43:55.572Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:39.832Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:09.984Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:02.735Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:47:46.478Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:07:51.241Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:38.066Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:02.126Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:06:52.700Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:37.798Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:49.059Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:44.903Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:42:51.092Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:46.709Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:29.932Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:35.095Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:12.087Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:14.678Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:41.085Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:32.843Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:08.768Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:03.725Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:11:59.318Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:31:57.353Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:30.755Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:38.028Z","12.0.0":"2021-07-27T19:49:35.563Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:08.494Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:17:53.333Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:31.597Z","13.0.0-canary.28656298a.0":"2021-07-29T18:12:49.743Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:03.970Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:40.166Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:08.833Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:07.129Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:36.849Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:31.745Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:04.772Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:01.659Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:17:52.022Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:40.120Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:37.476Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:07.251Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:03.255Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:10.992Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:17.093Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:33.753Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:18.621Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:33.292Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:03.271Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:02.164Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:15.635Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:07:52.542Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:34.025Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:53:58.063Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:13:54.039Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:20.989Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:01:59.298Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:23.292Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:23.574Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:04.631Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:25.650Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:10.450Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:01.763Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:28.010Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:21.458Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:16:54.672Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:41.153Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:17.100Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:17:58.062Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:01.160Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:36.583Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:12.969Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:49.917Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:34.793Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:08:46.472Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:08.127Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:10.657Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:03.340Z","13.0.0-canary.611db508e.0":"2021-09-02T03:14:47.140Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:30.933Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:33.012Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:45:59.997Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:29:29.641Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:30:59.150Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:31:27.813Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:42:26.575Z","13.0.0-canary.72464476c.0":"2021-09-07T15:33:44.304Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:32:58.560Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:42:44.848Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:35:04.816Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:00:34.658Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:09:54.457Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:24:52.793Z","13.0.0-canary.864798678.0":"2021-09-09T18:36:18.157Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:21:03.705Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:03:11.183Z","13.0.0-canary.08398f880.0":"2021-09-13T23:33:53.237Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:49:48.501Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:11:48.736Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:58:34.014Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:16:52.231Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:17.053Z","13.0.0-canary.83900936a.0":"2021-09-17T23:23:50.778Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:30.457Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:04.001Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:14.488Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:23.861Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:24.332Z","13.0.0-canary.65084baff.0":"2021-09-23T21:24:55.882Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:20.024Z","13.0.0":"2021-09-24T19:45:20.942Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:06.450Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:32.936Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:28:46.086Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:29.801Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:24.150Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:30:46.254Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:03.232Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:26.293Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:33.936Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:08.781Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:22.570Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:08.576Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:11:41.766Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:18.313Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:04.751Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:33.883Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:25.323Z","14.0.0-canary.468392606.0":"2021-11-11T19:39:38.594Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:21.959Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:18.488Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:57:58.269Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:23:52.349Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:35:57.215Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:19.632Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:20.462Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:39:47.359Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:49:25.056Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:15:47.313Z","14.0.0-canary.554c71829.0":"2021-11-16T16:18:39.996Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:23:30.807Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:58:40.429Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:24:23.809Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:38:36.387Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:34:33.775Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:03:52.967Z","14.0.0-canary.93134d453.0":"2021-11-23T15:38:21.412Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:31:38.392Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:36:49.020Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:50:03.973Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:55:28.356Z","14.0.0-canary.17a072535.0":"2021-12-02T18:04:40.187Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:43:42.270Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:05:49.225Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:24:43.032Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:28:39.232Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:54:23.641Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:39:15.297Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:12:20.893Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:09:07.414Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:31:50.771Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:45:09.325Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:13:34.453Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:00:21.625Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:53:33.960Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:32:21.535Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:48:58.314Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:41:44.604Z","14.0.0-canary.390220e42.0":"2022-01-17T16:45:27.483Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:52:10.366Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:16:49.392Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:53:46.770Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:02:45.465Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:31:04.951Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:12:33.429Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:36:29.961Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:40:50.255Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:49:17.424Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:22:05.752Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:56:34.036Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:45:59.372Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:53:01.075Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:58:38.393Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:05:57.988Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:28:49.960Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:48:23.641Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:15:50.319Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:03:36.311Z","14.0.0-canary.868793776.0":"2022-02-22T19:34:46.517Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:45:41.728Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:32:41.244Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:00.151Z","14.0.0-canary.6505e61c5.0":"2022-03-03T19:59:53.123Z","14.0.0-canary.16c166154.0":"2022-03-08T23:21:52.668Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:27:56.016Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:08.291Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:49:37.303Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:08.572Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:17:24.859Z","14.0.0-canary.32b391398.0":"2022-03-17T17:58:42.375Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:38:46.275Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:32.002Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:43:36.050Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:14.708Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:06.247Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:29.216Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:07.710Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:27.901Z","14.0.0-canary.344d52823.0":"2022-03-29T18:42:47.306Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:32:26.091Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:13:43.245Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:23:42.398Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:22:55.481Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:08.129Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:11.144Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:10:43.756Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:01:22.167Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:44:47.209Z","14.0.0":"2022-04-28T16:55:20.585Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:56:27.882Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:09.717Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:31:01.465Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:55:33.618Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:57:52.515Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:24:03.114Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:39:50.719Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:17:58.403Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:43:42.412Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:26:21.372Z","15.0.0-canary.05930a453.0":"2022-05-13T18:46:58.982Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:00:33.893Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:10.014Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:17.143Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:21:15.512Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:57:05.924Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:39:09.682Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:20:24.390Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:05.921Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:29:22.646Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:01.734Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:06.192Z","15.0.0-canary.764de225d.0":"2022-06-29T16:26:40.868Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:01.862Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:54:37.379Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:01.633Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:50:42.223Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:30:40.604Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:15.562Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:02.928Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:17.425Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:38:49.846Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:36:39.785Z","15.0.0-canary.88db01990.0":"2022-07-12T11:39:39.823Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:28:31.037Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:34:35.774Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:04:52.760Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:07:48.685Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:00.465Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:42:49.435Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:00:37.332Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:04:39.037Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:23:45.917Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:46:20.064Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:19:26.580Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:28:58.490Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:30.910Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:39:40.179Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:56:48.793Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:08:47.186Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:14.258Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:45:12.451Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:13:08.361Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:40:18.585Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:20:18.566Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:24.049Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:42:30.458Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:20:00.648Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:45:33.617Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:00:55.561Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:14.631Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:44:02.937Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:20:36.165Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:17:54.843Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:19:26.054Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:18.274Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:18:23.559Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:03:35.478Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:02:31.808Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:38:48.760Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:29.451Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:17:19.023Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:19:41.496Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:35:29.651Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:07:52.069Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:00.522Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:47:23.253Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:07:43.305Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:01.338Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:15.911Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:44:28.786Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:30:49.662Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:56:54.424Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:55:40.512Z","15.0.0-canary.db414b864.0":"2022-09-28T14:52:09.211Z","15.0.0-canary.c0462d134.0":"2022-09-28T17:51:39.762Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:06:23.324Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:18.847Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:30:44.219Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:13:25.062Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:20:40.637Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:17:44.309Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:18:47.829Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:17.931Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:14:24.332Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:50:30.346Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:37:05.427Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:54:36.105Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:20.931Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:21.970Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:37:31.994Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:48:28.539Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:01:49.772Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:57:55.598Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:20:22.789Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:40:56.133Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:50:44.215Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:23.185Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:02.194Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:17:20.416Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:55:45.834Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:21:52.150Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:56:33.920Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:39:54.137Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:41:45.547Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:22:51.217Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:08.139Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:12:51.221Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:16:38.870Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:36:27.669Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:12.754Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:10.768Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:14.884Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:18:38.716Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:58:36.912Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:44:29.040Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:29:45.428Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:14:34.865Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:31:50.000Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:48:41.081Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:55:48.435Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:18.861Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:08.740Z","15.0.0-canary.909b48215.0":"2022-11-03T04:07:12.951Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:18:28.310Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:58:28.005Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:56:27.317Z","15.0.0-canary.215506426.0":"2022-11-05T01:05:24.493Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:03:31.232Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:24:02.134Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:12:52.825Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:27:03.697Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:02.363Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:17:03.439Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:00.560Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:52:39.258Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:16.687Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:05:25.518Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:11.644Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:35:54.607Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:14.756Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:44:42.937Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:57:55.572Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:26:29.024Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:27:41.644Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:01:22.527Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:29:20.562Z","15.0.0-canary.b01136063.0":"2022-11-16T00:15:08.400Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:12:32.726Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:14:34.839Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:16:54.509Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:40:42.030Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:55:22.618Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:02.660Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:04:31.973Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:10.267Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:08:21.433Z","15.0.0-canary.bb7751002.0":"2022-11-16T23:59:31.102Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:00:38.357Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:54:38.304Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:06.528Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:20:30.263Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:15:35.647Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:00:01.604Z","15.0.0-canary.d58410453.0":"2022-11-18T19:24:25.410Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:44:40.011Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:09.160Z","15.0.0-canary.96f472604.0":"2022-11-21T12:52:05.153Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:01:47.201Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:53:23.029Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T18:59:56.338Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:30:21.876Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:15:51.440Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:38:47.177Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:08.902Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:14:48.060Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:12.229Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:46:45.586Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:11:01.580Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:33:23.295Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:48:10.952Z","15.0.0-canary.65c411674.0":"2022-11-29T17:37:37.606Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:13:34.986Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:06:24.151Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:28:28.520Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:53:55.286Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:23:26.900Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:01:12.497Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:00:24.508Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:06:16.693Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:25:54.870Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:42:02.444Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:09.860Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:51:24.078Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:02:17.257Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:40:47.834Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:43:36.848Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:14.576Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:45:48.441Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:01:34.708Z","15.0.0-canary.817002c29.0":"2022-12-13T21:53:25.200Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:28:13.851Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:18:19.781Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:44:17.700Z","15.0.0-canary.34767110.0":"2022-12-14T17:23:10.315Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:24:58.909Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:08:01.233Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:26:34.055Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:17.821Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:24:36.444Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:11:40.872Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:04:26.212Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:03:14.815Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:51:02.118Z","15.0.0-canary.16abb41ed.0":"2022-12-28T19:37:53.599Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:01:37.054Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:40:26.827Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:05:18.815Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:11.678Z","15.0.0-canary.af490a848.0":"2023-01-03T15:56:25.861Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:38:11.905Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:12:40.293Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:01.346Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:17:08.355Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:36:37.849Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:10.246Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:02:19.011Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:08:51.400Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:21:01.967Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:15:41.249Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:42:32.606Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:23:26.103Z","15.0.0-canary.f476fdece.0":"2023-01-10T16:14:04.973Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:27:28.002Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:11:01.690Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:18:01.737Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:16:52.226Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:11:55.370Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:53:35.382Z","15.0.0-canary.202823f54.0":"2023-01-11T21:35:11.320Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:55:01.230Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:35:41.934Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:23:59.745Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:48:44.560Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:38:39.679Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:29:12.175Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:34:18.639Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:26:17.865Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:43:04.645Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:29:26.332Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:43:33.925Z","15.0.0-canary.15b221540.0":"2023-02-01T17:51:55.018Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:21:38.733Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:57:41.735Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:33:24.866Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:37:03.452Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:08:20.998Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:13:57.887Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:23:28.536Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:08:51.015Z","15.0.0-canary.de38de758.0":"2023-02-09T15:41:40.563Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:02:18.522Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:18.343Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:57:03.336Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:33:17.043Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:18:37.202Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:40:36.858Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:05:27.063Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:34:58.196Z","15.0.0-canary.f32339937.0":"2023-03-06T15:14:54.773Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:26:47.422Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:41:08.125Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:42:14.191Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:25:46.429Z","15.0.0-canary.274610c77.0":"2023-03-09T14:57:55.542Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:51:58.982Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:17:28.178Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:44:20.728Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:46:38.555Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:07.453Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:15.449Z","15.0.0-canary.23073a303.0":"2023-03-10T14:14:07.701Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:46:43.986Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:47:23.571Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:24:17.003Z","15.0.0-canary.82554d770.0":"2023-03-11T01:36:38.304Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:37:55.038Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:43:31.254Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:46:49.077Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:01:24.189Z","15.0.0-canary.112715df5.0":"2023-03-13T18:38:29.230Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:30:47.588Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:38:15.700Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:42:42.770Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:51:57.604Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:15:44.322Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:46:42.268Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:16:03.259Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:19:28.570Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:23:16.287Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:25:51.458Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:26:26.794Z","15.0.0-canary.87809c710.0":"2023-03-14T18:42:42.811Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:47:05.381Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:58:02.882Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:12:44.500Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:10:35.347Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:40:10.780Z","15.0.0-canary.39e473690.0":"2023-03-21T17:50:33.101Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:57:33.975Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:49:20.204Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:33:52.558Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:47:20.907Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:40:27.902Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:07:10.440Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:53:05.402Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:54:55.419Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:29:38.931Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:03:30.542Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:41:47.549Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:37:17.166Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:39:19.712Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:00:10.254Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:50:13.778Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:20:25.290Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:20:53.973Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:30:41.482Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:32:43.382Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:10.464Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:08:38.710Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:55:28.187Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:25:34.485Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:38:11.446Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:22:18.629Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:29:38.446Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T17:59:40.390Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:59:16.946Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:53:18.507Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:24:40.756Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:41:54.490Z","15.0.0-canary.446734f27.0":"2023-05-30T21:47:27.649Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:17:18.934Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:13:17.037Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:16:26.487Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:05:08.614Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:37:29.747Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:02:47.268Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:56:19.166Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:15:39.861Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:22:56.275Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:13:10.628Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:25:00.430Z","15.0.0-canary.83355c322.0":"2023-07-10T15:04:24.253Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:19:42.096Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:46:20.344Z","15.0.0-canary.02702296e.0":"2023-08-25T12:04:07.559Z","15.0.0-canary.872b65832.0":"2023-08-30T12:12:12.287Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:05:53.957Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:38:30.817Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:04:08.743Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:44:10.148Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:15:40.106Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:11:05.790Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:44:51.366Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:14:07.686Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:05:25.806Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:22:08.449Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:43:38.011Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:35:57.605Z","15.0.0-canary.127a44b28.0":"2023-10-12T19:59:06.144Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:50:52.747Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:08:32.082Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:11.048Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:33.963Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:03.992Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:33.041Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:18:54.520Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:23.977Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:16:55.828Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:03.452Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:12:56.607Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:05.182Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:39:29.128Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:58:55.784Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:00.330Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:13.789Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:31.426Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:54:04.989Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:08.576Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:39.694Z"},"readmeFilename":"","homepage":"https://github.com/material-components/material-components-web#readme"}